From 3e995bcc54ee4e01b93da795f4465a391aa84e2f Mon Sep 17 00:00:00 2001
From: Mr-Dave <MotionMrDave@gmail.com>
Date: Wed, 30 Oct 2024 15:54:33 -0600
Subject: [PATCH] Revise log display and processes on webcontrol

---
 doc/samplepage.html | 601 ++++++++++++++++++++++++++++++++++++--------
 src/logger.cpp      |   2 -
 src/motionplus.cpp  |  14 +-
 src/webu_ans.cpp    |  52 +++-
 src/webu_html.cpp   |  20 +-
 src/webu_json.cpp   |   9 +-
 6 files changed, 557 insertions(+), 141 deletions(-)
diff --git a/doc/samplepage.html b/doc/samplepage.html
index f16cefa..14ec804 100644
--- a/doc/samplepage.html
+++ b/doc/samplepage.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en"><head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-<meta charset="UTF-8">
+<html lang='en'>
+<head>
+<meta charset='UTF-8'>
 <title>MotionPlusSamplePage</title>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name='viewport' content='width=device-width, initial-scale=1'>
   <style>
     * {
       margin: 0;
@@ -234,57 +234,85 @@
       background-color: transparent;
       text-decoration: none;
     }
+   .cls_log {
+     background-color: transparent;
+     color: white;
+     text-align: center;
+     margin-top: 0rem;
+     margin-bottom: 0rem;
+     font-weight: normal;
+     font-size: 0.90rem;
+   }
+   .cls_log textarea {
+     overflow-y: scroll;
+     background-color: lightgrey;
+     padding: 0rem;
+     height: 10rem;
+     width: 50rem;
+     text-align: left;
+   }
   </style>
 </head>
 
-<body class="body" onload="initform()">
-  <div id="divnav_main" class="sidenav" style="width: 10rem;">
-    <a class="closebtn" onclick="nav_close()">X</a>
+<body class='body' onload='initform()'>
+  <div id="divnav_main" class="sidenav">
+    <a class='closebtn' onclick='nav_close()'>X</a>
     <div id="divnav_version">
       <!-- Filled in by script -->
     </div>
-    <button onclick="display_cameras()" id="cam_btn" class="dropbtn">Cameras</button>
-    <div id="divnav_cam" class="dropdown-content" style="display: none;">  
-    <!-- Filled in by script -->
+    <button onclick='display_cameras()'  id='cam_btn' class='dropbtn'>Cameras</button>
+    <div id='divnav_cam' class='dropdown-content'>
+      <!-- Filled in by script -->
     </div>
-    <button onclick="display_actions()" id="actions_btn" class="dropbtn">Actions</button>
-    <div id="divnav_actions" class="dropdown-content" style="display: none;">
-    <!-- Filled in by script -->
+    <button onclick='display_actions()'  id='actions_btn' class='dropbtn'>Actions</button>
+    <div id='divnav_actions' class='dropdown-content'>
+      <!-- Filled in by script -->
     </div>
-    <button onclick="display_config()" id="cfg_btn" class="dropbtn">
+    <button
+      onclick='display_config()' id='cfg_btn' class='dropbtn'>
       Configuration
     </button>
-    <div id="divnav_config" class="dropdown-content" style="display: block;">
-    <!-- Filled in by script -->
+    <div id='divnav_config' class='dropdown-content'>
+      <!-- Filled in by script -->
     </div>
-    <button onclick="display_movies()" id="mov_btn" class="dropbtn">
+    <button
+      onclick='display_movies()' id='mov_btn' class='dropbtn'>
       Recordings
     </button>
-    <div id="divnav_movies" class="dropdown-content" style="display: none;">
-    <!-- Filled in by script -->
+    <div id='divnav_movies' class='dropdown-content'>
+      <!-- Filled in by script -->
     </div>
   </div>
-  <div id="divmain" style="margin-left: 10rem;">
-    <button id="menu_btn" onclick="nav_open();" style="display: none;" class="menubtn">|||</button>
+
+  <div id='divmain' style='margin-left:10rem' >
+    <button id='menu_btn'
+      onclick='nav_open();'
+      style='display:none'
+      class='menubtn'>|||</button>
     <p></p>
-    <div id="div_cam" style="display: none;">
-    <!-- Filled in by script -->
+    <div id='div_cam' >
+      <!-- Filled in by script -->
     </div>
 
-    <div id="div_config" style="display: inline;">
-    <!-- Filled in by script -->
+    <div id='div_config'>
+      <!-- Filled in by script -->
     </div>
 
