Does anyone have a On/Off Dimmer dial

[ncherry]

I have some ZigBee lights and I'd like to create a simple to use On/Off dimmer basically like an ipod dial. Has anyone create such a dashboard interface?

I already have a dial but it's just a slider with wrap around. No on/off. I can add a slide for the preset and a switch but that takes up a lot of room on a dashboard.

Thanks

[Trying_to_learn]

I don't have an ipod and so can't imagine what you mean.

Get a screen shot and post what it is you are wanting to do so people who don't know what it looks like can maybe offer solutions.

[Christian-Me]

As I understand a control like a physical rotary decoder with a integrated push button.
I actually use a slider and a switch and as you need as much physical space as possible on your mobile device to get accuracy the switch/button integrated into the slider would be nice. The slider then must listen to a finger tab event and send a msg with something else than a numeric figure (perhaps msg.payload=true). And perhaps the background color changes to indicate the on/off state.
Should be possible with a template node.

[hotNipi]

There is no ready made component to use with dashboard. You can find many JavaScript libraries and examples online.

But dial/knob , even if it may look fancy and may combine switch and dimmer functionality, it does not resolve the wasted space problem you mentioned.

Dial can't be made small. It will be unusable. If you must achieve precise movements on tiny area with your finger or mouse pointer, you'll hate it after couple of tries.

Onscreen dial does not give same quality of feedback as the physical knob does. Physical dial/knob gives direct feedback to your fingers which then is supported by visual change, onscreen dial feedback given mostly via visual change only. That is big difference and makes overall experiences of onscreen dial usage much worse than you may think first.

Those are main reasons, why dial is not very popular choice for web applications and ui-components.

[Christian-Me]

I agree that a dial isn’t a good choice for a touch screen device. The useless milight app uses a knob representation and it is takes the hole screen with no advantage. In my system I use sliders and a 1x1 button for on/off next to it on the same line. Depending on your screen size this button takes ~15% of your possible resolution = accuracy.
When you think this further there isn’t a necessary fixed relation of the visual relation between the screen and the finger/mouse movement. Like you hardly “feel” the mouse acceleration algorithms any more but have the advantage of accuracy in small=slow movements and the reach in faster=long movements. I remember the jog dial on the sony digital editing device used 20 years ago giving you frame precision with slow movements and movements through a 1h movie by the same control. Or in my digital oscilloscope the rotary encoders have a “ramp” acceleration too otherwise you would go crazy scrubbing through the data or setting triggers or other values precisely.
To implement this without annoying or confusing the user is not easy and would at least need a lot of research.
On the other hand a popup zooming/magnifying the relevant control could solve the screen size problem too.
Here is a iOS example:

Pops up to this (with a harder finger touch / could be a longer press with slow/small movement too)

But my html/css skill is not sufficient to do that. So only some ideas from my side here, sorry.

[ncherry]

I have given my wife a dual set of dials for minutes and seconds (works well) for a timer. The timer only gets set when the timer button is hit. Web interface It's not pretty but it's functional. I'll probably try that again with the button for off/on and the dial (actually a slider) for the light level. I'd still like to see the dial with the button in the middle. I actually need to figure out how to do a capacitive interface near the dimmable LEDs. I have an idea but I need to engineer that and I don't have the time for a few months.