Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
Blance
/
Wyze-Firmware
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

web fixes and improvements (#205)

* updates to config.cgi and jpeg.cgi

* Update config.cgi

* config.cgi: type checks, blank line keep, css
virmaior 3 rokov pred
rodič
3b1561d805
commit
38b0ad69d7
4 zmenil súbory, kde vykonal 280 pridanie a 29 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 77 28
      SD_ROOT/wz_mini/www/cgi-bin/config.cgi
  2. 145 0
      SD_ROOT/wz_mini/www/cgi-bin/config.css
  3. 8 0
      SD_ROOT/wz_mini/www/cgi-bin/numerics.txt
  4. 50 1
      SD_ROOT/wz_mini/www/config.js

+ 77 - 28
SD_ROOT/wz_mini/www/cgi-bin/config.cgi
Zobraziť súbor 

@@ -1,7 +1,8 @@
 
 #!/bin/sh
 
 # This serves a rudimentary webpage based on wz_mini.conf
 
 base_dir=/opt/wz_mini/
 
-hack_ini=/opt/wz_mini/wz_mini.conf
 
+base_hack_ini=/opt/wz_mini/wz_mini.conf
 
+hack_ini=$base_hack_ini
 
 www_dir=/opt/wz_mini/www/cgi-bin/
 
 camver=V3
 
 camfirmware=$(tail -n1 /configs/app.ver | cut -f2 -d=  )
 
@@ -39,7 +40,6 @@ function revert_config
 
 {
 
   mv "$hack_ini" "$hack_ini.old"
 
   mv "$hack_ini.$1" "$hack_ini"
 
-
 
 }
 
 
 
@@ -48,17 +48,33 @@ function revert_menu
 
    echo '<a href="revert" >Revert Menu</a>'
 
    echo '<div class="old_configs">'
 
    echo 'Prior Versions : ' 
-  xuff=0
 
+   xuff=0
 
    while [ "$xuff" -lt 9 ] ; 
    do 
 	xuff=$((xuff + 1))  
         if [[ -f "$1.$xuff" ]] ; then
 
-	    echo '&nbsp;<a href="?action=revert&version='"$xuff"'">'"$xuff</a>"
 
+	    filedate=$(date -r "$1.$xuff" )	
+            class=""
 
+	    if [ "$1.$xuff" = "$2" ];
 
+	    then
 
+               class="current_revert"
 
+            fi
 
+	    echo '<div class="revert_DIV '$class'"><div><a href="?action=show_revert&version='"$xuff"'">'"$xuff </a></div><div> $filedate</div></div>"
 
         fi
 
     done
 
     echo '</div>'
 
 }
 
 
+function version_info
 
+{
 
+ echo "<div id='$1'>"
 
+ echo "<div class='ver_DIV' vertype='Camera'>$camver</div>"
 
+ echo "<div class='ver_DIV' vertype='Camera Firmware'>$camfirmware</div>"
 
+ echo "<div class='ver_DIV' vertype='wz_mini'>$hackver</div>"
 
+ echo "<div class='ver_DIV' vertype='Hostname'> $HOSTNAME</div>"
 
+ echo "</div>"
 
+}
 
+
 
 
 
 if [[ $REQUEST_METHOD = 'GET' ]]; then
 
@@ -78,7 +94,9 @@ if [[ $REQUEST_METHOD = 'GET' ]]; then
 
   if [[ "$GET_action" = "revert"  ]]; then
 
     revert_config "$GET_version"
 
   fi
 
-
 
+  if [[ "$GET_action" = "show_revert" ]]; then
 
+    hack_ini="$hack_ini.$GET_version"
 
+  fi
 
 fi
 
 
 
@@ -104,16 +122,15 @@ if [[ $REQUEST_METHOD = 'POST' ]]; then
 
 
 
   #switch back to going through the config file
 
-  IFS=$'\n'
 
   output="$hack_ini.new"
 
 
   #name our output file
 
-  for ARGUMENT in $(cat $hack_ini) 
-  do
 
+  while IFS= read -r \ARGUMENT; do
 
     #cycle through each line of the current config
 
-
 
     #copy through all comments
 
-    if [[ ${ARGUMENT:0:1} == "#" ]] ; then
 
+    if [ -z "$ARGUMENT" ]; then
 
+       echo -ne "\n" >> $output
 
+    elif [[ ${ARGUMENT:0:1} == "#" ]] ; then
 
        #echo $ARGUMENT $'\n' 
        echo -ne  $ARGUMENT"\n"  >> $output
 
     else
 
@@ -132,7 +149,7 @@ if [[ $REQUEST_METHOD = 'POST' ]]; then
 
       fi
 
 
     fi
 
-  done
 
+  done < $hack_ini
 
 
   shft $hack_ini
 
   mv $output $hack_ini
 
@@ -155,7 +172,14 @@ function documentation_to_html
 
   
 function ini_to_html_free
 
 {
 
-        printf '<div class="ii"><div class="ii_key_DIV">%s</div><div class="ii_value_DIV"><input class="ii_value" type="text" name="%s" value="%s" /></div>' $1 $1  $2
 
+        classes=""
 
+        if [ "$1" =  "USB_DIRECT_MAC_ADDR" ]; then
 
+           classes=" mac_addr"
 
+        fi 
+	if grep -q -wi "$1" 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>'
 
 }
 