-    <div id="div_movies" class="cls_movies" style="display: none;">
+    <div id='div_movies' class='cls_movies'>
       <!-- Filled in by script -->
     </div>
 
+    <div id='div_log' class='cls_log' style='display:none' >
+      <textarea id='txta_log' ></textarea>
+    </div>
+
   </div>
 
   <script>
     var pData, pMovies, pHostFull;
-    var gIndxScan, gIndxCam, gGetImgs;
+    var gIndxScan, gIndxCam, gGetImgs, gLogNbr;
     var pic_url = Array(4);
+    var log_timer;
     var cams_scan_timer, cams_all_timer, cams_one_timer;
 
     function nav_open() {
@@ -304,7 +332,12 @@
       var request = new XMLHttpRequest();
       var xmlhttp = new XMLHttpRequest();
       var camid = document.getElementsByName('camdrop')[0].value;
-      var pCfg = pData['configuration']['cam'+camid];
+
+      if (camid == 0) {
+        var pCfg = pData['configuration']['default'];
+      } else {
+        var pCfg = pData['configuration']['cam'+camid];
+      }
 
       xmlhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
@@ -425,6 +458,14 @@
         }
       }
 
+      if (gIndxCam == -1) {
+        document.getElementById('cfgpic').src =
+          pHostFull+"/0/mjpg/stream";
+      } else {
+        document.getElementById('cfgpic').src =
+          pData['cameras'][gIndxCam]['url'] + "mjpg/stream" ;
+      }
+
     }
 
     function config_hideall() {
@@ -451,7 +492,7 @@
         camid = pData['cameras'][gIndxCam]['id'];
       }
 
-      return camid; 
+      return camid;
     }
 
     function assign_version() {
@@ -508,6 +549,53 @@
     function assign_actions() {
       var html_actions = "\n";
       html_actions += "  ";
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'eventstart');\">";
+      html_actions += "Start Event</a>\n";
+
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'eventend');\">";
+      html_actions += "End Event</a>\n";
+
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'snapshot');\">";
+      html_actions += "Snapshot</a>\n";
+
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'pause');\">";
+      html_actions += "Pause</a>\n";
+
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'unpause');\">";
+      html_actions += "Unpause</a>\n";
+
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'restart');\">";
+      html_actions += "Start/Restart</a>\n";
+
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'stop');\">";
+      html_actions += "Stop</a>\n";
+
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'config_write');\">";
+      html_actions += "Save Config</a>\n";
+
+      html_actions += "<a onclick=\"send_reload(";
+      html_actions += "'camera_add');\">";
+      html_actions += "Add Camera</a>\n";
+
+      html_actions += "<a onclick=\"send_reload(";
+      html_actions += "'camera_delete');\">";
+      html_actions += "Delete Camera</a>\n";
+
+      html_actions += "<a onclick=\"send_action(";
+      html_actions += "'action_user');\">";
+      html_actions += "User Action</a>\n";
+
+      html_actions += "<a onclick=\"log_showhide();\">";
+      html_actions += "Show/hide log</a>\n";
+
       document.getElementById("divnav_actions").innerHTML = html_actions;
 
       return;
@@ -604,10 +692,11 @@
       html_cfg += "<div id='div_";
       html_cfg += pCat[jcat]["name"];
       html_cfg += "' style='display:none' class='cls_config'>\n";
-      html_cfg += "<h3>";
+      html_cfg += "<table style='float: left'>";
+      html_cfg += "<tr><th colspan='2'>";
       html_cfg += pCat[jcat]["display"];
-      html_cfg += " Parameters</h3>\n";
-      html_cfg += "<table><tr> <td><label for 'camdrop'>camera</label></td>\n";
+      html_cfg += " Parameters</th></tr>\n";
+      html_cfg += "<tr><td><label for 'camdrop'>camera</label></td>\n";
       html_cfg += "<td class='cls_camdrop'>";
       html_cfg += "<select class='cls_drop' ";
       html_cfg += "onchange='dropchange_cam.call(this)' ";
@@ -617,7 +706,7 @@
 
       for (jkey in pCfg) {
         if (pCfg[jkey]["category"] == jcat) {
-          html_cfg += assign_config_item(jkey); 
+          html_cfg += assign_config_item(jkey);
         }
       }
       html_cfg += "<tr><td><input type='hidden' name='trailer' value='null'></td>\n";
@@ -639,6 +728,12 @@
         html_cfg += assign_config_cat(jcat);
       }
 
