Sorry if I missed this in the docs (or other posts here) Can someone explain to me how I might include sliders, color pickers, and dropdowns in my Dashboard 2.0 Template node? Do I need additional libraries, if so where / how can I install them? Will they be included by default in future releases?…

Annoyingly, it seems like the v-slider doesn't emit a @change event: https://vuetifyjs.com/en/api/v-slider/#api The alternative, and universal method is to react to changes to the v-model, which isn't intuitive to write, but does work across all widgets, which is: @update:modelValue="send(...)"

[image] hazymat: Do I need additional libraries No. As described in the dashboard docs , you can use the verify components out of the box. Provide custom JS and HTML (including any Vuetify components) to render in the Dashboard [image] hazymat: sliders [image] Slider compon…

Sliders I did once [image] Customize sliders for DB2 Dashboard A little bit of fun with sliders [{"id":"1c0c26f3ab8a24c8","type":"ui-template","z":"e59576a114c1e493","group":"6f47b8907c5da63a","page":"","ui":"","name":"range","order":5,"width":"6","height":"1","head":"","…

Dropdown examples - [{"id":"2086b1f86b7ea9cc","type":"group","z":"be4568a984cb4685","name":"Dropdowns","style":{"label":true,"color":"#000000","fill":"#e3f3d3"},"nodes":["686288d9473a0ad7","85ddcad5226e744c","58866c432c8047e0","6a5445d93e54827e","9161cc515f695ecd","f69abba39561daef"],"x":454,"y":79…

Just to add to Steve's answer, we also have some template examples that use the Vuetify widgets too in the docs here: [image] Template ui-template | Node-RED Dashboard 2.0 Harness the power of ui-template in Node-RED Dashboard 2.0 to design custom widgets and unique dashboard layouts. …

Thanks all for the answers. Really useful - I can see it's going to be easy to use - just needed that little pointer to get me started.

Ok so I have this: <v-slider v-model="value.setting.brightness" :min="0" :max="100" :step="value.resolution" @change="send({sysaction: 'bri', topic: key, brightness: value.setting.brightness, zone: msg.zoneid})" /> The slider is rendering correctly and binding to…

Thanks - and here's one more. It doesn't send anything on the output. Did I get the syntax wrong? <v-color-picker v-if="value.controltype == '3_RGB'" v-model="value.colour" hide-canvas show-swatches @change="send({sysaction: 'col', topic: key, colour: value.colour, zone: …

[image] hazymat: It doesn't send anything on the output You should check the docs. Like the one above, color picker doesn't have an event change: https://vuetifyjs.com/en/api/v-color-picker/ Alternatively, bind the value to a data property and use a watch. Similar topic here: Dashboard 2 - V…

Thanks for the pointer. Got it working now. I thought I had read the docs but I was looking in the wrong place (was looking at this page). Cheers.

Node-RED

Node-RED Forum

Sliders, color pickers, dropdowns, etc., in Dashboard 2.0 Templates

Dashboard

hotNipi 6 October 2024 17:50 3

Sliders I did once

Topic		Replies	Views
Dashboard 2 Beta development Dashboard dashboard-2	173	4116	25 January 2024
Dashboard 2.0 is now Generally Available Dashboard dashboard-2	95	5504	14 March 2024
Simple Dashboard 2.0 Template node example Dashboard dashboard-2	15	1929	27 April 2024
Dashboard 2.0 Pre-Alpha Available General dashboard-2	314	8562	9 December 2023
Latest Dashboard 2.0 Release - Tabs, Number Input & New Gauges Dashboard dashboard-2	30	906	5 September 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Sliders, color pickers, dropdowns, etc., in Dashboard 2.0 Templates

Related topics