I/O monitor with auto refresh and display update

Place to put your Basic demos and examples

Moderator: Mmiscool

 Reply

User avatar

Re: I/O monitor with auto refresh and display update

By trackerj
- Sun Feb 19, 2017 2:53 am #62758 I would avoid to use the
Code: Select allmeta http-equiv='refresh'
as you have already in place websockets & stuff.

Try also to use the minimum necessary of "wprint" functions, you will find sooner or later that is a good idea.

See code below:

Code: Select all' ### Branch 3.0 Alpha ###
' autoupdate values using websockets
timer 1000, [branch] ' ## Time for auto refresh variables ##
cls

gosub [readdata]
wprint "<table border='1'><tr><td>ADC</td><td>"
textbox ADCin
wprint "</td></tr><tr><td>GPIO0</td><td>"
textbox PIO0
wprint "</td></tr><tr><td>GPIO2</td><td>"
textbox PIO2
wprint "</td></tr><tr></table><p>It will Stopped Timer and END Program ==> "
button End, [TestExit]
wprint "<br>Otherwise the timer is left running and then it is difficult to access the ESP8266 Basic Interpreter window"
wait

[TestExit]
timer 0
end

[branch]
gosub [readdata]
wait

[readdata]
ADCin = io(ai)     'update variable with latest analog in
PIO0 = io(pi , 0) ' PIO0
PIO2 = io(pi , 2) ' PIO2
return


Also I would think about using <DIV> tag for creating table, as been easier after that to combine it later with CSS.

I hope it helps.

Happy breadboarding,
TJ.
User avatar

Re: I/O monitor with auto refresh and display update

By Pierre
- Sun Apr 23, 2017 10:39 am #65168 Hi

As I am new to ESP8266Basic, the code supplied by you was of great help. I want to use the module to control the terrarium of my daughter's bearded dragon. It has a few lights for UV, infra red and heating. I must also measure the temperature and humidity. As said I used your code and the basic routine work perfect. I am only finished with the manual switching and display, I must still do the automation where the lights can be controlled at a certain time and temperature. I did encounter something strange, where I do not know if it is my own stupidity or a bug. The program also display the current time and date in a cell of the table with the time() command and it is updated every second which shows then as a normal clock. The data (date and time) however is cut of at the end and does not show the full date and time in the cell. For example the last part of 2017 only shows 20 in Firefox on Microsoft OS and 201 in IE on Microsoft OS. The strange part of is on my Android tablet and cellular phone it shows correctly as 2017 in the browser. I was always under the impression that the cell width should adjust automatically to the length of data that is presented in the cell. Do you have any ideas maybe?

My code is as follows :

PinDHT = 12
DHT.SETUP(11 , PinDHT)
Lig1 = "Af"
Lig2 = "Af"
Lig3 = "Af"
cls



timer 1000, [branch] ' ## Time for auto refresh variables ##


gosub [readdata]
wprint |<body style="background-color:powderblue;">|
wprint |<H1><span style="color: red;">|
wprint "I/O Controller with Date, Time, Temperature and Humidity Display"
wprint "</H1>"
wprint "</span>"

wprint "<table border='1'><tr><td>Datum</td><td>"
textbox Dagentyd
wprint "</td></tr><tr><td>Humidity </td><td>"
textbox Hum
wprint "</td></tr><tr><td>Temperature Deg C</td><td>"
textbox Temp
wprint "</td></tr><tr><td>Lig 1</td><td>"
textbox Lig1
wprint "</td></tr><tr><td>Lig 2</td><td>"
textbox Lig2
wprint "</td></tr><tr><td>Lig 3</td><td>"
textbox Lig3

wprint "</td></tr></table><p>"

wprint "<p> Click to switch red led <br>"
button "On",[onred]
button "Off",[offred]
wprint "<p> Click to switch green led <br>"
button "On",[ongreen]
button "Off",[offgreen]
wprint "<p> Click to switch yellow led <br>"
button "On",[onyellow]
button "Off",[offyellow]
wprint "<p> Click to Exit <br>"
button "Exit", [TestExit]

Wait

[onred]
io(po,14,1)
Lig1 = "Aan"
Wait

[offred]
io(po,14,0)
Lig1="Af"
Wait

[ongreen]
io(po,4,1)
Lig2 = "Aan"
Wait

[offgreen]
io(po,4,0)
Lig2 = "Af"
Wait

[onyellow]
io(po,5,1)
Lig3 = "Aan"
Wait

[offyellow]
io(po,5,0)
Lig3 = "Af"

wait

[TestExit]
timer 0
end

[branch]
gosub [readdata]
wait

[readdata]
Dagentyd = time() 'Current Date and Time
Temp = DHT.TEMP() 'Current Temperature
Hum = DHT.HUM() 'Current Humidity

return
You do not have the required permissions to view the files attached to this post.
User avatar

Re: I/O monitor with auto refresh and display update

By trackerj
- Mon Apr 24, 2017 5:06 am #65191 In Firefox CTRL + , CTRL- are your friends. Indeed at 100% zoom is not fitting entirely inside visible part of texbox.
To have your own fixed proper width size Texbox you better use CSS.
User avatar

Re: I/O monitor with auto refresh and display update

By Pierre
- Mon Apr 24, 2017 6:47 am #65194 Hi
Thank you for the quick reply. I will have to do some read up about html and CSS in esp8266Basic as I not sure how to fully implement it in the environment. I have done some Webpage design before with Html and CSS, but it seems a little different with esp8266Basic.
Regards
Pierre
 Reply
Return to Programming Examples