+      html_cfg += "<br><br><br>";
+      html_cfg += "<a><img id='cfgpic'";
+      html_cfg += "' src=" + pHostFull + "/0/mjpg/stream";
+      html_cfg += " border=0 width=45%></a>\n";
+      html_cfg += "<div style='clear: both'></div>\n;"
+
       document.getElementById("div_config").innerHTML = html_cfg;
 
     }
@@ -655,6 +750,7 @@
           gIndxCam  = -1;
           gGetImgs  = 1;
           gIndxScan = -1;
+          gLogNbr = 0;
 
           assign_config();
           assign_version();
@@ -689,7 +785,7 @@
       } else {
         document.getElementById('divnav_config').style.display = 'block';
       }
-      gIndxScan = -1; 
+      gIndxScan = -1;
       cams_timer_stop();
     }
 
@@ -702,7 +798,7 @@
       } else {
         document.getElementById('divnav_movies').style.display = 'block';
       }
-      gIndxScan = -1; 
+      gIndxScan = -1;
       cams_timer_stop();
     }
 
@@ -714,7 +810,7 @@
       } else {
         document.getElementById('divnav_actions').style.display = 'block';
       }
-      gIndxScan = -1; 
+      gIndxScan = -1;
     }
 
     function camera_buttons_ptz() {
@@ -788,57 +884,73 @@
       var indx, camcnt;
       camcnt = pData['cameras']['count'];
       for (indx=0; indx<camcnt; indx++) {
-        if (document.getElementById('pic'+indx) != null) { 
-          document.getElementById('pic'+indx).src = ''; 
+        if (document.getElementById('pic'+indx) != null) {
+          document.getElementById('pic'+indx).src = '';
         }
       }
-    } 
+      document.getElementById('cfgpic').src = '';
+    }
 
     function cams_all_click() {
 
       var html_preview = "";
-      var indx;
+      var indx, chk;
       var camid;
 
       config_hideall();
       cams_timer_stop();
       gIndxCam = -1;
-      gIndxScan = -1; 
+      gIndxScan = -1;
 
       var camcnt = pData['cameras']['count'];
       html_preview += "</table>";
+      chk = 0;
       for (indx=0; indx<camcnt; indx++) {
         camid = pData['cameras'][indx].id;
-        if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
-          html_preview += "<a><img id='pic" + indx + "' src="
-          html_preview += pData['cameras'][indx]['url'];
-          html_preview += "static/stream/t" + new Date().getTime();
-          html_preview += " onclick='cams_one_click(" + indx + ")' ";
-          html_preview += " border=0 width=";
-          html_preview += pData['configuration']['cam'+camid].stream_preview_scale.value;
-          html_preview += "%></a>\n";
-          if (pData['configuration']['cam'+camid].stream_preview_newline.value == true) {
-            html_preview += "<br>\n";
-          }
-        } else { 
-          html_preview += "<a><img id='pic" + indx + "' src="
-          html_preview += pData['cameras'][indx]['url'];
-          html_preview += "mjpg/stream" ;
-          html_preview += " onclick='cams_one_click(" + indx + ")' ";
-          html_preview += " border=0 width=";
-          html_preview += pData['configuration']['cam'+camid].stream_preview_scale.value;
-          html_preview += "%></a>\n";
-          if (pData['configuration']['cam'+camid].stream_preview_newline.value == true) {
-            html_preview += "<br>\n";
+        if (pData['configuration']['cam'+camid].stream_preview_method.value == 'combined') {
+          chk = 1;
+        }
+      }
+      if (chk == 0) {
+        for (indx=0; indx<camcnt; indx++) {
+          camid = pData['cameras'][indx].id;
+          if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
+            html_preview += "<a><img id='pic" + indx + "' src="
+            html_preview += pData['cameras'][indx]['url'];
+            html_preview += "static/stream/t" + new Date().getTime();
+            html_preview += " onclick='cams_one_click(" + indx + ")' ";
+            html_preview += " border=0 width=";
+            html_preview += pData['configuration']['cam'+camid].stream_preview_scale.value;
+            html_preview += "%></a>\n";
+            if (pData['configuration']['cam'+camid].stream_preview_newline.value == true) {
+              html_preview += "<br>\n";
+            }
+          } else {
+            html_preview += "<a><img id='pic" + indx + "' src="
+            html_preview += pData['cameras'][indx]['url'];
+            html_preview += "mjpg/stream" ;
+            html_preview += " onclick='cams_one_click(" + indx + ")' ";
+            html_preview += " border=0 width=";
+            html_preview += pData['configuration']['cam'+camid].stream_preview_scale.value;
+            html_preview += "%></a>\n";
+            if (pData['configuration']['cam'+camid].stream_preview_newline.value == true) {
+              html_preview += "<br>\n";
+            }
           }
-        } 
+        }
+      } else {
+        html_preview += "<a><img id='pic" + indx + "' src="
+        html_preview += pHostFull;
+        html_preview += "/0/mjpg/stream" ;
+        html_preview += " border=0 width=95";
+        html_preview += "%></a>\n";
       }
       document.getElementById('div_config').style.display='none';
       document.getElementById('div_movies').style.display = 'none';
       cams_reset();
       document.getElementById('div_cam').style.display='block';
       document.getElementById('div_cam').innerHTML = html_preview;
