Beautify the beast

[Electroguard]

Hi Francesco,
Is there a way to pass a 'For To' count variable from a repeated html line - which has a couple of different Button$ branches - into those subroutine branches when either of the buttons is clicked?

I can control up to 8 relays, each with Bounce and Toggle buttons, which must branch to their respective subroutines.
Which means I must declare 16 individual subroutines, 8 for all the possible Bounce buttons, and 8 for all the Toggle buttons.
It works, but it would be so much better if I could just declare one common Bounce and one common Toggle subroutine, and pass them the appropriate number of the button pressed, so that they could control the corresponding relay.

Doesn't matter if it can't be done, cos I already have a working beast (see its ugly 'warts' below), but would be nice to be able to optimise and beautify it... sort of like this, and passing the appropriate 1 to 8 number of the pressed button.

loop.jpg

relays.jpg

html.jpg

toggles.jpg

bounces.jpg

[bugs]

Not sure if this gives a clue - it was posted by cicciocb in2019.
Calls one button routine only.

Code: [Local Link Removed for Guests]

' DTMF test program - cicciocb 2019
' call the sub DTMF with the symbol in string format
' use the new variable HtmlEventButton$ 

'define the NODEMCU pin numbering
D0=16:D1=5:D2=4:D3=0:D4=2:D5=14:D6=12:D7=13:D8=15:D9=3:D10=1

duration = 250 ' duration of the tone in msec

pin_T1 = D7  'pin output tone 1
pin_T2 = D8  'pin output tone 2

'frequencies
dim rows(4) = 697,   770,  852, 941
dim cols(4) = 1209, 1336, 1477, 1633
dim SYMB$(16) = "1", "2", "3", "A", "4", "5", "6", "B", "7", "8", "9", "C", "*", "0", "#", "D"

cls
a$ = ""
a$ = a$ + "<table>"
a$ = a$ + "<tr>" 
a$ = a$ + "<td>" + button$("1", butpress) + "</td><td>" + button$("2", butpress) + "</td>"
a$ = a$ + "<td>" + button$("3", butpress) + "</td><td>" + button$("A", butpress) + "</td>" 
a$ = a$ + "</tr><tr>"
a$ = a$ + "<td>" + button$("4", butpress) + "</td><td>" + button$("5", butpress) + "</td>"
a$ = a$ + "<td>" + button$("6", butpress) + "</td><td>" + button$("B", butpress) + "</td>"
a$ = a$ + "</tr><tr>"
a$ = a$ + "<td>" + button$("7", butpress) + "</td><td>" + button$("8", butpress) + "</td>"
a$ = a$ + "<td>" + button$("9", butpress) + "</td><td>" + button$("C", butpress) + "</td>" 
a$ = a$ + "</tr><tr>"
a$ = a$ + "<td>" + button$("*", butpress) + "</td><td>" + button$("0", butpress) + "</td>"
a$ = a$ + "<td>" + button$("#", butpress) + "</td><td>" + button$("D", butpress) + "</td>" 
a$ = a$ + "</tr>"
a$ = a$ + "</table>" 
html a$

wait

butpress:
print "butpress", HtmlEventButton$
DTMF HtmlEventButton$
return

sub DTMF(sim$)
  local z
  for z = 0 to 15
    if (SYMB$(z) = ucase$(sim$)) then
      pin.tone pin_T1, cols(z and 3), duration
      pin.tone pin_T2, rows(z >> 2), duration
      exit for
    end if
  next z
end sub

[Electroguard]

I'll have a play with HtmlEventButton$, thanks bugs.

[cicciocb]

Hi Francesco,
Is there a way to pass a 'For To' count variable from a repeated html line - which has a couple of different Button$ branches - into those subroutine branches when either of the buttons is clicked?

I can control up to 8 relays, each with Bounce and Toggle buttons, which must branch to their respective subroutines.
Which means I must declare 16 individual subroutines, 8 for all the possible Bounce buttons, and 8 for all the Toggle buttons.
It works, but it would be so much better if I could just declare one common Bounce and one common Toggle subroutine, and pass them the appropriate number of the button pressed, so that they could control the corresponding relay.

Doesn't matter if it can't be done, cos I already have a working beast (see its ugly 'warts' below), but would be nice to be able to optimise and beautify it... sort of like this, and passing the appropriate 1 to 8 number of the pressed button.

