Project - UDP Web Sliders

This script has its own browser sliders for local control of NeoPixels or RGB LEDs or Sonoff B1 lamps.
It can also UDP broadcast the sliders 24bit combined colour value to control any other listening UDP devices on the same subnet - therefore multiple devices can be controlled by each others browser sliders and/or by the Toolkit UDP Console.

Instead of 3 separate scripts, they are combined into one using Radio Buttons to select  NeoPixels or RGB LEDs or Sonoff B1s lamp to prevent their gpio's interacting.

Note:
Pay attention to the  s w e e t  active sliders...
       replace$(slider$(r, 0, 255,"R"), "onchange", "oninput")
which branch on immediate change to the branch declared by onhtmlchange  (ie:changeit) in the example below (thanks CiccioCB)
(normal slider$ components only branch onhtmlchange when the mouse lets go of the slider)

This demo video shows the script being used to select NeoPixels or RGB LED or Sonoff B1 Lamp using the radio buttons. 

Basic:

' UDP
R,G,B Sliders for NeoPixels or RGB LEDs or Sonoff B1 Lamps - developed on Annex 1.41 beta2 - Electroguard
title$         = "UDP Web Sliders
RGB Controller"
localIP$   = WORD$(IP$,1)
netIP$      = WORD$(localIP$,1,".") + "." + WORD$(localIP$,2,".") + "." + WORD$(localIP$,3,".") + "."
udpport    = 5001                                    'change to suit your own preference, but don't forget to do the same for all nodes
udp.begin(udpport)
onudp udpRX
r=0:g=0:b=0                                             'define initial R,G,B values
ledtype=0                                                  '1=neopixels, 2=standard RGB led, 3-Sonoff B1
HtmlEventVar$=""
gosub init
gosub changeit                                        'branch to set values
onhtmlchange changeit              
gosub screen                                           'send screen output to browser
wait

init:
select case ledtype                                  '1=neopixels, 2=standard RGB led, 3-Sonoff B1
case 1
 pixels = 12                                                 'declare how many pixels to be addressed (12 for this example)
 neo.setup pixels                                       'initalise for declared number of pixels
case 2
 Rpin=12: Gpin=15: Bpin=13                   'assign gpio pins to R,G,B leds 
case 3
 sonoffb1.init
end select
return

udpRX:
x=val(udp.read$)                                          'read incoming 24bit combined RGB value
b=(x and &hff)                                               'extract just the B value
g=(x >> 8) and &hff                                      'extract just the G value
r=(x >> 16) and &hff                                     'extract just the R value
gosub changeit
return

changeit:
if HtmlEventVar$="ledtype" then                 'radio button changed so re-initialise for different ledtype
 gosub init
 return
endif
refresh
msg$=str$(Neo.RGB(r,g,b))                        'combines the 3 colour values into a single 24bit value
udp.write netIP$+"255", udpport, msg$ 
select case ledtype                                       '1=neopixels, 2=standard RGB led, 3-Sonoff B1
case 1
 neo.strip 0,pixels-1,r,g,b
case 2
 pwm(12)=r*4                                                  'pwm values are 0 to 1023, but R,G,B values are only 0 to 255, so need multiplying by 4 to match
 pwm(15)=g*4
 pwm(13)=b*4
case 3
 sonoffb1.rgb r,g,b
end select
pause 10
return

screen:
cls
a$=""
a$=a$ + |<br><br>|
a$=a$ + |<div style='display: table; margin-right: auto; margin-left: auto;font-size: 90%'>|
a$=a$ + |<font color="teal">|+title$+|</font><br><br><br>|
a$=a$ + |</div>|
a$=a$ + |<div style='display: table; margin-right: auto; margin-left: auto;font-size: 120%'>|
a$=a$ + replace$(slider$(r, 0, 255,"R"), "onchange", "oninput") + |<font color="red">|+" Red"+|</font><br><br>|
a$=a$ + replace$(slider$(g, 0, 255,"G"), "onchange", "oninput") + |<font color="green">|+" Green"+|</font><br><br>|
a$=a$ + replace$(slider$(b, 0, 255,"B"), "onchange", "oninput") + |<font color="blue">|+" Blue"+|</font><br><br>|
a$=a$ + cssid$("R","height:10px; box-shadow: inset 0 15px red;")
a$=a$ + cssid$("G","height:10px; box-shadow: inset 0 15px green;")
a$=a$ + cssid$("B","height:10px; box-shadow: inset 0 15px blue;")
a$=a$ + |</div>|
a$=a$ + |<div style='display: table; margin-right: auto; margin-left: auto;font-size: 70%'>|
a$=a$ + |<input type="radio" data-var="ledtype" name="gender" onchange="cmdChange(event)" value="1" > NeoPixel<br>|
a$=a$ + |<input type="radio" data-var="ledtype" name="gender" onchange="cmdChange(event)" value="2"> RGB LED<br>|
a$=a$ + |<input type="radio" data-var="ledtype" name="gender" onchange="cmdChange(event)" value="3"> Sonoff B1<br>|
a$=a$ + |</div>|
html a$
a$=""
return

'----------- End ------------