|
|
@@ -17,7 +17,18 @@ var int2=self.setInterval('changeImage()',29);
|
|
|
|
|
|
var n = 0;
|
|
|
var ic = 0;
|
|
|
+ var upcount = 0;
|
|
|
var image=new Image();//放入函数里面：浏览器运行一分钟左右系统内存用到高达90%，故做一个全局的反冲图片
|
|
|
+
|
|
|
+
|
|
|
+function onClickStop(){
|
|
|
+ document.getElementById("sildervel").value = 0;
|
|
|
+// document.getElementById("demo").innerHTML=Date();
|
|
|
+}
|
|
|
+function onClickCenter(){
|
|
|
+ document.getElementById("silderwheel").value = 0.5;
|
|
|
+// document.getElementById("demo").innerHTML=Date();
|
|
|
+}
|
|
|
function changeImage()
|
|
|
{
|
|
|
if(ic == 1)
|
|
|
@@ -27,6 +38,7 @@ var int2=self.setInterval('changeImage()',29);
|
|
|
ic = 1;
|
|
|
var canvas=document.getElementById("myCanvas2");
|
|
|
var cxt=canvas.getContext("2d");
|
|
|
+
|
|
|
//ctx.restore();
|
|
|
image.src="./pic?"+n;
|
|
|
n++;
|
|
|
@@ -37,9 +49,19 @@ var int2=self.setInterval('changeImage()',29);
|
|
|
if (image.complete)//如果图片加载完成，绘制
|
|
|
{
|
|
|
cxt.save();
|
|
|
- cxt.drawImage(image,0,0);
|
|
|
+ imgScale = 1.0;
|
|
|
+ CanvasWidth = 960*(1920-40)/1920;
|
|
|
+ CanvasHeight = 540*(1920-40)/1920;
|
|
|
+ imgScale = CanvasWidth/image.width;
|
|
|
+ if(imgScale* image.height > CanvasHeight)imgScale = CanvasHeight/image.height;
|
|
|
+// cxt.drawImage(image,0,0);
|
|
|
+ cxt.drawImage(image,0,0,image.width,image.height,20+CanvasWidth/2.0,0,image.width*imgScale,image.height*imgScale);
|
|
|
+ cxt.drawImage(image,0,0,image.width,image.height,0,0,image.width*imgScale*0.5,image.height*imgScale*0.5);
|
|
|
+ cxt.drawImage(image,0,0,image.width,image.height,40+CanvasWidth*1.5,0,image.width*imgScale*0.5,image.height*imgScale*0.5);
|
|
|
+ cxt.drawImage(image,0,0,image.width,image.height,20+CanvasWidth/2.0,20+CanvasHeight,image.width*imgScale,image.height*imgScale);
|
|
|
cxt.restore();
|
|
|
nerror = 0;
|
|
|
+ upcount++;
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
@@ -71,18 +93,44 @@ function clock()
|
|
|
function load() {
|
|
|
changeImage();
|
|
|
}
|
|
|
+
|
|
|
</script>
|
|
|
</head>
|
|
|
<body onload="changeImage()">
|
|
|
<!-- <div id='websock_text_field'>No websocket connection yet</div>-->
|
|
|
<!-- <iframe id='image' src="" width="800" height="600"></iframe> -->
|
|
|
|
|
|
-
|
|
|
-
|
|
|
+<form>
|
|
|
+<br>
|
|
|
+<label for="title" style="width:300px;display:inline-block;">远程控制系统</label>
|
|
|
+<input type="radio" style="width:100px;display:inline-block;height:30px;" name="ctrl" value="auto" checked>
|
|
|
+<label style="width:100px;display:inline-block;">自动</label>
|
|
|
+<input type="radio" style="width:100px;display:inline-block;height:30px;" name="ctrl" value="man">
|
|
|
+<label style="width:100px;display:inline-block;">远程</label>
|
|
|
+<input type="radio" style="width:100px;display:inline-block;height:30px;" name="shift" value="D" checked>
|
|
|
+<label style="width:100px;display:inline-block;">前进</label>
|
|
|
+<input type="radio" style="width:100px;display:inline-block;height:30px;" name="shift" value="R">
|
|
|
+<label style="width:100px;display:inline-block;">后退</label>
|
|
|
+<br>
|
|
|
+<br>
|
|
|
+<br>
|
|
|
+<label style="width:150px;display:inline-block;" >油门</label>
|
|
|
+<input type="range" name="slidervel" id="sildervel" value="0.0" max="10" min="0" step="0.1" style="width:900px"/>
|
|
|
+<label style="width:50px;display:inline-block;" > </label>
|
|
|
+<button type="button" onclick="onClickStop()" style="width:100px;" >停车</button>
|
|
|
+<br>
|
|
|
+<br>
|
|
|
+<label style="width:150px;display:inline-block;" >转向</label>
|
|
|
+<input type="range" name="sliderwheel" id="silderwheel" value="0.5" max="1" min="0" step="0.01" style="width:900px;"/>
|
|
|
+<label style="width:50px;display:inline-block;" > </label>
|
|
|
+<button type="button" onclick="onClickCenter()" style="width:100px;" >居中</button>
|
|
|
+</form>
|
|
|
+<p> </p>
|
|
|
<canvas id="myCanvas2" width="1920" height="1080" style="border:0px solid #c3c3c3;">
|
|
|
Your browser does not support the canvas element.
|
|
|
</canvas>
|
|
|
-
|
|
|
+
|
|
|
+<p id="demo">This is a paragraph.</p>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