-      cams_all_timer = setInterval(cams_all_fnc, 2000);
+      cams_all_timer = setInterval(cams_all_fnc, 1000);
 
   }
 
@@ -851,7 +963,7 @@
       cams_timer_stop();
       gIndxCam = index_cam;
 
-      gIndxScan = -1; 
+      gIndxScan = -1;
 
       if (gIndxCam == -1 ) {
         return;
@@ -867,7 +979,7 @@
         html_preview += pData['cameras'][gIndxCam]['url'];
         html_preview += "static/stream/t" + new Date().getTime();
         html_preview += " border=0 width=95%></a>\n";
-      } else { 
+      } else {
         html_preview += "<a><img id='pic" + gIndxCam + "' src=";
         html_preview += pData['cameras'][gIndxCam]['url'];
         html_preview += "mjpg/stream" ;
@@ -889,8 +1001,8 @@
 
       cams_timer_stop();
 
-      gIndxCam = -1; 
-      gIndxScan = 0; 
+      gIndxCam = -1;
+      gIndxScan = 0;
 
       cams_scan_timer = setInterval(cams_scan_fnc, 5);
     }
@@ -912,40 +1024,18 @@
       }
     }
 
-     function cams_img_onload(camindx, indx) {
-      document.getElementById('pic'+camindx).src = pic_url[indx];
-      pic_url[indx] = '';
-    }
-
-    function cams_all_fnc () {
-      if (gGetImgs == 1) {
+     function cams_all_fnc () {
+      var previndx = gGetImgs;
+      gGetImgs++;
+      if (gGetImgs >= pData['cameras']['count']) {
         gGetImgs = 0;
-        var camcnt = pData['cameras']['count'];
-        var camindx = 0;
-        var indx;
-        var img   = new Array(4);
-        var maxchk = 1;
-        for (indx = 0; indx <= 3; indx++) {
-          pic_url[indx] = '';
-          img[indx] = new Image();
-        }
-        while ((camindx < camcnt) && (maxchk < 10)) {
-          maxchk++;
-          camid = pData['cameras'][camindx]['id'];
-          if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
-            for (indx = 0; indx <= 3; indx++) {
-               if ((pic_url[indx] == '') && (camindx < camcnt)) {
-                 pic_url[indx] = pData['cameras'][camindx]['url'] + "static/stream/t" + new Date().getTime();
-                 img[indx].onload = cams_img_onload(camindx, indx);
-                 img[indx].src = pic_url[indx];
-                 camindx++;
-               }
-            }
-          } else {
-            camindx++;
-          }
-        }
-        gGetImgs = 1;
+      }
+      camid = pData['cameras'][gGetImgs]['id'];
+      if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
+        document.getElementById('pic'+previndx).src =
+          pData['cameras'][previndx]['url'] + "static/stream/t" + new Date().getTime();
+        document.getElementById('pic'+gGetImgs).src =
+          pData['cameras'][gGetImgs]['url'] + "mjpg/stream";
       }
     }
 
@@ -962,14 +1052,14 @@
 
       if(gIndxScan == (camcnt-1)) {
         gIndxScan = 0;
-      } else { 
+      } else {
         gIndxScan++;
       }
 
       camid = pData['cameras'][gIndxScan]['id'];
       clearInterval(cams_scan_timer);
       cams_scan_timer = setInterval(cams_scan_fnc,
-        pData['configuration']['cam'+camid].stream_scan_time.value * 1000 
+        pData['configuration']['cam'+camid].stream_scan_time.value * 1000
       );
       html_preview += "<a><img id='pic0' src="
       html_preview += pData['cameras'][gIndxScan]['url'];
@@ -1063,12 +1153,8 @@
     function movies_click(index_cam) {
       var camid, indx, camcnt, uri;
 
-      if (gIndxCam == -1 ) {
-        return;
-      }
-
       gIndxCam = index_cam;
-      gIndxScan = -1; 
+      gIndxScan = -1;
       camid = assign_camid();
       uri = pHostFull+'/'+camid+'/movies.json';
 
@@ -1085,8 +1171,303 @@
       xmlhttp.send();
     }
 
