button and slider, etc...
Posted:
Wed Apr 06, 2016 12:08 pmby viscomjim
Esp8266basic has been my first foray into web and html stuff, so forgive if a stupid question. When using the button and slider type commands, they create buttons that when viewed on a mobile device are very small and one has to constantly stretch the screen to see these at a larger size. Is there a simple way to make the buttons and sliders, etc. larger from the get go? So, for example if you have two buttons, can you make them really big on the mobile device so that they are really easy to see, and can you color them.
If this is possible, can you give a short example of code for maybe one button just to see how it is done?
Thanks!!!!!
Re: button and slider, etc...
Posted:
Wed Apr 06, 2016 2:48 pmby cicciocb
Hi, look at this example
viewtopic.php?f=41&t=8557You need to use the .css file.
Re: button and slider, etc...
Posted:
Fri Apr 15, 2016 11:25 pmby forlotto
I would like to see real time action on a slider so as you slide your light would dim via pwm have not seen an example of how to accomplish this as of yet and haven't gave it a lot of thought either kinda just crossed my mind as a useful thing maybe it could be added as an element in the basic ide a pwm dimmer slider that would just do it ...
for instance
pwmdimslider "DIMMER" [dim program]
[dim program]
dim program code here
Re: button and slider, etc...
Posted:
Sat Apr 16, 2016 12:37 pmby cicciocb
I Think that this is what you are looking for.
It' s a little implementation of javascript into basic
Code: Select allmemclear
cls
' this is the default value for pwm out
pdef = 512
' this is the pin defined as pwm output
pwo 13 pdef
' this is the slider
wprint |<input type="range" id="dimmer" oninput="setPWM()" onclick="setPWM()" min="0" max="1023" value="| & pdef & |"/>|
'this is the javascript "ajax" code
fun$ = |function setPWM() {|
fun$ = fun$ & |lum=document.getElementById("dimmer").value;|
fun$ = fun$ & |window.event.returnValue = false;|
fun$ = fun$ & |var xmlHttp = new XMLHttpRequest();|
fun$ = fun$ & |xmlHttp.open("GET", "msg?pwm=" + lum, false);|
fun$ = fun$ & |xmlHttp.send(null);|
fun$ = fun$ & |return xmlHttp.responseText;}|
' this is where the code is inserted into the html
wprint "<script>" & fun$ & "</script>"
'this is where the prog will jump on slider change
msgbranch [message]
wait
[message]
msgget "pwm" mess
'uncomment this line to see the value received
'serialprintln mess
pwo 13 mess
wait
Hope this works for you.