- Mon Apr 18, 2016 10:01 am
#45722
HI all,
please find here another example, extended from the previous one.
This example shows how it's possible to set variables inside the ESP from the browser and also how GET variables from the ESP to the browser. The principle is still the same, AJAX and basic.
This example shows a slider and one textbox; the slider controls the PWM as in the previous example but the textbox receive a variable (a simple random number) at 1 second interval from the ESP.
Developing this example, you can make a web page where the information changes dynamically in function of ESP stimulus (switches, temperature, ...).
As you can see, all this with only few lines of code .....
CiccioCB
p.s. : I can warranty that this code is genuine
please find here another example, extended from the previous one.
This example shows how it's possible to set variables inside the ESP from the browser and also how GET variables from the ESP to the browser. The principle is still the same, AJAX and basic.
This example shows a slider and one textbox; the slider controls the PWM as in the previous example but the textbox receive a variable (a simple random number) at 1 second interval from the ESP.
Developing this example, you can make a web page where the information changes dynamically in function of ESP stimulus (switches, temperature, ...).
As you can see, all this with only few lines of code .....
Code: Select all
memclear
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 textbox
wprint |<br><input type="text" id="myText" value="textbox_ajax">|
'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$ & |}|
'fun$ = fun$ & |return xmlHttp.responseText;}|
' this is where the code is inserted into the html
wprint "<script>" & fun$ & "</script>"
'this is another function called by the timer 1 time/ sec
fun$ = |function myTimer() {|
fun$ = fun$ & |var d = new Date();|
fun$ = fun$ & |var xmlHttp = new XMLHttpRequest();|
fun$ = fun$ & |xmlHttp.open("GET", "msg?req=OK", false);|
fun$ = fun$ & |xmlHttp.send(null);|
fun$ = fun$ & |var r = xmlHttp.responseText;|
fun$ = fun$ & |document.getElementById("myText").value= r;|
fun$ = fun$ & |}|
fun$ = fun$ & |var myVar = setInterval(myTimer, 1000);|
wprint "<script>" & fun$ & "</script>"
'this is where the prog will jump on slider change
'and also at the javascript timer interval (1000 msec)
msgbranch [message]
wait
[message]
msgget "pwm" mess
if mess <> "" then goto [PWM.MSG]
msgget "req" mess
'uncomment this line to see the value received
'serialprintln mess
'this is just a random number; can be a pin input, temp sensor, ....
ret = rnd(9999)
msgreturn ret
wait
[PWM.MSG]
'uncomment this line to see the value received
'serialprintln mess
pwo 13 mess
waitCiccioCB
p.s. : I can warranty that this code is genuine
