Monday, April 24, 2017

ESPBasic - Web Interface - CSS elements example

A quick example on how to change your Web interface GUI objects properties without using a separate CSS file.

Reading Himidity and Temperature from a DHT22 Sesor connected to the GPIO5 and also retrieving Date and Time from NTP Server:

PinDHT = 5
DHT.SETUP(22, PinDHT)

cls

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

wprint |<body style="background-color:powderblue;">|
wprint |<H1><span style="color: red;">|
wprint "Example for changing GUI object properties with CSS"
wprint "</H1>"
wprint "</span>"

wprint "<table border='1'><tr><td>Date</td><td>"
textbox Dtm
cssid htmlid(), "background-color: yellow;display:block;width:160px"
wprint "</td></tr><tr><td>Humidity </td><td>"
textbox Hum
cssid htmlid(), "background-color: grey;color:#F00;display:block;width:40px"
wprint "</td></tr><tr><td>Temperature Deg C</td><td>"
textbox Temp
cssid htmlid(), "background-color: #ccaabb;display:block;width:40px"

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

wprint "<p> Click to Exit <br>"
button "Exit", [TestExit]

Wait


[TestExit]
timer 0
end

[branch]
gosub [readdata]
wait

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


The result looks as below:






1 comment:

Evelin Harriet said...

Nice article, I loved it. Thanks for sharing and keep sharing. Get a ERP software for you small business.For more details contact us.
erp in chennai
cloud erp in chennai
leather erp in chennai
trading erp in chennai
franchise erp in chennai

Post a Comment