-  </script>
+    function log_display() {
+      var itm, msg, nbr, indx, txtalog;
+      txtalog = document.getElementById('txta_log').value;
+      for (indx = 0; indx < 1000; indx++) {
+        itm = pLog[indx];
+        if (typeof(itm) != 'undefined') {
+          msg = pLog[indx]['logmsg'];
+          if (typeof(msg) != 'undefined') {
+            gLogNbr = pLog[indx]['lognbr'];
+            if (txtalog.length > 2000) {
+              txtalog = txtalog.substring(txtalog.length - 2000);
+              txtalog = txtalog.substring(txtalog.search('\n'));
+            }
+            txtalog += '\n' + msg;
+          }
+        }
+      }
+      document.getElementById('txta_log').enabled = true;
+      document.getElementById('txta_log').value = txtalog;
+      document.getElementById('txta_log').scrollTop =
+        document.getElementById('txta_log').scrollHeight;
+      document.getElementById('txta_log').enabled = false;
+    }
 
+    function log_get() {
+      var xmlhttp = new XMLHttpRequest();
+      xmlhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+          pLog = JSON.parse(this.responseText);
+          log_display();
+        }
+      };
+      xmlhttp.open('GET', pHostFull+'/0/log/'+ gLogNbr);
+      xmlhttp.send();
+    }
 
+    function log_showhide() {
+      if (document.getElementById('div_log').style.display == 'none') {
+        document.getElementById('div_log').style.display='block';
+        document.getElementById('txta_log').value = '';
+        log_timer = setInterval(log_get, 2000);
+      } else {
+        document.getElementById('div_log').style.display='none';
+        document.getElementById('txta_log').value = '';
+        clearInterval(log_timer);
+      }
+    }
 
