vue knob for uibuilder

vue-canvas-knob

Looking for a minimalistic styled, lean, but versatile gauge and knob control, I found my favorite with Andre Plötze's PureKnob package (https://github.com/andrepxx/pure-knob). Andre created that widget in pure JS, so it can be used for any app without dependening of any framework or library - just based on the HTML DOM and canvas.

Using such a pure widget in a comfortable web-framework environment leads to much redundant code, bad convenience and abstraction. So I've rewritten this for the Vue framework and adapted it to uibuilder for the node-red web-application. I ported just the knob/gauge widget and not the bar graph of the original. As the original vue-canvas-knob supports mouse, wheel, touch and keyboard control. Besides Vue, HTML5 and ES6 JS no dependencies are needed.

Example (Vue Cli project)

The package's root folder contains a small color mixer webapp containing three vue-canvas-knob widgets that are used to mix the color of a box beneath. Right of it is a multiswitch knob with eight compass directions in needle-style.

You'll find the source code for the widget and that demo for Vue single file component architecture (VueCli projects), legacy JS-projects and the node-red uibuilder in the widget's Github repository. The content of that repository is also available for NPM:

$ npm install vue-canvas-knob

Knob Operation

• Normal left click / drag / touch changes value, releasing button commits value.
• pulling mouse / touch outside the element before release restores back to old value.
• double click or middle click enables entry of value via keyboard.
• when input field is enabled ESC to restore old value and disable keyboard entry, Enter/Return to commit new value and disable keyboard entry.
• disable input field by clicking outside of it or pressing ESC key
• use mouse wheel to turn knob

Installation and usage

Download the whole demo app from GitHub or just use npm or yarn to install vue-canvas-knob in your own NodeJS project:

$ npm install vue-canvas-knob

To import vue-canvas-knob widgets you may use ...

import VueKnob from "@/components/vue-knob";

... like in my example above. That import will allow using the tag in your templates:

    <vue-knob :width=knobSize :height=knobSize colorBg="#444444" :value-min="0" :value-max="255"
              color-fg="#ff0000" label="red" :value="127" @value-changed="colorChanged('r', $event)"/>

As attributes all properties explained below can be passed and support Vue's data binding, e.g. the variable knobSize that is bound to the height and width attributes (The colon before the attribute is needed for passing numbers in Vue). Currently vue-canvas-knob only supports a value-changed event that is passing a value when the knob gets turned (All event names are prefixed with @ for Vue, $event contains that value, extra parameters can be used e.g. to identify an instance).

Properties

• width: widget width 300px
• height: widget height 300xp
• angleStart: Angle in radians, at which the knob track starts -0.75 * Math.PI
• angleEnd: Angle in radians, at which the knob track ends. +0.75 * Math.PI
• angleOffset: Offset in radians, relative to the positive x-axis. -0.5 * Math.PI
• colorBg: Color of the knob track. #181818
• colorFg: Color of the knob gauge / indicator. #ff8800
• colorLabel: Color of the (optional) label. #ffffff
• stringToValue: Function turning a string into a (numeric) value. (value) => parseInt(value)
• valueToString: Function turning a (numeric) value into a string. (value) => value.toString()
• inputPopup: enable input popup field; only usable for numeric values (don't user for multiswitchs) false
• label: A label (string) displayed at the bottom of the knob, a track radius length away from the center. Set to null to not print any label. null
• needle: Boolean indicating whether we should use a tiny marker / needle instead of a filling gauge to indicate value along the knob's track. false
• readOnly: Boolean indicating whether the value of the knob is write-protected and thus not editable by the user. Useful for displaying values (gauges) without allowing them to get edited. false
• textScale: Linear scaling factor for increasing / decreasing the font size. 1.0
• trackWidth: Width of the track, relative to the average radius of the knob. 0.4
• valueMin: Minimum selectable value. 0
• vallueMax: Maximum selectable value. 100
• value: iniitial value 0

All properties have defaults (shown in red after the explanation above).

Events

• colorChanged will be called for a committed value change and passes that value to a handler as sole parameter. For passing additional values assign a function that gets the value as parameter $event (like in example above).

Node Red

The included file nodered-uibuilder-vue.json is a demo for using vue-knob widgets in node-red frontends using the uibuilder node. For more information see node-red UI Builder