loop.jpg



relays.jpg



html.jpg


toggles.jpg


bounces.jpg

Post your code and I'll show you how to do

[Electroguard]

Here's the big beast.
I've checked that it still runs after stripping out hundreds of lines of non-relay stuff, but it still depends on what device gpio's are available.

Code: [Local Link Removed for Guests]

led0=0:led1=0:led2=0:led3=0:led4=0:led5=0:led6=0:led7=0:led8=0
D2=18:D3=17:D4=19:D5=20:D6=3:D7=14:D8=21:D9=46: neopin=48
showrelays=1
relays=8 'number of relays available (up to 8)
if relays>0 then 
 Relayoff=1: Rlydefault=1-Relayoff'relayoff (0=active Lo, 1=active Hi), rlydefault=rlyoff (defaults to Off, 1-rlyoff defaults to On)
 if relays=1  then Rly1=D7: pin.mode Rly1, output: pin(Rly1)=Rlydefault: Led1=1-pin(Rly1)
 if relays>=2 then Rly2=D6: pin.mode Rly2, output: pin(Rly2)=Rlydefault: Led2=1-pin(Rly2)
 if relays>=3 then Rly3=D5: pin.mode Rly3, output: pin(Rly3)=Rlydefault: Led3=1-pin(Rly3)
 if relays>=4 then Rly4=D4: pin.mode Rly4, output: pin(Rly4)=Rlydefault: Led4=1-pin(Rly4)
 if relays>=5 then Rly5=D3: pin.mode Rly5, output: pin(Rly5)=Rlydefault: Led5=1-pin(Rly5)
 if relays>=6 then Rly6=D2: pin.mode Rly6, output: pin(Rly6)=Rlydefault: Led6=1-pin(Rly6)
 if relays>=7 then Rly7=D8: pin.mode Rly7, output: pin(Rly7)=Rlydefault: Led7=1-pin(Rly7)
 if relays>=8 then Rly8=D9: pin.mode Rly8, output: pin(Rly8)=Rlydefault: Led8=1-pin(Rly8)
 RlyOFFcol$="green": RlyONcol$="red":
 rlynames$="Sentry,GateCam,,,,,,"
 bounce=3000 'relay power cycle (bounce) duration'
endif
onhtmlreload web
gosub web
wait


web:
cls
autorefresh 1000
if (showrelays=1) and (relays>0) then
 gap=0: gap2=1
 a$=a$+"<div  style='display: table; margin-right:auto;margin-left:auto;text-align:center;background:silver;height:auto;border-style:solid;border-color:grey;border-radius:10px; paddingx: 5px 5px 5px 5px;'>"
 a$=a$+|<table align='center' borderx="1px" style='backgroundx:silver;color:blue;border-color:blue;border-radius: 10px; padding: 5px; scale:.9;'>|
 b$="<tr style='vertical-align: baseline'><td>": c$=string$(gap,"&nbsp;"): d$="</td><td>": e$=string$(gap2,"&nbsp;"): f$="</td></tr>" 
 a$=a$+b$+"1"+c$+d$+Led$(Led1)+c$+d$+button$("Bounce",Bounce1)+c$+d$+button$("Toggle",toggle1)+d$+e$+word$(rlynames$,1,",")+f$
 if relays>=2 then a$=a$+b$+"2"+c$+d$+Led$(Led2)+c$+d$+button$("Bounce",Bounce2)+c$+d$+button$("Toggle",toggle2)+d$+e$+word$(rlynames$,2,",")+f$
 if relays>=3 then a$=a$+b$+"3"+c$+d$+Led$(Led3)+c$+d$+button$("Bounce",Bounce3)+c$+d$+button$("Toggle",toggle3)+d$+e$+word$(rlynames$,3,",")+f$
 if relays>=4 then a$=a$+b$+"4"+c$+d$+Led$(Led4)+c$+d$+button$("Bounce",Bounce4)+c$+d$+button$("Toggle",toggle4)+d$+e$+word$(rlynames$,4,",")+f$
 if relays>=5 then a$=a$+b$+"5"+c$+d$+Led$(Led5)+c$+d$+button$("Bounce",Bounce5)+c$+d$+button$("Toggle",toggle5)+d$+e$+word$(rlynames$,5,",")+f$
 if relays>=6 then a$=a$+b$+"6"+c$+d$+Led$(Led6)+c$+d$+button$("Bounce",Bounce6)+c$+d$+button$("Toggle",toggle6)+d$+e$+word$(rlynames$,6,",")+f$
 if relays>=7 then a$=a$+b$+"7"+c$+d$+Led$(Led7)+c$+d$+button$("Bounce",Bounce7)+c$+d$+button$("Toggle",toggle7)+d$+e$+word$(rlynames$,7,",")+f$
 if relays>=8 then a$=a$+b$+"8"+c$+d$+Led$(Led8)+c$+d$+button$("Bounce",Bounce8)+c$+d$+button$("Toggle",toggle8)+d$+e$+word$(rlynames$,8,",")+f$
 a$ = a$ + "</table>"
 a$=a$+" </div>"
