From d1928a2050e9c0d2db757954be9e2de27cc3e9a8 Mon Sep 17 00:00:00 2001 From: Owen Carter Date: Sun, 26 Sep 2021 03:00:15 +0200 Subject: [PATCH] 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 --- app_httpd.cpp | 1 + index_other.h | 21 +++++++++++++++++++++ index_ov2640.h | 21 +++++++++++++++++++++ index_ov3660.h | 21 +++++++++++++++++++++ 4 files changed, 64 insertions(+) diff --git a/app_httpd.cpp b/app_httpd.cpp index 54100ca..0bc24c8 100644 --- 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 index 71b6971..ba4a297 100644 --- a/index_other.h +++ b/index_other.h @@ -139,6 +139,20 @@ const uint8_t index_simple_html[] = R"=====( } } + 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"=====( 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 index 00724cf..f923a21 100644 --- a/index_ov2640.h +++ b/index_ov2640.h @@ -374,6 +374,20 @@ const uint8_t index_ov2640_html[] = R"=====( } } + 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"=====( 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 index ff4b88d..eb7ca74 100644 --- a/index_ov3660.h +++ b/index_ov3660.h @@ -386,6 +386,20 @@ const uint8_t index_ov3660_html[] = R"=====( } } + 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"=====( 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')