Knob for the skeuomorphic theme

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):
  1. --knob-degrees-of-freedom:[0-360] - A value less than 360 would block the knob from rotating a full circle.
  2. --knob-min - The value it should output when the knob is at its minimum position
  3. --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 :slight_smile:

  • 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 :slight_smile:

example.json (27.5 KB)


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.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.