Merge pull request #193 from virmaior/master

updates to www system

SD_ROOT/wz_mini/www/car/car.css

@@ -1,4 +1,4 @@
-.button {
+.wz_car_BUTTON {
   background-color: #4CAF50; /* Green */
   border: none;
   color: white;
@@ -11,6 +11,8 @@
   cursor: pointer;
 }
 
-.button1 {width: 60px;}
-.button2 {width: 5%;}
-.button3 {width: 100%;}
+.wz_car_TABLE {
+  width: 55%;
+  border-collapse: collapse; 
+  float: left;
+}

SD_ROOT/wz_mini/www/car/car.html

@@ -12,26 +12,26 @@
 
 <h2>wz_mini Car Control</h2>
 
-<table style="width: 55%; border-collapse: collapse; float: left;" border="1">
+<table class="wz_car_TABLE" border="1">
 <tbody>
 <tr style="height: 21px;">
-<td style="width: 33.3333%; height: 21px; text-align: left;"><button id="forward_left" class="button">q: forward left</button></td>
-<td style="width: 33.3333%; height: 21px; text-align: center;"><button id="forward" class="button">w: forward</button></td>
-<td style="width: 33.3333%; height: 21px; text-align: right;"><button id="forward_right" class="button">e: forward right</button></td>
+<td style="width: 33.3333%; height: 21px; text-align: left;"><button id="forward_left" class="wz_car_BUTTON">q: forward left</button></td>
+<td style="width: 33.3333%; height: 21px; text-align: center;"><button id="forward" class="wz_car_BUTTON">w: forward</button></td>
+<td style="width: 33.3333%; height: 21px; text-align: right;"><button id="forward_right" class="wz_car_BUTTON">e: forward right</button></td>
 </tr>
 <tr style="height: 18px;">
-<td style="width: 33.3333%; height: 18px; text-align: left;"><button class="button" id="left">a; left</button></td>
-<td style="width: 33.3333%; height: 18px; text-align: center;"><button class="button" id="reverse">s: rear</button></td>
-<td style="width: 33.3333%; height: 18px; text-align: right;"><button class="button" id="right">d: right</button></td>
+<td style="width: 33.3333%; height: 18px; text-align: left;"><button id="left" class="wz_car_BUTTON">a; left</button></td>
+<td style="width: 33.3333%; height: 18px; text-align: center;"><button id="reverse" class="wz_car_BUTTON">s: rear</button></td>
+<td style="width: 33.3333%; height: 18px; text-align: right;"><button id="right" class="wz_car_BUTTON">d: right</button></td>
 </tr>
 <tr style="height: 18px;">
-<td style="width: 33.3333%; height: 18px; text-align: left;"><button class="button" id="reverse_left">z: rear left</button></td>
-<td style="width: 33.3333%; height: 18px; text-align: center;"><button class="button" id="all_stop">x: all stop</button></td>
-<td style="width: 33.3333%; height: 18px; text-align: right;"><button class="button" id="reverse_right">c: rear right</button></td>
+<td style="width: 33.3333%; height: 18px; text-align: left;"><button id="reverse_left" class="wz_car_BUTTON">z: rear left</button></td>
+<td style="width: 33.3333%; height: 18px; text-align: center;"><button id="all_stop" class="wz_car_BUTTON">x: all stop</button></td>
+<td style="width: 33.3333%; height: 18px; text-align: right;"><button  id="reverse_right" class="wz_car_BUTTON">c: rear right</button></td>
 </tr>
-<td style="width: 33.3333%; height: 21px; text-align: left;"><button id="headlight" class="button">H: headlight</button></td>
-<td style="width: 33.3333%; height: 18px; text-align: center;"><button class="button" id="irled">j: ir led</button></td>
-<td style="width: 33.3333%; height: 18px; text-align: center;"><button class="button" id="honk">b: honk</button></td>
+<td style="width: 33.3333%; height: 21px; text-align: left;"><button id="headlight" class="wz_car_BUTTON">H: headlight</button></td>
+<td style="width: 33.3333%; height: 18px; text-align: center;"><button  id="irled" class="wz_car_BUTTON">j: ir led</button></td>
+<td style="width: 33.3333%; height: 18px; text-align: center;"><button id="honk" class="wz_car_BUTTON">b: honk</button></td>
 </tr>
 </tbody>
 </table>

SD_ROOT/wz_mini/www/car/car.js

@@ -1,127 +1,49 @@
+var wz_mini_car = {
+  post: function(action)
+  {
+          $.post("../cgi-bin/car.sh", action);
+  }  ,
+  init: function() {
+    this.logarray = [];
+
+    $('.wz_car_BUTTON').on('click',function(e){
+      var action = $(this).attr('id');
+      wz_mini_car.post(action);
+    });  
+
+    /* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
+      switch is strict
+    */
+    
+    addEventListener("keydown", function (e) {
+      var action = false;
+      switch(e.key) {
+        case "w": action = "forward"; break;
+        case "s": action = "reverse"; break;
+        case "a": action = "left"; break;
+        case "d": action = "right"; break;
+        case "q": action =  "forward_left" ; break;
+        case "e": action = "forward_right"; break;
+        case "z": action = "reverse_left"; break;
+        case "c": action = "reverse_right" ; break;
+        case "x": action = "all_stop" ; break;  
+        /* everything was "x" below here ... assigned other letters */
+        case "h": action = "headlight" ; break;
+        case "i": action = "irled" ; break;
+        case "k": action = "honk" ; break;
+      } 
+      if (action) {
+        wz_mini_car.post(action);
+      }  
+    });  
+  },
+  log: function(text)
+  {
+    this.logarray.push(text);
+  }  
+}
+
+
 $(document).ready(function() {
-
-$('#forward').click(function() {
-$.post("../cgi-bin/car.sh", "forward" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "w") {  
-$.post("../cgi-bin/car.sh", "forward" );
-}
-});
-
-$('#reverse').click(function() {
-$.post("../cgi-bin/car.sh", "reverse" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "s") {  
-$.post("../cgi-bin/car.sh", "reverse" );
-}
-});
-
-$('#left').click(function() {
-$.post("../cgi-bin/car.sh", "left" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "a") {  
-$.post("../cgi-bin/car.sh", "left" );
-}
-});
-
-$('#right').click(function() {
-$.post("../cgi-bin/car.sh", "right" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "d") {  
-$.post("../cgi-bin/car.sh", "right" );
-}
-});
-
-
-
-$('#forward_left').click(function() {
-$.post("../cgi-bin/car.sh", "forward_left" );
-});
-
-
-addEventListener("keydown", function (e) {
-if (e.key === "q") {  
-$.post("../cgi-bin/car.sh", "forward_left" );
-}
-});
-
-$('#forward_right').click(function() {
-$.post("../cgi-bin/car.sh", "forward_right" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "e") {  
-$.post("../cgi-bin/car.sh", "forward_right" );
-}
-});
-
-$('#reverse_left').click(function() {
-$.post("../cgi-bin/car.sh", "reverse_left" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "z") {  
-$.post("../cgi-bin/car.sh", "reverse_left" );
-}
-});
-
-$('#reverse_right').click(function() {
-$.post("../cgi-bin/car.sh", "reverse_right" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "c") {  
-$.post("../cgi-bin/car.sh", "reverse_right" );
-}
-});
-
-$('#all_stop').click(function() {
-$.post("../cgi-bin/car.sh", "all_stop" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "x") {  
-$.post("../cgi-bin/car.sh", "all_stop" );
-}
-});
-
-$('#headlight').click(function() {
-$.post("../cgi-bin/car.sh", "headlight" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "x") {  
-$.post("../cgi-bin/car.sh", "headlight" );
-}
-});
-
-$('#irled').click(function() {
-$.post("../cgi-bin/car.sh", "irled" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "x") {  
-$.post("../cgi-bin/car.sh", "irled" );
-}
-});
-
-$('#honk').click(function() {
-$.post("../cgi-bin/car.sh", "honk" );
-});
-
-addEventListener("keydown", function (e) {
-if (e.key === "x") {  
-$.post("../cgi-bin/car.sh", "honk" );
-}
-});
-
-
+  wz_mini_car.init();
 });

SD_ROOT/wz_mini/www/cgi-bin/config.cgi

@@ -122,6 +122,13 @@ function ini_to_html_tf
         documentation_to_html $1
         printf '</div>'
 }
