You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.6 KiB
138 lines
3.6 KiB
5 years ago
|
<!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>
|