-
-
Notifications
You must be signed in to change notification settings - Fork 86
vue knob for uibuilder
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.
The souce code of this example is published as VueCli- application, legacy JS application and Node-Red node.
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 in the widget's Github repository. The content of that repository is also available for NPM in package vue-canvas-knob-
- 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
Download the whole demo app from GitHub or just use npm or yarn to install vue-canvas-knob in your own VueCli project (For other JS and node-red/uibuilder projects look below):
$ npm install vue-canvas-knob
To import vue-canvas-knob widgets you may use ...
import VueKnob from "@/components/vue-knob";
That import will allow using the tag in your HTML-code:
<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).
For legacy JS and uibuilder you can use a HTML tag like ...
<script src="vue-knob.js"></script>
... in your main HTML-file (e.g. index.js)
For uibuilder please use a current release since some older releases may have install problems.
-
width
: widget width300px
-
height
: widget height300xp
-
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 value0
All properties have defaults (shown right after the explanation above).
- value-changed 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).
The included file nodered-uibuilder-vue.json is the color-mixer example for using vue-knob widgets in node-red frontends with the uibuilder node.
For more information about uibuilder see node-red UI Builder
Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)