changing CSS "on the fly" for a textbox?

63 views
Skip to first unread message

Zim

unread,
Feb 11, 2021, 7:08:19 PM2/11/21
to Annex WiFi RDS
Hi Gents
I am having grief trying to change a "textbox background color" when the parameter exceeds a given value.( >30 humidity)
Please see the example on what I need below....Please see the code under "update:"
This doesn't work. Any suggestions please?
Thanks
Zim

2021-02-11 16_20_55-Window.jpg

2021-02-11 16_22_34-Window.jpg




CODE: xxxx.bas

onHtmlReload create_page 
onhtmlchange update
D1 = 5    ' temp/hum sensor DTH22
DHT.SETUP 5, 22 
tmp = DHT.TEMP
hm = DHT.HUM
wtr$ = "NO"
txtbtmp$ = "background-color:white;text-align:center;display:block;width:54px;height:42px;font-size:30;font-weight:bold"
txtbwtr$ = "background-color:white;text-align:center;display:block;width:60px;height:42px;font-size:30;font-weight:bold"
txtbhm$ = "background-color:red;text-align:center;display:block;width:54px;height:42px;font-size:30;font-weight:bold"
gosub create_page
timer0 2000, update
wait

create_page:
cls
A$ = ""
A$ = A$ + |<!DOCTYPE html><html><body><style>|
A$ = A$ + |body {background-color: black;}|
A$ = A$ + |p {font-size:24px;}|
A$ = A$ + |</style>|
A$ = A$ + |<table align='center' width='300' height='100' bgcolor='lightgreen' border='1' cellpadding='8'>|
A$ = A$ + |<th>|
A$ = A$ + |<p>Basement<br>Temp.</p></th></center>|
A$ = A$ + |<th><center>|
A$ = A$ + textbox$(tmp, "txt1")
A$ = A$ + |</th></center>|
A$ = A$ + cssid$("txt1", txtbtmp$)
A$ = A$ + |</table>|
A$ = A$ + |<table align='center' width='300' height='100' bgcolor='lightgreen' border='1' cellpadding='8'>"|
A$ = A$ + |<center><th>|
A$ = A$ + |<p>Basement<br>Humidity</p>|
A$ = A$ + |</th></center>|
A$ = A$ + |<th><center>|
A$ = A$ + textbox$(hm, "txt2") 
A$ = A$ + |</th></center>|
A$ = A$ + cssid$("txt2", txtbhm$)
A$ = A$ + |</table>|
A$ = A$ + |<table align='center' width='300' height='100' bgcolor='lightgreen' border='1' cellpadding='8'>"|
A$ = A$ + |<center><th>|
A$ = A$ + |<p>Water<br>Detection</p>|
A$ = A$ + |</th></center>|
A$ = A$ + |<th><center>|
A$ = A$ + textbox$(wtr$, "txt3")
A$ = A$ + |</th></center>|
A$ = A$ + cssid$("txt3", txtbwtr$)
A$ = A$ + |</table>|
HTML A$
A$ = ""
autorefresh 1000
return


update:
tmp = DHT.TEMP
hm = DHT.HUM
pause 200

if hm > 30 then txtbhm$ = "background-color:red;text-align:center;display:block;width:54px;height:42px;font-size:30;font-weight:bold" else txtbhm$ = "background-color:white;text-align:center;display:block;width:54px;height:42px;font-size:30;font-weight:bold"


refresh
return







Bugs

unread,
Feb 12, 2021, 5:25:08 AM2/12/21
to Annex WiFi RDS
I thought my program worked ok doing this - but when I extracted the relevant parts to try, I found similar to you.  Have not worked out how my (very large) program (ESP32) is managing this.
With the extracted part I find that changing the value in a textbox does not trigger the  onhtmlchange  so createpage does not get called.  I added a wlog "HTML done"  at the end of the  createpage  routine and it only logs the initial call.
Colour me puzzled...

Bugs

unread,
Feb 12, 2021, 8:27:32 AM2/12/21
to Annex WiFi RDS
This does not do what I expected when the textbox contents change:-

CODE: xxxx.bas
'html test

a$="" 
  gosub dohtml
  onhtmlchange dohtmlchange  
  ONHTMLRELOAD  dohtml  
  timer0 2000, doscan
wait
 
doscan:  
 a$=a$ & "*"
 refresh
return  

dohtmlchange:
  wlog HtmlEventVar$ 
  wlog "done change"
  print "done change"
return    
    
dohtml:
cls
html textbox$( a$)
wlog "done html"
print"done html"
return

Electroguard

unread,
Feb 12, 2021, 9:01:05 AM2/12/21
to Annex WiFi RDS
Best not to cause confusion by asking questions or adding content to the old forum which is now superseded by the new forum.
So if you ask the same question on the new forum I will offer the solution to your problem over there.

Bugs

unread,
Feb 12, 2021, 9:43:45 AM2/12/21
to Annex WiFi RDS
But I don't get any email notifications from the new forum so can't keep track of the posts.

Electroguard

unread,
Feb 12, 2021, 11:05:18 AM2/12/21
to Annex WiFi RDS
I've just posted how to get email notifications in the new forum News
Reply all
Reply to author
Forward
0 new messages