Control Knob suitable for Volume control or similar

Something made me poke around in the settings.js ...

/** When httpAdminRoot is used to move the UI to a different root path, the
     * following property can be used to identify a directory of static content
     * that should be served at http://localhost:1880/.
     */
    //httpStatic: '/home/nol/node-red-static/',

Wrong track?

Right... All reference is to "Image Files" that I can make out.... I take it that "Image" could actually be any type of file??

Would it be "safe" and not break anything if I create a folder under .node-red called "node-red-static" and edited the line:

    //httpStatic: '/home/nol/node-red-static/',

as referred to in my previous post to reflect:

httpStatic: '/home/ed/node-red-static/',

(I take it that the trailing comma must remain)

Took a chance...Enabled it in settings.js and created the folder ...restarted node red... No errors...

Edit:(Also dropped the input-knobs.js file I downloaded previously into it)

Then it is time to step 3.
ui_template configuration should be like this
image
Pay attention, that I have created folder "js" into my static folder and this file is in that folder. So you can figure out how the relative path to the file is treated.

If done, deploy and see browser developer tools, network tab and be sure that the file is served. You will see error 404 in case of misconfiguration.

A little progress and a few puckering moments... But.. after a typo in the path, there is no 404 error...

There is however another 404 error, I don't know whether it is related(Haven't played here before as yet, so couldnt tell you if it's just cropped up), it refers to:

GET	http://127.0.0.1:1880/ui/loading.html

E

404 on loading.html is nothing to worry about.

So the script is loaded.

step 4.
What have you done if any?

EDIT: is the step 2 section b done?

2a - Clueless
2b - Done

2 a you were on correct track.

Please confirm...

must I delete this entire section:

window.addEventListener("load",()=>{
  var 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";
  var styles=document.createElement("style");
  styles.innerHTML=

If I do, I would remove the first "{" and I don't see the closing "}"... That might be a problem?

What must remain starts with var op=window.input...
And at the end of the file same amount of opening brackets you delete must be found (now closing tags) must also be deleted.

If you use any modern programming environment, you will see bracket mismatch somehow, if not done correctly.

My most "Modern" programming enviro I sort of know my way about is KWrite... I'm stone-age .... Light bulbs are fascinating!!

Nah, not really, but close...

I have remarked out the first line and last line of the file with a // and all () and {} seem in balance...
(Wanna keep them there but out of the way so I can try and duplicate later with something else...)

OK. let's hope done correctly.

Back to step 4. then.
Any experiences on using the ui_template node? Except the one you just created for loading the script ...

Only what I have parroted from you and a few other learned gents...

OK. As the page shows how to use ..


Grab the tag and put it into the ui_template and I hope you'll see first results.

Did this:

got this:

Not a turny knob, bur at least something!!

Hold the bus!!
Forgot to close the js file....

actually getting this:

screenshot-127.0.0.1_1880-2021.10.23-20_46_57

You are right. It is at least something. But not something I hoped to see.

  1. Remove the first line, that is not needed at all.
  2. until you'll see the slider looking thing, not the knob, the script is not doing it's job.

Try to refresh the dashboard page to see if its changing,.

OK. first results.
Time to celebrate a bit.

Now. Read the page again about how to use the With Multi Frame External Image.
It leads you to resources where you can download different looks available to knobs and other stuff.

If you reach to the point that you are downloaded the images stripe, and put it again into your static folder to be usable ...
It takes some time for you so Ill go to sauna for a bit. :slight_smile:

before u leave, should there be any output from the thingy? I put on a debug node but am not seeing anything...