|
|
@@ -0,0 +1,417 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<title>ADCIV WEB UI. Designed Base CivetWeb.</title>
|
|
|
+<script>
|
|
|
+
|
|
|
+//var i_width=window.document.body.clientWidth//网页可用宽度
|
|
|
+//var i_height=window.document.body.clientHeight;
|
|
|
+//var pic = document.getElementById("myCanvas");
|
|
|
+//pic.style.height=i_height+"px";
|
|
|
+//pic.style.width=i_width+"px";
|
|
|
+var index=0
|
|
|
+var xc=0
|
|
|
+//var int=self.setInterval('clock()',100);
|
|
|
+var int2=self.setInterval('changeFrontImage()',29);
|
|
|
+var int1=self.setInterval('updatectrl()',100);
|
|
|
+//var int3=self.setInterval('changeRearImage()',29);
|
|
|
+//var int4=self.setInterval('changeLeftImage()',29);
|
|
|
+//var int5=self.setInterval('changeRightImage()',29);
|
|
|
+
|
|
|
+var oldvel= 0;
|
|
|
+var oldwheel = 0.5;
|
|
|
+var nchange = 50;
|
|
|
+
|
|
|
+ var n = 0;
|
|
|
+ var ic = 0;
|
|
|
+ var upcount = 0;
|
|
|
+ var image=new Image();//放入函数里面：浏览器运行一分钟左右系统内存用到高达90%，故做一个全局的反冲图片
|
|
|
+ var imagerear=new Image();
|
|
|
+ var imageleft=new Image();
|
|
|
+ var imageright=new Image();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ document.onkeydown=function(event){
|
|
|
+ nchange = 50;
|
|
|
+ //keyCode来获取按键的编码，来判断那个键是否按下
|
|
|
+ //还有altKey shiftKry altKey等 来判断是否按下
|
|
|
+// console.log("按键按下");
|
|
|
+ if(event.keyCode==87){
|
|
|
+ var valuex = 0.1;
|
|
|
+ valuex = parseFloat(document.getElementById("sildervel").value);
|
|
|
+ valuex = valuex + 0.1;
|
|
|
+ document.getElementById("sildervel").value = valuex;
|
|
|
+ console.log("w键按下了");
|
|
|
+ document.getElementById("demo").innerHTML=valuex;
|
|
|
+ }
|
|
|
+ if(event.keyCode==83){
|
|
|
+ document.getElementById("sildervel").value = parseFloat(document.getElementById("sildervel").value) - 0.1;
|
|
|
+ console.log("s键按下了");
|
|
|
+ document.getElementById("demo").innerHTML=Date();
|
|
|
+ }
|
|
|
+ if(event.keyCode==65){
|
|
|
+ document.getElementById("silderwheel").value = parseFloat(document.getElementById("silderwheel").value) - 0.01;
|
|
|
+ console.log("a键按下了");
|
|
|
+ document.getElementById("demo").innerHTML=Date();
|
|
|
+ }
|
|
|
+ if(event.keyCode==68){
|
|
|
+ document.getElementById("silderwheel").value = parseFloat(document.getElementById("silderwheel").value) + 0.01;
|
|
|
+ console.log("d键按下了");
|
|
|
+ document.getElementById("demo").innerHTML=Date();
|
|
|
+ }
|
|
|
+ if(event.keyCode==80){
|
|
|
+ document.getElementById("sildervel").value = 0;
|
|
|
+ }
|
|
|
+ if(event.keyCode==67){
|
|
|
+ document.getElementById("silderwheel").value = 0.5;
|
|
|
+ }
|
|
|
+ if(event.altKey && event.keyCode==89){
|
|
|
+ console.log("alt+y键同时按下了");
|
|
|
+ }
|
|
|
+ }
|
|
|
+// document.onkeyup=function(){
|
|
|
+// console.log("按键松开");
|
|
|
+// }
|
|
|
+
|
|
|
+ //2.
|
|
|
+ var input=document.getElementsByTagName("input")[0];
|
|
|
+ input.onkeydown=function(){
|
|
|
+ //console.log("input中按下");
|
|
|
+ //可以来限制input中不能输入数字
|
|
|
+ if(event.keyCode>=48 && event.keyCode<=57){//数字1-9对应48-57
|
|
|
+ //取消input的默认行为，使输入东西不显示
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+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 updatectrl(){
|
|
|
+
|
|
|
+ var vel = parseFloat(document.getElementById("sildervel").value);
|
|
|
+ var wheel = parseFloat(document.getElementById("silderwheel").value);
|
|
|
+ if((vel == oldvel)&&(wheel == oldwheel))
|
|
|
+ {
|
|
|
+ if(nchange > 0)nchange = nchange-1;
|
|
|
+ if(nchange <= 0)
|
|
|
+ {
|
|
|
+ if(vel>=0)
|
|
|
+ {
|
|
|
+ vel = vel - 0.1;
|
|
|
+ document.getElementById("sildervel").value = vel;
|
|
|
+ oldvel = parseFloat(document.getElementById("sildervel").value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ nchange = 50;
|
|
|
+ oldvel = vel;
|
|
|
+ oldwheel = wheel;
|
|
|
+ }
|
|
|
+ document.getElementById("demo").innerHTML=nchange;
|
|
|
+}
|
|
|
+ function changeFrontImage()
|
|
|
+ {
|
|
|
+ if(ic == 1)
|
|
|
+ {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ic = 1;
|
|
|
+ var canvas=document.getElementById("myCanvas2");
|
|
|
+ var cxt=canvas.getContext("2d");
|
|
|
+
|
|
|
+ //ctx.restore();
|
|
|
+ image.src="./picfront?"+n;
|
|
|
+ imagerear.src="./picrear?"+n;
|
|
|
+ imageleft.src="./picleft?"+n;
|
|
|
+ imageright.src="./picright?"+n;
|
|
|
+ n++;
|
|
|
+ var nerror = 0;
|
|
|
+ CanvasWidth = 960*(1920-40)/1920;
|
|
|
+ CanvasHeight = 540*(1920-40)/1920;
|
|
|
+
|
|
|
+ image.onload = function () //确保图片已经加载完毕
|
|
|
+ {
|
|
|
+ if (image.complete)//如果图片加载完成，绘制
|
|
|
+ {
|
|
|
+ cxt.save();
|
|
|
+ imgScale = 1.0;
|
|
|
+
|
|
|
+ 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
|
|
|
+ {
|
|
|
+ nerror++;
|
|
|
+ if(nerror>100)
|
|
|
+ {
|
|
|
+ alert(image.complete);
|
|
|
+ nerror = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ic = 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ image.onerror=function(){
|
|
|
+ document.getElementById("F2").innerHTML="error N:"+n;
|
|
|
+ ic = 0;
|
|
|
+ };
|
|
|
+ imagerear.onload = function () //确保图片已经加载完毕
|
|
|
+ {
|
|
|
+ if (imagerear.complete)//如果图片加载完成，绘制
|
|
|
+ {
|
|
|
+ cxt.save();
|
|
|
+ imgScale = 1.0;
|
|
|
+
|
|
|
+ imgScale = CanvasWidth/imagerear.width;
|
|
|
+ if(imgScale* image.height > CanvasHeight)imgScale = CanvasHeight/imagerear.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(imagerear,0,0,imagerear.width,imagerear.height,20+CanvasWidth/2.0,20+CanvasHeight,imagerear.width*imgScale,imagerear.height*imgScale);
|
|
|
+ cxt.restore();
|
|
|
+ nerror = 0;
|
|
|
+ upcount++;
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ nerror++;
|
|
|
+ if(nerror>100)
|
|
|
+ {
|
|
|
+ alert(image.complete);
|
|
|
+ nerror = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ic = 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ imagerear.onerror=function(){
|
|
|
+ document.getElementById("F2").innerHTML="error N:"+n;
|
|
|
+ ic = 0;
|
|
|
+ };
|
|
|
+ //ctx.save();
|
|
|
+ }
|
|
|
+
|
|
|
+ function changeRearImage()
|
|
|
+ {
|
|
|
+ if(ic == 1)
|
|
|
+ {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ic = 1;
|
|
|
+ var canvas=document.getElementById("myCanvas2");
|
|
|
+ var cxt=canvas.getContext("2d");
|
|
|
+
|
|
|
+ //ctx.restore();
|
|
|
+ imagerear.src="./picrear?"+n;
|
|
|
+ n++;
|
|
|
+ var nerror = 0;
|
|
|
+
|
|
|
+ imagerear.onload = function () //确保图片已经加载完毕
|
|
|
+ {
|
|
|
+ if (imagerear.complete)//如果图片加载完成，绘制
|
|
|
+ {
|
|
|
+ cxt.save();
|
|
|
+ imgScale = 1.0;
|
|
|
+ CanvasWidth = 960*(1920-40)/1920;
|
|
|
+ CanvasHeight = 540*(1920-40)/1920;
|
|
|
+ imgScale = CanvasWidth/imagerear.width;
|
|
|
+ if(imgScale* imagerear.height > CanvasHeight)imgScale = CanvasHeight/imagerear.height;
|
|
|
+// cxt.drawImage(image,0,0);
|
|
|
+ cxt.drawImage(imagerear,0,0,imagerear.width,imagerear.height,20+CanvasWidth/2.0,20+CanvasHeight,imagerear.width*imgScale,imagerear.height*imgScale);
|
|
|
+ cxt.restore();
|
|
|
+ nerror = 0;
|
|
|
+ upcount++;
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ nerror++;
|
|
|
+ if(nerror>100)
|
|
|
+ {
|
|
|
+ alert(image.complete);
|
|
|
+ nerror = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ic = 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ imagerear.onerror=function(){
|
|
|
+ document.getElementById("F2").innerHTML="error N:"+n;
|
|
|
+ ic = 0;
|
|
|
+ };
|
|
|
+ //ctx.save();
|
|
|
+ }
|
|
|
+
|
|
|
+ function changeLeftImage()
|
|
|
+ {
|
|
|
+ if(ic == 1)
|
|
|
+ {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ic = 1;
|
|
|
+ var canvas=document.getElementById("myCanvas2");
|
|
|
+ var cxt=canvas.getContext("2d");
|
|
|
+
|
|
|
+ //ctx.restore();
|
|
|
+ image.src="./picleft?"+n;
|
|
|
+ n++;
|
|
|
+ var nerror = 0;
|
|
|
+
|
|
|
+ image.onload = function () //确保图片已经加载完毕
|
|
|
+ {
|
|
|
+ if (image.complete)//如果图片加载完成，绘制
|
|
|
+ {
|
|
|
+ cxt.save();
|
|
|
+ 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,0,0,image.width*imgScale*0.5,image.height*imgScale*0.5);
|
|
|
+ cxt.restore();
|
|
|
+ nerror = 0;
|
|
|
+ upcount++;
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ nerror++;
|
|
|
+ if(nerror>100)
|
|
|
+ {
|
|
|
+ alert(image.complete);
|
|
|
+ nerror = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ic = 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ image.onerror=function(){
|
|
|
+ document.getElementById("F2").innerHTML="error N:"+n;
|
|
|
+ ic = 0;
|
|
|
+ };
|
|
|
+ //ctx.save();
|
|
|
+ }
|
|
|
+
|
|
|
+ function changeRightImage()
|
|
|
+ {
|
|
|
+ if(ic == 1)
|
|
|
+ {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ic = 1;
|
|
|
+ var canvas=document.getElementById("myCanvas2");
|
|
|
+ var cxt=canvas.getContext("2d");
|
|
|
+
|
|
|
+ //ctx.restore();
|
|
|
+ image.src="./picright?"+n;
|
|
|
+ n++;
|
|
|
+ var nerror = 0;
|
|
|
+
|
|
|
+ image.onload = function () //确保图片已经加载完毕
|
|
|
+ {
|
|
|
+ if (image.complete)//如果图片加载完成，绘制
|
|
|
+ {
|
|
|
+ cxt.save();
|
|
|
+ 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,40+CanvasWidth*1.5,0,image.width*imgScale*0.5,image.height*imgScale*0.5);
|
|
|
+ cxt.restore();
|
|
|
+ nerror = 0;
|
|
|
+ upcount++;
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ nerror++;
|
|
|
+ if(nerror>100)
|
|
|
+ {
|
|
|
+ alert(image.complete);
|
|
|
+ nerror = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ic = 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ image.onerror=function(){
|
|
|
+ document.getElementById("F2").innerHTML="error N:"+n;
|
|
|
+ ic = 0;
|
|
|
+ };
|
|
|
+ //ctx.save();
|
|
|
+ }
|
|
|
+
|
|
|
+function clock()
|
|
|
+{
|
|
|
+ if(ic == 0)
|
|
|
+ {
|
|
|
+ ic = 1;
|
|
|
+ changeImage();
|
|
|
+ }
|
|
|
+}
|
|
|
+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>
|
