# Control Knob suitable for Volume control or similar

**URL:** <https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464>\
**Category:** General\
**Created:** [20 October 2021 13:37 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464 "2021-10-20T13:37:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [20 October 2021 13:37 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/1 "2021-10-20T13:37:32Z")

</div>

Hi All,

I am looking for a ui control input that can best be described as a "Volume" control or "Tuning" knob as found on analog devices...

Any idea as to whether one exists or a 3rd party pluggable is available for the "codingly challenged"?

Regds  
Ed

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [20 October 2021 14:17 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/2 "2021-10-20T14:17:09Z")

</div>

How are you going to turn a round knob?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [20 October 2021 15:27 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/3 "2021-10-20T15:27:35Z")

</div>

Colin,  
In my early Node-RED days I have created such a volume button. You had to keep the mouse/finger, and while moving it started rotating until you lifted the mouse/finger up.  
But that node has ended up somewhere on a dump, stored on a corrupt sd card of one of my raspberries...  
Bart

---

<div class="post-metadata">

**Author:** ![molesworth](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/molesworth/32/11748_2.png) [@molesworth](https://discourse.nodered.org/u/molesworth)\
**Post date:** [20 October 2021 15:44 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/4 "2021-10-20T15:44:07Z")

</div>

I agree a slider might be better as a general UI, but I've played with simulators for analog synths where the pots were controlled by clicking the knob, then sliding the mouse vertically to increase or decrease. I guess you could use the mouse wheel as well, as another way to control it.

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [20 October 2021 15:44 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/5 "2021-10-20T15:44:39Z")

</div>

@Colin

Scrolling the mouse wheel up/down is one way... Another would be press and hold on the left/right of the knob to spin either way, dragging left/right/up/down from the approximate center is yet another... I have seen and used these methods in various apps over the years...

The only method that was an absolute PITA was dragging the periphery of the knob around in a circle....

Ed

Edit: The major advantage of the control knobs over sliders that I have seen is the density of controls that can be attained - they use up way less space than sliders and are normally quite easy to make visually appealing... Particularly in the AF/RF field where multiple knobs and dials are the norm...

Edit2: ie...

 ![photo_2021-10-20_17-54-59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/9806ae2c376566ad02fdba92a0d385c901e01a1d.jpeg)

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [20 October 2021 19:00 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/6 "2021-10-20T19:00:02Z")

</div>

I have tried to do exactly what you are asking. There are some examples on the web which I never got to work. Please keep this thread updated on your progress. That looks like a picture of a radio stack?

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [20 October 2021 19:04 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/7 "2021-10-20T19:04:05Z")

</div>

yeh... Toys next to my desk.... that's about 1/4 of the ones I'm playing with at the moment... rest are in storage until I can get my waterfowl linear... Most fun I've had lately is writing the front end for my PCR1000 Icom....

 ![screenshot-127.0.0.1_1880-2021.10.20-21_03_27](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/da0f8e20618c8ee3934eaae872d47acb23c787c9.png)

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [20 October 2021 23:19 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/8 "2021-10-20T23:19:28Z")

</div>

I have no idea how difficult this would be to adapt because I used someone else's vue translation for uiBuilder. This is plain Javascript;

pure knob [GitHub - andrepxx/pure-knob: Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.](https://github.com/andrepxx/pure-knob)

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [21 October 2021 00:22 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/9 "2021-10-21T00:22:19Z")

</div>

Not sure what @eddee54455 was/is looking for but this is more what I had in mind

 ![Screenshot_20211020-172019_Firefox](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd57dde5a8fe738f0945fe020474c4ff44c47b6c.jpeg)

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [21 October 2021 21:50 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/10 "2021-10-21T21:50:19Z")

</div>

😆 let us know when you get it working

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [22 October 2021 17:34 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/11 "2021-10-22T17:34:14Z")

</div>

Found a lot of lovely samples and examples....

Look here: [https://g200kg.github.io/input-knobs/](https://g200kg.github.io/input-knobs/)

I have absolutely not the faintest Idea of how to incorporate any of them into a dashboard though....

Anybody have a clue/pointer?

Ed

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 October 2021 21:38 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/12 "2021-10-22T21:38:24Z")

</div>

With small tweaks to the input-knobs JavaScript file, possible to use with `ui_template`

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c97e7624f7041ab163f929ccffbcea385e5069ea.png)

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [23 October 2021 12:23 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/13 "2021-10-23T12:23:46Z")

</div>

Hey H!

You see, that is where I fall a wee bit short!!

A hint or 2?

Regds  
Ed

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 October 2021 12:38 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/14 "2021-10-23T12:38:37Z")

</div>

Let's make 5

1. download and save the js file to your static folder.

2. edit the file:  
a) remove the window loading listener, leave all what is in the on load handler. (the script will be added way later than the window loading event happene)  
b) replace all "let" declarations with "var" (reloading the page does not not clean up this the errors rise in console) (there is proper solution for that but that is quick one to make things going)

