# RGB bulb color management from the dashboard **URL:** \ **Category:** Demandes livrées\ **Created:** [September 6, 2020, 12:18pm UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535 "2020-09-06T12:18:34Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Reno](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/reno/32/5939_2.png) [@Reno](https://community.gladysassistant.com/u/Reno)\ **Post date:** [September 6, 2020, 12:18pm UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/1 "2020-09-06T12:18:34Z")
We’ve discussed this several times on the forum and I think it’s an option missing for color bulb owners. > > > \### Pull Request check-list > > To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items: > > \- \[\] If your changes affects code, did your write the tests? > \- \[\] Are tests passing? (\`npm test\` on both front/server) > \- \[\] Is the linter passing? (\`npm run eslint\` on both front/server) > \- \[\] Did you run prettier? (\`npm run prettier\` on both front/server) > \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code) > \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/gladys-4-docs) and the \[website\](https://documentation.gladysassistant.com). > \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.json\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com). > > NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open. > > \### Description of change > Lib used: > \* \[react color\](https://www.npmjs.com/package/react-color) to work on a color component. Creating one matching Gladys uses cases is planned. It's possible with react color. > \* \[reactcss\](https://www.npmjs.com/package/reactcss) to change css with the state instead of changing the style in the JSX part of the code (might not be useful in the end) > \* \[magic-home\](https://www.npmjs.com/package/magic-home) to control the devices. > > Whats done: > \* EVENTS and CONSTANTS to handle the string value of a device > \* \[Added \`common\` in \`/front/src/config/i18n/en.json\`\](https://github.com/renaiku/Gladys/blob/0c387808ed46ce2e8abf1c3589ef16e32e390f44/front/src/config/i18n/en.json#L176) > \* UI is WIP > > !\[Sans titre 1\](https://user-images.githubusercontent.com/17033907/69898600-dda8cb80-135b-11ea-9bef-2536e0946efa.jpg) ---
**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\ **Post date:** [September 7, 2020, 8:00am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/2 "2020-09-07T08:00:58Z")
I can’t vote anymore but I’m for it, I was going to open the topic. ---
**Author:** ![alex](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alex/32/10944_2.png) [@alex](https://community.gladysassistant.com/u/alex)\ **Post date:** [September 7, 2020, 2:30pm UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/3 "2020-09-07T14:30:31Z")
Vote limit reached as well but I vote for it too ---
**Author:** ![VonOx](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/vonox/32/10128_2.png) [@VonOx](https://community.gladysassistant.com/u/VonOx)\ **Post date:** [November 8, 2020, 8:55am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/4 "2020-11-08T08:55:37Z")
I’m just attaching a screenshot of what HA does and which I find more practical than the hue app. ![Screenshot_20201108_095213_com.android.chrome](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/4/4d5f2a0a2329708690e4c5b7f59b3c197f51faac.jpeg) ---
**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\ **Post date:** [November 8, 2020, 11:32am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/7 "2020-11-08T11:32:09Z")
What type of model is this? Check the list of compatible bulbs here: > [@\[J'ai besoin de vous\] Liste des périphériques compatibles Gladys v4](https://community.gladysassistant.com/t/jai-besoin-de-vous-liste-des-peripheriques-compatibles-gladys-v4/5584): > > Salut à tous! Nous sommes très proche de la release RC, et la page [Intégrations](https://gladysassistant.com/fr/integrations/) du site fait un peu vide. Ce serait sympa que pour la sortie, tous les périphériques compatible avec Gladys 4 soit dans cette liste slight_smile Je comprend que vous n’êtes pas tous à l’aise avec GitHub, j’ai donc créé un document partagé avec un exemple de produit. Vous pouvez remplir ce document avec les produits que vous utilisez dans Gladys 4, et je m’occuperais de transposer cette liste sur le site. Attent… ---
**Author:** ![VonOx](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/vonox/32/10128_2.png) [@VonOx](https://community.gladysassistant.com/u/VonOx)\ **Post date:** [November 8, 2020, 12:08pm UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/9 "2020-11-08T12:08:16Z")
You have a button in the UI to create an issue on GitHub, a developer will take care of it. (in integrations / Philips Hue) You can also find the real model in the Philips app ![Screenshot_20201108_131148](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/d/d53435d5acabe45741c217552fefb0849e94ef93.jpeg) ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [November 9, 2020, 6:36am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/10 "2020-11-09T06:36:31Z")
One might be able to look at this library: > **[iro.js](https://iro.js.org/)** > > An HSV color picker widget for JavaScript, with a modern SVG-based user interface ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [November 10, 2020, 5:59pm UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/12 "2020-11-10T17:59:23Z")
I started rapidos yesterday evening. Tomorrow is a holiday, I’ll get on it if there are no other constraints. ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [November 11, 2020, 9:00am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/13 "2020-11-11T09:00:44Z")
Well, in terms of UX, I’m waiting for your feedback, but I have a first draft (note, please disregard the image quality and pixelation) ![color_picker](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/f/fc580a1ca40d4a28afaf9ab3da648e3d1757c14b.gif) ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [November 11, 2020, 9:22am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/14 "2020-11-11T09:22:26Z")
@AlexTrovato That’s really cool, I like it! Nice work on the UI 🙂 ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [November 11, 2020, 9:24am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/15 "2020-11-11T09:24:43Z")
Do you really like it? I did this quickly, I’m not a huge fan, but I’m not sure I can do better without the help of a « UX expert ». I improve the « transition » effects to make the collapse/expand fluid and I put it on Github if you want to play with it. ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [November 11, 2020, 9:35am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/16 "2020-11-11T09:35:55Z")
> [@AlexTrovato](#): > > I did that quickly, I’m not a big fan, but I’m not sure I can suggest better without the help of a « UX expert ». I actually think it’s good! There are small details to fix, but apart from that the general idea is not bad. The fact that the scroll bar pop is not great for example, maybe we should dynamically adjust the maxHeight of the box when the roommate picker is deployed? Also see the behavior on mobile with touch. But otherwise I really think it’s not bad! ---
**Author:** ![VonOx](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/vonox/32/10128_2.png) [@VonOx](https://community.gladysassistant.com/u/VonOx)\ **Post date:** [November 11, 2020, 9:39am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/17 "2020-11-11T09:39:25Z")
As PG, only the scroll bar looks weird. Other than that, good job 👏 ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [November 14, 2020, 9:31am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/18 "2020-11-14T09:31:55Z")
Like this? (in popover and scroll focus) ![color_picker](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/4/412cfc1675f7c64072bb0fc7ed0a4d60da2d675c.gif) ---
**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\ **Post date:** [November 14, 2020, 11:07am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/19 "2020-11-14T11:07:06Z")
You have 2 TV Lamp, if I understand correctly, they are the same. The first one is for on/off And the second one is for the RGB Can’t we put the color rectangle on the same line as the on/off button? And it will be activated or not depending on the bulb (RGB or white) ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [November 14, 2020, 11:20am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/20 "2020-11-14T11:20:34Z")
Here, the dashboard management is done per feature. It should be discussed with @pierre-gilles whether it is reasonable to group the selected features on a device. ---
**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\ **Post date:** [November 14, 2020, 11:43am UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/21 "2020-11-14T11:43:57Z")
I’m thinking about this because for now you only have one light bulb. When you have 10, you will have a very long dashboard if they are all in the same room. ---
**Author:** ![Exilon62](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/exilon62/32/6003_2.png) [@Exilon62](https://community.gladysassistant.com/u/Exilon62)\ **Post date:** [November 14, 2020, 12:22pm UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/22 "2020-11-14T12:22:31Z")
I agree, but it’s a global issue even without colors. We need a light group system in a future version to group light actions. ---
**Author:** ![Hamtaro](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/hamtaro/32/2373_2.png) [@Hamtaro](https://community.gladysassistant.com/u/Hamtaro)\ **Post date:** [November 14, 2020, 1:21pm UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/23 "2020-11-14T13:21:36Z")
> [@AlexTrovato](#): > > And like this? (in popover and scroll focus) I liked the smooth effect with the accordion… The popup is so 90s… 😛 ---
**Author:** ![VonOx](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/vonox/32/10128_2.png) [@VonOx](https://community.gladysassistant.com/u/VonOx)\ **Post date:** [November 14, 2020, 5:10pm UTC](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535/24 "2020-11-14T17:10:56Z")
A good old modal ^^ @AlexTrovato it’s not simple after all this story (when you touch the UI anyway it’s always a hassle). I prefer your second proposal [Next page](https://community.gladysassistant.com/t/gestion-de-la-couleur-des-ampoules-rgb-depuis-le-dashboard/5535.md?page=2)