-->
Page 1 of 2

Basics of displaying dynamic variables on browser?

PostPosted: Tue May 03, 2016 11:06 am
by kbaykar
I have recently downloaded the latest release, version 2.0 of ESP Basic.
My aim is to build a sort of form page to display setting parameters of a device that is serially connected to ESP-8266 module; browse as well as set parameters through WiFi connection.

"Serial2" connection works fine, reliable, for both send and receive. Also "timer" function works very fine. However, I could not manage to refresh the variables on the form, on browser's screen from the values received via Serial2 connection :( .

So what is the basics, or underlying mechanism of updating or refreshing a variable on browser actually?
( when we stay with the scope of ESP Basic )

The language reference is good, but I think it is lacking in code examples.

Re: Basics of displaying dynamic variables on browser?

PostPosted: Wed May 04, 2016 1:09 pm
by Electroguard
I'm not the best person to be giving such advice, but going on the assumption that for the moment perhaps anything is better than nothing, I'll stick my neck out...

When you are sending info back to the browser, it doesn't usually get sent until the next 'wait' instruction gathers it all up and sends it back. So if you're stuck 'waiting' for something to happen, nothing will actually get sent back until you trigger something like a button event.
I've seen it mentioned somewhere about triggering screen refresh to update dynamic variables, but I found a different simple way around that problem for myself, and perhaps it might also work for your situation.

Basically, set up something like a [screen] branch that the program drops down through after initiallising all the variables etc, and only after that, do any screen writes (html, buttons, textboxes etc), and then the program drops on down to 1 single solitary lone wait instruction where it will inevitably end up waiting. The idea is that any and all program branches don't have their own waits, but instead terminate their subroutine branches with goto [screen], so the program jumps up above all your html and web components which can then be updated with any new data each time after doing a cls, before dropping down to the common wait again. Something along these lines...

let data = "empty"
[screen]
cls
button data [get_new_data]
html "display changing data here " & data
wait


[get_new_data]
let data = "new data"
goto [screen]


If you have a look at the button example I posted here,
http://www.esp8266.com/viewtopic.php?f=45&t=9701
you can see that the screen (button) keeps being updated with changing data.

Don't know if it can be adapted to help you, but I don't see why your serial branches shouldn't do similar, so at least it's something you can be trying until you can be better advised by someone with more experience.

Re: Basics of displaying dynamic variables on browser?

PostPosted: Wed May 04, 2016 2:20 pm
by Mmiscool
The browser will update the page when an action is taken like clicking a button or if you hit the refresh button in the browser. You can also use a bit of html auto redirect code to make it refresh the page.

If you want a variable to update in the page each time it is refreshed try using the following.

Wprint htmlvar(bla)

Each time the page is refreshed the current value of bla will be ruturned in the page.


Code: Select alllet data = "empty"
[screen]
cls
button data [get_new_data]
html "display changing data here " & htmlvar(data)
wait


[get_new_data]
let data = "new data"
goto [screen]

Re: Basics of displaying dynamic variables on browser?

PostPosted: Fri May 06, 2016 9:17 am
by kbaykar
I thank you for your kind reply. I did some work on the matter as follows:

Code: Select all'///////////////////////////////////////////////////////
' Mainstream program code.
'
memclear
let retSerDat$ = "Empty"  'initialize, holds returned serial data!
let sdc = 0               'initialize, controls arrival of serial data!
serial2begin 19200,14,12  'setup soft implemented Serial2 port!
serial2branch [serial2in] 'define handler for receiving Serial2 port data!
[screen]
cls
wprint "<h2>Communication Through Serial Port</h2>"
button "Get Data" [get_new_data]
wprint "<br><br>"
wprint "Display data=  " & retSerDat$
print
wait

'///////////////////////////////////////////////////////
' "Get Data" Button Handler code.
'
[get_new_data]
serial2println "Request" 'send the request to Serial2 port!
do                       'although we run an endless loop here, one can simply implement a timeout mechanism!
loop until sdc > 0       'waiting for the arrival of serial data!
let sdc = 0
goto [screen]

'///////////////////////////////////////////////////////
' Serial2 Port Handler code for data receival.
'
[serial2in]
serial2input retSerDat$  'receive serial data!
let sdc = 1              'signal that serial data received!
return

When we run the program, pressing "Get Data" button initiates sending "Request" string out from Serial2 port. Then program waits in an endless loop for the incoming data (Here, one can implement a timeout mechanism). On the other side of the serial port, I have a terminal program, via receive the "Request" text, then send "Reply" text. When the reply received through the Serial2 port's handler code, program flow skips over the wait loop and finally refreshes the screen. Thus, the incoming reply data is displayed.

Clearing then refreshing screen is not the best way, since causes some flickering on screen during updating the whole screen. Except this point, solution works perfect. I have prepared some screenshoots to better explain, however I could not paste them here for some reason.