UI fixes

abratchik · Jan 7, 2023 · da7c73d · da7c73d
1 parent d75f4e8
commit da7c73d
Show file tree

Hide file tree

Showing 15 changed files with 374 additions and 180 deletions.
diff --git a/data/default_cam.json b/data/default_cam.json
@@ -2,7 +2,7 @@
     "framesize":8,
     "quality":12,
     "xclk":8,
-    "frame_rate":25,
+    "frame_rate":12,
     "brightness":0,
     "contrast":0,
     "saturation":0,

diff --git a/data/www/index.html → data/www/camera.html b/data/www/index.html → data/www/camera.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>ESP32 Camera</title>
+    <title>ESP32-CAM Camera</title>
     <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
     <link rel="stylesheet" type="text/css" href="/css/style.css">
@@ -22,12 +22,11 @@
   <body>
     <section class="main">
       <div id="logo">
-        <label for="nav-toggle-cb" id="nav-toggle" style="float:left;">&#9776;&nbsp;&nbsp;Settings&nbsp;&nbsp;&nbsp;&nbsp;</label>
-        <button id="swap-viewer" style="float:left;">Simple</button>
-        <button id="nw-setup" style="float:left;" title="Configure network parameters">Network</button>
-        <button id="monitor" style="float:left;" title="Monitor system parameters">System</button>
-        <button id="get-still" style="float:left;" title="Capture a still image">Get Still</button>
-        <button id="toggle-stream" style="float:left;" class="hidden">Start Stream</button>
+        <label for="nav-toggle-cb" id="nav-toggle" >&#9776;&nbsp;&nbsp;Camera&nbsp;&nbsp;&nbsp;&nbsp;</label>
+        <button id="nw-setup" style="float:left;" title="Configure network parameters">Setup</button>
+        <button id="monitor" style="float:left;" title="Monitor system parameters">Dump</button>
+        <button id="get-still" style="float:left;" title="Capture a still image">Picture</button>
+        <button id="toggle-stream" style="float:left;" class="hidden">Video</button>
         <div id="wait-settings" style="float:left;" class="loader" title="Waiting for camera settings to load"></div>
       </div>
       <div id="content">
@@ -67,17 +66,17 @@
     const streamButton = document.getElementById('toggle-stream');
     const closeButton = document.getElementById('close-stream');
 
