ESP3D/uitests/test.html
2015-10-16 17:49:04 +08:00

670 lines
28 KiB
HTML

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%; font-size:10px;}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333333;background-color:#ffffff;}
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;}
table{border:0px;border-spacing:0;max-width:100%;}
.table-bordered{ width:100%; border:1px solid #dddddd;margin-bottom:20px;}
td{white-space:nowrap; padding:2mm;}
th{text-align:left;}
.table>thead>tr>th,.table>tbody>tr>th,.table>thead>tr>td,.table>tbody>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #dddddd;}
.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td{border:1px solid #dddddd;}
.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px;}
.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9;}
@media (min-width:768px){.container{width:750px;}}
@media (min-width:992px){.container{width:970px;}}
@media (min-width:1200px){.container{width:1170px;}}
.nav{ width:100%; color:#cccccc;padding-left:10;padding-right:10;list-style:none;background-color:#333333;border-radius:6px ;margin-bottom:20px;}
a{position:relative;display:block;padding:10px 15px;text-decoration:none;color:#cccccc;}
.active{color:#ffffff;background-color:#000000;}
.active a,a:hover,a:focus{color:#FFFFFF;}
.panel{margin-bottom:20px;background-color:#ffffff;border:1px solid #dddddd;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05);}
.panel-body{padding:15px;}
.panel-heading{padding:10px 15px;color:#333333;background-color:#f5f5f5;border-color:#dddddd;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom:1px solid #dddddd;}
label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:bold;}
.text-info{color:#31708f;}
.form-control{display:block;width:auto;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555555;background-color:#ffffff
;background-image:none;border:1px solid #cccccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
* -webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
* transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);
* box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);}
.form-group{margin-bottom:15px;}
.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation; touch-action:manipulation;cursor:pointer;
background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;
* -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.btn-primary{color:#ffffff;background-color:#337ab7;border-color:#2e6da4;}
.btn-primary:focus,.btn-primary:active,.btn-primary:hover,.btn-primary.focus,.btn-primary.active,.btn-primary.hover{color:#ffffff;background-color:#286090;border-color:#122b40;}
caption{padding-top:8px;padding-bottom:8px;color:#777777;text-align:left;}
.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}
.alert-success{background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d;}
.alert-danger{background-color:#f2dede;border-color:#ebccd1;color:#a94442;}
.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);}
.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;}
.has-error .control-label{color:#a94442;}
.has-success .form-control {border-color: #3c763d;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
.has-success .form-control:focus {border-color: #2b542c;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;}
.has-success .control-label{color: #3c763d;}
.btn-danger{color:#ffffff;background-color:#d9534f;border-color:#d43f3a;}
.btn-danger:focus,.btn-danger:active,.btn-danger:hover,.btn-danger.focus,.btn-danger.active,.btn-danger.hover{color: #ffffff;background-color:#c9302c;border-color:#761c19;}
.btnimg {cursor:hand; border-radius:6px ;;border:1px solid #FFFFFF;}
.btnimg:hover{background-color:#F0F0F0;border-color:#00FFFF;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;}
</style>
<title>Printer Interface</title> </head>
<body>
<div class="container"><table class="nav">
<tr width=100%>
<td class="$MENU_HOME$"><a href="http://192.168.0.123">Home</a></td>
<td class="$MENU_SYSTEM$"><a href="http://192.168.0.123/CONFIGSYS">System Configuration</a></td>
<td class="$MENU_AP$"><a href="http://192.168.0.123/CONFIGAP">AP Configuration</a></td>
<td class="$MENU_STA$"><a href="http://192.168.0.123/CONFIGSTA">Station Configuration</a></td>
<td class="active"><a href="http://192.168.0.123/PRINTER">Printer Status</a></td>
<td width=100%>&nbsp;</td>
<td>FW: V0.3</td>
<td><a href="https://github.com/luc-github/ESP8266" >Github</a></td>
</tr>
</table>
<table>
<tr height="auto"><td id='Extruder1'>
<table>
<tr>
<td><label>E1&nbsp;</label></td>
<td id="data_extruder1" name="data_extruder1">
<svg height="30px" width="300px" xmlns="http://wwww.w3.org/2000/svg">
<lineargradient id="gradient">
<stop class="begin" style="stop-color:green;" offset="0%"></stop>
<stop class="middle" style="stop-color:yellow;" offset="100%"></stop>
</lineargradient>
<lineargradient id="gradient2">
<stop class="middle" style="stop-color:yellow;" offset="0%"></stop>
<stop class="end" style="stop-color:red;" offset="100%"></stop>
</lineargradient>
<rect x="10" y="4" width="24" height="21" style="fill:url(#gradient)"></rect>
<rect x="34" y="4" width="280" height="21" style="fill:url(#gradient2)"></rect>
<line x1="10" y1="4" x2="10" y2="25" style="stroke:rgb(255,255,255);stroke-width:1"></line>
<path d="M5 0 L15 0 L10 8 Z" stroke="white" stroke-width="1"></path>
<path d="M5 30 L15 30 L10 22 Z" stroke="white" stroke-width="1"></path>
<text x="10" y="19" fill="black" style="font-family: calibri; font-size:10pt;">
Extruder : 0/off °C</text>
</svg>
</td>
<td>
0<INPUT id="rangeinput1" name="rangeinput1" type="range" min=0 max=270 onchange="Updatenumber1();">270
<INPUT id="numberinput1" name="numberinput1" type="number" min=0 max=270 step=1 value=0 onchange="Updaterange1();">
<INPUT type=submit value=Set onclick="SetTemperature(1);">
</td>
</tr>
</table>
</td>
</tr>
<tr><td id='Extruder2'>
<table>
<tr>
<td><label>E2&nbsp;</label></td>
<td id="data_extruder2" name="data_extruder2">
<svg height="30px" width="300px" xmlns="http://wwww.w3.org/2000/svg">
<lineargradient id="gradient">
<stop class="begin" style="stop-color:green;" offset="0%"></stop>
<stop class="middle" style="stop-color:yellow;" offset="100%"></stop>
</lineargradient>
<lineargradient id="gradient2">
<stop class="middle" style="stop-color:yellow;" offset="0%"></stop>
<stop class="end" style="stop-color:red;" offset="100%"></stop>
</lineargradient>
<rect x="10" y="4" width="24" height="21" style="fill:url(#gradient)"></rect>
<rect x="34" y="4" width="280" height="21" style="fill:url(#gradient2)"></rect>
<line x1="10" y1="4" x2="10" y2="25" style="stroke:rgb(255,255,255);stroke-width:1"></line>
<path d="M5 0 L15 0 L10 8 Z" stroke="white" stroke-width="1"></path>
<path d="M5 30 L15 30 L10 22 Z" stroke="white" stroke-width="1"></path>
<text x="10" y="19" fill="black" style="font-family: calibri; font-size:10pt;">
Extruder : 0/off °C</text>
</svg>
</td>
<td>
0<INPUT id="rangeinput2" name="rangeinput2" type="range" min=0 max=270 onchange="Updatenumber2();">270
<INPUT id="numberinput2" name="numberinput2" type="number" min=0 max=270 step=1 value=0 onchange="Updaterange2();">
<INPUT type=submit value=Set onclick="SetTemperature(2);">
</td>
</tr>
</table>
</td>
</tr>
<tr><td id='Bed'>
<table>
<tr>
<td><label>Bed</label></td>
<td id="data_bed" name="data_bed">
<svg height="30px" width="300px" xmlns="http://wwww.w3.org/2000/svg">
<lineargradient id="gradient">
<stop class="begin" style="stop-color:green;" offset="0%"></stop>
<stop class="middle" style="stop-color:yellow;" offset="100%"></stop>
</lineargradient>
<lineargradient id="gradient2">
<stop class="middle" style="stop-color:yellow;" offset="0%"></stop>
<stop class="end" style="stop-color:red;" offset="100%"></stop>
</lineargradient>
<rect x="10" y="4" width="24" height="21" style="fill:url(#gradient)"></rect>
<rect x="34" y="4" width="280" height="21" style="fill:url(#gradient2)"></rect>
<line x1="10" y1="4" x2="10" y2="25" style="stroke:rgb(255,255,255);stroke-width:1"></line>
<path d="M5 0 L15 0 L10 8 Z" stroke="white" stroke-width="1"></path>
<path d="M5 30 L15 30 L10 22 Z" stroke="white" stroke-width="1"></path>
<text x="10" y="19" fill="black" style="font-family: calibri; font-size:10pt;">
Extruder : 0/off °C</text>
</svg>
</td>
<td>
0<INPUT id="rangeinputbed" name="rangeinputbed" type="range" min=0 max=130 onchange="Updatenumberbed();">130
<INPUT id="numberinputbed" name="numberinputbed" type="number" min=0 max=270 step=1 value=0 onchange="Updaterangebed();">
<INPUT type=submit value=Set onclick="SetTemperature(3);">
</td>
</tr>
</table>
</td>
</tr>
<tr><td id='speed'>
<table>
<tr>
<td><label>Speed</label></td>
<td>
0<INPUT id="rangeinputspeed" name="rangeinputspeed" type="range" min=0 max=300 onchange="Updatenumberspeed();">300
<INPUT id="numberinputspeed" name="numberinputspeed" type="number" size="3" min=0 max=300 step=1 value=0 onchange="Updaterangespeed();">%
<INPUT type=submit value=Set onclick="SetSpeed(1);">
</td>
<td>
&nbsp;
&nbsp;
</td>
<td>
Status:
</td>
<td id="status" name="status">
<svg width="20" height="20">
<circle cx="10" cy="10" r="8" stroke="black" stroke-width="2" fill="red"></circle>
</svg>
</td>
<td>
&nbsp;
&nbsp;
</td>
<td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="18" stroke="black" stroke-width="2" fill="red" />
<circle cx="20" cy="20" r="10" stroke="black" stroke-width="4" fill="red" />
<rect x="15" y="8" width="10" height="10" style="fill:red;stroke-width:1;stroke:red" />
<rect x="18" y="6" rx="1" ry="1" width="4" height="14" style="fill:black;stroke-width:1;stroke:black" />
</svg>
</td>
</tr>
</table>
</td>
</tr>
<tr><td id='flow'>
<table>
<tr>
<td><label>Flow</label></td>
<td>
0<INPUT id="rangeinputspeed" name="rangeinputspeed" type="range" min=0 max=300 onchange="Updatenumberspeed();">300
<INPUT id="numberinputspeed" name="numberinputspeed" size="3" type="number" min=0 max=300 step=1 value=0 onchange="Updaterangespeed();">%
<INPUT type=submit value=Set onclick="SetSpeed(1);">
</td>
<td>
&nbsp;
&nbsp;
</td>
<td name="position" id="position">
<label>X:</label><label class="text-info">0.0</label>&nbsp;&nbsp;<label>Y:</label><label class="text-info">0.0</label>&nbsp;&nbsp;<label>Z:</label><label class="text-info">0.000</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width='100%'>
<tr>
<td width="auto"><label>Command:</label></td>
<td width="100%">
<INPUT id="cmd" name="cmd" type="text" style="width: 100%;">
</td>
<td width="auto">
<INPUT type=submit value="Send" onclick="Sendcommand();">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td><label>Info:</label><div width=100% ID="infomsg" NAME="infomsg" class="text-info"></div></td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td><label>Error:</label><div width=100% ID="errormsg" NAME="errormsg" class="text-info"></div></td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td><label>Status:</label><div width=100% ID="statusmsg" NAME="statusmsg" class="text-info"></div></td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>
<table>
<tr><td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="18" stroke="black" stroke-width="2" fill="white" />
<polygon points="15,10 30,20 15,30" fill:"white" stroke:"white" stroke-width:"1" />
</svg>
</td>
<td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="18" stroke="black" stroke-width="2" fill="white" />
<rect x="10" y="10" width="7" height="20" rx="2" ry="2" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="23" y="10" width="7" height="20" rx="2" ry="2" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
</td>
<td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="18" stroke="black" stroke-width="2" fill="white" />
<rect x="10" y="10" width="20" height="20" rx="2" ry="2" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
</td>
<td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<rect x="5" y="10" width="30" height="20" rx="2" ry="2" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="20" y="5" width="15" height="15" rx="2" ry="2" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
<text x="10" y="25" font-family="Verdana" font-size="14" fill="white">SD</text>
</svg>
</td>
<td>
&nbsp;
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr align="center" valign="middle">
<td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<polygon points="7,40 7,25 4,28 0,24 20,4 26,10 26,6 32,6 32,16 40,24 36,28 33,25 33,40" fill="black" stroke-width:"1" stroke:"black" />
<line x1="25" y1="8" x2="33" y2="16" style="stroke:white;stroke-width:1" />
<polyline points="4,28 20,12 36,28" style="fill:none;stroke:white;stroke-width:1" />
<text x="15" y="35" font-family="Verdana" font-size="14" fill="white">X</text>
</svg>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 0 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:black;stroke-width:7"/>
<text x="15" y="20" font-family="Verdana" font-size="7" fill="black">10</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 2 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:black;stroke-width:5"/>
<text x="17" y="20" font-family="Verdana" font-size="7" fill="black">1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 4 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:black;stroke-width:2"/>
<text x="14" y="20" font-family="Verdana" font-size="7" fill="black">0.1</text>
</svg>
</td>
</tr>
</table>
</td>
<td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<polygon points="7,40 7,25 4,28 0,24 20,4 26,10 26,6 32,6 32,16 40,24 36,28 33,25 33,40" fill="blue" stroke-width:"1" stroke:"black" />
<line x1="25" y1="8" x2="33" y2="16" style="stroke:white;stroke-width:1" />
<polyline points="4,28 20,12 36,28" style="fill:none;stroke:white;stroke-width:1" />
<text x="15" y="35" font-family="Verdana" font-size="14" fill="white">Y</text>
</svg>
</td>
<td>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 0 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:green;stroke-width:7"/>
<text x="14" y="20" font-family="Verdana" font-size="7" fill="black">-10</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 2 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:green;stroke-width:5"/>
<text x="15" y="20" font-family="Verdana" font-size="7" fill="black">-1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 4 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:green;stroke-width:2"/>
<text x="12" y="20" font-family="Verdana" font-size="7" fill="black">-0.1</text>
</svg>
</td>
</tr>
</table>
</td>
<td>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 0 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:orange;stroke-width:7"/>
<text x="14" y="20" font-family="Verdana" font-size="7" fill="black">-10</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 2 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:orange;stroke-width:5"/>
<text x="15" y="20" font-family="Verdana" font-size="7" fill="black">-1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 4 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:orange;stroke-width:2"/>
<text x="12" y="20" font-family="Verdana" font-size="7" fill="black">-0.1</text>
</svg>
</td>
</tr>
</table>
</td>
<td>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 0 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:pink;stroke-width:7"/>
<text x="14" y="20" font-family="Verdana" font-size="7" fill="black">-10</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 2 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:pink;stroke-width:5"/>
<text x="15" y="20" font-family="Verdana" font-size="7" fill="black">-1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 4 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:pink;stroke-width:2"/>
<text x="12" y="20" font-family="Verdana" font-size="7" fill="black">-0.1</text>
</svg>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center" valign="middle">
<td>
<table>
<tr>
<td class="btnimg">
<svg width="20" height="40" viewBox="12 -10 20 40">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:blue;stroke-width:7" transform="rotate(-90 20 10)"/>
<text x="20" y="13" font-family="Verdana" font-size="7" fill="black">-10</text>
</svg>
</td>
<td class="btnimg">
<svg width="20" height="40" viewBox="10 -10 20 40">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:blue;stroke-width:5" transform="rotate(-90 20 10)"/>
<text x="21" y="13" font-family="Verdana" font-size="7" fill="black">-1</text>
</svg>
</td>
<td class="btnimg">
<svg width="20" height="40" viewBox="14 -10 20 40">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:blue;stroke-width:2" transform="rotate(-90 20 10)"/>
<text x="19" y="13" font-family="Verdana" font-size="7" fill="black">-0.1</text>
</svg>
</td>
</tr>
</table>
</td>
<td>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="20" height="40" viewBox="6 -10 20 40">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:blue;stroke-width:3" transform="rotate(90 20 10)"/>
<text x="7" y="13" font-family="Verdana" font-size="7" fill="black">0.1</text>
</svg>
</td>
<td class="btnimg">
<svg width="20" height="40" viewBox="8 -10 20 40">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:blue;stroke-width:5" transform="rotate(90 20 10)"/>
<text x="11" y="13" font-family="Verdana" font-size="7" fill="black">1</text>
</svg>
</td>
<td class="btnimg">
<svg width="20" height="40" viewBox="8 -10 20 40">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:blue;stroke-width:7" transform="rotate(90 20 10)"/>
<text x="7" y="13" font-size="7" fill="black">10</text>
</svg>
</td>
</tr>
</table>
</td>
<td>
</td>
<td >
<svg width="20" height="20" viewBox="0 0 20 20">
<text x="1" y="18" font-family="Verdana" font-size="22" fill="green">Z</text>
</svg>
</td>
<td>
</td>
<td >
<svg width="20" height="20" viewBox="0 0 20 20">
<text x="1" y="18" font-family="Verdana" font-size="22" fill="orange">1</text>
</svg>
</td>
<td>
</td>
<td >
<svg width="20" height="20" viewBox="0 0 20 20">
<text x="1" y="18" font-family="Verdana" font-size="22" fill="pink">2</text>
</svg>
</td>
</tr>
<tr align="center" valign="middle">
<td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<polygon points="7,40 7,25 4,28 0,24 20,4 26,10 26,6 32,6 32,16 40,24 36,28 33,25 33,40" fill="purple" stroke-width:"1" stroke:"black" />
<line x1="25" y1="8" x2="33" y2="16" style="stroke:white;stroke-width:1" />
<polyline points="4,28 20,12 36,28" style="fill:none;stroke:white;stroke-width:1" />
</svg>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 -4 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:black;stroke-width:3" transform="rotate(180 20 10)"/>
<text x="13" y="6" font-family="Verdana" font-size="7" fill="black">-0.1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 -2 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:black;stroke-width:5" transform="rotate(180 20 10)"/>
<text x="16" y="7" font-family="Verdana" font-size="7" fill="black">-1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 0 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:black;stroke-width:7" transform="rotate(180 20 10)"/>
<text x="13" y="6" font-family="Verdana" font-size="7" fill="black">-10</text>
</svg>
</td>
</tr>
</table>
</td>
<td class="btnimg">
<svg width="40" height="40" viewBox="0 0 40 40">
<polygon points="7,40 7,25 4,28 0,24 20,4 26,10 26,6 32,6 32,16 40,24 36,28 33,25 33,40" fill="green" stroke-width:"1" stroke:"black" />
<line x1="25" y1="8" x2="33" y2="16" style="stroke:white;stroke-width:1" />
<polyline points="4,28 20,12 36,28" style="fill:none;stroke:white;stroke-width:1" />
<text x="15" y="35" font-family="Verdana" font-size="14" fill="white">Z</text>
</svg>
</td>
<td>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 -4 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:green;stroke-width:3" transform="rotate(180 20 10)"/>
<text x="14" y="6" font-family="Verdana" font-size="7" fill="black">0.1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 -2 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:green;stroke-width:5" transform="rotate(180 20 10)"/>
<text x="18" y="7" font-family="Verdana" font-size="7" fill="black">1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 0 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:green;stroke-width:7" transform="rotate(180 20 10)"/>
<text x="15" y="6" font-family="Verdana" font-size="7" fill="black">10</text>
</svg>
</td>
</tr>
</table>
</td>
<td>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 -4 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:orange;stroke-width:3" transform="rotate(180 20 10)"/>
<text x="14" y="6" font-family="Verdana" font-size="7" fill="black">0.1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 -2 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:orange;stroke-width:5" transform="rotate(180 20 10)"/>
<text x="18" y="7" font-family="Verdana" font-size="7" fill="black">1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 0 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:orange;stroke-width:7" transform="rotate(180 20 10)"/>
<text x="15" y="6" font-family="Verdana" font-size="7" fill="black">10</text>
</svg>
</td>
</tr>
</table>
</td>
<td>
</td>
<td>
<table>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 -4 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:pink;stroke-width:3" transform="rotate(180 20 10)"/>
<text x="14" y="6" font-family="Verdana" font-size="7" fill="black">0.1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 -2 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:pink;stroke-width:5" transform="rotate(180 20 10)"/>
<text x="18" y="7" font-family="Verdana" font-size="7" fill="black">1</text>
</svg>
</td>
</tr>
<tr>
<td class="btnimg">
<svg width="40" height="20" viewBox="0 0 40 20">
<polyline points="5,18 20,5 35,18" style="fill:none;stroke:pink;stroke-width:7" transform="rotate(180 20 10)"/>
<text x="15" y="6" font-family="Verdana" font-size="7" fill="black">10</text>
</svg>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<iframe id="dataframe" name="dataframe"src="http://$WEB_ADDRESS$/STATUS" frameborder=0 width="2" height="2" style="visibility:hidden;"></iframe>
<iframe width="2" height="2" style="visibility:hidden" id="frmcmd" name="frmcmd" ></iframe>
<script type="text/javascript">
document.getElementById("dataframe").onload=function(){
var ifrm=document.getElementById("dataframe");
var doc=ifrm.contentDocument?ifrm.contentDocument:ifrm.contentWindow.document;
document.getElementById("display_data").innerHTML=doc.getElementById("data").innerHTML;
document.getElementById("position").innerHTML=doc.getElementById("position").innerHTML;
document.getElementById("speed").innerHTML=doc.getElementById("speed").innerHTML;
document.getElementById("flow").innerHTML=doc.getElementById("flow").innerHTML;
document.getElementById("status").innerHTML=doc.getElementById("status").innerHTML;
document.getElementById("infomsg").innerHTML=doc.getElementById("infomsg").innerHTML;
document.getElementById("errormsg").innerHTML=doc.getElementById("errormsg").innerHTML;
document.getElementById("statusmsg").innerHTML=doc.getElementById("statusmsg").innerHTML;
}
setInterval(function(){var ifrm=document.getElementById("dataframe");var doc=ifrm.contentDocument?ifrm.contentDocument:ifrm.contentWindow.document;doc.location.reload(true);},$REFRESH_PAGE$);
</script>
$SERVICE_PAGE$
</body>
</html>