From e1a80975583f1cb908cf7495d8fa2eab5e6b3e8e Mon Sep 17 00:00:00 2001 From: DeDaMrAzR <43572083+DeDaMrAzR@users.noreply.github.com> Date: Fri, 24 Jul 2026 10:23:07 +0200 Subject: [PATCH] Fix webui slider behavior (#2143) * fixed slider behavior and value showing * Fix LED color picker submit timing * Update RGB picker selftest event --- src/httpserver/http_fns.c | 14 +++++++------- src/httpserver/new_http.c | 4 ++-- src/httpserver/script.js | 35 ++++++++++++++++++++++++++++------- src/selftest/selftest_http.c | 2 +- 4 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/httpserver/http_fns.c b/src/httpserver/http_fns.c index 6f790b7e5..ef1d44b8f 100644 --- a/src/httpserver/http_fns.c +++ b/src/httpserver/http_fns.c @@ -693,8 +693,8 @@ int http_fn_index(http_request_t* request) { } pwmValue = CHANNEL_Get(i); poststr(request, ""); - hprintf255(request, "Channel %s:
", CHANNEL_GetLabel(i), i); - hprintf255(request, "", maxValue, inputName, i, pwmValue); + hprintf255(request, "Channel %s: %i
", CHANNEL_GetLabel(i), i, pwmValue, i); + hprintf255(request, "", maxValue, inputName, i, pwmValue, i); hprintf255(request, "", inputName, i); hprintf255(request, "
", CHANNEL_GetLabel(i)); poststr(request, ""); @@ -805,9 +805,9 @@ int http_fn_index(http_request_t* request) { pwmValue = LED_GetDimmer(); poststr(request, ""); - hprintf255(request, "
LED Dimmer/Brightness
"); + hprintf255(request, "
LED Dimmer/Brightness: %i
", SPECIAL_CHANNEL_BRIGHTNESS, pwmValue); hprintf255(request, "
", SPECIAL_CHANNEL_BRIGHTNESS); - hprintf255(request, "", inputName, SPECIAL_CHANNEL_BRIGHTNESS, pwmValue); + hprintf255(request, "", inputName, SPECIAL_CHANNEL_BRIGHTNESS, pwmValue, SPECIAL_CHANNEL_BRIGHTNESS); hprintf255(request, "", inputName, SPECIAL_CHANNEL_BRIGHTNESS); hprintf255(request, "
", SPECIAL_CHANNEL_BRIGHTNESS); poststr(request, ""); @@ -826,7 +826,7 @@ int http_fn_index(http_request_t* request) { hprintf255(request, "
", SPECIAL_CHANNEL_BASECOLOR); // onchange would fire only if colour was changed // onblur will fire every time - hprintf255(request, "", inputName, SPECIAL_CHANNEL_BASECOLOR, colorValue); + hprintf255(request, "", inputName, SPECIAL_CHANNEL_BASECOLOR, colorValue); hprintf255(request, "", inputName, SPECIAL_CHANNEL_BASECOLOR); hprintf255(request, "
"); poststr(request, ""); @@ -855,12 +855,12 @@ int http_fn_index(http_request_t* request) { long pwmKelvinMin = HASS_TO_KELVIN(led_temperature_max); poststr(request, ""); - hprintf255(request, "
LED Temperature Slider %s (%ld K) (Warm <--- ---> Cool)
", activeStr, pwmKelvin); + hprintf255(request, "
LED Temperature Slider %s (%ld K) (Warm <--- ---> Cool)
", activeStr, SPECIAL_CHANNEL_TEMPERATURE, pwmKelvin); hprintf255(request, "
", SPECIAL_CHANNEL_TEMPERATURE); //(KELVIN_TEMPERATURE_MAX - KELVIN_TEMPERATURE_MIN) / (HASS_TEMPERATURE_MAX - HASS_TEMPERATURE_MIN) = 13 hprintf255(request, "", pwmKelvin); + hprintf255(request, "value=\"%ld\" data-value-id=\"sliderValue%i\" oninput=\"updateSliderValue(this)\" onchange=\"submitTemperature(this);\"/>", pwmKelvin, SPECIAL_CHANNEL_TEMPERATURE); hprintf255(request, "", inputName, SPECIAL_CHANNEL_TEMPERATURE); hprintf255(request, "", SPECIAL_CHANNEL_TEMPERATURE, inputName); diff --git a/src/httpserver/new_http.c b/src/httpserver/new_http.c index d7628809a..24e8cc0ba 100644 --- a/src/httpserver/new_http.c +++ b/src/httpserver/new_http.c @@ -357,9 +357,9 @@ void http_html_start(http_request_t *request, const char *pagename) poststr(request, htmlBodyStart2); } -const char pageScriptPart1[] = ""; +const char pageScriptPart3[] = ")}function fmtUpTime(e){var t,n,o=Math.floor(e/86400);return e%=86400,t=Math.floor(e/3600),e%=3600,n=Math.floor(e/60),e=e%60,0{var e=getElement(\"changed\");e&&(e.innerHTML=\"\")},5e3);"; void http_html_end(http_request_t *request) { diff --git a/src/httpserver/script.js b/src/httpserver/script.js index 863a9b920..e7821305b 100644 --- a/src/httpserver/script.js +++ b/src/httpserver/script.js @@ -8,6 +8,32 @@ var onlineForEl = null; var getElement = (id) => document.getElementById(id); +function isEditingControl() { + var activeElement = document.activeElement; + if (!activeElement) { + return false; + } + if (activeElement.tagName == "SELECT") { + return true; + } + return ( + activeElement.tagName == "INPUT" && + (activeElement.type == "number" || activeElement.type == "color" || activeElement.type == "range") + ); +} + +function updateSliderValue(slider) { + var valueEl = getElement(slider.dataset.valueId); + if (valueEl) { + valueEl.textContent = slider.value; + } +} + +function submitSlider(slider) { + updateSliderValue(slider); + slider.form.submit(); +} + // refresh status section every 3 seconds function showState() { clearTimeout(firstTime); @@ -19,13 +45,7 @@ function showState() { req.onreadystatechange = () => { // somehow status was 0 on Windows, but "OK" works on both Beken and Windows if (req.readyState == 4 && req.statusText == "OK") { - if ( - !( - document.activeElement.tagName == "SELECT" && - (document.activeElement.tagName == "INPUT" && - (document.activeElement.type == "number" || document.activeElement.type == "color")) - ) - ) { + if (!isEditingControl()) { var stateEl = getElement("state"); if (stateEl) { stateEl.innerHTML = req.responseText; @@ -80,6 +100,7 @@ function onLoad() { } function submitTemperature(slider) { + updateSliderValue(slider); var form = getElement("form132"); var kelvinField = getElement("kelvin132"); kelvinField.value = Math.round(1000000 / parseInt(slider.value)); diff --git a/src/selftest/selftest_http.c b/src/selftest/selftest_http.c index b837a09b0..e171f56b8 100644 --- a/src/selftest/selftest_http.c +++ b/src/selftest/selftest_http.c @@ -789,7 +789,7 @@ bool SIM_HasHTTPRGB() { s.tag = "input"; s.parms[0].name = "type"; s.parms[0].value = "color"; - s.parms[1].name = "oninput"; + s.parms[1].name = "onchange"; s.parms[1].value = "this.form.submit()"; s.parms[2].name = "name"; s.parms[2].value = "rgb";