add webserver components, some webserver fices and improvements in templating, add real time history chart

2020-01-07 00:21:27 +01:00
parent ed53611e0f
commit ef7866a29f
50 changed files with 3594 additions and 2 deletions
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Breadflow Web Control</title>
+<style>
+    * {
+        box-sizing: content-box;
+    }
+    h1 { 
+        text-align: center;
+    }
+    #ctab {
+        width: 1400px;
+        margin: 0 auto;
+        border: 1px solid #ccc; 
+        border-collapse: collapse;
+    }
+    #td-side {
+        border-left: 1px solid #ccc;
+        width: 340px;
+        padding: 15px;
+        vertical-align: top;
+        padding-top: 22px;
+    }
+    #td-img {
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+<h1>Breadflow {version}</h1>
+
+<table id="ctab">
+<tr>
+<td id="td-img">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 430">
+    <style>
+    .ticks, .frame {
+        stroke-width: 1px;
+        fill: none;
+        stroke: black;
+    }
+    
+    path.major {
+        stroke-width: 2px;
+    }
+    
+    .ylabels text {
+        font-size: 10px;
+        text-anchor: end;
+        font-family: Droid Sans, sans-serif;
+        vertical-align: middle;
+    }
+    
+    .grid {
+        stroke-dasharray: 2;
+        stroke: #dbdbdb;
+    }
+    
+    .series {
+        stroke-width: 2px;
+        fill: none;
+    }
+    </style>
+    <g transform="translate(50,15)">
+        <path d="M100,0 v400m100,-400 v400m100,-400 v400m100,-400 v400m100,-400 v400m100,-400 v400"
+            class="grid" transform="translate(0,0)" id="grid-v" />
+        <path d="M0,100 h600m-600,100 h600m-600,100 h600m-600,100"
+            class="grid" stroke-dashoffset="0" id="grid-h" />
+        <path d="M-10,0 h10m-10,100 h10m-10,100 h10m-10,100 h10m-10,100 h10" class="ticks" />
+        <path d="M-5,10
+                h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,20
+                h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,20
+                h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,20
+                h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5m-5,10h5" class="ticks" />
+        <g class="series">
+            <path d="{ser-set}" stroke="blue" id="ser-set" /><!--M0,400L600,0-->
+            <path d="{ser-act}" stroke="red" id="ser-act" /><!--M0,0L300,100L600,400-->
+        </g>
+        <path d="M0,0h600v400h-600Z" class="frame" />
+        <g class="ylabels" transform="translate(0,3)">
+            <text x="-15" y="0">400 °C</text>
+            <text x="-15" y="100">300 °C</text>
+            <text x="-15" y="200">200 °C</text>
+            <text x="-15" y="300">100 °C</text>
+            <text x="-15" y="400">0 °C</text>
+        </g>
+    </g>
+</svg>
+</td>
+<td id="td-side">
+Sidebar
+</td>
+</tr>
+</table>
+
+<script>
+var Qi = function (x) { return document.getElementById(x) };
+function update(data) {
+	if (data) {
+		let rows = data.split('\x1e');
+		rows.forEach(function (v) {
+			let [k, va] = v.split('\x1f');
+			switch (k) {
+			    case 'ser-set':
+			        Qi('ser-set').setAttribute('d', va);
+			        break;
+                case 'ser-act':
+                    Qi('ser-act').setAttribute('d', va);
+                    break;
+                case 'timeshift':
+                    Qi('grid-v').setAttribute('transform', 'translate(-'+(va*5)+',0)');
+                    Qi('grid-h').setAttribute('stroke-dashoffset', -va * 5);
+                    break;
+            }
+		});
+	} else {
+		var xhr=new XMLHttpRequest();
+		xhr.onreadystatechange = function () {
+			if (xhr.readyState===4){
+				if (xhr.status===200) {
+					update(xhr.responseText);
+				}
+				setTimeout(update, 500);
+			}
+		};
+		xhr.onerror = function () {
+			setTimeout(update, 500);
+		};
+		xhr.open('GET', '/data');
+		xhr.send();
+	}
+}
+
+setTimeout(update, 500);
+</script>