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:






Friday, April 21, 2017

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
slider x,150,900
timer 500, [set.dimmer]
wprint "<br><br>"
button " Exit ", [TestExit]

wait

[set.dimmer]
 if x <> xpv then
   io(pwo,PWMpin,x)
   xpv = x
 end if
wait

[TestExit]
wprint |<a href="./edit"> Edit</a>|
end

 Yes, it's all there, plus some extras :)

The Power of ESPBasic !