Spaces:
Sleeping
Sleeping
feat: add ALERT diagnostics
Browse files
app/static/gallery/factory-ai-modified.html
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mundorum/oid/oid.min.css">
|
| 5 |
+
<script src="https://cdn.jsdelivr.net/npm/@mundorum/collections/full.min.js"></script>
|
| 6 |
+
</head>
|
| 7 |
+
<body>
|
| 8 |
+
<oid-sphere assets="https://mundorum.github.io/oid/oid/playground/assets/" stydefault="https://cdn.jsdelivr.net/npm/@mundorum/oid/oid.min.css" global></oid-sphere><div style="width: 100%; height: 60%; background-color: lightgrey; text-align: center">
|
| 9 |
+
<div style="font-size:larger;font-weight: bold">Factory</div>
|
| 10 |
+
<span id="engine" style="width: 45%; display: inline-block; vertical-align: middle">
|
| 11 |
+
<image-oid source="assets:images/di-pietro-engine.gif" publish="mouseleave~thermo/low;mouseenter~thermo/medium;click~thermo/high/alert">
|
| 12 |
+
</image-oid>
|
| 13 |
+
</span>
|
| 14 |
+
<span id="cooler" style="width: 45%; display: inline-block; vertical-align: middle">
|
| 15 |
+
<state-pane-oid initial="off" subscribe="predictor/train~last">
|
| 16 |
+
<image-oid id="off" source="assets:images/evaporative-cooling.png" style="display: none;"></image-oid>
|
| 17 |
+
<image-oid id="on" source="assets:images/evaporative-cooling.gif" style=""></image-oid>
|
| 18 |
+
</state-pane-oid>
|
| 19 |
+
</span>
|
| 20 |
+
</div>
|
| 21 |
+
<div style="width: 100%; height: 35%; background-color: grey; text-align: center">
|
| 22 |
+
<div style="font-size: larger; font-weight: bold;">Control Panel</div>
|
| 23 |
+
<span id="alert" style="width: 20%; display: inline-block; vertical-align: middle">
|
| 24 |
+
<state-pane-oid initial="N" subscribe="update/alert~state">
|
| 25 |
+
<image-oid id="N" source="assets:images/light-green.svg" style=""></image-oid>
|
| 26 |
+
<image-oid id="A" source="assets:images/light-yellow.svg" style="display: none;"></image-oid>
|
| 27 |
+
<image-oid id="P" source="assets:images/light-red.svg" style="display: none;"></image-oid>
|
| 28 |
+
</state-pane-oid>
|
| 29 |
+
</span>
|
| 30 |
+
<span id="train" style="width: 20%; display: inline-block; vertical-align: middle">
|
| 31 |
+
<switch-oid publish="on~predictor/train">
|
| 32 |
+
</switch-oid>
|
| 33 |
+
</span>
|
| 34 |
+
<span id="temperature" style="width: 20%; display: inline-block; vertical-align: middle">
|
| 35 |
+
<div style="font-size: larger; font-weight: bold;">Temperature</div>
|
| 36 |
+
<slider-oid min="40" max="120" value="40" index="" publish="change~predictor/temperature">
|
| 37 |
+
</slider-oid>
|
| 38 |
+
</span>
|
| 39 |
+
<span id="pressure" style="width: 20%; display: inline-block; vertical-align: middle">
|
| 40 |
+
<div style="font-size: larger; font-weight: bold;">Pressure</div>
|
| 41 |
+
<slider-oid min="40" max="200" value="40" index="" publish="change~predictor/pressure">
|
| 42 |
+
</slider-oid>
|
| 43 |
+
</span>
|
| 44 |
+
<span id="ml-proxy">
|
| 45 |
+
<rest-oid custom="factory-predictor" subscribe="predictor/train~post/train;predictor/temperature~post/temperature;predictor/pressure~post/pressure" publish="dispatch~update/alert">
|
| 46 |
+
</rest-oid>
|
| 47 |
+
</span>
|
| 48 |
+
</div>
|
| 49 |
+
</body>
|
| 50 |
+
</html>
|