ESP8266 Community Forum

- Wed Apr 06, 2016 12:08 pm #44979 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!!!!!

- Wed Apr 06, 2016 2:48 pm #44999 Hi, look at this example
viewtopic.php?f=41&t=8557

You need to use the .css file.

- Fri Apr 15, 2016 11:25 pm #45562 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

Helpful? Donate To help support Mike http://www.esp8266basic.com click the donate button lets keep this project going and hope we can get the ESP32 in the mix. BEGINNERS GUIDE HERE http://www.esp8266.com/viewtopic.php?f=40&t=6732

Where I buy my ESP8266 boards from... (Banggood)

- Sat Apr 16, 2016 12:37 pm #45594 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.