endif
html a$: a$=""
return


Toggle1:
pin(Rly1)=1-pin(Rly1): Led1=1-pin(Rly1)
return
Toggle2:
pin(Rly2)=1-pin(Rly2): Led2=1-pin(Rly2)
return
Toggle3:
pin(Rly3)=1-pin(Rly3): Led3=1-pin(Rly3)
return
Toggle4:
pin(Rly4)=1-pin(Rly4): Led4=1-pin(Rly4)
return
Toggle5:
pin(Rly5)=1-pin(Rly5): Led5=1-pin(Rly5)
return
Toggle6:
pin(Rly6)=1-pin(Rly6): Led6=1-pin(Rly6)
return
Toggle7:
pin(Rly7)=1-pin(Rly7): Led7=1-pin(Rly7)
return
Toggle8:
pin(Rly8)=1-pin(Rly8): Led8=1-pin(Rly8)
return

Bounce1:
pin(Rly1)=1-pin(Rly1): Led1=1-pin(Rly1)
pause bounce
pin(Rly1)=1-pin(Rly1): Led1=1-pin(Rly1)
return
Bounce2:
pin(Rly2)=1-pin(Rly2): Led2=1-pin(Rly2)
pause bounce
pin(Rly2)=1-pin(Rly2): Led2=1-pin(Rly2)
return
Bounce3:
pin(Rly3)=1-pin(Rly3): Led3=1-pin(Rly3)
pause bounce
pin(Rly3)=1-pin(Rly3): Led3=1-pin(Rly3)
return
Bounce4:
pin(Rly4)=1-pin(Rly4): Led4=1-pin(Rly4)
pause bounce
pin(Rly4)=1-pin(Rly4): Led4=1-pin(Rly4)
return
Bounce5:
pin(Rly5)=1-pin(Rly5): Led5=1-pin(Rly5)
pause bounce
pin(Rly5)=1-pin(Rly5): Led5=1-pin(Rly5)
return
Bounce6:
pin(Rly6)=1-pin(Rly6): Led6=1-pin(Rly6)
pause bounce
pin(Rly6)=1-pin(Rly6): Led6=1-pin(Rly6)
return
Bounce7:
pin(Rly7)=1-pin(Rly7): Led7=1-pin(Rly7)
pause bounce
pin(Rly7)=1-pin(Rly7): Led7=1-pin(Rly7)
return
Bounce8:
pin(Rly8)=1-pin(Rly8): Led8=1-pin(Rly8)
pause bounce
pin(Rly8)=1-pin(Rly8): Led8=1-pin(Rly8)
return

END   '-------------------- End

[cicciocb]

