Project - Rotary Web Dial


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











Robin Baker,
Feb 29, 2020, 9:49 AM
v.1