A quick example on how to change your Web interface GUI objects properties without using a separate CSS file:
Reading Humidity and Temperature from a DHT22 Sesor connected to the GPIO5 and also retrieving Date and Time from NTP Server:
PinDHT = 5


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]


timer 0

gosub [readdata]

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

If all OK the result will look as in the above browser picture.

Categories: ESPBasicTemperature

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts


ESPBasic Series: Web Interface Slider demo

How easy or complicated is in ESPBasic to have a instant response slider for your MPDMv4 AC Dimmer Web interface? Just look at the code below: cls let xpv = 0 let PWMpin = 5 Read more…


ESPBasic Series : Decimal-to-Binary conversion

I was looking a while ago to implement some Decimal-to-Binary conversion subroutine to be used for easy visualisation of the Registry content. Been able to see the values directly binary can help a lot when Read more…


ESPBasic Series – DEC to BCD and BCD to DEC conversions

In the process of working on a new Driver Tutorial for the ESPBasic Series I am looking today to implement some Decimal-to-BCD and BCD-to-Decimal subroutines. What I have done so far: 1. BCD-to-Decimal subroutine: [DEC] Read more…