3. make an ui\_template to add the script to the page (target to head)

4. make another ui\_template for actual usage (target to group)

5. use any common strategies of rendering html elements in `ui_template`

Follow the examples and explanations on that page. They are helpful and accurate.

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [23 October 2021 12:48 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/15 "2021-10-23T12:48:27Z")

</div>

Waaaay above my fireplace, but I'll give it a go!

> [@hotNipi](#):
>
> static folder

Where do I find that? (Running Fedora 30 something....)

> [@hotNipi](#):
>
> remove the window loading listener,

This bit?....

```auto
  let op=window.inputKnobsOptions||{};
  op.knobWidth=op.knobWidth||op.knobDiameter||64;
  op.knobHeight=op.knobHeight||op.knobDiameter||64;
  op.sliderWidth=op.sliderWidth||op.sliderDiameter||128;
  op.sliderHeight=op.sliderHeight||op.sliderDiameter||20;
  op.switchWidth=op.switchWidth||op.switchDiameter||24;
  op.switchHeight=op.switchHeight||op.switchDiameter||24;
  op.fgcolor=op.fgcolor||"#f00";
  op.bgcolor=op.bgcolor||"#000";
  op.knobMode=op.knobMode||"linear";
  op.sliderMode=op.sliderMode||"relative";
  let styles=document.createElement("style");
  styles.innerHTML=

```

..... A somewhat "lost" Ed this side...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 October 2021 15:43 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/16 "2021-10-23T15:43:08Z")

</div>

> [@eddee54455](#):
>
> A somewhat "lost" Ed this side

Now, what we can do about this?  
You replied to my message after 10 minutes of research. I'd say - not enough.  
I'd like to see that you try and achieve something and then, if stuck, you have specific questions ...  
Otherwise - I'm not code factory.

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [23 October 2021 16:09 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/17 "2021-10-23T16:09:11Z")

</div>

Granted... And accepted.... And also spent a couple of hours after I found [https://g200kg.github.io/input-knobs/](https://g200kg.github.io/input-knobs/) , giving it a look over... Trying in vain to see if there was some similarity between anything I had, anything I could find, and anything that gave me the slightest nudge in the right direction...

I am VERY, VERY well aware that you are light years ahead of where I will ever be in this type of coding, so yes, it might seem that a rapid reply took no research, but please bear in mind - Generally when I post a question, I have looked for a solution to the best of my ability (which might not be great, but it's all I have got, very often not even able to post the question in the correct terms that more experienced coders are familiar with.)

Now, to the matter at hand - Yes, I did look at the code before I posted the question, yes, I did try a few things, no, I had no success whatsoever...

I am eternally grateful that you replied to me, particularly for a coder of your experience and knowledge to stoop to an inexperienced (in this arena) newbie like me, you have been an invaluable source if knowledge to me and many others, again, I am grateful and have learnt a lot from you already!!

So, the long and the short of it - I have not got the basic knowledge to accomplish a starting point to move on from, without that starting point (which for me is something I can plug into NodeRed and see some form of output/error or other), I am floundering in the dark...

I apologise if you think I am treating your input as a quick means "coding factory"... That is not my intent...

Ed

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 October 2021 16:15 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/18 "2021-10-23T16:15:05Z")

</div>

Then first thing to start is to configure the static folder, if you haven't don this step already..?

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [23 October 2021 16:19 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/19 "2021-10-23T16:19:46Z")

</div>

Thanx for coming back to me!

I did a global search on my machine for "static" and found a lot of references to it, couldn't find a folder in NR that had "static" in the name - any particular spot I should look in?

E

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 October 2021 16:27 UTC](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464/20 "2021-10-23T16:27:26Z")

</div>

It is the folder from what the node-red will serve files. And it is the folder you create (or choose). Most people create it under the .node-red catalog so all the related stuff is in one place. The name of the folder does not matter, I call it static just cos I just see it that way. Then you'll need to change the node-red `settings.js` to let the node-red know the location of the static folder.

Many threads talk about how to do it - try this [How to enable ability to input local image files in to node red dashboard](https://discourse.nodered.org/t/how-to-enable-ability-to-input-local-image-files-in-to-node-red-dashboard/3085)

[Next page](https://discourse.nodered.org/t/control-knob-suitable-for-volume-control-or-similar/52464.md?page=2)