226 lines
6.3 KiB
HTML
226 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<script src="../jquery-2.1.0.min.js"></script>
|
|
<script src="../jquery.cookie.js"></script>
|
|
<script type="text/javascript" src="js/gauge.min.js"></script>
|
|
|
|
<script type="text/javascript" type="text/javascript">
|
|
function Timer(){
|
|
document.getElementById("gauge-a").setAttribute("data-value", $.cookie('VehicleCtrlExpThrottle'));
|
|
document.getElementById("gauge-d").setAttribute("data-value", $.cookie('Speedm_Tmp'));
|
|
document.getElementById("gauge-b").setAttribute("data-value", $.cookie('PWR_Percent'));
|
|
document.getElementById("gauge-c").setAttribute("data-value", $.cookie('SVreal_angle'));
|
|
}
|
|
var T1 = window.setInterval("Timer()",100);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<h3>自动速度值</h3>
|
|
</td>
|
|
<td>
|
|
<h3>实际速度</h3>
|
|
</td>
|
|
<td>
|
|
<h3>舵轮角度</h3>
|
|
</td>
|
|
<td>
|
|
<h3>%电量</h3>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<canvas data-type="radial-gauge" id="gauge-a"
|
|
data-width="180"
|
|
data-height="180"
|
|
data-units="自动速度值units"
|
|
data-value="0"
|
|
data-min-value="-4096"
|
|
data-start-angle="90"
|
|
data-ticks-angle="180"
|
|
data-value-box="true"
|
|
data-max-value="4095"
|
|
data-major-ticks="-4096,-3000,-2000,-1000,0,1000,2000,3000,4095"
|
|
data-minor-ticks="5"
|
|
data-stroke-ticks="true"
|
|
data-highlights='[ {"from": -1000, "to": 0, "color": "rgba(0,0, 255, .3)"},
|
|
{"from": 0, "to": 1000, "color": "rgba(255, 0, 0, .3)"} ]'
|
|
]'
|
|
data-ticks-angle="180"
|
|
data-start-angle="90"
|
|
data-color-major-ticks="#ddd"
|
|
data-color-minor-ticks="#ddd"
|
|
data-color-title="#eee"
|
|
data-color-units="#ccc"
|
|
data-color-numbers="#eee"
|
|
data-color-plate="#222"
|
|
data-border-shadow-width="0"
|
|
data-borders="true"
|
|
data-needle-type="arrow"
|
|
data-needle-width="2"
|
|
data-needle-circle-size="7"
|
|
data-needle-circle-outer="true"
|
|
data-needle-circle-inner="false"
|
|
data-animation-duration="1500"
|
|
data-animation-rule="linear"
|
|
data-color-border-outer="#333"
|
|
data-color-border-outer-end="#111"
|
|
data-color-border-middle="#222"
|
|
data-color-border-middle-end="#111"
|
|
data-color-border-inner="#111"
|
|
data-color-border-inner-end="#333"
|
|
data-color-needle-shadow-down="#333"
|
|
data-color-needle-circle-outer="#333"
|
|
data-color-needle-circle-outer-end="#111"
|
|
data-color-needle-circle-inner="#111"
|
|
data-color-needle-circle-inner-end="#222"
|
|
data-value-box-border-radius="0"
|
|
data-color-value-box-rect="#222"
|
|
data-color-value-box-rect-end="#333"
|
|
></canvas>
|
|
</td>
|
|
<td>
|
|
<canvas data-type="radial-gauge" id="gauge-d"
|
|
data-width="180"
|
|
data-height="180"
|
|
data-units="m/s"
|
|
data-title="实际速度"
|
|
data-min-value="-3"
|
|
data-max-value="3"
|
|
data-major-ticks="[-3,-2,-1,0,1,2,3]"
|
|
data-minor-ticks="2"
|
|
data-stroke-ticks="true"
|
|
data-highlights='[ {"from": -1, "to": 0, "color": "rgba(0,0, 255, .3)"},
|
|
{"from": 0, "to": 1, "color": "rgba(255, 0, 0, .3)"} ]'
|
|
data-ticks-angle="225"
|
|
data-start-angle="67.5"
|
|
data-color-major-ticks="#ddd"
|
|
data-color-minor-ticks="#ddd"
|
|
data-color-title="#eee"
|
|
data-color-units="#ccc"
|
|
data-color-numbers="#eee"
|
|
data-color-plate="#222"
|
|
data-border-shadow-width="0"
|
|
data-borders="true"
|
|
data-needle-type="arrow"
|
|
data-needle-width="2"
|
|
data-needle-circle-size="7"
|
|
data-needle-circle-outer="true"
|
|
data-needle-circle-inner="false"
|
|
data-animation-duration="1500"
|
|
data-animation-rule="linear"
|
|
data-color-border-outer="#333"
|
|
data-color-border-outer-end="#111"
|
|
data-color-border-middle="#222"
|
|
data-color-border-middle-end="#111"
|
|
data-color-border-inner="#111"
|
|
data-color-border-inner-end="#333"
|
|
data-color-needle-shadow-down="#333"
|
|
data-color-needle-circle-outer="#333"
|
|
data-color-needle-circle-outer-end="#111"
|
|
data-color-needle-circle-inner="#111"
|
|
data-color-needle-circle-inner-end="#222"
|
|
data-value-box-border-radius="0"
|
|
data-color-value-box-rect="#222"
|
|
data-color-value-box-rect-end="#333"
|
|
></canvas>
|
|
</td>
|
|
<td>
|
|
|
|
<canvas data-type="radial-gauge" id="gauge-c"
|
|
data-width="180"
|
|
data-height="180"
|
|
data-units="°"
|
|
data-title="舵轮角度"
|
|
data-min-value="-90"
|
|
data-max-value="90"
|
|
data-major-ticks="[-90,-60,-30,-20,-10,0,10,20,30,60,90]"
|
|
data-minor-ticks="2"
|
|
data-stroke-ticks="true"
|
|
data-highlights='[ {"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},
|
|
{"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"} ]'
|
|
data-ticks-angle="180"
|
|
data-start-angle="90"
|
|
data-color-major-ticks="#ddd"
|
|
data-color-minor-ticks="#ddd"
|
|
data-color-title="#eee"
|
|
data-color-units="#ccc"
|
|
data-color-numbers="#eee"
|
|
data-color-plate="#222"
|
|
data-border-shadow-width="0"
|
|
data-borders="true"
|
|
data-needle-type="arrow"
|
|
data-needle-width="2"
|
|
data-needle-circle-size="7"
|
|
data-needle-circle-outer="true"
|
|
data-needle-circle-inner="false"
|
|
data-animation-duration="1500"
|
|
data-animation-rule="linear"
|
|
data-color-border-outer="#333"
|
|
data-color-border-outer-end="#111"
|
|
data-color-border-middle="#222"
|
|
data-color-border-middle-end="#111"
|
|
data-color-border-inner="#111"
|
|
data-color-border-inner-end="#333"
|
|
data-color-needle-shadow-down="#333"
|
|
data-color-needle-circle-outer="#333"
|
|
data-color-needle-circle-outer-end="#111"
|
|
data-color-needle-circle-inner="#111"
|
|
data-color-needle-circle-inner-end="#222"
|
|
data-value-box-border-radius="0"
|
|
data-color-value-box-rect="#222"
|
|
data-color-value-box-rect-end="#333"
|
|
></canvas>
|
|
</td>
|
|
<td>
|
|
|
|
<canvas data-type="linear-gauge" id="gauge-b"
|
|
data-width="120"
|
|
data-height="300"
|
|
data-units="%电量"
|
|
data-min-value="0"
|
|
data-max-value="100"
|
|
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
|
|
data-minor-ticks="2"
|
|
data-stroke-ticks="true"
|
|
data-highlights='[ {"from": 0, "to": 30, "color": "rgba(200, 50, 50, .75)"} ]'
|
|
data-color-plate="#fff"
|
|
data-color-bar="#f5f5f5"
|
|
data-color-bar-progress="#327ac0"
|
|
data-border-shadow-width="0"
|
|
data-borders="false"
|
|
data-needle-type="arrow"
|
|
data-needle-width="3"
|
|
data-animation-duration="1500"
|
|
data-animation-rule="linear"
|
|
data-tick-side="left"
|
|
data-number-side="left"
|
|
data-needle-side="left"
|
|
data-bar-stroke-width="7"
|
|
data-bar-begin-circle="false"
|
|
data-value="100"
|
|
></canvas>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|