Knob/Gauge widget for Vue based Dashboards/UiBuilder

[ambotaku]

I like node-red's dashboard gauges, but want more flexibility and possibilities for my frontend-apps and now looking for widgets i need. Most available web widgets are for business/text handling, you find less components for technical purpose as dials, gauges, sliders and knobs.

Looking for knobs in GitHub and NPM I found several knobs, some pure JS, jQuery, CSS, SVG or Canvas based. I'most liked pure-knob [GitHub - andrepxx/pure-knob: Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.] which renders knobs/gauges with HTML Canvas and pure JS code, so it can be used with or without any frontend library/framework, but requires more imperative/procedural coding than a data-bound component for a modern web-framework like Vue, Angular or AngularJS.

So I ported pure-knob to a new widget I call vue-canvas-knob (vue-knob already exists at npm, but isn't very versatile and I needed to rename it there). Since here are others using node-red and vue I announce it here:
GitHub: [GitHub - ambotaku/vue-knob: Vue Component for Canvas based knob & gauge]
npm: npm install vue-canvas-knob

You'll find this simple "color mixer" demo as part of my GitHub repo.

[TotallyInformation]

Cool, thanks for sharing that. If you get a few minutes, please feel free to add a new uibuilder WIKI entry telling people about it and how to use it with Node-RED. That way more people can discover it.

[ambotaku]

That's my plan - the simple example bundled with the widget is a "color mixer" that is using three knobs to setup RGB- colors. The next milestone will be using uibuilder to send RGB-strings or JSON objects to node-red, where it can be used to change the color of led-lamps (like Philips Hue) or similar.

But at first I will publish release 0.3, that will allow string-enumerations for values (instead only numbers as currently). This update will allow the knob as hat switch, too.

Think for a compass with enumerated directions N,NE,E,SE,S,SW,W,NW, which may be useful to control camera direction and robot drive controls.

[ambotaku]

So - I don't have integrated that widget into uibuilder, but at least published one that can be integrated (vue-canvas-knob release 0.3.2).

Normally I develop new Vue code with the VueCli continous integration tool that precompiles, packs and tests anything (with help of webpack and some plugins).

Nowadays Vue components for that purpose are single component (vue-)files which can't be used for legacy code that is loaded via <script> tags, since current web browsers still don't support modularity of code (which the JS ECMAScript standard supports since 2015 (!).

For that now the widget is available in folder "template/vue-knob.js" of the NPM/GitHub distribution as legacy JS file that can be loaded with a <script> tag. In that "template" folder is also an "index.html" that does the same like the VueCli example build. This will allow using the widget in uibuilder, too.

Of course it will have drawbacks related to performance, size and weak encapsulation, which are solved by implementation of Vue single file component based projects. So you should not use the legacy component for standalone single page applications.

[TotallyInformation]

Don't forget that you can certainly use a build step with uibuilder. Just arrange for the build to put the output files into the dist folder and ensure that you at least have an index.html in that folder. Then uibuilder will serve up your ui from dist rather than src.

v3.1 just released gives you a lot more flexibility in editing files and folders. A future release will incorporate a button to run your build using a "build" script in the package.json file in the root of your instance folder (the folder that the src and dist sub-folders sit in).

[Buckskin]

Hi there. I have just got this working in uibuilder. Not sure when I will use it but great fun playing with it. One minor point, you have direction = 'N' but in the html you use valueToDirection(direction). Easily fixed, I just changed direction to a numeric,

[ambotaku]

Sorry for not yet knowing such possibilities of iobuilder - at first I got happy to find an easy solution to get widget instances into the iobuilder node template code (index.html and index.js). This should be enough for first simple apps.

But thanks for the tip - it is a good perspective for high performance needs I expect e.g. for applications in AV and telecommunication sector (You know, I had to do a lot with such before and bad reactivity and latencies of earlier web user interfaces was a horror).

[ambotaku]

Thank You very much - i corrected that in release 0.3.3. A known bug / missing feature appears for the input field that pops up when double-clicking a knob. That works for numeric input only. I think I will turn it off for string enumeration input types since seeming cumbersome for most multiswitch-implementations. Navigating between just 4-10 options with the mouse will most times be more comfortable than typing in those enumeration-strings into an entry field. Maybe a drop-down list instead an input field would make sense, but seems also useless for most cases.

[Buckskin]

I had not tried the pop-ups, I have now and cannot get them to work. The pop-up appears, and the scroll numbers works but they do not change the value of the knob and they do not close when clicking outside of them

[ambotaku]

fixed closing the input popup (missing blur-handler); validate valMin/Max ranges at input, but only support for popups if the new attribute "inputPopup" is set "true".

Those popups make sense only for numeric input as i've written abobe (not useful for multiswitch solutions, which are operated faster by mouse or touch).

So the update of the knobs should work now correctly, but don't forget to commit entry with Enter (did you?). You can restore with the ESC key or leaving the focus (clicking out of the field).

[ambotaku]

My current release of vue-knob contains an exported node-red JSON file containing my "color mixer" vue-example which can send node-red messages.

To use it just install the uibuilder node and import the file nodered_uibuilder_vue.json of that git repository. This will create an Ui_knobs_demo page with some instructions and files index.html, index.js, index.css and vue_knob.js to replace/insert into the ui_knobs node.
Thereafter the /ui_knobs site should show the demo and for knob-operation messages will be shown in the node-js debug-log.

I tried to write an article into the Wiki but couldn't place that json file there and creating a link from the TOC to my article - so i removed it first. Maybe it is better to write a short description with a link to my GitHub and NPM repositories, where you can all flavors of the current release.

In a next step I will try the hint from Dynamically load .vue files without a build step · TotallyInformation/node-red-contrib-uibuilder Wiki · GitHub
to be able to use Vue single file components, which are much more convenient to use.

[TotallyInformation]

@ambotaku

I tried to write an article into the Wiki but couldn't place that json file there and creating a link from the TOC to my article - so i removed it first. Maybe it is better to write a short description with a link to my GitHub and NPM repositories, where you can all flavors of the current release.

Yes, that is absolutely fine. Thanks for trying.

You might also wish to note that I've just pushed out v3.1.3 of uibuilder which fixes an annoying installation problem.

[ambotaku]

@TotallyInformation

You might also wish to note that I've just pushed out v3.1.3 of uibuilder which fixes an annoying installation problem.

Oh - maybe i missed any problems due to v3.1.3. I did a complete new installation of node-red, uibuilder and my stuff on a test machine yesterday and anything worked like a charm (besides those bootstrap peer dependency warnings, which are just informal).

But of course I will recommend updating/installing uibuilder v3.1.3 to avoid already fixed problems.

Thanks for your support.

[ambotaku]

I now completed documentation of vue-knob in the uibuilder wiki:

TotallyInformation/node-red-contrib-uibuilder

I stripped down a little bit for less redundancy, you'll find the details in my repository

[TotallyInformation]

Many thanks for that. I have added the article to the menu.