mirror/OpenBK7231T_App
3
0
Fork 0
mirror of https://github.com/openshwprojects/OpenBK7231T_App.git synced 2026-08-18 02:54:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix webui slider behavior (#2143)

Browse Source 
* fixed slider behavior and value showing

* Fix LED color picker submit timing

* Update RGB picker selftest event
This commit is contained in:
DeDaMrAzR
2026-07-24 10:23:07 +02:00
committed by Tester23
parent 46acfb450d
commit e1a8097558
4 changed files with 38 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/httpserver/http_fns.c
View File

@ -693,8 +693,8 @@ int http_fn_index(http_request_t* request) {
}
pwmValue = CHANNEL_Get(i);
poststr(request, "<tr><td>");
hprintf255(request, "Channel %s:<br><form action=\"index\" id=\"form%i\">", CHANNEL_GetLabel(i), i);
hprintf255(request, "<input type=\"range\" min=\"0\" max=\"%i\" name=\"%s\" id=\"slider%i\" value=\"%i\" onchange=\"this.form.submit()\">", maxValue, inputName, i, pwmValue);
hprintf255(request, "Channel %s: <span id=\"sliderValue%i\">%i</span><br><form action=\"index\" id=\"form%i\">", CHANNEL_GetLabel(i), i, pwmValue, i);
hprintf255(request, "<input type=\"range\" min=\"0\" max=\"%i\" name=\"%s\" id=\"slider%i\" value=\"%i\" data-value-id=\"sliderValue%i\" oninput=\"updateSliderValue(this)\" onchange=\"submitSlider(this)\">", maxValue, inputName, i, pwmValue, i);
hprintf255(request, "<input type=\"hidden\" name=\"%sIndex\" value=\"%i\">", inputName, i);
hprintf255(request, "<input type=\"submit\" class='disp-none' value=\"Toggle %s\"/></form>", CHANNEL_GetLabel(i));
poststr(request, "</td></tr>");
@ -805,9 +805,9 @@ int http_fn_index(http_request_t* request) {
pwmValue = LED_GetDimmer();
poststr(request, "<tr><td>");
hprintf255(request, "<h5>LED Dimmer/Brightness</h5>");
hprintf255(request, "<h5>LED Dimmer/Brightness: <span id=\"sliderValue%i\">%i</span></h5>", SPECIAL_CHANNEL_BRIGHTNESS, pwmValue);
hprintf255(request, "<form action=\"index\" id=\"form%i\">", SPECIAL_CHANNEL_BRIGHTNESS);
hprintf255(request, "<input type=\"range\" min=\"0\" max=\"100\" name=\"%s\" id=\"slider%i\" value=\"%i\" onchange=\"this.form.submit()\">", inputName, SPECIAL_CHANNEL_BRIGHTNESS, pwmValue);
hprintf255(request, "<input type=\"range\" min=\"0\" max=\"100\" name=\"%s\" id=\"slider%i\" value=\"%i\" data-value-id=\"sliderValue%i\" oninput=\"updateSliderValue(this)\" onchange=\"submitSlider(this)\">", inputName, SPECIAL_CHANNEL_BRIGHTNESS, pwmValue, SPECIAL_CHANNEL_BRIGHTNESS);
hprintf255(request, "<input type=\"hidden\" name=\"%sIndex\" value=\"%i\">", inputName, SPECIAL_CHANNEL_BRIGHTNESS);
hprintf255(request, "<input type=\"submit\" class='disp-none' value=\"Toggle %i\"/></form>", SPECIAL_CHANNEL_BRIGHTNESS);
poststr(request, "</td></tr>");
@ -826,7 +826,7 @@ int http_fn_index(http_request_t* request) {
hprintf255(request, "<form action=\"index\" id=\"form%i\">", SPECIAL_CHANNEL_BASECOLOR);
// onchange would fire only if colour was changed
// onblur will fire every time
hprintf255(request, "<input type=\"color\" name=\"%s\" id=\"color%i\" value=\"#%s\" oninput=\"this.form.submit()\" >", inputName, SPECIAL_CHANNEL_BASECOLOR, colorValue);
hprintf255(request, "<input type=\"color\" name=\"%s\" id=\"color%i\" value=\"#%s\" onchange=\"this.form.submit()\" >", inputName, SPECIAL_CHANNEL_BASECOLOR, colorValue);
hprintf255(request, "<input type=\"hidden\" name=\"%sIndex\" value=\"%i\">", inputName, SPECIAL_CHANNEL_BASECOLOR);
hprintf255(request, "<input type=\"submit\" class='disp-none' value=\"Toggle Light\"/></form>");
poststr(request, "</td></tr>");
@ -855,12 +855,12 @@ int http_fn_index(http_request_t* request) {
long pwmKelvinMin = HASS_TO_KELVIN(led_temperature_max);
poststr(request, "<tr><td>");
hprintf255(request, "<h5>LED Temperature Slider %s (%ld K) (Warm <--- ---> Cool)</h5>", activeStr, pwmKelvin);
hprintf255(request, "<h5>LED Temperature Slider %s (<span id=\"sliderValue%i\">%ld</span> K) (Warm <--- ---> Cool)</h5>", activeStr, SPECIAL_CHANNEL_TEMPERATURE, pwmKelvin);
hprintf255(request, "<form class='r' action=\"index\" id=\"form%i\">", SPECIAL_CHANNEL_TEMPERATURE);
//(KELVIN_TEMPERATURE_MAX - KELVIN_TEMPERATURE_MIN) / (HASS_TEMPERATURE_MAX - HASS_TEMPERATURE_MIN) = 13
hprintf255(request, "<input type=\"range\" step='13' min=\"%ld\" max=\"%ld\" ", pwmKelvinMin, pwmKelvinMax);
hprintf255(request, "value=\"%ld\" onchange=\"submitTemperature(this);\"/>", pwmKelvin);
hprintf255(request, "value=\"%ld\" data-value-id=\"sliderValue%i\" oninput=\"updateSliderValue(this)\" onchange=\"submitTemperature(this);\"/>", pwmKelvin, SPECIAL_CHANNEL_TEMPERATURE);
hprintf255(request, "<input type=\"hidden\" name=\"%sIndex\" value=\"%i\"/>", inputName, SPECIAL_CHANNEL_TEMPERATURE);
hprintf255(request, "<input id=\"kelvin%i\" type=\"hidden\" name=\"%s\" />", SPECIAL_CHANNEL_TEMPERATURE, inputName);

4
src/httpserver/new_http.c
View File

@ -357,9 +357,9 @@ void http_html_start(http_request_t *request, const char *pagename)
poststr(request, htmlBodyStart2);
}
const char pageScriptPart1[] = "<script type='text/javascript'>var firstTime,lastTime,onlineFor,req=null,onlineForEl=null,getElement=e=>document.getElementById(e);function showState(){clearTimeout(firstTime),clearTimeout(lastTime),null!=req&&req.abort(),(e=getElement(\"state\"))&&((req=new XMLHttpRequest).onreadystatechange=()=>{4==req.readyState&&\"OK\"==req.statusText&&(\"SELECT\"!=document.activeElement.tagName&&(\"INPUT\"!=document.activeElement.tagName||\"number\"!=document.activeElement.type&&\"color\"!=document.activeElement.type)&&(e.innerHTML=req.responseText),clearTimeout(firstTime),clearTimeout(lastTime),lastTime=setTimeout(showState,";
const char pageScriptPart1[] = "<script type='text/javascript'>var firstTime,lastTime,onlineFor,req=null,onlineForEl=null,getElement=e=>document.getElementById(e);function isEditingControl(){var e=document.activeElement,t=e&&e.tagName,n=e&&e.type;return\"SELECT\"==t||\"INPUT\"==t&&(\"number\"==n||\"color\"==n||\"range\"==n)}function updateSliderValue(e){var t=getElement(e.dataset.valueId);t&&(t.textContent=e.value)}function submitSlider(e){updateSliderValue(e),e.form.submit()}function showState(){clearTimeout(firstTime),clearTimeout(lastTime),null!=req&&req.abort();var e=getElement(\"state\");e&&((req=new XMLHttpRequest).onreadystatechange=()=>{4==req.readyState&&\"OK\"==req.statusText&&(!isEditingControl()&&(e.innerHTML=req.responseText),clearTimeout(firstTime),clearTimeout(lastTime),lastTime=setTimeout(showState,";
const char pageScriptPart2[] = "))},req.open(\"GET\",\"index?state=1\",!0),req.send()),firstTime=setTimeout(showState,";
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<o?o+` days, ${t} hours, ${n} minutes and ${e} seconds`:0<t?t+` hours, ${n} minutes and ${e} seconds`:0<n?n+` minutes and ${e} seconds`:`just ${e} seconds`}function updateOnlineFor(){onlineForEl.textContent=fmtUpTime(++onlineFor)}function onLoad(){(onlineForEl=getElement(\"onlineFor\"))&&(onlineFor=parseInt(onlineForEl.dataset.initial,10))&&setInterval(updateOnlineFor,1e3),showState()}function submitTemperature(e){var t=getElement(\"form132\");getElement(\"kelvin132\").value=Math.round(1e6/parseInt(e.value)),t.submit()}window.addEventListener(\"load\",onLoad),history.replaceState(null,\"\",window.location.pathname.slice(1)),setTimeout(()=>{var e=getElement(\"changed\");e&&(e.innerHTML=\"\")},5e3);</script>";
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<o?o+` days, ${t} hours, ${n} minutes and ${e} seconds`:0<t?t+` hours, ${n} minutes and ${e} seconds`:0<n?n+` minutes and ${e} seconds`:`just ${e} seconds`}function updateOnlineFor(){onlineForEl.textContent=fmtUpTime(++onlineFor)}function onLoad(){(onlineForEl=getElement(\"onlineFor\"))&&(onlineFor=parseInt(onlineForEl.dataset.initial,10))&&setInterval(updateOnlineFor,1e3),showState()}function submitTemperature(e){updateSliderValue(e);var t=getElement(\"form132\");getElement(\"kelvin132\").value=Math.round(1e6/parseInt(e.value)),t.submit()}window.addEventListener(\"load\",onLoad),history.replaceState(null,\"\",window.location.pathname.slice(1)),setTimeout(()=>{var e=getElement(\"changed\");e&&(e.innerHTML=\"\")},5e3);</script>";
void http_html_end(http_request_t *request)
{

35
src/httpserver/script.js
View File

@ -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));

2
src/selftest/selftest_http.c
View File

@ -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";