node-red-dashboard-2-vue-color-wheel 0.2.0

FlowFuse Dashboard 2 widget wrapping vue-color-wheel

npm install node-red-dashboard-2-vue-color-wheel

Node-RED Dashboard 2 - Vue Color Wheel Widget

A custom widget for FlowFuse Dashboard 2 that provides an intuitive RGBW color picker with power control and brightness adjustment.

Features

🎨 Interactive Color Wheel - Aurora or Spectrum wheel with harmony color selection
💡 Power Switch - Large, intuitive on/off toggle
🔆 Brightness Control - Smooth dimmer slider (0-100%)
🌡️ Warm White Channel - Dedicated warmwhite slider for RGBW lighting
📱 Responsive Design - Adapts to container size (minimum 200px)
🔄 State Persistence - Maintains state across page reloads
🎯 Multiple Instances - Support for multiple widgets on the same page

Installation

Via the Node-RED palette manager or npm (recommended)

Search for node-red-dashboard-2-vue-color-wheel in Manage palette → Install, or run:

cd ~/.node-red
npm install node-red-dashboard-2-vue-color-wheel

Restart Node-RED afterwards.

Install from GitHub

cd ~/.node-red
npm install github:Acrylangel/node-red-dashboard-2-vue-color-wheel

Restart Node-RED afterwards. The prebuilt bundle in resources/ is part of the repository, so no build step is needed.

Manual installation from a local checkout

git clone https://github.com/Acrylangel/node-red-dashboard-2-vue-color-wheel.git
cd ~/.node-red
npm install /path/to/node-red-dashboard-2-vue-color-wheel

Restart Node-RED afterwards.

Important: Always install through npm install inside your Node-RED user directory (~/.node-red). Dashboard 2 only loads third-party widgets that are listed under dependencies in ~/.node-red/package.json. If you just copy the folder into ~/.node-red/node_modules (or into a nodes directory), the node shows up in the editor, but the widget stays invisible in the dashboard and the browser console reports No Vue component found for ui-vue-color-wheel - falling back to ui-template.

Usage

Basic Setup

Add the color wheel node (palette category dashboard 2) to your flow
Configure it to use a Dashboard 2 group
Connect input/output nodes as needed

Input Message Format

Send messages to the widget to update its state:

// Set power, brightness, and color
msg.payload = {
    power: true,           // boolean - on/off state
    brightness: 75,        // number (0-100) - brightness percentage
    red: 255,              // number (0-255) - red
    green: 128,            // number (0-255) - green
    blue: 0,               // number (0-255) - blue
    white: 50              // number (0-255) - warm white
}
return msg;

// Update only specific values
msg.payload = {
    power: false
}
return msg;

// Change color only
msg.payload = {
    red: 255,            // number (0-255) - red
    green: 128,            // number (0-255) - green
    blue: 0
}
return msg;

Output Message Format

The widget sends messages on user interaction:

Power Toggle Event

{
    payload: {
        power: true,        // boolean - new power state
        brightness: 75      // number (0-100) - current brightness
    },
    topic: 'power-toggle'
}

Brightness Change Event

{
    payload: {
        power: true,        // boolean - current power state
        brightness: 50      // number (0-100) - new brightness
    },
    topic: 'brightness-change'
}

Color Change Event

KNX DPT 251.600 ready

{
    payload: {
        red: 255,           // number (0-255)
        green: 128,         // number (0-255)
        blue: 0,            // number (0-255)
        white: 200,         // number (0-255) - warm white
        mR: 1,              
        mG: 1,
        mB: 1,
        mW: 1
    },
    topic: 'color-change'
}

Widget Behavior

Power Control

Click the large power button to toggle on/off
When OFF: Color selection is disabled (grayed out)
When ON: Full access to color and brightness controls

Brightness Slider

Range: 0-100%
Sliding to 0% automatically turns power OFF (without triggering power event)
Sliding above 0% automatically turns power ON
Turning power ON when brightness is 0% sets brightness to 100%

Color Selection

Click the Color button to access detailed controls
Choose colors using the interactive color wheel
Adjust warm white channel independently
Click Back to return to the main view

Responsive Sizing

Widget adapts to container width
Minimum diameter: 200px
Maximum: configured radius (default 160px)
Automatically recalculates on window resize

Configuration

The widget accepts the following configuration options:

Group - Dashboard 2 group assignment
Size - Widget width/height within the group
Name - Display name for the widget
Allow Color Wheel - yes shows the color selection, no reduces the widget to power switch and brightness slider
Radius - Color wheel radius in pixels (default: 160)
Wheel Type - aurora or spectrum
Harmony - Color harmony mode: monochromatic, complementary, analogous, triad, split, compound, tetradic, square, doubleSplit

Technical Details

Dependencies

This widget integrates the excellent vue-color-wheel library by @xiaoluoboding.

Core Dependencies:

vue ^3.4.27
colord ^2.9.3
moveable ^0.53.0
gsap ^3.12.5
@vueuse/core ^10.9.0

Build

npm run build

Generates UMD bundle in resources/ui-vue-color-wheel.umd.js

Architecture

Frontend: Vue 3 (Options API) with TypeScript
Backend: Node-RED node (CommonJS)
Build Tool: Vite
State Management: Dashboard 2 Vuex store

Credits

Vue Color Wheel Library

This widget incorporates and extends the vue-color-wheel component.

Original Author: @xiaoluoboding
License: MIT
Repository: https://github.com/xiaoluoboding/vue-color-wheel

The original library has been integrated locally with modifications to support:

Multiple instances on the same page (unique IDs)
Dashboard 2 integration patterns
RGBW color model with warm white channel
Custom UI/UX enhancements

Special thanks to the original author for creating such an elegant color picker component!

License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues, questions, or feature requests, please open an issue on the GitHub repository.

Changelog

Version 0.2.0

Node is now listed in the dashboard 2 palette category (was: dashboard)
Added the missing Wheel Type option (aurora / spectrum) to the node editor
Added the Size option (width/height within the group)
Widget labels are now English (ON/OFF, Brightness, Color, Back, Warm White)
README: installation from GitHub/local checkout and a note why copying the folder manually does not work
package.json: repository, license and author metadata for npm

Version 0.1.0

Initial release
Power switch with on/off control
Brightness dimmer (0-100%)
RGBW color wheel with warm white channel
Responsive design
State persistence
Multiple instance support

Node Info

Version: 0.2.0

Updated 5 days ago

License: MIT

Rating: not yet rated

View on npm

View on GitHub

View Scorecard 9 2 1

Actions

Downloads

0 in the last week

Nodes

ui-vue-color-wheel

Keywords

node-red
dashboard
flowfuse
widget
vue
node-red-dashboard-2
color picker
rgbw
knx

Maintainers

acrylangel