Control Knob suitable for Volume control or similar

General
1

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

2

How are you going to turn a round knob?

3

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

4

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.

5

@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
photo_2021-10-20_17-54-591071Ă—1280 142 KB

1 Like
6

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?

7

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
screenshot-127.0.0.1_1880-2021.10.20-21_03_271173Ă—583 109 KB

8

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.

9

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

Screenshot_20211020-172019_Firefox
Screenshot_20211020-172019_Firefox720Ă—1600 112 KB

10

:laughing: let us know when you get it working

11

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

Look here: 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

12

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

image

13

Hey H!

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

A hint or 2?

Regds
Ed

14

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.

15

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

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

This bit?....

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

16

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.

17

Granted... And accepted.... And also spent a couple of hours after I found 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

1 Like
18

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

19

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

20

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