change driver_cloud_grpc_civetweb.

src/driver/driver_cloud_grpc_civetweb/frontend/index.html

@@ -13,18 +13,23 @@
 var index=0
 var xc=0
 //var int=self.setInterval('clock()',100);
-var int2=self.setInterval('changeFrontImage()',29);
+var int2=self.setInterval('changeFrontImage()',100);
 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 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 = 50;
+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();
@@ -34,7 +39,7 @@ var nchange = 50;
 
 
                 document.onkeydown=function(event){
-			nchange = 50;
+			nchange = 15;
                     //keyCode来获取按键的编码，来判断那个键是否按下
                     //还有altKey shiftKry altKey等 来判断是否按下
 //                    console.log("按键按下");
@@ -114,7 +119,7 @@ function updatectrl(){
 	}
 	else
 	{
-		nchange = 50;
+		nchange = 15;
 		oldvel = vel;
 		oldwheel = wheel;
 	}
@@ -132,9 +137,9 @@ function updatectrl(){
 
 		//ctx.restore();
 		image.src="./picfront?"+n;
-		imagerear.src="./picrear?"+n;
-		imageleft.src="./picleft?"+n;
-		imageright.src="./picright?"+n;
+//		imagerear.src="./picrear?"+n;
+//		imageleft.src="./picleft?"+n;
+//		imageright.src="./picright?"+n;
 		n++; 
 		var nerror = 0;
 				CanvasWidth = 960*(1920-40)/1920;
@@ -213,11 +218,11 @@ function updatectrl(){
 
 	function changeRearImage()
 	{ 
-		if(ic == 1)
+		if(irear == 1)
 		{
 			return;
 		}
-		ic = 1;
+		irear = 1;
 		var canvas=document.getElementById("myCanvas2");  
 		var cxt=canvas.getContext("2d");
 
@@ -251,43 +256,43 @@ function updatectrl(){
 					nerror = 0;
 				}
 			}
-			ic = 0;
+			irear = 0;
 			
 		}  
 		imagerear.onerror=function(){  
 			document.getElementById("F2").innerHTML="error N:"+n; 
-			ic = 0;
+			irear = 0;
 		};  
 		//ctx.save();
   	}
 
 	function changeLeftImage()
 	{ 
-		if(ic == 1)
+		if(ileft == 1)
 		{
 			return;
 		}
-		ic = 1;
+		ileft = 1;
 		var canvas=document.getElementById("myCanvas2");  
 		var cxt=canvas.getContext("2d");
 
 		//ctx.restore();
-		image.src="./picleft?"+n;
+		imageleft.src="./picleft?"+n;
 		n++; 
 		var nerror = 0;
 		
-		image.onload = function () //确保图片已经加载完毕  
+		imageleft.onload = function () //确保图片已经加载完毕  
 		{  
-			if (image.complete)//如果图片加载完成，绘制
+			if (imageleft.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;
+				imgScale = CanvasWidth/imageleft.width;
+				if(imgScale* image.height > CanvasHeight)imgScale = CanvasHeight/imageleft.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.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++;
@@ -301,43 +306,43 @@ function updatectrl(){
 					nerror = 0;
 				}
 			}
-			ic = 0;
+			ileft = 0;
 			
 		}  
-		image.onerror=function(){  
+		imageleft.onerror=function(){  
 			document.getElementById("F2").innerHTML="error N:"+n; 
-			ic = 0;
+			ileft = 0;
 		};  
 		//ctx.save();
   	}
 
 	function changeRightImage()
 	{ 
-		if(ic == 1)
+		if(iright == 1)
 		{
 			return;
 		}
-		ic = 1;
+		iright = 1;
 		var canvas=document.getElementById("myCanvas2");  
 		var cxt=canvas.getContext("2d");
 
 		//ctx.restore();
-		image.src="./picright?"+n;
+		imageright.src="./picright?"+n;
 		n++; 
 		var nerror = 0;
 		
-		image.onload = function () //确保图片已经加载完毕  
+		imageright.onload = function () //确保图片已经加载完毕  
 		{  
-			if (image.complete)//如果图片加载完成，绘制
+			if (imageright.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;
+				imgScale = CanvasWidth/imageright.width;
+				if(imgScale* imageright.height > CanvasHeight)imgScale = CanvasHeight/imageright.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.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++;
@@ -351,12 +356,12 @@ function updatectrl(){
 					nerror = 0;
 				}
 			}
-			ic = 0;
+			iright = 0;
 			
 		}  
-		image.onerror=function(){  
+		imageright.onerror=function(){  
 			document.getElementById("F2").innerHTML="error N:"+n; 
-			ic = 0;
+			iright = 0;
 		};  
 		//ctx.save();
   	}
@@ -369,28 +374,69 @@ function clock()
 		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();
+//	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="changeImage()">
+<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" value="auto" checked>
+<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" value="man">
+<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" value="D" checked>
+<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" value="R">
+<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>

src/driver/driver_cloud_grpc_civetweb/main.cpp

@@ -4,6 +4,9 @@
 #include <QMutex>
 #include <iostream>
 #include <QFile>
+#include <QJsonObject>
+#include <QJsonDocument>
+#include <QJsonArray>
 
 #include "xmlparam.h"
 
@@ -349,6 +352,96 @@ class PicRightHandler : public CivetHandler
 };
 
 
+#ifdef USE_WEBSOCKET
+class WebSocketHandler : public CivetWebSocketHandler {
+
+    int a = 1;
+    virtual bool handleConnection(CivetServer *server,
+                                  const struct mg_connection *conn) {
+        printf("WS connected\n");
+        return true;
+    }
+
+    virtual void handleReadyState(CivetServer *server,
+                                  struct mg_connection *conn) {
+        printf("WS ready\n");
+
+        const char *text = "Hello from the websocket ready handler";
+        mg_websocket_write(conn, MG_WEBSOCKET_OPCODE_TEXT, text, strlen(text));
+    }
+
+    virtual bool handleData(CivetServer *server,
+                            struct mg_connection *conn,
+                            int bits,
+                            char *data,
+                            size_t data_len) {
+        printf("WS got %lu bytes: ", (long unsigned)data_len);
+        QJsonDocument xup;
+        QByteArray bajson;
+        bajson.push_back(data);
+        xup = QJsonDocument::fromJson(bajson);
+
+        QJsonObject xupo = xup.object();
+        QString strctrl = "AA";
+        if(xupo.contains("Ctrl"))
+        {
+            strctrl = xupo.value("Ctrl").toString();
+        }
+        QString strshift = "D";
+        if(xupo.contains("Shift"))
+        {
+            strshift = xupo.value("Shift").toString();
+        }
+        QString strvel = "0.13";
+        if(xupo.contains("Vel"))
+        {
+            strvel = xupo.value("Vel").toString();
+        }
+        QString strwheel = "0.03";
+        if(xupo.contains("Wheel"))
+        {
+            strwheel = xupo.value("Wheel").toString();
+        }
+        fwrite(data, 1, data_len, stdout);
+//        printf("\n");
+
+
+        QJsonObject obj1;
+
+     //   obj1.insert("Class", "sindata");
+
+        obj1.insert("test","test");
+
+        QString strsend = QString(QJsonDocument(obj1).toJson(QJsonDocument::Compact));
+
+
+
+                mg_websocket_write(conn, MG_WEBSOCKET_OPCODE_TEXT,strsend.toLatin1().data(),strsend.length());
+                return (data_len<5);
+
+        char strout[100];
+  //      snprintf(strout,100,"hello %s <img src =\"/Pic?%d\"> ",data,a);a++;
+
+        snprintf(strout,100,"<p><h3>hello %s </h3> acc:%f <br> brake:%f <br> wheel:%f</p> ",data,1.0,0.0,300.0);a++;
+
+
+
+
+ //       mg_websocket_write(conn, MG_WEBSOCKET_OPCODE_TEXT, data, data_len);
+        mg_websocket_write(conn, MG_WEBSOCKET_OPCODE_TEXT,strout,strnlen(strout,255));
+  //      mg_websocket_write(conn, MG_WEBSOCKET_OPCODE_TEXT,"hello",5);
+        return true;
+//        return (data_len<5);
+    }
+
+    virtual void handleClose(CivetServer *server,
+                             const struct mg_connection *conn) {
+        printf("WS closed\n");
+    }
+};
+#endif
+
+
 int main(int argc, char *argv[])
 {
     QCoreApplication a(argc, argv);
@@ -394,6 +487,12 @@ int main(int argc, char *argv[])
     PicRightHandler h_picright;
     server.addHandler("/picright", h_picright);
 
+#ifdef USE_WEBSOCKET
+    WebSocketHandler h_websocket;
+    server.addWebSocketHandler("/remoteservice", h_websocket);
+//    printf("Run websocket example at http://localhost:%s/\n", PORT);
+#endif
+
     ggrpc = new grpcpc("test");
     ggrpc->start();