@@ -185,16 +209,19 @@ function html_cam_feed
 
 
 
 
-
 
-echo -ne "<html><head><title>$title</title>"
 
+function handle_css
 
+{
 
 echo -ne "<style type=\"text/css\">"
 
-cat wz_mini_web.css
 
+cat config.css
 
 echo -ne '</style>';
 
-echo '<script type="text/javascript" src="/config.js" ></script>'
 
-echo -ne "</head>"
 
+}
 
 
 
+echo -ne "<html><head><title>$title</title>"
 
+handle_css wz_mini_web.css
 
 
+echo '<script type="text/javascript" src="/config.js" ></script>'
 
+echo -ne "</head>"
 
 
 echo -ne '<body>'
 
 echo -ne "<h1>$title</h1>";
 
@@ -208,13 +235,32 @@ fi
 
 
 html_cam_feed
 
 
-echo -ne '<form name="wz_mini_hack_FORM" method="POST" enctype="application/x-www-form-urlencoded"  >'
 
 
-IFS=$'\n'
 
-for ARGUMENT in $(cat $hack_ini)
 
-do
 
-    if [[ ${ARGUMENT:0:1} == "#" ]] ; then
 
- 	echo -ne '<div class="ii_info">'$ARGUMENT'</div>'
 
+if [ $base_hack_ini != $hack_ini ]; then
 
+
 
+  echo '<div><a href="?action=revert&version='$GET_version'">Revert</a> to this version</a></div>'
 
+fi 
+
 
+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 [[ ${ARGUMENT:0:4} == "####" ]]; then
 
+           if [ "$CONFIG_BLOCK" -gt 0 ]; then
 
+	      echo '</div>'
 
+           fi
 
+           CONFIG_BLOCK=$((CONFIG_BLOCK + 1))
 
+	   echo '<div class="ii_block" block_number="'$CONFIG_BLOCK'" >'
 
+	   BTITLE=${ARGUMENT//#/ }
 
+           echo -ne '<div class="ii_block_name">'$BTITLE'</div>'
 
+	else
 
+            echo -ne '<div class="ii_info">'$ARGUMENT'</div>'
 
+	fi
 
     else
 
       KEY=$(echo $ARGUMENT | cut -f1 -d=)
 
       VAL=$(echo $ARGUMENT | cut -f2 -d=)   
@@ -225,17 +271,20 @@ do
 
 	*) ini_to_html_free $KEY $VALUE
 
       esac
 
     fi
 
-done
 
+done < $hack_ini
 
+           if [ "$CONFIG_BLOCK" -gt 0 ]; then
 
+              echo '</div>'
 
+           fi
 
 
-echo -ne '<input type="submit" name="update" value="Update" />'
 
-echo -ne '</form>'
 
 
 
-revert_menu $hack_ini
 
+echo -ne '<input type="submit" name="update" value="Update" />'
 
+echo -ne '</form>'
 
 
 
+revert_menu $base_hack_ini $hack_ini
 
 
-html_cam_feed_js
 
 
+version_info "display_BAR"
 
 
 echo -ne '</body></html>'

+ 145 - 0
SD_ROOT/wz_mini/www/cgi-bin/config.css
Zobraziť súbor 

@@ -0,0 +1,145 @@
 
+BODY {
 
+ --feed_ratio: 2.5;
 
+ --display_bar_height: 20px;
 
+ --border-color: #ccc;
 
+ padding-bottom: var(--display_bar_height);
 
+}
 
+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_block {
 
+  border:3px solid var(--border-color);
 
+  margin-bottom:5px;
 
+  padding:2px;
 
+  border-radius:3px;  
+}
 
+.ii_block_name {
 
+  background-color:var(--border-color);
 
+  text-align:center;
 
+  font-weight:bold;
 
+  color:#fff;
 
+  margin:-2px;
 
+  margin-bottom:3px;
 
+}
 
+.ii_info {
 
+  color:#333;
 
+}
 
+.ii {
 
+ width:100%;
 
+ position:relative;
 
+ display:flex;
 
+}
 
+.ii_key_DIV {
 
+
 
+ flex:0 0 40vw;
 
+ font-weight:bold;
 
+}
 
+.ii_value_DIV {
 
+ flex: 0 0 40vw;
 
+ text-align:right;
 
+}
 
+.ii_value {
 
+  width:75%;
 
+}
 
+.feed {
 
+  position:absolute;
 
+  top:10px;
 
+  right:0px;
 
+  width:calc(192px * var(--feed_ratio));
 
+  height:calc(108px * var(--feed_ratio));
 
+  z-index:10;
 
+}
 
+.ii_explain {
 
+   height:25px;
 
+   overflow:hidden;
 
+   width:25px;
 
+   position:relative;
 
+}
 
