# Knob for the skeuomorphic theme

**URL:** <https://discourse.nodered.org/t/knob-for-the-skeuomorphic-theme/67027>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [28 August 2022 10:16 UTC](https://discourse.nodered.org/t/knob-for-the-skeuomorphic-theme/67027 "2022-08-28T10:16:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pakerfeldt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pakerfeldt/32/3101_2.png) [@pakerfeldt](https://discourse.nodered.org/u/pakerfeldt)\
**Post date:** [28 August 2022 10:16 UTC](https://discourse.nodered.org/t/knob-for-the-skeuomorphic-theme/67027/1 "2022-08-28T10:16:24Z")

</div>

Inspired by @hotNipi 's skeuomorphic [guage](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507), 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:  
 ![gauge_knob](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/6/367a84906f077f77a0f00f37e562c001cbe89381.png)

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 🙂

- 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 🙂

[example.json](https://discourse.nodered.org/uploads/short-url/xVNVPgy8fI9wT5oZ5cfIBfbzePb.json) (27.5 KB)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [28 August 2022 11:09 UTC](https://discourse.nodered.org/t/knob-for-the-skeuomorphic-theme/67027/2 "2022-08-28T11:09:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![pakerfeldt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pakerfeldt/32/3101_2.png) [@pakerfeldt](https://discourse.nodered.org/u/pakerfeldt)\
**Post date:** [28 August 2022 11:22 UTC](https://discourse.nodered.org/t/knob-for-the-skeuomorphic-theme/67027/3 "2022-08-28T11:22:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 September 2022 11:22 UTC](https://discourse.nodered.org/t/knob-for-the-skeuomorphic-theme/67027/4 "2022-09-27T11:22:31Z")

</div>

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