Slider widget not disabled when first loading unchecked?
Hi all, I've noticed that if you create a 'slider' widget with a checkbox that if it's unchecked when it first loads, then the slider is enabled. If you check/uncheck then the slider is disabled. Or at least that's what I seen in google chrome. I'm really not familiar with NodeJS, but this _seems_ to fix the problem: Does this fix make sense? If so - I'll do a p/r for it. //.ichael * Slider widget plugin */ $.fn.slider = function(options) { return this.each(function() { - var $sld = $(this).closest('.slider'), data = $.extend({ checked: true }, $sld.data()); + var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: $cbi.prop("checked") }, $sld.data()); var opts = (typeof options == "object") ? options : data; // init? if ($sld.children().length == 0) { var id = $sld.attr('id'); $sld.html('\
Right, so that didn't work if the check-box was disabled (like in wifi)- but this does seem to work! var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: ($cbi.prop("type") === "hidden" || $cbi.prop("checked")) }, $sld.data()); //.ichael On Tue, 27 Dec 2022 at 11:04, Michael Geddes <frog@bunyip.wheelycreek.net> wrote:
Hi all, I've noticed that if you create a 'slider' widget with a checkbox that if it's unchecked when it first loads, then the slider is enabled. If you check/uncheck then the slider is disabled. Or at least that's what I seen in google chrome.
I'm really not familiar with NodeJS, but this _seems_ to fix the problem:
Does this fix make sense? If so - I'll do a p/r for it.
//.ichael
* Slider widget plugin */
$.fn.slider = function(options) { return this.each(function() { - var $sld = $(this).closest('.slider'), data = $.extend({ checked: true }, $sld.data()); + var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: $cbi.prop("checked") }, $sld.data()); var opts = (typeof options == "object") ? options : data; // init? if ($sld.children().length == 0) { var id = $sld.attr('id'); $sld.html('\
Michael, I remember I changed the slider enable/disable control scheme from reading the checkbox state to using the data attribute / option for a reason, but I cannot remember exactly which now. I think it was to get consistent dynamic controllability. My initial commit was ec1a874dadce01e8bd588c20115d890acd9149c2, which used the checkbox state. A few days later in 91ed78a3d7ac5392eadd65be026a1a0fc77a611e I changed this to using the `checked` option, but missed adding `data-checked` to `PageContext::input_slider()` accordingly. Sliders using the enable/disable feature at that time only appeared in plugins/pages doing dynamic initialization, so this didn't become visible. Plugins normally create sliders by data attributes or init options, not by explicit markup. TL;DR: I think the fix would probably better be to add the missing `data-checked` to the markup created by `PageContext::input_slider()`. Regards, Michael Am 27.12.22 um 04:40 schrieb Michael Geddes:
Right, so that didn't work if the check-box was disabled (like in wifi)- but this does seem to work!
var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: ($cbi.prop("type") === "hidden" || $cbi.prop("checked")) }, $sld.data());
//.ichael
On Tue, 27 Dec 2022 at 11:04, Michael Geddes <frog@bunyip.wheelycreek.net> wrote:
Hi all, I've noticed that if you create a 'slider' widget with a checkbox that if it's unchecked when it first loads, then the slider is enabled. If you check/uncheck then the slider is disabled. Or at least that's what I seen in google chrome.
I'm really not familiar with NodeJS, but this _seems_ to fix the problem:
Does this fix make sense? If so - I'll do a p/r for it.
//.ichael
* Slider widget plugin */
$.fn.slider = function(options) { return this.each(function() { - var $sld = $(this).closest('.slider'), data = $.extend({ checked: true }, $sld.data()); + var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: $cbi.prop("checked") }, $sld.data()); var opts = (typeof options == "object") ? options : data; // init? if ($sld.children().length == 0) { var id = $sld.attr('id'); $sld.html('\
_______________________________________________ OvmsDev mailing list OvmsDev@lists.openvehicles.com http://lists.openvehicles.com/mailman/listinfo/ovmsdev
-- Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
Ok. I think I've deciphered that. Will give it a try. Michael On Tue, 27 Dec 2022, 3:54 pm Michael Balzer, <dexter@expeedo.de> wrote:
Michael,
I remember I changed the slider enable/disable control scheme from reading the checkbox state to using the data attribute / option for a reason, but I cannot remember exactly which now. I think it was to get consistent dynamic controllability.
My initial commit was ec1a874dadce01e8bd588c20115d890acd9149c2, which used the checkbox state. A few days later in 91ed78a3d7ac5392eadd65be026a1a0fc77a611e I changed this to using the `checked` option, but missed adding `data-checked` to `PageContext::input_slider()` accordingly.
Sliders using the enable/disable feature at that time only appeared in plugins/pages doing dynamic initialization, so this didn't become visible. Plugins normally create sliders by data attributes or init options, not by explicit markup.
TL;DR: I think the fix would probably better be to add the missing `data-checked` to the markup created by `PageContext::input_slider()`.
Regards, Michael
Am 27.12.22 um 04:40 schrieb Michael Geddes:
Right, so that didn't work if the check-box was disabled (like in wifi)- but this does seem to work!
var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: ($cbi.prop("type") === "hidden" || $cbi.prop("checked")) }, $sld.data());
//.ichael
On Tue, 27 Dec 2022 at 11:04, Michael Geddes <frog@bunyip.wheelycreek.net> wrote:
Hi all, I've noticed that if you create a 'slider' widget with a checkbox that if it's unchecked when it first loads, then the slider is enabled. If you check/uncheck then the slider is disabled. Or at least that's what I seen in google chrome.
I'm really not familiar with NodeJS, but this _seems_ to fix the problem:
Does this fix make sense? If so - I'll do a p/r for it.
//.ichael
* Slider widget plugin */
$.fn.slider = function(options) { return this.each(function() { - var $sld = $(this).closest('.slider'), data = $.extend({ checked: true }, $sld.data()); + var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: $cbi.prop("checked") }, $sld.data()); var opts = (typeof options == "object") ? options : data; // init? if ($sld.children().length == 0) { var id = $sld.attr('id'); $sld.html('\
_______________________________________________ OvmsDev mailing listOvmsDev@lists.openvehicles.comhttp://lists.openvehicles.com/mailman/listinfo/ovmsdev
-- Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
_______________________________________________ OvmsDev mailing list OvmsDev@lists.openvehicles.com http://lists.openvehicles.com/mailman/listinfo/ovmsdev
Unfortunately that doesn't work (detail below). The code I had worked much better from the framework generated input box.. but I'm not sure how to test it in a plugin. I have the 2 sliders with checkboxes on http://ov.ms/#/xkn/battery (ov.ms is a local network alias for my ovms box). I have one slider unchecked and one checked. Just putting data-checked as an attribute in the generated code caused both sliders to be disabled on first load! //.ichael On Tue, 27 Dec 2022 at 15:54, Michael Balzer <dexter@expeedo.de> wrote:
Michael,
I remember I changed the slider enable/disable control scheme from reading the checkbox state to using the data attribute / option for a reason, but I cannot remember exactly which now. I think it was to get consistent dynamic controllability.
My initial commit was ec1a874dadce01e8bd588c20115d890acd9149c2, which used the checkbox state. A few days later in 91ed78a3d7ac5392eadd65be026a1a0fc77a611e I changed this to using the `checked` option, but missed adding `data-checked` to `PageContext::input_slider()` accordingly.
Sliders using the enable/disable feature at that time only appeared in plugins/pages doing dynamic initialization, so this didn't become visible. Plugins normally create sliders by data attributes or init options, not by explicit markup.
TL;DR: I think the fix would probably better be to add the missing `data-checked` to the markup created by `PageContext::input_slider()`.
Regards, Michael
Am 27.12.22 um 04:40 schrieb Michael Geddes:
Right, so that didn't work if the check-box was disabled (like in wifi)- but this does seem to work!
var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: ($cbi.prop("type") === "hidden" || $cbi.prop("checked")) }, $sld.data());
//.ichael
On Tue, 27 Dec 2022 at 11:04, Michael Geddes <frog@bunyip.wheelycreek.net> wrote:
Hi all, I've noticed that if you create a 'slider' widget with a checkbox that if it's unchecked when it first loads, then the slider is enabled. If you check/uncheck then the slider is disabled. Or at least that's what I seen in google chrome.
I'm really not familiar with NodeJS, but this _seems_ to fix the problem:
Does this fix make sense? If so - I'll do a p/r for it.
//.ichael
* Slider widget plugin */
$.fn.slider = function(options) { return this.each(function() { - var $sld = $(this).closest('.slider'), data = $.extend({ checked: true }, $sld.data()); + var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: $cbi.prop("checked") }, $sld.data()); var opts = (typeof options == "object") ? options : data; // init? if ($sld.children().length == 0) { var id = $sld.attr('id'); $sld.html('\
_______________________________________________ OvmsDev mailing listOvmsDev@lists.openvehicles.comhttp://lists.openvehicles.com/mailman/listinfo/ovmsdev
-- Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
_______________________________________________ OvmsDev mailing list OvmsDev@lists.openvehicles.com http://lists.openvehicles.com/mailman/listinfo/ovmsdev
Details were missing, so I just tried this over here, and don't see any immediate issues: diff --git a/vehicle/OVMS.V3/components/ovms_webserver/src/web_framework.cpp b/vehicle/OVMS.V3/components/ovms_webserver/src/web_framework.cpp index 913510c3..7d756f01 100644 --- a/vehicle/OVMS.V3/components/ovms_webserver/src/web_framework.cpp +++ b/vehicle/OVMS.V3/components/ovms_webserver/src/web_framework.cpp @@ -361,7 +361,7 @@ void PageContext::input_slider(const char* label, const char* name, int size, co "<label class=\"control-label col-sm-3\" for=\"input-%s\">%s:</label>" "<div class=\"col-sm-9\">" "<div class=\"form-control slider\" data-default=\"%g\" data-reset=\"false\"" - " data-value=\"%g\" data-min=\"%g\" data-max=\"%g\" data-step=\"%g\">" + " data-value=\"%g\" data-min=\"%g\" data-max=\"%g\" data-step=\"%g\" data-checked=\"%s\">" "<div class=\"slider-control form-inline\">" "<input class=\"slider-enable\" type=\"%s\" %s> " "<input class=\"form-control slider-value\" %s type=\"number\" style=\"width:%dpx;\"" @@ -380,6 +380,7 @@ void PageContext::input_slider(const char* label, const char* name, int size, co , _attr(name) , label , defval, value, min, max, step + , (enabled != 0) ? "true" : "false" , (enabled < 0) ? "hidden" : "checkbox" // -1 => no checkbox , (enabled > 0) ? "checked" : "" , (enabled == 0) ? "disabled" : "" I've tested this quick & dirty on the Wifi config page by testing for the default value, that worked as expected. Regards, Michael Am 27.12.22 um 11:32 schrieb Michael Geddes:
Unfortunately that doesn't work (detail below). The code I had worked much better from the framework generated input box.. but I'm not sure how to test it in a plugin.
I have the 2 sliders with checkboxes on http://ov.ms/#/xkn/battery (ov.ms <http://ov.ms> is a local network alias for my ovms box). I have one slider unchecked and one checked.
Just putting data-checked as an attribute in the generated code caused both sliders to be disabled on first load!
//.ichael
On Tue, 27 Dec 2022 at 15:54, Michael Balzer <dexter@expeedo.de> wrote:
Michael,
I remember I changed the slider enable/disable control scheme from reading the checkbox state to using the data attribute / option for a reason, but I cannot remember exactly which now. I think it was to get consistent dynamic controllability.
My initial commit was ec1a874dadce01e8bd588c20115d890acd9149c2, which used the checkbox state. A few days later in 91ed78a3d7ac5392eadd65be026a1a0fc77a611e I changed this to using the `checked` option, but missed adding `data-checked` to `PageContext::input_slider()` accordingly.
Sliders using the enable/disable feature at that time only appeared in plugins/pages doing dynamic initialization, so this didn't become visible. Plugins normally create sliders by data attributes or init options, not by explicit markup.
TL;DR: I think the fix would probably better be to add the missing `data-checked` to the markup created by `PageContext::input_slider()`.
Regards, Michael
Am 27.12.22 um 04:40 schrieb Michael Geddes:
Right, so that didn't work if the check-box was disabled (like in wifi)- but this does seem to work!
var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: ($cbi.prop("type") === "hidden" || $cbi.prop("checked")) }, $sld.data());
//.ichael
On Tue, 27 Dec 2022 at 11:04, Michael Geddes <frog@bunyip.wheelycreek.net> wrote:
Hi all, I've noticed that if you create a 'slider' widget with a checkbox that if it's unchecked when it first loads, then the slider is enabled. If you check/uncheck then the slider is disabled. Or at least that's what I seen in google chrome.
I'm really not familiar with NodeJS, but this _seems_ to fix the problem:
Does this fix make sense? If so - I'll do a p/r for it.
//.ichael
* Slider widget plugin */
$.fn.slider = function(options) { return this.each(function() { - var $sld = $(this).closest('.slider'), data = $.extend({ checked: true }, $sld.data()); + var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: $cbi.prop("checked") }, $sld.data()); var opts = (typeof options == "object") ? options : data; // init? if ($sld.children().length == 0) { var id = $sld.attr('id'); $sld.html('\
_______________________________________________ OvmsDev mailing list OvmsDev@lists.openvehicles.com http://lists.openvehicles.com/mailman/listinfo/ovmsdev
-- Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
_______________________________________________ OvmsDev mailing list OvmsDev@lists.openvehicles.com http://lists.openvehicles.com/mailman/listinfo/ovmsdev
_______________________________________________ OvmsDev mailing list OvmsDev@lists.openvehicles.com http://lists.openvehicles.com/mailman/listinfo/ovmsdev
-- Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
Ahh. OK. Sorry, totally misunderstood. That works with the checks and Battery config. Michael On Tue, 27 Dec 2022, 7:09 pm Michael Balzer, <dexter@expeedo.de> wrote:
Details were missing, so I just tried this over here, and don't see any immediate issues:
diff --git a/vehicle/OVMS.V3/components/ovms_webserver/src/web_framework.cpp b/vehicle/OVMS.V3/components/ovms_webserver/src/web_framework.cpp index 913510c3..7d756f01 100644 --- a/vehicle/OVMS.V3/components/ovms_webserver/src/web_framework.cpp +++ b/vehicle/OVMS.V3/components/ovms_webserver/src/web_framework.cpp @@ -361,7 +361,7 @@ void PageContext::input_slider(const char* label, const char* name, int size, co "<label class=\"control-label col-sm-3\" for=\"input-%s\">%s:</label>" "<div class=\"col-sm-9\">" "<div class=\"form-control slider\" data-default=\"%g\" data-reset=\"false\"" - " data-value=\"%g\" data-min=\"%g\" data-max=\"%g\" data-step=\"%g\">" + " data-value=\"%g\" data-min=\"%g\" data-max=\"%g\" data-step=\"%g\" data-checked=\"%s\">" "<div class=\"slider-control form-inline\">" "<input class=\"slider-enable\" type=\"%s\" %s> " "<input class=\"form-control slider-value\" %s type=\"number\" style=\"width:%dpx;\"" @@ -380,6 +380,7 @@ void PageContext::input_slider(const char* label, const char* name, int size, co , _attr(name) , label , defval, value, min, max, step + , (enabled != 0) ? "true" : "false" , (enabled < 0) ? "hidden" : "checkbox" // -1 => no checkbox , (enabled > 0) ? "checked" : "" , (enabled == 0) ? "disabled" : ""
I've tested this quick & dirty on the Wifi config page by testing for the default value, that worked as expected.
Regards, Michael
Am 27.12.22 um 11:32 schrieb Michael Geddes:
Unfortunately that doesn't work (detail below). The code I had worked much better from the framework generated input box.. but I'm not sure how to test it in a plugin.
I have the 2 sliders with checkboxes on http://ov.ms/#/xkn/battery (ov.ms is a local network alias for my ovms box). I have one slider unchecked and one checked.
Just putting data-checked as an attribute in the generated code caused both sliders to be disabled on first load!
//.ichael
On Tue, 27 Dec 2022 at 15:54, Michael Balzer <dexter@expeedo.de> wrote:
Michael,
I remember I changed the slider enable/disable control scheme from reading the checkbox state to using the data attribute / option for a reason, but I cannot remember exactly which now. I think it was to get consistent dynamic controllability.
My initial commit was ec1a874dadce01e8bd588c20115d890acd9149c2, which used the checkbox state. A few days later in 91ed78a3d7ac5392eadd65be026a1a0fc77a611e I changed this to using the `checked` option, but missed adding `data-checked` to `PageContext::input_slider()` accordingly.
Sliders using the enable/disable feature at that time only appeared in plugins/pages doing dynamic initialization, so this didn't become visible. Plugins normally create sliders by data attributes or init options, not by explicit markup.
TL;DR: I think the fix would probably better be to add the missing `data-checked` to the markup created by `PageContext::input_slider()`.
Regards, Michael
Am 27.12.22 um 04:40 schrieb Michael Geddes:
Right, so that didn't work if the check-box was disabled (like in wifi)- but this does seem to work!
var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: ($cbi.prop("type") === "hidden" || $cbi.prop("checked")) }, $sld.data());
//.ichael
On Tue, 27 Dec 2022 at 11:04, Michael Geddes <frog@bunyip.wheelycreek.net> wrote:
Hi all, I've noticed that if you create a 'slider' widget with a checkbox that if it's unchecked when it first loads, then the slider is enabled. If you check/uncheck then the slider is disabled. Or at least that's what I seen in google chrome.
I'm really not familiar with NodeJS, but this _seems_ to fix the problem:
Does this fix make sense? If so - I'll do a p/r for it.
//.ichael
* Slider widget plugin */
$.fn.slider = function(options) { return this.each(function() { - var $sld = $(this).closest('.slider'), data = $.extend({ checked: true }, $sld.data()); + var $sld = $(this).closest('.slider'), $cbi = $sld.find('.slider-enable'), data = $.extend({ checked: $cbi.prop("checked") }, $sld.data()); var opts = (typeof options == "object") ? options : data; // init? if ($sld.children().length == 0) { var id = $sld.attr('id'); $sld.html('\
_______________________________________________ OvmsDev mailing listOvmsDev@lists.openvehicles.comhttp://lists.openvehicles.com/mailman/listinfo/ovmsdev
-- Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
_______________________________________________ OvmsDev mailing list OvmsDev@lists.openvehicles.com http://lists.openvehicles.com/mailman/listinfo/ovmsdev
_______________________________________________ OvmsDev mailing listOvmsDev@lists.openvehicles.comhttp://lists.openvehicles.com/mailman/listinfo/ovmsdev
-- Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
_______________________________________________ OvmsDev mailing list OvmsDev@lists.openvehicles.com http://lists.openvehicles.com/mailman/listinfo/ovmsdev
participants (2)
-
Michael Balzer -
Michael Geddes