updates to web (#321)

* add basic support cam configuration file

* multiple cams at 1 frame/sec

can switch which is big.

* Update cam.cgi

SD_ROOT/wz_mini/www/cgi-bin/cam-NIGHT_LED_flag.md

@@ -0,0 +1 @@
+Night Vision IR Lights Far (1=Far, 2=Off or Near)

SD_ROOT/wz_mini/www/cgi-bin/cam-bitRate.md

@@ -0,0 +1 @@
+(60=360p or SD, 120=HD)

SD_ROOT/wz_mini/www/cgi-bin/cam-drawBoxSwitch.md

@@ -0,0 +1 @@
+Motion Box (1=Enabled, 2=Disabled)

SD_ROOT/wz_mini/www/cgi-bin/cam-fps.md

@@ -0,0 +1 @@
+Frames Per Second

SD_ROOT/wz_mini/www/cgi-bin/cam-indicator.md

@@ -0,0 +1 @@
+Camera Status Light (1=Enabled, 2=Disabled)

SD_ROOT/wz_mini/www/cgi-bin/cam-nightVision.md

@@ -0,0 +1 @@
+Night Vision Mode (1=On, 2=Off, 3=Auto)

SD_ROOT/wz_mini/www/cgi-bin/cam-night_cut_thr.md

@@ -0,0 +1 @@
+Nightvision Conditions (1=Dusk, 2=Dark)

SD_ROOT/wz_mini/www/cgi-bin/cam-res.md

@@ -0,0 +1 @@
+(1=SD or HD, 2=360p)

SD_ROOT/wz_mini/www/cgi-bin/cam-timezone.md

@@ -0,0 +1 @@
+Timezone offset from GMT

SD_ROOT/wz_mini/www/cgi-bin/cam-watermark_flag.md

@@ -0,0 +1 @@
+watermark_flag

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

@@ -0,0 +1,256 @@
+#!/bin/sh
+# This serves a rudimentary webpage based on wz_mini.conf
+. /opt/wz_mini/www/cgi-bin/shared.cgi
+
+title="$camver on $camfirmware running wz_mini $hackver as $HOSTNAME"
+updated=false
+
+
+
+
+echo "HTTP/1.1 200"
+echo -e "Content-type: text/html\n\n"
+echo ""
+
+
+die_no_config() 
+{
+if [ -f ${cam_config} ]
+then
+    if [ -s ${cam_config} ]
+    then
+        echo "$cam_config exists and not empty"
+    else
+ echo "$cam_config exists but empty"
+ echo "if you reboot then the camera will revert to defaults or possibly fail "
+ exit
+    fi
+else
+ echo "$cam_config file does  not exist"
+ echo "Maybe they moved the file? or your camera type stores it somewhere else ?"
+ exit 
+fi
+
+}
+
+
+reboot_camera()  {
+    die_no_config
+    reboot_wait=90
+    echo "rebooting camera (refreshing screen in $reboot_wait seconds)"
+    echo '<script type="text/javascript">setTimeout(function(){ document.location.href = "/cgi-bin/cam.cgi"; },'$reboot_wait' * 1000)</script>'
+    handle_css config.css
+    version_info "display_BAR"
+    reboot 
+    exit
+}
+
+shft() {
+    # SE loop did not work -- thanks ash!
+   suff=8 
+   while [ "$suff" -gt 0 ] ;
+    do
+        if [[ -f "$1.$suff" ]] ; then
+            nxt=$((suff + 1))
+            mv -f "$1.$suff" "$1.$nxt"
+        fi
+   suff=$((suff-1))
+   done 
+   mv -f "$1" "$1.1"
+}
+
+
+
+
+
+
+if [[ $REQUEST_METHOD = 'GET' ]]; then
+
+  #since ash does not handle arrays we create variables using eval
+  IFS='&'
+  for PAIR in $QUERY_STRING
+  do
+      K=$(echo $PAIR | cut -f1 -d=)
+      VA=$(echo $PAIR | cut -f2 -d=)
+      eval GET_$K=$VA
+  done
+
+  if [[ "$GET_action" = "reboot" ]];  then
+    reboot_camera
+  fi
+fi
+
+
+#test for post
+if [[ $REQUEST_METHOD = 'POST' ]]; then
+    if [ "$CONTENT_LENGTH" -gt 0 ]; then
+        read -n $CONTENT_LENGTH POST_DATA <&0
+        while read line
+            do eval "echo ${line}"
+        done
+    fi
+
+  #since ash does not handle arrays we create variables using eval
+  IFS='&'
+  for PAIR in $POST_DATA
+  do
+      K=$(echo $PAIR | cut -f1 -d=)
+      VA=$(echo $PAIR | cut -f2 -d=)
+      VB=\"${VA//%3A/:}\"
+      #echo "<div>$K=$VB</div>"
+      eval POST_$K=\"$VB\"
+  done
+
+
+  #switch back to going through the config file
+  output="$cam_config.new"
+
+  #name our output file
+  while IFS= read -r \ARGUMENT; do
+    #cycle through each line of the current config
+    #copy through all comments
+    if [ -z "$ARGUMENT" ]; then
+       echo -ne "\n" >> $output
+    elif [[ ${ARGUMENT:0:1} == "#" ]] ; then
+       #echo $ARGUMENT $'\n' 
+       echo -ne  $ARGUMENT"\n"  >> $output
+    else
+    #for non-comments check to see if we have an entry in the POST data by deciphering the key from the ini file and using eval for our fake array
+        KEY=$(echo $ARGUMENT | cut -f1 -d=)
+	test=$(eval echo \$POST_$KEY)
+	#echo "key was $KEY test was ...   $test <br /> "
+     if [[ "$test" ]]; then
+        #if in the fake array then we use the new value
+	#echo "<div style=\"color:#c00\">matched </div>"
+	echo -ne $KEY=\"$test\""\n"  >> $output
+      else
+        #if not in the fake array we use the current value
+	#echo "<div>key not found</div>"
+	echo -ne $ARGUMENT"\n" >> $output
+      fi
+
+    fi
+  done < $cam_config
+
+  shft $cam_config
+  mv $output $cam_config
+  updated=true
+
+fi
+
+
+
+
+function documentation_to_html
+{
+	fname="$www_dir"'cam-'"$1.md" 
+        if [[ -f "$fname" ]];  then
+                printf '<div class="ii_explain"><pre>'
+                cat "$fname"
+                printf '</pre></div>'
+        fi
+}
+  
+  
+function ini_to_html_free
+{
+        classes=""
+        if [ "$1" =  "USB_DIRECT_MAC_ADDR" ]; then
+           classes=" mac_addr"
+        fi 
+	if grep -q -wi "$1" cam-numerics.txt; then
+	   classes=" numeric"
+	fi
+        printf '<div class="ii"><div class="ii_key_DIV">%s</div><div class="ii_value_DIV"><input class="ii_value'$classes'" type="text" name="%s" value="%s" /></div>' $1 $1  $2
+        documentation_to_html $1
+        printf '</div>'
+}
+       
+function ini_to_html_tf
+{
+        printf '<div class="ii"><div class="ii_key_DIV">%s</div>' $1
+        printf '<div class="ii_value_DIV">'
+        if [[ "$2" == "true" ]]; then
+        printf '<input class="ii_radio" type="radio" name="%s" value="true" checked="checked" /> True &nbsp;' $1
+        printf '<input class="ii_radio" type="radio" name="%s" value="false" /> False &nbsp;' $1
+        else
+        printf '<input class="ii_radio" type="radio" name="%s" value="true" /> True &nbsp;' $1
+        printf '<input class="ii_radio" type="radio" name="%s" value="false" checked="checked" /> False &nbsp;' $1
+        
+        fi
+        printf '</div>'
+        documentation_to_html $1
+        printf '</div>'
+}
+
+#function to handle camera feed
+function html_cam_feed
+{
+	printf '<img id="current_feed" src="/cgi-bin/jpeg.cgi?channel=1" class="feed" />'
+}
+
+
+
+
+echo -ne "<html><head><title>$title</title>"
+handle_css config.css
+
+echo '<script type="text/javascript" src="/config.js" ></script>'
+echo -ne "</head>"
+
+
+echo -ne '<body ip="'$ipaddr'" mac="'$macaddr'"  >'
+echo -ne "<h1>$title</h1>";
+
+
+if [ "$updated" = true ];
+then
+   echo '<div class="message_DIV">configuration file updated. <a href="?action=reboot">Reboot<a/> to use changes. Or <a href="#revert">Revert</a> to a prior configuration</div>';
+
+fi
+
+html_cam_feed
+
+
+echo -ne '<form name="update_config" method="POST" enctype="application/x-www-form-urlencoded"  >'
+
+
+CONFIG_BLOCK=0
+
+while IFS= read -r ARGUMENT; do
+    if [ -z "$ARGUMENT" ] ; then
+	echo -ne "" 
+    elif [[ ${ARGUMENT:0:1} == "[" ]] ; then
+           if [ "$CONFIG_BLOCK" -gt 0 ]; then
+	      echo '</div>'
+           fi
+           CONFIG_BLOCK=$((CONFIG_BLOCK + 1))
+	   BTITLE=${ARGUMENT//#/ }
+           BN=$ARGUMENT
+           echo '<div class="ii_block" block_number="'$CONFIG_BLOCK'" block_name="'$BN'" >'
+           echo -ne '<div class="ii_block_name" >'$BTITLE'</div>'
+    else
+      KEY=$(echo $ARGUMENT | cut -f1 -d=)
+      VAL=$(echo $ARGUMENT | cut -f2 -d=)   
+      VALUE=${VAL//\"/}
+      case "$VALUE" in
+	"true") ini_to_html_tf $KEY $VALUE ;;
+	"false") ini_to_html_tf $KEY $VALUE ;;
+	*) ini_to_html_free $KEY $VALUE
+      esac
+    fi
+done < $cam_config
+           if [ "$CONFIG_BLOCK" -gt 0 ]; then
+              echo '</div>'
+           fi
+
+
+
+echo -ne '<input type="submit" name="update" id="update" value="Update" disabled="disabled" />'
+echo -ne '</form>'
+echo -ne '<button onclick="enable_submit();" >Enable Submit</button>';
+
+
+version_info "display_BAR"
+
+echo -ne '</body></html>'

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

