Inspired by @hotNipi 's skeuomorphic guage, I decided to try to build a knob that goes with it.
First a little disclaimer:
It's not September 1
I don't claim to have a giveaway
I'm a programmer, not a designer
To be honest, I don't even particularly like the design of the knob. It's inspired by that of a tutorial I found but I would imagine there are other designs that would go better with the gauge and its metal plate. However, it's a decent start and it functions pretty well.
Anyway, here it goes:
Some things to note:
I have updated the rivets style, and moved its div up one level in the gauge to allow for re-use in the knob (it had some dependencies to g-ring which I've removed).
Some notable configuration parameters (found in the top div):
--knob-degrees-of-freedom:[0-360] - A value less than 360 would block the knob from rotating a full circle.
--knob-min - The value it should output when the knob is at its minimum position
--knob-max - The value it should output when the knob is at its maximum position
It handles interaction from both touch devices and mouse.
Value is sent from the node when interaction stops (at touch end or mouse up)
I leave a TODO for others to pickup
More beautiful, fitting design of the knob
A small feedback display so that you can actually see the value
Knob doesn't scale and has been designed for 4x4
Code can be further cleaned up
Maybe if we add another dashboard element every year we will have a complete set half-a-dozen years from now
It's good to see more developments based on last September's epic!
A traditional physical knob is grasped between finger and thumb to turn it. There may be detents to give preset positions and touch feedback.
That design doesn't easily transfer to a gui.
How to provide feedback that you are turning it?
Where do you click with a mouse?
How to make significant values more "sticky"?
Some radios have a knob with a dimple for your fingertip. I guess it makes it easier to turn several rotations without repositioning your hand.
I have seen radio dashboards on this forum with a tuning knob like that. It's very clear where you click to move them, so I think it's better for a gui.
The big problem for a visual knob is accessibility.
I can feel around the wall in the dark for the dimmer switch. Not so easy for a knob on a screen.
Edit - Is it possible to constrain the mouse inside a particular knob element while the button is held down?
The thought cross my mind to instead do a slider similar to a volume slider on a mixer panel. However I was too far gone to bother switching.
I agree with all of the thoughts on haptic feedback gone missing. That’s of course true for any input, even a regular node red slider. However, the rotational input in a knob is definitely more cumbersome in general when it’s digital like this.
If going with the gauges in a dashboard I do think skeuomorphic design across all components would make most sense from an aesthetic perspective. I don’t like the idea of mixing the gauges with standard flat inputs/outputs.
