Interactive slider improvements (#166)

Send slider (range input) updates immediately so that slider become more responsive. Rate limit sending the slider updates since rapid moves could overwhelm the connection Co-authored-by: Eric Fontaine <[email protected]>
easytarget · Sep 26, 2021 · d1928a2 · d1928a2
1 parent f6709d0
commit d1928a2
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 0 deletions.
diff --git a/app_httpd.cpp b/app_httpd.cpp
@@ -288,6 +288,7 @@ static esp_err_t cmd_handler(httpd_req_t *req){
     size_t buf_len;
     char variable[32] = {0,};
     char value[32] = {0,};
+
     flashLED(75);
 
     buf_len = httpd_req_get_url_query_len(req) + 1;

diff --git a/index_other.h b/index_other.h
@@ -139,6 +139,20 @@ const uint8_t index_simple_html[] = R"=====(<!doctype html>
       }
     }
 
+    var rangeUpdateScheduled = false
+    var latestRangeConfig
+
+    function updateRangeConfig (el) {
+      latestRangeConfig = el
+      if (!rangeUpdateScheduled) {
+        rangeUpdateScheduled = true;
+        setTimeout(function(){
+          rangeUpdateScheduled = false
+          updateConfig(latestRangeConfig)
+        }, 150);
+      }
+    }
+
     function updateConfig (el) {
       let value
       switch (el.type) {
@@ -259,6 +273,13 @@ const uint8_t index_simple_html[] = R"=====(<!doctype html>
         el.onchange = () => updateConfig(el)
       })
 
+    // Update range sliders as they are being moved
+    document
+      .querySelectorAll('input[type="range"]')
+      .forEach(el => {
+        el.oninput = () => updateRangeConfig(el)
+      })
+
     // Custom actions
     // Detection and framesize
     rotate.onchange = () => {

diff --git a/index_ov2640.h b/index_ov2640.h
@@ -374,6 +374,20 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
       }
     }
 
+    var rangeUpdateScheduled = false
+    var latestRangeConfig
+
+    function updateRangeConfig (el) {
+      latestRangeConfig = el
+      if (!rangeUpdateScheduled) {
+        rangeUpdateScheduled = true;
+        setTimeout(function(){
+          rangeUpdateScheduled = false
+          updateConfig(latestRangeConfig)
+        }, 150);
+      }
+    }
+
     function updateConfig (el) {
       let value
       switch (el.type) {
@@ -499,6 +513,13 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
         el.onchange = () => updateConfig(el)
       })
 
+    // Update range sliders as they are being moved
+    document
+      .querySelectorAll('input[type="range"]')
+      .forEach(el => {
+        el.oninput = () => updateRangeConfig(el)
+      })
+
     // Custom actions
     // Gain
     const agc = document.getElementById('agc')

diff --git a/index_ov3660.h b/index_ov3660.h
@@ -386,6 +386,20 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
       }
     }
 
+    var rangeUpdateScheduled = false
+    var latestRangeConfig
+
+    function updateRangeConfig (el) {
+      latestRangeConfig = el
+      if (!rangeUpdateScheduled) {
+        rangeUpdateScheduled = true;
+        setTimeout(function(){
+          rangeUpdateScheduled = false
+          updateConfig(latestRangeConfig)
+        }, 150);
+      }
+    }
+
     function updateConfig (el) {
       let value
       switch (el.type) {
@@ -511,6 +525,13 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
         el.onchange = () => updateConfig(el)
       })
 
+    // Update range sliders as they are being moved
+    document
+      .querySelectorAll('input[type="range"]')
+      .forEach(el => {
+        el.oninput = () => updateRangeConfig(el)
+      })
+
     // Custom actions
     // Gain
     const agc = document.getElementById('agc')