Project - Rotary Web Dial

See the demo video

The file "/knob-full.js" (bottom of page) needs to be uploaded to the device to display the rotary knobs, otherwise a standard slider is shown.

It has the optional local power output LED indicator.

It also has web power output meter, offering remote feedback of relative power output. .

Output can also be toggled On or Off by web button, which displays red writing when On or green when Off.

An optional title name can be displayed to show what item or location is being controlled (eg:Table Lamp).. .

Basic:

'Rotary Web Speed Controller/Dimmer - Electroguard - developed on Annex 1,41 beta 3

title$="Rotary Web Dimmer" 'title to be displayed if tc=1

dimmer.setup 4,5,0,1 'ZC signal io4 , Output pulse io5 , short io13 to io4

dimmer.limits 0, 9500 'actual min/max delay in triac firing

value=0 'initial startup value

active=1 'dimmer output On=1, Off=0

if active=1 then outputvalue=value else outputvalue=0

dimmer.brightness outputvalue

option.pwmfreq 100 'reduce pwm frequency to reduce cpu load

ledpin=15 'optional pwm led power output indicator

pwm(ledpin)=outputvalue

debounce=50 'debounce duration for optional output toggle button

buttonpin=0 'optional gpio0 button to toggle output On/Off

pin.mode buttonpin, input, pullup

interrupt buttonpin, pressed

knobstyle=3 'rotary knob style (1 to 4)

tc=1:sc=1 'tc=1 to display title, sc=1 to show options

jsexternal "/knob-full.js" 'drops back to simple slider if the specified file is not available

onhtmlchange change 'subroutine branch to action controller changes

gosub screen 'send screen output to browser waitchange:if HtmlEventVar$ = "knoboutput" then cmd$="value=V" cmd$=replace$(cmd$,"V","knoboutput") command cmd$endifrefreshif active=1 then outputvalue=value else outputvalue=0pwm(ledpin)=outputvalue*10dimmer.brightness outputvaluepause 50if (HtmlEventVar$="sc") or (HtmlEventVar$="tc") or (HtmlEventVar$="knobstyle") or (HtmlEventVar$="button") then gosub screenHtmlEventVar$ ="" returntoggle:active=1-activerefreshif active=1 then outputvalue=value else outputvalue=0if active=1 then pwm(ledpin)=outputvalue*10 else pwm(ledpin)=0gosub screenreturnpressed:interrupt buttonpin, offpause debounceif pin(buttonpin)=0 then gosub toggleinterrupt buttonpin, pressedreturnscreen:clsautorefresh 50a$=""a$=a$+|<br>|a$=a$+|<div style='display: table; margin-right: auto; margin-left: auto;font-size: 80%'>| if tc=1 then a$=a$+|<font color="teal">|+title$+|</font><br>| else a$=a$+"<br>"a$=a$+|<br>|a$=a$+|</div>|a$=a$+|<div style='display: table; margin-right: auto; margin-left: auto;'>| a$=a$+|<input class="preset|+str$(knobstyle)+|" data-var="knoboutput" value='|+str$(value)+|' type="range" min="0" max="100" |a$=a$+|data-width="250"data-height="250" data-angleOffset="220" data-angleRange="280" onchange='cmdChange(event)'>|a$=a$+|</div>|a$=a$+|<div style='display: table; margin-right: auto; margin-left: auto;font-size: 100%'>| if sc=0 then ocol$="darkgrey" else ocol$="#404040"a$=a$+checkbox$(sc)+|<font color="|+ocol$+|">|+" Show Options"+|</font><br><br>|a$=a$+|</div>|if sc=1 then a$=a$+|<div style='display: table; margin-right: auto; margin-left: auto;font-size: 80%'>| a$=a$+meter$(outputvalue,0,100,"meter")+|<br><br>| a$=a$+cssid$("meter","width:120;")+|</div>| a$=a$+|<div style='display: table; margin-right: auto; margin-left: auto;font-size: 80%'>| a$=a$+button$("On/Off",toggle,"button")+|<br><br>| a$=a$+cssid$("active","width:100;") if active=1 then a$=a$+cssid$("button","color:red;") else a$=a$+cssid$("button","color:green;") a$=a$+|</div>| a$=a$+|<div style='display: table; margin-right: auto; margin-left: auto;font-size: 80%'>| m$=|<input type="radio" data-var="knobstyle" name="gender" onchange="cmdChange(event)" | for c=1 to 4 a$=a$+m$ if c=knobstyle then a$=a$+| checked=1 | a$=a$+| value="|+str$(c)+| " > | next c a$=a$+|<br>| a$=a$+|</div>| a$=a$+|<div style='display: table; margin-right: auto; margin-left: auto;font-size: 70%'>|+"Knob style" +|</div><br>| a$=a$+|<div style='display: table; margin-right: auto; margin-left: auto;font-size: 90%'>| a$=a$+checkbox$(tc)+|<font color="teal">|+" Show Title"+|</font><br><br>| a$=a$+|</div>|endifhtml a$jscall "set_knobs();"returnend '-----------end------------

This is a link to the original "Touch-enabled Knob Control In Pure JavaScript" by Jim Knopf

Project - Occupancy Dimmer