@@ -144,3 +144,13 @@ H1 {
 .fail_val {
  background-color:#fcc;
 }
+.error_title {
+ width:200px;
+ order:0;
+}
+
+.error_message {
+ display:flex;
+ color:red;
+ font-family: monospace;
+}

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

@@ -17,7 +17,7 @@ dmesg_test()
 {
 x=$(dmesg | grep "$1")
 if [ -n "$x" ]; then
-        echo "<div>$2 error found</div>"
+        echo "<div class="error_message"><div class="error_title">$2 error found</div>$x</div>"
 else    
         echo "<div>no $2 error</div>"
 fi
@@ -29,7 +29,7 @@ logread_test()
 x=$(logread | grep "$1")
 
 if [ -n "$x" ]; then
-        echo "<div>$2 error found</div>"
+        echo "<div class="error_message"><div class="error_title">$2 error found</div>$x</div>"
 else
         echo "<div>no $2 error</div>"
 fi

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

@@ -8,9 +8,11 @@ www_dir=/opt/wz_mini/www/cgi-bin/
 if [ -f /opt/wz_mini/tmp/.T31 ]; then
   camtype=T31
   camfirmware=$(tail -n1 /configs/app.ver | cut -f2 -d=  )
+  cam_config="/configs/.user_config"
 elif [ -f /opt/wz_mini/tmp/.T20 ]; then
   camtype=T20
   camfirmware=$(tail -n1 /system/bin/app.ver | cut -f2 -d= )
+  cam_config="/configs//parameters"
 fi
 
 cammodel=$(/opt/wz_mini/etc/init.d/s04model start | grep detected | cut -f1 -d ' ' )
@@ -38,6 +40,7 @@ function version_info
  echo "<div class='ver_DIV' vertype='Firmware'>$camfirmware</div>"
  echo "<div class='ver_DIV' vertype='wz_mini'>$hackver</div>"
  echo "<div class='ver_DIV' vertype='Hostname'> $HOSTNAME</div>"
+ echo '<div class="github_link" ><a style="color:white" href="https://github.com/gtxaspec/wz_mini_hacks">Project</a></div>';
  echo "</div>"
 }
 

SD_ROOT/wz_mini/www/config.js

@@ -56,6 +56,13 @@ function compose_rtsp_block(stype)
   vb.appendChild(url_block);
 }
 