-    const swapButton = document.getElementById('swap-viewer');
 
     const networkButton = document.getElementById('nw-setup');
     const monitorButton = document.getElementById('monitor');
 
     const toggleViewMode = () => {
+      const swapButton = document.getElementById('swap-viewer');
       if(viewMode.checked) {
-        swapButton.innerHTML = "Full";
+        swapButton.innerHTML = 'More <i class="fa fa-caret-down"></i>';
       }
       else {
-        swapButton.innerHTML = "Simple";
+        swapButton.innerHTML = 'Less <i class="fa fa-caret-up"></i>';
       }
 
       toggleMenuVisible(false);
@@ -110,19 +109,23 @@
 
     const stopStream = () => {
       viewFrame.src = '';
-      streamButton.innerHTML = 'Start Stream';
+      streamButton.innerHTML = 'Video';
       streamButton.setAttribute("title", `Start the stream`);
+      setLightSlider(false);
       hide(viewContainer);
     }
 
     const startStream = () => {
       viewFrame.src = '/view?mode=stream';
       view.scrollIntoView(false);
-      streamButton.innerHTML = 'Stop Stream';
+      streamButton.innerHTML = 'Stop';
       streamButton.setAttribute("title", `Stop the stream`);
+      setLightSlider(true);
       show(viewContainer);
     }
 
+
+
     const applyRotation = (el) => {
       rot = el.value;
       if (rot == -90) {
@@ -161,6 +164,7 @@
       div_group.appendChild(createButton("save_prefs", "Save", "Save preferences on camera module", "true", "cam"));
       div_group.appendChild(createButton("remove_prefs", "Erase", "Erase saved preferences on camera module", "true", "cam"));
       div_group.appendChild(createButton("reboot", "Reboot", "Reboot the camera module", "true"));
+      div_group.appendChild(createButton("swap-viewer", "More","Show more controls"));
 
       parent.appendChild(div_group);
     };
@@ -179,7 +183,7 @@
         return response.json();
       })
       .then(function (state) {
-        document.title = state['cam_name'];
+        document.title = state['cam_name'] + ' Camera';
         var cam_model = cameraTypes.find(item => item.pid == state['cam_pid']);
         if(cam_model)
           console.log("Camera " + cam_model.name + " detected");
@@ -209,7 +213,7 @@
         }
 
         monitorButton.onclick = () => {
-          window.open('/dump', "_blank");
+          window.location.href = '/dump';
         }
 
         stillButton.onclick = () => {
@@ -225,34 +229,34 @@
           };
 
         streamButton.onclick = () => {
-            const streamEnabled = streamButton.innerHTML === 'Stop Stream'
+            const streamEnabled = streamButton.innerHTML === 'Stop'
             if (streamEnabled) {
               stopStream();
             } else {
               startStream();
             }
           };
 
-        viewSettings.onchange = () => {
-          if(viewSettings.checked)
-            show(swapButton);
-          else
-            hide(swapButton);
-        };
 
         // Attach default on change action
         document
           .querySelectorAll('.default-action')
           .forEach(el => {
             if(el.type == "submit")
               el.onclick = () =>  {
-                if(submitChanges(el)) {
-                    if(el.id == "reboot") {
-                      hide(settings);
-                      hide(viewContainer);
-                      header.innerHTML = '<h1>Rebooting!</h1><hr>Page will reload after 30 seconds.';
-                    }
+                if(el.id == "swap-viewer") {
+                  var value = viewMode.checked ? 1 : 0;
+                  viewMode.checked = !value;
+                  toggleViewMode();
                 }
+                else
+                  if(submitChanges(el)) {
+                      if(el.id == "reboot") {
+                        hide(settings);
+                        hide(viewContainer);
+                        header.innerHTML = '<h1>Rebooting!</h1><hr>Page will reload after 30 seconds.';
+                      }
+                  }
               }
             else {
               el.onchange = () => {
@@ -270,13 +274,6 @@
           .forEach(el => {
             el.oninput = () => updateRangeConfig(el)
           });
-
-
-        swapButton.onclick = () => {
-          var value = viewMode.checked ? 1 : 0;
-          viewMode.checked = !value;
-            toggleViewMode();
-          };
 
         toggleMenuVisible(true);
       });  

diff --git a/data/www/css/style.css b/data/www/css/style.css
@@ -30,7 +30,7 @@ section.main {
   display: none;
   flex-wrap: nowrap;
   color: #EFEFEF;
-  width: 380px;
+  width: 400px;
   background: #363636;
   padding: 8px;
   border-radius: 4px;
@@ -72,7 +72,8 @@ section#buttons {
 
 #nav-toggle {
   cursor: pointer;
-  display: block
+  float:left;
+  width:100px
 }
 
 #nav-toggle-cb {
@@ -90,6 +91,15 @@ section#buttons {
     transform: rotateY(180deg);
 }
 
+#sidebar {
+  margin-top: 0px;
+}
+
+#logo {
+  align-items: center;
+  display: flex;
+}
+
 .input-group {
   display: flex;
   flex-wrap: nowrap;
@@ -120,6 +130,7 @@ button {
   line-height: 28px;
   cursor: pointer;
   color: #fff;
+  width: 90px;
   background: #ff3034;
   border-radius: 5px;
   font-size: 16px;
@@ -244,7 +255,7 @@ input[type=text], input[type=password] {
 }
 
 .gmt_offset {
-  width: 175px;
+  width: 180px;
 }
 
 input[type=number] {
@@ -281,6 +292,22 @@ input[type=number] {
   background-color: grey
 }
 
+.fa {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fa-caret-down::before {
+  content: ">";
+}
+.fa-caret-up::before {
+  content: "<";
+}
+
 .slider,.slider:before {
   display: inline-block;
   transition: .4s