+
+#function to handle camera feed
+function html_cam_feed
+{
+	printf '<img src="/cgi-bin/jpeg.cgi" class="feed" >'
+}
+
 echo -ne "<html><head><title>$title</title>"
 echo -ne "<style type=\"text/css\">"
 cat wz_mini_web.css
@@ -131,6 +138,9 @@ echo -ne "</head>"
 
 echo -ne '<body>'
 echo -ne "<h1>$title</h1>";
+
+html_cam_feed
+
 echo -ne '<form name="wz_mini_hack_FORM" method="POST" enctype="application/x-www-form-urlencoded"  >'
 
 IFS=$'\n'

SD_ROOT/wz_mini/www/cgi-bin/jpeg.cgi

@@ -0,0 +1,3 @@
+#!/bin/sh
+cmd jpeg 0
+

SD_ROOT/wz_mini/www/cgi-bin/wz_mini_web.css

@@ -1,6 +1,17 @@
-.ii_info {
+BODY {
+ --feed_ratio: 2.5;
+}
+H1 {
+ background-color:blue;
+ color:white;
+ height:calc(108px * (var(--feed_ratio) - 1));
+ margin-top:0;
+ padding:5px;
+ margin-bottom:108px;
+ width:calc(100% - (192px * var(--feed_ratio)));
+}
+.ii_info_line {
   font-weight:bold;
-  background-color:#ccc;
 }
 .ii {
  width:100%;
@@ -9,7 +20,7 @@
 }
 .ii_key_DIV {
 
- flex:0 0 30vw;
+ flex:0 0 40vw;
  font-weight:bold;
 }
 .ii_value_DIV {
@@ -19,8 +30,12 @@
 .ii_value {
   width:75%;
 }
-.ii_explain {
- width:29vw;
- overflow:scroll;
- max-height:140px;
+.feed {
+  position:absolute;
+  top:10px;
+  right:0px;
+  width:calc(192px * var(--feed_ratio));
+  height:calc(108px * var(--feed_ratio));
+  z-index:10;
 }
+

SD_ROOT/wz_mini/www/index.html

@@ -1,3 +1,10 @@
-<p><strong>wz_mini web server</strong></p>
-<p><br /><a href="cgi-bin/index.cgi">Configuration Editor</a></p>
-<p><a href="car/car.html">Car Interface</a></p>
+<html>
+  <head><title>WZ Mini</title></head>
+  <body>
+  <h1>wz_mini web server</h1>
+    <p><a href="cgi-bin/config.cgi">Configuration Editor</a></p>
+    <p><a href="car/car.html">Car Interface</a></p>
+    <p><a href="cgi-bin/jpeg.cgi">Current Screen</a></p>
+
+  </body>
+</html>