+function enable_submit()
+{
+	alert("no guarantees at all on this one. Change values at your own risk");
+       document.getElementById("update").disabled = false;
+
+}
+
 window.onload = function()
 {
 	var feed = document.getElementById("current_feed");

SD_ROOT/wz_mini/www/index.html

@@ -1,10 +1,14 @@
 <html>
-  <head><title>WZ Mini</title></head>
+  <head><title>WZ Mini Web Tools</title></head>
   <body>
   <h1>wz_mini web server</h1>
-    <p><a href="cgi-bin/config.cgi">Configuration Editor</a></p>
+  <a href="https://github.com/gtxaspec/wz_mini_hacks">wz_mini GitHub</a>
+
+    <p><a href="cgi-bin/config.cgi">Wz Mini Configuration Editor</a></p>
+    <p><a href="cgi-bin/cam.cgi">Camera Configuration</a></p>
     <p><a href="car/car.html">Car Interface</a></p>
     <p><a href="cgi-bin/jpeg.cgi">Current Screen</a></p>
+    <p><a href="multicam.html">Multi-Cam Viewer</a></p>
     <p><a href="cgi-bin/diagnostics.cgi">Diagnostics</a></p>
   </body>
 </html>

SD_ROOT/wz_mini/www/multicam.html

@@ -0,0 +1,164 @@
+<html>
+<head>
+<title>Multicam</title>
+<meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0">
+<style type="text/css">
+BODY {
+  --cc_bar_height: 20px;
+}
+.za_images {
+display:flex;
+flex-direction:column;
+flex-wrap:wrap;
+height:calc(100% - var(--cc_bar_height));
+width:100%;
+background-color:#cff;
+}
+.za_images .cam_DIV  {
+ border:2px solid blue;
+ border-radius:5px;
+ padding:2px;
+ margin:1px;
+ height:calc(21% - 10px);
+ text-align:center;
+ width:17%;
+}
+.za_images .first_CAM  {
+  flex:0 0 calc(100% - 40px);
+  width:75%;
+  order:0;
+}
+.za_images .first_CAM 
+{
+  width:calc(100% - 17% - 16px);
+}
+
+.za_images IMG {
+ max-height:100%;
+ max-width:100%;
+}
+.cam_control {
+ width:calc(100% - 18px);
+ position:absolute;
+ bottom:0;
+ height:var(--cc_bar_height);
+ margin:1px;
+ padding:2px;
+ background-color:lightgreen;
+ border-radius:5px;
+ border:2px solid green;
+}
+.cam_control BUTTON {
+ width:calc(40% - 4px);
+}
+.cam_control INPUT {
+ width:calc(20% - 4px);
+}
+
+@media (orientation: portrait) and (max-device-width: 450px) {
+  .cam_control {
+    top:0;
+   }
+  .za_images {
+    flex-direction:row;
+    margin-top:30px;
+    padding-top:20px;
+  } 
+  .za_images .cam_DIV {
+      width:calc(50% - 10px);
+   } 
+  .za_images .first_CAM {
+    width:calc(100% - 3px) !important;
+    flex:0 0 calc(100% - 5px) !important;
+    height:auto !important;
+    max-height:30%;
+  }
+}
+
+</style>
+<script type="text/javascript">
+const cam_tool = {
+  feed_interval_frequency : 500,
+  feed_interval : false,
+  tick: 0,
+  feeds : false,
+  divs : false,
+  click : function() {
+           for (var i = 0; i < cam_tool.divs.length; i++) {
+                        cam_tool.divs[i].classList.remove("first_CAM");
+                        cam_tool.divs[i].style.order = parseInt(cam_tool.divs[i].getAttribute("cam")) + 1;
+                }
+       this.classList.add("first_CAM");
+       this.style.order = 0; 
+ },
+  init : function() {
+        cam_tool.divs = document.getElementsByClassName('cam_DIV');
+        	for (var i = 0; i < cam_tool.divs.length; i++) {
+           	     cam_tool.divs[i].addEventListener('click', cam_tool.click); 
+		}
+
+        cam_tool.feeds = document.getElementsByClassName('cam_img');
+        cam_tool.divs[0].click();
+        cam_tool.start();
+
+
+  },
+  update: function() {
+	if (((cam_tool.tick *10)  % cam_tool.feed_interval_frequency) == 0)  { 
+                for (var i= 0; i < cam_tool.feeds.length; i++) {
+                        cam_tool.feeds[i].src = cam_tool.feeds[i].src.split("&")[0] + "&load=" + new Date().getTime();
+                }
+	}
+	cam_tool.tick++;
+  },
+  update_freq(event) {
+	cam_tool.feed_interval_frequency = event.target.value;	
+  },
+  pause: function() {
+	clearInterval(cam_tool.feed_interval);
+	cam_tool.tick = 0;
+  },
+  start : function() {
+                if (cam_tool.feed_interval) { cam_tool.pause(); }
+                cam_tool.feed_interval = setInterval(cam_tool.update, 10);
+  },
+  compose:function(cam_count,url) {
+    var zam =  document.getElementById("za_images"); 
+    for (var i = 1; i <= cam_count; i++) 
+     { 	
+	var id =  document.createElement('DIV');
+	id.innerHTML = '<img class="cam_img" src="' + url.replace('%d',i) + '">';
+	id.setAttribute('cam',i);
+	id.className = "cam_DIV";
+	if (i == 1) {  id.className += " first_CAM";  }
+	zam.appendChild(id);
+     }
+  }
+  
+}
+
+
+window.onload = function()
+{
+  cam_tool.compose(5,'/z%d/cgi-bin/jpeg.cgi?channel=0');
+  cam_tool.init();
+};
+</script>
+</head>
+<body>
+<div class="za_images" id="za_images" ></div>
+<div class="cam_control" >
+        <button onclick="cam_tool.start();">Live</button>
+        <button onclick="cam_tool.pause();">Pause</button>
+	<input type="number" onclick="cam_tool.update_freq(event);" min="50" value="500" />
+</div>
+
+<video width="1" height="1" loop style="position:absolute;top:0;right:0" >
+<source src="/z1/cgi-bin/jpeg.cgi?channel=0" type="image/jpeg"> 
+
+Your browser does not support the video tag.
+
+</video> 
+
+</body>
+</html>