+.ii_explain:hover {
 
+    height: auto;
 
+    position: absolute;
 
+    left: 10%;
 
+    width: 80%;
 
+    border-radius: 3px;
 
+    padding: 5px;
 
+    background-color: #ccc;
 
+    z-index: 10;
 
+    border: 3px solid blue;
 
+    font-family: monospace;
 
+    white-space:pre-wrap;
 
+}
 
+.ii_explain:hover PRE {
 
+ white-space:pre-wrap;
 
+}
 
+.ii_explain:hover:after {
 
+  content:"";
 
+  border:none;
 
+  margin:0;
 
+  padding:0;
 
+  width:0;
 
+  height:0;
 
+}
 
+.ii_explain:after {
 
+ color:white;
 
+ content:"?";
 
+ text-align:center;
 
+ background-color:blue;
 
+ border:2px solid #ccc;
 
+ border-radius:3px;
 
+ padding-left:2px;
 
+ padding-right:2px;
 
+ position:absolute;
 
+ left:0;
 
+ top:0;
 
+ width:100%;
 
+ height:100%;
 
+}
 
+
 
+.revert_DIV {
 
+ display:flex;
 
+ width:100%;
 
+}
 
+.revert_DIV DIV:nth-child(1) {
 
+  width:30px;
 
+}
 
+.current_revert {
 
+ background-color:#edf054;
 
+}
 
+
 
+#display_BAR {
 
+  position:fixed;
 
+  bottom:0;
 
+  background-color:blue;
 
+  border-top:1px solid lightblue;
 
+  color:#fff;
 
+  display:flex;
 
+  width:100%;
 
+  height:var(--display_bar_height);
 
+}
 
+#display_BAR DIV {
 
+  padding-right:15px;
 
+}
 
+.ver_DIV {
 
+  padding-left:60px;
 
+  min-width:120px;
 
+  font-family:monospace;
 
+  flex: 1 0 120px;
 
+}
 
+.ver_DIV:before {
 
+  content:attr(vertype);
 
+  font-weight:bold;
 
+  padding-right:10px;
 
+}
 
+.ver_DIV[vertype="wz_mini"] {
 
+  flex:1 0 400px;
 
+}
 
+.fail_val {
 
+ background-color:#fcc;
 
+}

+ 8 - 0
SD_ROOT/wz_mini/www/cgi-bin/numerics.txt
Zobraziť súbor 

@@ -0,0 +1,8 @@
 
+WEB_CAM_BIT_RATE
 
+WEB_CAM_FPS_RATE
 
+BONDING_LINK_MONITORING_FREQ_MS
 
+BONDING_DOWN_DELAY_MS
 
+BONDING_UP_DELAY_MS
 
+RTSP_PORT
 
+AUDIO_PROMPT_VOLUME
 
+

+ 50 - 1
SD_ROOT/wz_mini/www/config.js
Zobraziť súbor 

@@ -1,4 +1,23 @@
 
 
+var feed_interval_frequency = 1000;
 
+var mac_re = /^[0-9a-f]{1,2}([\.:-])(?:[0-9a-f]{1,2}\1){4}[0-9a-f]{1,2}$/mi;
 
+
 
+// https://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript#14794066
 
+function isInt(value) {
 
+  return !isNaN(value) && 
+         parseInt(Number(value)) == value && 
+         !isNaN(parseInt(value, 10));
 
+}
 
+
 
+function scrollTop()
 
+{
 
+window.scrollTo({
 
+        top: 0,
 
+        behavior: "smooth"
 
+    });
 
+}
 
+
 
+
 
 window.onload = function()
 
 {
 
 	var feed = document.getElementById("current_feed");
 
@@ -6,5 +25,35 @@ window.onload = function()
 
 	{
 
 		feed.src = feed.src.split("&")[0] + "&load=" + new Date().getTime();
 
 	}
 
-	setInterval(update_image, 1000);
 
+	feed_interval = setInterval(update_image, feed_interval_frequency);
 
+	
+
 
+	document.querySelector('[name="update_config"]').addEventListener('submit',
 
+	function(e){
 
+          const mac_addrs = document.getElementsByClassName('mac_addr');
 
+	  for (let i=0; i < mac_addrs.length; i++) {
 
+		mac_addrs[i].classList.remove("fail_val");
 
+		if (mac_addrs[i].value == "") { continue; }
 
+		if (!mac_re.test(mac_addrs[i].value)) {  
+			mac_addrs[i].classList.add("fail_val");
 
+			scrollTop();
 
+			console.log("failed on mac address test for " + mac_addrs[i].name + " for value " + mac_addrs[i].value);
 
+			e.preventDefault(); 
+		}	
+	}
 
+
 
+	  const numerics = document.getElementsByClassName('numeric');
 
+          for (let i=0; i < numerics.length; i++) {
 
+                numerics[i].classList.remove("fail_val");
 
+                if (numerics[i].value == "") { continue; }
 
+		if (!isInt(numerics[i].value)) {
 
+                  numerics[i].classList.add("fail_val");
 
+                  scrollTop();
 
+	          console.log("failed on integer test for " + numerics[i].name);
 
+                  e.preventDefault(); 
+		}
 
+	  }
 
+
 
+	}
 
+	);
 
 }