 This web dial AC Mains Controller offers 4 different rotary knob styles which can be selected by radio buttons (here is a demo video). The knobs can be dragged to adjust, or use the mouse scroll-wheel.  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 wait change: if HtmlEventVar$ = "knoboutput" then cmd$="value=V" cmd$=replace$(cmd$,"V","knoboutput") command cmd$ endif refresh if active=1 then outputvalue=value else outputvalue=0 pwm(ledpin)=outputvalue*10 dimmer.brightness outputvalue pause 50 if (HtmlEventVar$="sc") or (HtmlEventVar$="tc") or (HtmlEventVar$="knobstyle") or (HtmlEventVar$="button") then gosub screen HtmlEventVar$ ="" return toggle: active=1-active refresh if active=1 then outputvalue=value else outputvalue=0 if active=1 then pwm(ledpin)=outputvalue*10 else pwm(ledpin)=0 gosub screen return pressed: interrupt buttonpin, off pause debounce if pin(buttonpin)=0 then gosub toggle interrupt buttonpin, pressed return screen: cls autorefresh 50 a$="" 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>| endif html a$ jscall "set_knobs();" return end '-----------end------------ This is a link to the original "Touch-enabled Knob Control In Pure JavaScript" by Jim Knopf
|
Join Our DiscussionCOUNTER |
|
