ADPilot
/
modularization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
							<!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()',100);
var int1=self.setInterval('updatectrl()',100);
var int3=self.setInterval('changeRearImage()',100);
var int4=self.setInterval('changeLeftImage()',100);
var int5=self.setInterval('changeRightImage()',100);
var int6=self.setInterval('timerupload()',100);

var oldvel= 0;
var oldwheel = 0.5;
var nchange = 15;
var conupserv = 0;

	var n = 0;
	var ic = 0;
	var irear = 0;
	var ileft = 0;
	var iright = 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 = 15;
                    //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 = 15;
		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(irear == 1)
		{
			return;
		}
		irear = 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;
				}
			}
			irear = 0;
			
		}  
		imagerear.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
			irear = 0;
		};  
		//ctx.save();
  	}

	function changeLeftImage()
	{ 
		if(ileft == 1)
		{
			return;
		}
		ileft = 1;
		var canvas=document.getElementById("myCanvas2");  
		var cxt=canvas.getContext("2d");

		//ctx.restore();
		imageleft.src="./picleft?"+n;
		n++; 
		var nerror = 0;
		
		imageleft.onload = function () //确保图片已经加载完毕  
		{  
			if (imageleft.complete)//如果图片加载完成，绘制
			{
				cxt.save();
				imgScale = 1.0;
				CanvasWidth = 960*(1920-40)/1920;
				CanvasHeight = 540*(1920-40)/1920;
				imgScale = CanvasWidth/imageleft.width;
				if(imgScale* image.height > CanvasHeight)imgScale = CanvasHeight/imageleft.height;
//				cxt.drawImage(image,0,0);   
				cxt.drawImage(imageleft,0,0,imageleft.width,imageleft.height,0,0,imageleft.width*imgScale*0.5,imageleft.height*imgScale*0.5); 
				cxt.restore();
				nerror = 0;
				upcount++;
			}
			else
			{
				nerror++;
				if(nerror>100)
				{
					alert(image.complete);
					nerror = 0;
				}
			}
			ileft = 0;
			
		}  
		imageleft.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
			ileft = 0;
		};  
		//ctx.save();
  	}

	function changeRightImage()
	{ 
		if(iright == 1)
		{
			return;
		}
		iright = 1;
		var canvas=document.getElementById("myCanvas2");  
		var cxt=canvas.getContext("2d");

		//ctx.restore();
		imageright.src="./picright?"+n;
		n++; 
		var nerror = 0;
		
		imageright.onload = function () //确保图片已经加载完毕  
		{  
			if (imageright.complete)//如果图片加载完成，绘制
			{
				cxt.save();
				imgScale = 1.0;
				CanvasWidth = 960*(1920-40)/1920;
				CanvasHeight = 540*(1920-40)/1920;
				imgScale = CanvasWidth/imageright.width;
				if(imgScale* imageright.height > CanvasHeight)imgScale = CanvasHeight/imageright.height;
//				cxt.drawImage(image,0,0);  
				cxt.drawImage(imageright,0,0,imageright.width,imageright.height,40+CanvasWidth*1.5,0,imageright.width*imgScale*0.5,imageright.height*imgScale*0.5); 
				cxt.restore();
				nerror = 0;
				upcount++;
			}
			else
			{
				nerror++;
				if(nerror>100)
				{
					alert(image.complete);
					nerror = 0;
				}
			}
			iright = 0;
			
		}  
		imageright.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
			iright = 0;
		};  
		//ctx.save();
  	}

function clock() 
{ 
	if(ic == 0)
	{
		ic = 1;
		changeImage();
	}
} 

function timerupload() 
{ 
if(conupserv == 1){
    index=index+1;
    var stritem = '{"Ctrl":';
    var inputcheckauto = document.getElementById("ctrlauto");
    var inputshift = document.getElementById("shiftdrive");
    if(inputcheckauto.checked)
    {
	stritem = stritem+'"Auto"';
    }
    else
    {
	stritem = stritem+'"Man"';
    }
    stritem = stritem + ',"Shift":';
    if(inputshift.checked)
    {
	stritem = stritem +'"Drive"';
    }
    else
    {
	stritem = stritem +'"Rear"';
    }
    stritem = stritem + ',"Vel":';
    stritem = stritem +'"' + document.getElementById("sildervel").value +'"';
    stritem = stritem + ',"Wheel":';
    stritem = stritem +'"' + document.getElementById("silderwheel").value +'"';
    stritem = stritem + '}';
//    var stritem = '{"":"1"}';
 //   obj = JSON.parse(stritem);
    connection.send(stritem);}
}
function load() {
//	changeImage();

  var wsproto = (location.protocol === 'https:') ? 'wss:' : 'ws:';
  connection = new WebSocket(wsproto + '//' + window.location.host + '/remoteservice');
//  websock_text_field = document.getElementById('websock_text_field');
  connection.onmessage = function (e) {
	conupserv = 1;
   }
}


</script>
</head>
<body onload="load()">
<!-- <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" id="ctrlauto" value="auto" checked>
<label style="width:100px;display:inline-block;">自动</label>
<input type="radio" style="width:100px;display:inline-block;height:30px;" name="ctrl" id="ctrlman"  value="man">
<label style="width:100px;display:inline-block;">远程</label>
<input type="radio" style="width:100px;display:inline-block;height:30px;" name="shift"  id="shiftdrive" value="D" checked>
<label style="width:100px;display:inline-block;">前进</label>
<input type="radio" style="width:100px;display:inline-block;height:30px;" name="shift" id="shiftrear" 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>