Embedded Files
Colours are easier to visualise than imagine, so this project offers a coloured circle with adjustable Red Green Blue and Brightness, and the diameter and border thickness can be changed to better emulate a corresponding web-page LED (save as /program/colourball.bas)
If neopixels and / or an RGB LED are connected, they can physically display the selected colour and brightness.
The project uses several different Annex-Wifi Basic web components, and demonstrates various examples of styling for you to copy if wished.
Bb = rnd(255) 'random blue brightrand = 0 'turn random brightness Off or On opacity = brightness / 100 R = Rr/100 * brightness: G = Gg/100 * brightness: B = Bb/100 * brightness RGB$ = "" pin.mode redRGBpin, output pin.mode greenRGBpin, output pin.mode blueRGBpin, output pwm(redRGBpin) = R * 4 pwm(greenRGBpin) = G * 4 pwm(blueRGBpin) = B * 4 gosub neoclear 'clear neopixels neo.strip first, last, R,G,B gosub paintscreen wait paintscreen: cls 'gosub slidedown 'uncomment to use the Bonus that is added at the end diaold = leddia bordold = ledbord RGB$ = "RGB(" + str$(Rr) + ","+ str$(Gg) + ","+ str$(Bb) + ")" s$ = "" s$ = s$ + "<BR>" s$ = s$ + "<div style='display: table; margin-right: auto; margin-left: auto;text-align:center;'>" s$ = s$ + |<h2 id='mycol' style='color:black;' >| + title$ + |</h2>| s$ = s$ + "<svg height='" + str$(cint((leddia)+(ledbord * 4))+0) + "' width='" + str$(cint((leddia)+(ledbord * 4))+0) + "'>" s$ = s$ + "<circle cx='" + str$(cint((leddia/2)+(ledbord * 2))+ 0) + "' cy='" + str$(cint((leddia/2)+(ledbord * 2))+ 0) + "'" s$ = s$ + " r='" + str$(cint((leddia /2))) + "' stroke-width='" + str$(cint(ledbord)) + "' stroke='black' fill='black' id='multiled' /></svg>" s$ = s$ + "<BR><BR>" s$ = s$ + textbox$(RGB$,"tbrgb") s$ = s$ + "<BR><BR>" s$ = s$ + slider$(Rr,0,255,"sr") + textbox$(Rr,"tbr") + " R" + "<BR>" s$ = s$ + slider$(Gg,0,255,"sg") + textbox$(Gg,"tbg") + " G" + "<BR>" s$ = s$ + slider$(Bb,0,255,"sb") + textbox$(Bb,"tbb") + " B" + "<BR>" s$ = s$ + checkbox$(brightrand,"hide") '+ " " s$ = s$ + slider$(brightness,1,100) + textbox$(brightness,"tb") + " %" s$ = s$ + checkbox$(brightrand) s$ = s$ + "<BR>" s$ = s$ + button$("Random",random) s$ = s$ + "<BR><BR><BR>" s$ = s$ + slider$(leddia,1,300) + textbox$(leddia,"tbdia") + " px" + "<BR>" s$ = s$ + button$(" < ",smaller) s$ = s$ + textbox$(ledbord,"tbres") s$ = s$ + button$(" > ",bigger) + "<BR>" s$ = s$ + "<BR>" s$ = s$ + cssid$("hide", "visibility: hidden;") s$ = s$ + cssid$("bres", "visibility: hidden;") s$ = s$ + cssid$("tbres", "text-align:center; width:28;") s$ = s$ + button$("Resize",resize,"bres") 's$ = s$ + cssid$("sr", "background-color:red;") 'un-comment these 3 lines if you want coloured slider backgrounds 's$ = s$ + cssid$("sg", "background-color:green;") 's$ = s$ + cssid$("sb", "background-color:blue;") s$ = s$ + cssid$("tbrgb", "text-align:center; width:130; color: dimgray;border:0;") s$ = s$ + cssid$("tbdia", "text-align:center; width:28; background-color: white;border:0;") s$ = s$ + cssid$("tb", "text-align:center; width:28; background-color: yellow;") s$ = s$ + cssid$("tbr", "color:yellow;background-color: red;text-align:center; width:28; ") s$ = s$ + cssid$("tbg", "color:yellow;background-color: green;text-align:center; width:28; ") s$ = s$ + cssid$("tbb", "color:yellow;background-color: blue;text-align:center; width:28; ") s$ = s$ + cssid$("multiled", "fill:rgba(" + str$(R) + "," + str$(G) + "," + str$(B) + "," + str$(opacity) + ");") s$ = s$ + "<div>" html s$ s$ = "" refresh return smaller: if ledbord > 0 then ledbord = ledbord - 1 if bordold <> ledbord then css cssid$("bres", "visibility: visible;") refresh return bigger: if ledbord < 20 then ledbord = ledbord + 1 if bordold <> ledbord then css CSSID$("bres", "visibility: visible;") refresh return resize: refresh gosub paintscreen return neoclear: neo.strip 0, last, 0,0,0 return adjusted: R = Rr/100 * brightness: G = Gg/100 * brightness: B = Bb/100 * brightness opacity = brightness / 100 RGB$ = "RGB(" + str$(Rr) + ","+ str$(Gg) + ","+ str$(Bb) + ")" if diaold <> leddia then css CSSID$("bres", "visibility: visible;") css CSSID$("multiled", "fill:rgba(" + str$(R) + "," + str$(G) + "," + str$(B) + "," + str$(opacity) + ");") refresh pwm(redRGBpin) = R * 4 pwm(greenRGBpin) = G * 4 pwm(blueRGBpin) = B * 4 neo.strip first, last, R,G,B return random: Rr = rnd(255) 'random red Gg = rnd(255) 'random green Bb = rnd(255) 'random blue if brightrand then brightness = rnd(100) R = Rr/100 * brightness: G = Gg/100 * brightness: B = Bb/100 * brightness RGB$ = "RGB(" + str$(Rr) + ","+ str$(Gg) + ","+ str$(Bb) + ")" css CSSID$("multiled", "fill:rgba(" + str$(R) + "," + str$(G) + "," + str$(B) + "," + str$(opacity) + ");") refresh pwm(redRGBpin) = R * 4 pwm(greenRGBpin) = G * 4 pwm(blueRGBpin) = B * 4 neo.strip first, last, R,G,B return'---------------------- Normal END ----------------------
The controls should be intuitive - the Resize button is hidden until the diameter slider or line thickness buttons are used, then it becomes visible.
The Brightness slider is useful for dimming attached RGB lights or neo-pixels.
Basic:
title$ = "Colour Ball"
leddia = 100 'Ball diameter
ledbord = 3 'Ball border thickness
redRGBpin = 12 'Red rgb led (if present)
greenRGBpin = 15 'Green rgb led (if present)
blueRGBpin = 13 'Blue rgb led (if present)
brightness = 100 'percentage brightness
neo.setup 5 'Neopixel pin (if present)
first = 0 'address of first neopixel if present
total = 24 'number of neopixels present
option lowram 12000
onhtmlchange adjusted
lolddia = leddia: oldbord = ledbord 'store old ball parameters
last = first + total - 1 'address of last neopixel
Rr = rnd(255) 'random red
Gg = rnd(255) 'random green
Page updated
Google Sites
Report abuse