-</body></html>
\ No newline at end of file
+  </script>
+
+</body>
+</html>
+<style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      padding: 0;
+      margin: 0;
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 1rem;
+      line-height: 1;
+      color: #606c71;
+      background-color: #159957;
+      background-image: linear-gradient(120deg, #155799, #159957);
+      margin-left:0.5% ;
+      margin-right:0.5% ;
+      width: device-width ;
+    }
+    .page-header {
+      color: #fff;
+      text-align: center;
+      margin-top: 0rem;
+      margin-bottom: 0rem;
+      font-weight: normal;
+    }
+    .page-header h3 {
+      height: 2rem;
+      padding: 0;
+      margin: 1rem;
+      border: 0;
+    }
+    h3 {
+      margin-left: 10rem;
+    }
+    .header-right{
+      float: right;
+      color: white;
+    }
+    .header-center {
+      text-align: center;
+      color: white;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
+    .border {
+      border-width: 1rem;
+      border-color: white;
+      border-style: solid;
+    }
+    .sidenav {
+      height: 100%;
+      width: 10rem;
+      position: fixed;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      background-color: lightgrey;
+      overflow-x: hidden;
+      overflow: auto;
+    }
+    .sidenav a, .dropbtn {
+      padding: 0.5rem 0rem 0.5em 1rem;
+      text-decoration: none;
+      font-size: 1rem;
+      display: block;
+      border: none;
+      background: none;
+      width:90%;
+      text-align: left;
+      cursor: pointer;
+      outline: none;
+      color: black;
+      background-color: lightgray;
+    }
+    .sidenav a:hover, .dropbtn:hover {
+      background-color: #555;
+      color: white;
+    }
+    .sidenav .closebtn {
+      color: black;
+      top: 0;
+      margin-left: 80%;
+      width: 1rem;
+      font-size: 1rem;
+      background-color: lightgray;
+    }
+    .sidenav .closebtn:hover {
+      background-color: lightgray;
+      color: white;
+    }
+    .menubtn {
+      top: 0;
+      width: 1rem;
+      margin-left: 0.5rem;
+      margin-bottom: 0.25rem;
+      font-size: 1.5rem;
+      color:black;
+      transform: rotate(90deg);
+      -webkit-transform: rotate(90deg);
+      background-color: transparent;
+      border-color: transparent;
+    }
+    .menubtn:hover {
+      color: white;
+    }
+    .dropdown-content {
+      display: none;
+      background-color:lightgray;
+      padding-left: 1rem;
+    }
+    .actionbtn {
+      padding: 0.25rem;
+      text-decoration: none;
+      font-size: 0.5rem;
+      display: block;
+      border: none;
+      background: none;
+      width: 3rem;
+      text-align: center;
+      cursor: pointer;
+      outline: none;
+      color: black;
+      background-color: lightgray;
+    }
+    .cls_config {
+      background-color: #000000;
+      color: #fff;
+      text-align: center;
+      margin-top: 0rem;
+      margin-bottom: 0rem;
+      font-weight: normal;
+      font-size: 0.90rem;
+    }
+    .cls_config table {
+      display: table;
+      border-spacing: 1rem;
+      margin: auto;
+    }
+    .cls_config label {
+      padding: 0rem;
+      text-align: right;
+      width: 10rem;
+      height: 2.5rem;
+    }
+    .cls_config textarea {
+      margin: auto;
+      text-align: center;
+      width: 15.5rem;
+      height: 2.5rem;
+    }
+    .cls_button {
+      width: 10rem;
+      height: 2rem;
+      padding: 0rem;
+    }
+    .cls_drop {
+      padding: 0rem;
+      text-align: right;
+      width: 10rem;
+      height: 2.25rem;
+    }
+    .cls_text {
+      padding: 0rem;
+      width: 10em;
+      text-align: right;
+    }
+    .cls_text_nbr {
+      padding: 0rem;
+      width: 10rem;
+      text-align: right;
+    }
+    .cls_text_wide {
+      padding: 0rem;
+      height: 3rem;
+      width: 20rem;
+      text-align: right;
+    }
+    .cls_camdrop {
+      /* Only used to identify all the cam drops on page */
+    }
+    .arrow {
+      border: solid black;
+      border-width: 0 1rem 1rem 0;
+      border: double black;
+      border-width: 0 0.75rem 0.75rem 0;
+      display: inline-block;
+      padding: 1rem;
+      font-size: 0.5rem;
+    }
+    .right {
+      transform: rotate(-45deg);
+      -webkit-transform: rotate(-45deg);
+    }
+    .left {
+      transform: rotate(135deg);
+      -webkit-transform: rotate(135deg);
+    }
+    .up {
+      transform: rotate(-135deg);
+      -webkit-transform: rotate(-135deg);
+    }
+    .down {
+      transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+    }
+    .zoombtn {
+      font-size:1.25rem;
+      width: 3rem;
+      height: 1.5rem;
+      margin: 0;
+    }
+    .cls_movies {
+      background-color: transparent;
+      color: white;
+      text-align: center;
+      margin-top: 0rem;
+      margin-bottom: 0rem;
+      font-weight: normal;
+      font-size: 0.90rem;
+    }
+    a:link {
+      color: white;
+      background-color: transparent;
+      text-decoration: none;
+    }
+    a:visited {
+      color: black;
+      background-color: transparent;
+      text-decoration: none;
+    }
+   .cls_log {
+     background-color: transparent;
+     color: white;
+     text-align: center;
+     margin-top: 0rem;
+     margin-bottom: 0rem;
+     font-weight: normal;
+     font-size: 0.90rem;
+   }
+   .cls_log textarea {
+     overflow-y: scroll;
+     background-color: lightgrey;
+     padding: 0rem;
+     height: 10rem;
+     width: 50rem;
+     text-align: left;
+   }
+  </style>
diff --git a/src/logger.cpp b/src/logger.cpp
index d5c7bb7..e53ff11 100644
--- a/src/logger.cpp
+++ b/src/logger.cpp
@@ -277,8 +277,6 @@ void cls_log::write_msg(int loglvl, int msg_type, int flgerr, int flgfnc, ...)
 void cls_log::shutdown()
 {
     if (log_file_ptr != nullptr) {
-        MOTPLS_LOG(NTC, TYPE_ALL, NO_ERRNO, "Closing log_file (%s)."
-            , log_file_name.c_str());
         myfclose(log_file_ptr);
         log_file_ptr = nullptr;
     }
diff --git a/src/motionplus.cpp b/src/motionplus.cpp
index e78d266..e01bfed 100644
--- a/src/motionplus.cpp
+++ b/src/motionplus.cpp
@@ -414,24 +414,24 @@ void cls_motapp::check_restart()
     std::string parm_pid_org, parm_pid_new;
 
     if (motlog->restart == true) {
+        MOTPLS_LOG(NTC, TYPE_ALL, NO_ERRNO, _("Restarting log"));
+
         cfg->edit_get("pid_file",parm_pid_org, PARM_CAT_00);
         conf_src->edit_get("pid_file",parm_pid_new, PARM_CAT_00);
         if (parm_pid_org != parm_pid_new) {
             pid_remove();
         }
 
-        MOTPLS_LOG(NTC, TYPE_ALL, NO_ERRNO, _("Restarting log"));
-        pthread_mutex_lock(&motlog->mutex_log);
-            motlog->shutdown();
-            cfg->parms_copy(conf_src, PARM_CAT_00);
-            motlog->startup();
-        pthread_mutex_unlock(&motlog->mutex_log);
+        motlog->shutdown();
+        cfg->parms_copy(conf_src, PARM_CAT_00);
+        motlog->startup();
 
         mytranslate_text("",cfg->native_language);
         if (parm_pid_org != parm_pid_new) {
             pid_write();
         }
         motlog->restart = false;
+        MOTPLS_LOG(NTC, TYPE_ALL, NO_ERRNO, _("Restarted log"));
     }
 
     if (dbse->restart == true) {
@@ -442,6 +442,7 @@ void cls_motapp::check_restart()
             dbse->startup();
         pthread_mutex_lock(&dbse->mutex_dbse);
         dbse->restart = false;
+        MOTPLS_LOG(NTC, TYPE_ALL, NO_ERRNO, _("Restarted database"));
     }
 
     if (webu->restart == true) {
@@ -450,6 +451,7 @@ void cls_motapp::check_restart()
         cfg->parms_copy(conf_src, PARM_CAT_13);
         webu->startup();
         webu->restart = false;
+        MOTPLS_LOG(NTC, TYPE_ALL, NO_ERRNO, _("Restarted webcontrol"));
     }
 
 }
diff --git a/src/webu_ans.cpp b/src/webu_ans.cpp
index 98781e5..ef8bd89 100644
--- a/src/webu_ans.cpp
+++ b/src/webu_ans.cpp
@@ -618,18 +618,26 @@ mhdrslt cls_webu_ans::mhd_auth()
 
 void cls_webu_ans::gzip_deflate()
 {
+    uint sz;
+    int retcd;
+
+    /* Add extra 1024(arbitrary number) bytes to output buffer
+       The buffer MUST be large enough to do in a single call
+       to deflate.  (Not currently coded for multiple calls)
+    */
+    sz = (uint)resp_page.length()+1024;
+
     myfree(gzip_resp);
+    gzip_resp = (u_char*)mymalloc(sz);
     gzip_size = 0;
 
-    gzip_resp = (u_char*)mymalloc(resp_page.length());
-
     z_stream zs;
     zs.zalloc = Z_NULL;
     zs.zfree = Z_NULL;
     zs.opaque = Z_NULL;
-    zs.avail_in = (uInt)resp_page.length();
+    zs.avail_in = (uint)resp_page.length();
     zs.next_in = (Bytef *)resp_page.c_str();
-    zs.avail_out = (uInt)resp_page.length();
+    zs.avail_out = sz;
     zs.next_out = (Bytef *)gzip_resp;
 
     deflateInit2(&zs
@@ -637,9 +645,29 @@ void cls_webu_ans::gzip_deflate()
         , Z_DEFLATED
         , 15 | 16, 8
         , Z_DEFAULT_STRATEGY);
-    deflate(&zs, Z_FINISH);
-    deflateEnd(&zs);
-    gzip_size = zs.total_out;
+
+    retcd = deflate(&zs, Z_FINISH);
+    if (retcd < Z_OK) {
+        MOTPLS_LOG(ERR, TYPE_STREAM, NO_ERRNO
+            , _("deflate failed: %d") ,retcd);
+        gzip_size = 0;
+    } else {
+        gzip_size = (ulong)zs.total_out;
+    }
+
+    retcd = deflateEnd(&zs);
+    if (retcd < Z_OK) {
+        MOTPLS_LOG(ERR, TYPE_STREAM, NO_ERRNO
+            , _("deflateEnd failed: %d"), retcd);
+        gzip_size = 0;
+    }
+
+    if (zs.avail_in != 0) {
+        MOTPLS_LOG(ERR, TYPE_STREAM, NO_ERRNO
+            , _("deflate failed avail in: %d"), zs.avail_in);
+        gzip_size = 0;
+    }
+
 }
 
 /* Send the response that we created back to the user.  */
@@ -651,15 +679,15 @@ void cls_webu_ans::mhd_send()
 
     if (gzip_encode == true) {
         gzip_deflate();
-        if (gzip_size > 0) {
-            response = MHD_create_response_from_buffer(
-                gzip_size, (void *)gzip_resp
-                , MHD_RESPMEM_PERSISTENT);
-        } else {
+        if (gzip_size == 0) {
             gzip_encode = false;
             resp_page = "Error in gzip response";
             response = MHD_create_response_from_buffer(resp_page.length()
                 ,(void *)resp_page.c_str(), MHD_RESPMEM_PERSISTENT);
+        } else {
+            response = MHD_create_response_from_buffer(
+                gzip_size, (void *)gzip_resp
+                , MHD_RESPMEM_PERSISTENT);
         }
     } else {
         response = MHD_create_response_from_buffer(resp_page.length()
diff --git a/src/webu_html.cpp b/src/webu_html.cpp
index 2c7b502..35566ff 100644
--- a/src/webu_html.cpp
+++ b/src/webu_html.cpp
@@ -330,7 +330,7 @@ void cls_webu_html::navbar()
         "  <div id=\"divnav_main\" class=\"sidenav\">\n"
         "    <a class='closebtn' onclick='nav_close()'>X</a>\n"
         "    <div id=\"divnav_version\">\n"
-        "      <a>MotionPlus 0.0.1</a>\n"
+        "      <!-- Filled in by script -->\n"
         "    </div>\n"
         "    <button onclick='display_cameras()' "
             " id='cam_btn' class='dropbtn'>Cameras</button>\n"
@@ -925,7 +925,8 @@ void cls_webu_html::script_initform()
         "          pData = JSON.parse(this.responseText);\n"
         "          gIndxCam  = -1;\n"
         "          gGetImgs  = 1;\n"
-        "          gIndxScan = -1;\n\n"
+        "          gIndxScan = -1;\n"
+        "          gLogNbr = 0;\n\n"
 
         "          assign_config();\n"
         "          assign_version();\n"
@@ -1421,11 +1422,14 @@ void cls_webu_html::script_log_display()
         "        itm = pLog[indx];\n"
         "        if (typeof(itm) != 'undefined') {\n"
         "          msg = pLog[indx]['logmsg'];\n"
-        "          nbr = pLog[indx]['lognbr'];\n"
-        "          if (txtalog.length > 1000) {\n"
-        "            txtalog = txtalog.substring(txtalog.search('\\n'));\n"
+        "          if (typeof(msg) != 'undefined') {\n"
+        "            gLogNbr = pLog[indx]['lognbr'];\n"
+        "            if (txtalog.length > 2000) {\n"
+        "              txtalog = txtalog.substring(txtalog.length - 2000);\n"
+        "              txtalog = txtalog.substring(txtalog.search('\\n'));\n"
+        "            }\n"
+        "            txtalog += '\\n' + msg;\n"
         "          }\n"
-        "          txtalog += '\\n' + msg;\n"
         "        }\n"
         "      }\n"
         "      document.getElementById('txta_log').enabled = true;\n"
@@ -1448,7 +1452,7 @@ void cls_webu_html::script_log_get()
         "          log_display();\n"
         "        }\n"
         "      };\n"
-        "      xmlhttp.open('GET', pHostFull+'/0/log/0');\n"
+        "      xmlhttp.open('GET', pHostFull+'/0/log/'+ gLogNbr);\n"
         "      xmlhttp.send();\n"
         "    }\n\n";
 
@@ -1476,7 +1480,7 @@ void cls_webu_html::script()
 {
     webua->resp_page += "  <script>\n"
         "    var pData, pMovies, pHostFull;\n"
-        "    var gIndxScan, gIndxCam, gGetImgs;\n"
+        "    var gIndxScan, gIndxCam, gGetImgs, gLogNbr;\n"
         "    var pic_url = Array(4);\n"
         "    var log_timer;\n"
         "    var cams_scan_timer, cams_all_timer, cams_one_timer;\n\n";
diff --git a/src/webu_json.cpp b/src/webu_json.cpp
index 8fdcdfb..4e76169 100644
--- a/src/webu_json.cpp
+++ b/src/webu_json.cpp
@@ -430,10 +430,12 @@ void cls_webu_json::loghistory()
     bool frst;
 
     webua->resp_type = WEBUI_RESP_JSON;
+    webua->resp_page = "";
+
+    frst = true;
+    cnt = 0;
 
     pthread_mutex_lock(&motlog->mutex_log);
-        frst = true;
-        cnt = 0;
         for (indx=0; indx<motlog->log_vec.size();indx++) {
             if (motlog->log_vec[indx].log_nbr > mtoi(webua->uri_cmd2)) {
                 if (frst == true) {
@@ -454,9 +456,10 @@ void cls_webu_json::loghistory()
         }
     pthread_mutex_unlock(&motlog->mutex_log);
     if (frst == true) {
-        webua->resp_page += "{\"0\": \"\" ";
+        webua->resp_page += "{\"0\":\"\" ";
     }
     webua->resp_page += ",\"count\":\""+std::to_string(cnt)+"\"}";
+
 }
 
 void cls_webu_json::main()
