# \[ANNOUNCE\] colour picker widget based on iro.js

**URL:** <https://discourse.nodered.org/t/announce-colour-picker-widget-based-on-iro-js/45393>\
**Category:** Dashboard\
**Created:** [9 May 2021 17:22 UTC](https://discourse.nodered.org/t/announce-colour-picker-widget-based-on-iro-js/45393 "2021-05-09T17:22:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [9 May 2021 17:22 UTC](https://discourse.nodered.org/t/announce-colour-picker-widget-based-on-iro-js/45393/1 "2021-05-09T17:22:44Z")

</div>

# node-red-contrib-ui-iro-color-picker

Alternative color picker node utilizing the [iro.js](https://iro.js.org) widget. The main credit goes to [James](https://jamesdaniel.dev/) for the iro.js widget.

> **[node-red-contrib-ui-iro-color-picker](https://flows.nodered.org/node/node-red-contrib-ui-iro-color-picker)**
>
> iro.js color picker for the Node-RED dashboard

I was searching for a colour picker which is usable in different ways and on mobile devices for a long time. iro.js popped up in the forum from time to time and to be honest I hoped that someone else (with more experience) could do the job. In the end I was procrastinating other jobs and thought it would be a nice small project to learn how to implement a custom ui-node.

The node-red widget is highly customizable inside the editor by choosing and combining several components either as a widget or a popup window. The example flow is available via import/Examples.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d00f1d67f601765ef6f90d6ffd5245aa0b408896.png)

This is my first dashboard node so any input is highly appreciated.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [22 May 2021 18:01 UTC](https://discourse.nodered.org/t/announce-colour-picker-widget-based-on-iro-js/45393/2 "2021-05-22T18:01:41Z")

</div>

Just pushed an update to npm to version 0.0.7 with bugfixes and some new features.

Have fun.  
Chris

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [5 June 2021 10:25 UTC](https://discourse.nodered.org/t/announce-colour-picker-widget-based-on-iro-js/45393/3 "2021-06-05T10:25:24Z")

</div>

Here you have it ... Version 0.1.1 is available on npm:

**Finally modal popups on mobile devices (tested on iOS) (should) work as expected**

0.1.1

- initial color can be changed until a valid color is received
- Editor Help window completed
- German localization of the config UI and help text

0.1.0

- fixes modal issue on iOS
- positioning and aligning of labels
- flexible button size
- _fixed:_ scaling and positioning of widgets and popups
- support of tunable white (value and temperature)
- custom initial color
- several bugfixes

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6ec7c0fd650e9ddc99bb5c52414284a5f6566993.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 July 2021 10:25 UTC](https://discourse.nodered.org/t/announce-colour-picker-widget-based-on-iro-js/45393/4 "2021-07-05T10:25:32Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.