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
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

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

AC Dimmer

AC Dimmer DevBoard – MPDMv7.5 – Part 3 – DAC

For a more detailed description please take a look at the Part 1: MPDMv7.5 AC Dimmer devboard overview MPDMv7.5 AC Dimmer devboard ESP Basic program example for the Extra DAC version configuration: address = 96 Read more…

AC Dimmer

AC Dimmer DevBoard – MPDMv7.5 – Part 2

For a more detailed description please take a look at the Part 1: MPDMv7.5 AC Dimmer devboard overview MPDMv7.5 AC Dimmer devboard ESP Basic program example for the basic version configuration: 'write("starttimer",10) cls 'VCNT GPIO Read more…

ESPBasic

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…