Hi Robin,
this is how you can reduce the lines of code and simplify your program.
I admit that I used an "advanced" trick creating a Led using a SUB (LedArray) ; I did this because the LED$ function do not permit to use an array element as variable (example LED$(x(1)) is not allowed.
For that purpose, the SUB LedArray create a led with the equivalent command of 'LED$(leds(x))'

Code: [Local Link Removed for Guests]

'set the pins for each output
option.base 1 'set the 1st elements of the arrays at 1
dim pins(8) = 2, 5, 12, 13, 25, 26, 14, 39 
dim names$(8) = "Sentry", "GateCam", "Portal", "Window", "Balcony", "Garage", "Batroom", "Mamma mia"
showrelays = 1
relays = 8 'number of relays available (up to 8)
Relayoff = 1: Rlydefault = 1 - Relayoff'relayoff (0=active Lo, 1=active Hi), rlydefault=rlyoff (defaults to Off, 1-rlyoff defaults to On)

dim leds(relays)

for z = 1 to relays
  pin.mode pins(z), output
  pin(pins(z)) = Rlydefault
  leds(z) = 1 - Rlydefault
next z

bounce=3000 'relay power cycle (bounce) duration'
onhtmlreload web
gosub web
wait

web:
cls
autorefresh 500
if (showrelays=1) and (relays>0) then
 LD$ = ""
 a$ = ""
 a$ = a$ + "<div  style='display: table; margin-right:auto;margin-left:auto;text-align:center;background:silver;height:auto;border-style:solid;border-color:grey;border-radius:10px; paddingx: 5px 5px 5px 5px;'>"
 a$ = a$ + "<table>"
 for z=1 to relays  
   a$ = a$ + "<tr style='vertical-align:baseline'>" 
   a$ = a$ + "<td style='padding:0 0 5px 5px'>" + str$(z)
   LedArray LD$, z
   a$ = a$ + "<td style='padding-right:5px'>" + LD$
   a$ = a$ + "<td style='padding-right:10px'>" + button$("Bounce"+str$(z), bounced)
   a$ = a$ + "<td style='padding-right:15px'>" + button$("Toggle"+str$(z), toggled)
   a$ = a$ + "<td style='color:blue'>" + names$(z)   
 next z
 a$ = a$ + "</table>"
endif
html a$: a$=""
return
end

bounced:
'extract the button number from the name
z = val(right$(HtmlEventButton$,1))
pin(pins(z)) = 1 - pin(pins(z))
leds(z) = 1 - pin(pins(z))
pause bounce
pin(pins(z)) = 1 - pin(pins(z))
leds(z) = 1 - pin(pins(z))
refresh
return

toggled:
'extract the button number from the name
z = val(right$(HtmlEventButton$,1))
pin(pins(z)) = 1 - pin(pins(z))
leds(z) = 1 - pin(pins(z))
refresh
return

'==== sub that create a led with leds(x) variable
sub LedArray(l$, x)
l$ = "<svg height='20' width='30' style='top:5;position:relative'><circle cx='15' cy='10' r='9' stroke='black' fill= 'green' data-var='leds($$$)' /></svg>" 
l$ = replace$(l$, "$$$", str$(x))
end sub

[Electroguard]

Yes, I had noticed it was not possible to use Led$(formula), so I was able to get around that by using L$="Led"+str$(count): L=Val(L$): Led$(L)
I also noticed it was not possible to use a string$ variable to specify the branch label in Button$("title",branch) ... (perhaps a future enhancement)

Thank you for your elegant solution Francesco, you certainly are an excellent beautician.


Edit:
And looking at your neat table code it suggests that I've been needlessly tangling myself up adding unnecessary </td> and </tr> closing tags.


Edit2:
Yeah, I am very happy with that...

pretty.jpg

[Electroguard]

I admit that I used an "advanced" trick creating a Led using a SUB (LedArray) ; I did this because the LED$ function do not permit to use an array element as variable (example LED$(x(1)) is not allowed.
For that purpose, the SUB LedArray create a led with the equivalent command of 'LED$(leds(x))'

I always try to learn from you Francesco, and I can see where the sub LedArray specifies the green fill colour, but I am puzzled how it changes to red... is this colour change to red somehow hidden inside the 'advanced trick' ?

Code: [Local Link Removed for Guests]

sub LedArray(l$, x)
l$ = "<svg height='20' width='30' style='top:5;position:relative'><circle cx='15' cy='10' r='9' stroke='black' fill= 'green' data-var='leds($$$)' /></svg>" 
l$ = replace$(l$, "$$$", str$(x))
end sub

[cicciocb]

I always try to learn from you Francesco, and I can see where the sub LedArray specifies the green fill colour, but I am puzzled how it changes to red... is this red colour change somehow hidden inside the 'advanced trick' ?

The colors green and red are hard coded inside the javascript code contained in the "Output" page.
The colors are pre-defined and cannot be changed simply modifying the "fill = '....'" field.

However, you could use a string array for the LEDs variable and set the color directly.

[Electroguard]

Ah, that explains it ... I don't want to change the colours, I was just trying to understand what was going on.


Edit: Something I've only just realised (so am pointing out for benefit of others) is that HtmlEventButton$ does not require onHtmlChange like HtmlEventVar$ does.