- Mon Nov 16, 2015 9:31 am
#34180
Would it be possible for the slider to update if there is any change in value as opposed to having to click a button to update the value. I am not sure if this is a limitation of web or basic.
Moderator: Mmiscool
- Mon Nov 16, 2015 9:53 am
#34186
I think that should be doable with a little added javascript to trigger on the "onchange" event in the browser. I'm not too savy with js myself, but I may give it a go later.
The idea will be to create the slider, assign a function to the sliders onchange event, and add the js function to effectively do what the button is doing.
Edit: Its now later :)
Try this example:
Notes: The first javascript line sets the onchange event to the form submit function, then second line hides the button.
The form elements are accessed via the document.forms[0].elements[x] mechanism, where "x" is the number of the element you want to modify, based on creation order. So, in this example, the first element is the slider, so its accessed via document.forms[0].elements[0] and the button is the second element in the form, accessed via document.forms[0].elements[1].
You'll notice theres a space where the button would be. If you want to eliminate the space as well, change the second javascript line to be:
Update: After more thorough testing, i found that the setp variable in the interpreter wasn't being updated, even though the textbox was. So I opted to "click the button" via javascript, now it works as expected.
Here is the updated code that works properly:
viscomjim wrote:Would it be possible for the slider to update if there is any change in value as opposed to having to click a button to update the value. I am not sure if this is a limitation of web or basic.
I think that should be doable with a little added javascript to trigger on the "onchange" event in the browser. I'm not too savy with js myself, but I may give it a go later.
The idea will be to create the slider, assign a function to the sliders onchange event, and add the js function to effectively do what the button is doing.
Edit: Its now later :)
Try this example:
Code: Select all
memclear
cls
let setp = 74
wprint "<center><h1 style="font-size:200%">Rotohammers ESP8266Basic Slider Test "
print
slider setp 55 90
Button "Setpoint" [setpt]
textbox setp
wprint "</h1>"
wprint "</center>
wprint "<script LANGUAGE='JavaScript'>document.forms[0].elements[0].onchange=function(){this.form.submit()};document.forms[0].elements[1].style.visibility='hidden';</script>"
wait
Notes: The first javascript line sets the onchange event to the form submit function, then second line hides the button.
The form elements are accessed via the document.forms[0].elements[x] mechanism, where "x" is the number of the element you want to modify, based on creation order. So, in this example, the first element is the slider, so its accessed via document.forms[0].elements[0] and the button is the second element in the form, accessed via document.forms[0].elements[1].
You'll notice theres a space where the button would be. If you want to eliminate the space as well, change the second javascript line to be:
Code: Select all
document.forms[0].elements[1].style.display='none';Update: After more thorough testing, i found that the setp variable in the interpreter wasn't being updated, even though the textbox was. So I opted to "click the button" via javascript, now it works as expected.
Here is the updated code that works properly:
Code: Select all
memclear
cls
let setp = 74
wprint "<center><h1 style="font-size:200%">Rotohammers ESP8266Basic Slider Test "
print
slider setp 55 90
Button "Setpoint" [setpt]
textbox setp
wprint "</h1>"
wprint "</center>
wprint "<script LANGUAGE='JavaScript'>document.forms[0].elements[0].onchange=function(){document.forms[0].elements[1].click()};document.forms[0].elements[1].style.display='none';</script>"
wait
[setpt]
print setp
wait
