gh61/lovelace-hue-like-light-card

This card provides a Hue-like way to control your lights in Home Assistant.

lovelace-hue-like-light-card's Issues

Use the hue-screen light tile as dashboard card

I wanted to express my admiration for the fantastic design of the screen page you’ve created. It’s truly remarkable and visually appealing. I’ve been thinking about a way to incorporate it into my own dashboard project while adding my sensors to the bottom.

I believe that the icons from your screen page would be a perfect fit for my dashboard, and I’d love to use them as standalone elements. They would undoubtedly enhance the overall aesthetics and user experience of any project. Your design is so impressive that I genuinely think it deserves to be a dashboard on its own.

The red circled replaced with your hue icon design

Fix background `theme-color` on iOS Themes

Hi,
I've just come across your great card. I'm slowly moving away from hue hub and moving all my lights to Z2M and this really helps keep my wife happy :) .

I noticed you allow us to have the offColor to be the HA theme, would it be possible to have an option for it to use a custom theme you maybe using?

The possibility to define transparency for off color would be amazing!

I absolutely love the card! Most of lights all over my home are Hue based and this card makes it incredible to integrate it into the wall tablet dashboard! In fact, it motivated me to try to migrate from AppDaemon to Lovelace! The only thing I'm missing for it to blend with the dashboard is the ability to set the transparency for the off state!

I've seen that you've just added support for Card-mod maybe that's a way?
I'm not sure I'm front-end versed enough to be able to do this right now.

A setting like offTransparency would work great!

The new WIP Lovelace Dashboard kind of brings unnecessary attention to the lights that are off:

Old AppDaemon dashboard I'm in process of rebuilding into Lovelace:

Example of complete Hue Screen

Hi there

Maybe I'm to dumb to figure it out, but I can't seem to get the Hue Screen to work as you've posted it in the manual.
What do I have to code to have it done like that?

What I want to do is have the scene only apply to a single group withing a room which has two groups. Like i.e. I have 7 lights within a room. 2 for the sink within a group called that and the rest of them for a group called table. Whenever I turn on a scene now, it does that for the whole room.

Styling customizations

I love this card in general, but I'd like to make a few styling changes for how the main card looks on my dashboards. I've been trying to use card_mod to do this, and it works great while editing the card, but the card on my dashboard itself never gets the styling applied for some reason.

By contrast, card_mod is working for me on most other card types.

I'm curious if there is any known way to override the styling of the card?

The styles I'm attempting to apply, which look good while editing the card but do nothing when viewing it, are:

card_mod:
  style: |
    ha-icon {
      transform: scale(1.3) !important;
      position: static !important;
      top: auto !important;
      left: auto !important;
      margin-left: 1rem;
    }
    .tap-area {
      display:flex;
      align-items: center;
    }
    h2 {
      font-size: 1.2em;
      margin: 0 0 0 1rem !important;
    }

Hide slider when off

Hey,
I was thinking if that would be an option to have.
When the light is off do not show the slider. Would look cleaner for me. Would be nice if we could add this as an option. As always greatbjob you are doing here

Malkie

Generate light groups from rooms

Hi,

I love this custom card, with this card I can nearly replicate the Hue app.

But the issue that I have is that my groups are not showing the correct "children".
I'm using a combination of custom:auto-entities and custom:hue-like-light-card.

Currently my yaml looks like:

- type: custom:auto-entities
  card:
    type: entities
    title: Kamers
  filter:
    include:
      - domain: light
        attributes:
          hue_type: "room"
        options:
          type: custom:hue-like-light-card
          offShadow: false
          allowZero: true
          offColor: '#424340'
    exclude:
      - state: unavailable       

Now this does properly show the different rooms:

But when I select one of the rooms, the only light in the room is the room itself:
(The room Achtertuin has 5 different lights in it)

---

1. How can I setup the lights so that the corresponding "children" are in each room without manually having to add every single room and light that I have?

2. How can I make sure the corresponding icons are shown?

3. Is there a method to style the shadowroot elements in ha-switch/ha-slider ( from the styling in the .js file?

Thank you for your time, and also for this amazing card!

Slider with Mushroom - where ?

Hey, i wonder where i find V1.5 - is it included now or must we wait for release ?
1fdaf4f

Can't add Hue Plugs

When I try to add Hue Plugs or on/off light switches it does not appear in the Hue Screen.
Can this be added?

Suggested README edit

Thank you for all your effort. I am new with HA but love it so far.
I struggled installing hue-like-light card, in part because I am new to this.

I didn't understand this step so much and had to do my own thinking :) .

It's not your responsibility to educate the public and I appreciate your efforts. The one edit I suggest is explaining what the following statement means and where to get that information.

I am happy to do a PR for you if that will help

Basic configuration

type: custom:hue-like-light-card
entity: light.livingroom_color

Where livingroom_color is the name/entity of some existing light

Scene sorting

Hi,
I use the automatic detection of scenes. They seem to be added in a random order. Is there some possibility to sort them somehow or would that something that could be added?

thanks a lot

malkie

Add hue light slider to scene pages

Is it possible to add the lights slider / buttons to the scene page that pops up.

This is similar to the functionality you get with the hue controls.

I can see there is a stub that looks like it might be starting to do that already.

Toggle room instead of all lights with switch

First of all: Thank you very much! I've been dreaming of a hue style card for years and yours is close to perfect!

When implementing your card into my setup, I've realized that hitting the switch to enable/disable all lights doesn't trigger them simultaneously as the official Hue app does. This is probably because the card triggers each light individually, instead of using the Hue provided room entity. My feature request would be: Can we please get the entity configurable that's trigger on hitting the switch?

Thanks in advance!

Icon arrangement

Hello, first of all thank you for your great work! This is exactly what I was looking for.

I only have two "little" suggestions for improvement:

1. Why are multiple lights always in a row? I have some rooms with over 10 lights. Including light groups even more. But they don´t stack up like scenes in two ore more rows.
   That's a lot to scroll sideways - especially on a smartphone.
2. Light groups can currently only be added to the lights. Maybe a separate “light group” would help. So one area each for scenes, lights and light groups.

And two questions:

Can I hide scenes individually or completely, even they are in the corresponding area? I don´t need all scenes in every room.
Can I change the size of icons for lights and scenes?

Thanks in advance.
Greetings, Oliver

Color temperature outside of supported range

I have mostly IKEA lights with temperature and brightness control only. However the temperature control seems buggy. When I slide it to cool or warm temp on the circle control it (bounces or flicks) back.

Thought it may have been computer or user error.

But on the HUE lights I have it works perfectly.

Looking at the attributes could this be the issue?

Hue Bulb
min_color_temp_kelvin: 2000
max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 500

IKEA Bulb
min_color_temp_kelvin: 2202
max_colortemp kelvin: 4000
minmireds: 250
max mireds: 454

The 4000 to 6535 range? The circle for temp range is built for hue so when I slide to the bottom for example it says no, you are 2535 Kevin away and snaps back?

PS. Love your card. Changed my whole dashboard.

Hass hue icons

Hey. This would look great paired with hass-hue-icons. Wonder if there's a way to bundle both together?

Feel free to use them in your screenshots.

Test bug

Issue to test CI when bug issue fixed

Wiz scenes

Is there a way to setup a toggle to activate a specific scene (bright, low light, specific color/intensity?)

For instance, I have a simple card with different buttons like:
type: custom:hue-like-light-card
entity: light.wiz_rgbw_tunable_ad222a

and if I hold it, I see a menu that allows you to change color, temperature, or select pre-defines scenes (ocean, romance, sunset, party, cozy, etc) but I couldn't find where those are saved, or how to have a toggle to activate them without navigating through the menu. Thanks

Additional Function: HoldAction?

Hey there!

First things first: I really love what you created for HA! It really helps me organising and controlling my lights! 🥇

I just wondered while using your card, if it would be possible to add a HoldAction?
I'd like to use a ClickAction to turn the lights on and off and use a HoldAction to open the HueScreen. Do you think something like that would be possible in the future or is it already possible? Couldn't find anything about that in your readme :(

Would really appreciate hearing from you! 👍

Idea: Add support for auto-entities

Would it be possible to add support for auto-entities?

Context

Here auto entities could act as a filter, e.g. all lights in a room.

type: custom:auto-entities
filter:
  include:
    - area: bedroom
      domain: light
card_param: entities
card:
  type: entities

Results in

Problems

However when using this you'll get the error: Object { code: "invalid_format", message: "expected str for dictionary value @ data['item_id']. Got {'entity': 'light.signify_netherlands_b_v_lwo001_light'}" }.

Using a similiar template to cast the result from entity to string seems to get a bit further, but then crashes.

type: custom:auto-entities
filter:
  template: |
    {% for light in states.light %}
      {% if light.state == "on" %}
        {{ light.entity_id | string}},
      {% endif %}
    {% endfor %}
card_param: entities
card:
  type: custom:hue-like-light-card

Crash log

Uncaught TypeError: t is undefined
    calculateBackAndForeground hue-like-light-card.js:79
    updateStylesInner hue-like-light-card.js:937
    connectedCallback hue-like-light-card.js:945
    connectedCallback scoped-custom-element-registry.js:248

Card becoming invisible

Hi,
I really like the card! But recently it stopped working :(
When I create the card it will not show everything but if I add the card again in the dashboard it will show both of the cards on the device I created them on. But if I open for example another tab some of the cards aren't there :( see screenshot

Please help!

Feature: Color-picker - Change multiple lights at once

I really appreciate the dashboard's current design! However, I've noticed that it lacks a feature present in the hue app where you can view all the different lights and their current colors. In the app, you can easily move them together by dragging them on top of each other. With multiple lamps on the dashboard, it becomes a bit tedious to individually adjust each lamp to achieve matching colors.

Suggestion: Change "scene" icons to match it's primary color, similar to the current Hue App

Hey! I love this card, it's the reason I decided to migrate off of the hue app.

The only thing I miss is the ability to quickly see what color a scene will be because it's currently a list of grey icons , when you have a lot of scenes, it gets hard to remember what each one looks like.

Is it possible to make an option to apply the primary color of a scene to it's button in the hue-screen view?

Add/Fix support for non-dimmable lights

For lights controlled with Philips hue plug is it in the Philips Hue app not possible to change the brightness of the light. The slider bar is for that reason not shown.
These lights in Home Assistant using lovelace-hue-like-light-card will have a slider which does not work as that isn’t supported. Suggestion to hide the slider based on the device type (Hue smart plug (LOM007)) or via a configuration setting.

Feature Request: Official hue scenes

Hi there,

I've spent the last few days building a custom_component implementing the scene functionality of hue using all the scenes from the official hue scene gallery. Hue scenes and HA scenes are actually quite a bit different with the Hue ones being presets for a state that can be applied to a bunch of entities and the HA ones being a set of states for a specific set of entities

I'm now wondering how a UI for that could look like, as right now, it's just a bunch of services.

You can find the component here:
https://github.com/Hypfer/hass-scene_presets

It features images for all scene presets that have been AI generated to avoid all the legal issues.
It also provides services that simulate the dynamic scene feature of hue.

I'm of course posting it here mostly in the hope that you find it interesting so that I can be lazy on the UI part but please don't feel pressured to do anything with it. After all it's I who wants to see something happen so it's also I that is responsible for building it.
Still I figured that you might find it cool as well but if not feel free to close the issue

Be able to define both entity (zone) and entities (lights for multicolor view)

If both are defined at once, auto generate scenes from the entity (when valid to) but use the color of the lights in the entities field to color the background of the card

Feature ideas.

Hi, if I could suggest something, I think it would be helpfull to implement following to make user experience slightly better:

• a right hand side drop down which can be populated with predefined scenes
• a palette button to allow user to select colour on the whim.
• tap action light toggle (as an config option)

Not every user see custom

My wall-pad cant’t see de custom card. On my phone it works.

Why is that and how can I resolve this?

thanks for you’re help.

Add Active Scene to the Title of component

Hi,

I love your card, it brings colors to dull and monochromatic dashboard where I only have sliders.
I'm mainly using it as a "category header" to separate light sliders throughout the house (imagine all lights in the house in a vertical list and this component is mainly separating the sliders by room - where I'm grouping all the lights in each room and also adding the Scene selection to rooms)

The only limitation I see is that I would love to have the Selected Scene shown in the Title.
As such:

To do this I made a hack in the code.
Initially it was like this (hue-like-light-card.js:336 - prettyPrinted):

  render(){
	const t=this._config.getTitle(this._ctrl),e=()=>{this.requestUpdate(),this.updateStyles()
  };

I made it like this:

  render(){
	const title=this._config.getTitle(this._ctrl);
	const t=title.substr(0,title.indexOf('{')>0 ? title.indexOf('{')-3 : title.length);
	const t_scene=(title.indexOf('{')>0) ? " - " + this._hass.states[title.substr(title.indexOf('{')+2, title.indexOf('}')-title.indexOf('{')-2)].state:""
	,e=()=>{this.requestUpdate(),this.updateStyles()
  };

And added the t_scene below (line 346):
${t}**_${t_scene}_**
In the configuration I appended this "parameter" to the "title": "- {{sensor.living_room_active_scene}}" (this is a template sensor I have in HA to show the current Scene
Just to make it configurable (and have it display without the scene where needed).

Now, ideally I would add a new parameter with the scene sensor to make the code nicer - If I'll do it I'll submit a PR directly

So, I think this is a good addition and maybe you want to squeeze it in the next version :)

Color control for non hue brand lights?

It seems only my hue branded lights allow setting the colors. All other lights only show on/off/brightness.

Is it not possible to use non hue branded lights with this?

Use the new state and attribute localization function

In HA version 2023.9 new methods
for localizing states and attributes are introduced.
Use these methods for Text templates.

Not seeing individual lights in Hue Screen

I think I may be misunderstanding some setup step, but so far I'm unable to get individual lights to appear in the Hue Screen.

For example, this is a card I'm testing:

type: custom:hue-like-light-card
title: Living Room Lights
entities:
  - light.living_room_ceiling_light
  - light.living_room_hue_iris_1
  - light.living_room_hue_iris_2
  - light.entertainment_center_lights
  - light.tv_lights
onClickAction: hue-screen
offClickAction: hue-screen
hueBorders: false
offColor: theme-color
hueScreenBgColor: theme-color
offShadow: false

When the Hue Screen opens, I see the main slider and toggle at the top, and then I see the list of scenes associated with those lights, but there is no list of lights with toggles underneath that as the screenshots show.

Is there something extra I need to do to enable that functionality?

Changing title and icon size, color (styling)

Hi,
I really like your card and started using it heavily since the last update as it has all features I need now. Was wondering if there is a possibility to get the following things implemented

• change icon size
• Change title/name font size
• Hide title/name
• Change icon color when turned off. Would love to have it darker when turned off

thank you very much for the great work

Malkie

Vertical list of lights (old Hue app style)

Thanks for making this excellent card!

Personally, I much prefer the interface from the old Hue app where lights in a group were laid out vertically rather than horizontally. I find it faster to use since you can show more lights in the interface without having to scroll, and I like being able to quickly adjust brightness using the sliders.

Would it be possible to add a setting to use this layout? It could reuse the UI component for the main card.

Adding other icon groups - hue: and phu:

mdi works great but can you make it so we can use hue or phu icons as well? More customization. Thanks.

Love it

<3

Option to remove / hide switch

This card looks almost exactly like what I'm looking for. Any chance you could make an option to hide the switch on the right side, since the entire card is clickable to turn on / off? It would give more room for the name when used in a 2 column grid layout.

Use mushroom styled slider

Hello!

Is there any way to change the style of the slider to have a bigger touch target? At the moment, the touch target is too small for my preference. In the screenshot below is a comparison of the current hue-card sliders vs Mushroom cards.

Missing option to change colour temperature on light

I've read through the configuration and examples several times, but can't seem to find anything about this.

On the screenshot I've added a bedroom light.
It is possible to change the colour temperature in the default light panel, but not in hue-like-light-card.

Am I missing something basic here?

Support for Hue gradient light

Love it !!!
Could it be possible to add the Hue gradient light ?

Support theme background colors

A quick suggestion. Depending on the HA theme and background color, it is difficult to find an 'offColor' that works well across different background colors.
Would it be possible to expand the 'offColor' key to support an opaque mode or some other method to use the background as a base for the card color? Would this be problematic in the transitition to 'defaultColor'?

Wrong entity name crash the lovelace page instead of returning error

Hi,

Running the latest HA:

and latest release of the card through HACS.

Got a lovelace sub page with my lights:

But if an entity is wrongly spelled, the lovelace page just crash with no error message:

Was finally able to find the bug through the web developer checks:

Hope this helps for the development :)
Let me know if you need any other information!

Error when having the "lovelace-hue-like-light-card" and the entities from "lovelace-auto-entities" in a grid

Here is the code i used
the "lovelace-auto-entities" work in a grid if i use a other card

square: false
type: grid
columns: 1
cards:
  - type: custom:auto-entities
    filter:
      include:
        - domain: light
          area: 829d23948f6844f0a15e2a14e4318e23
      exclude:
        - state: unavailable
    card:
      type: custom:hue-like-light-card
      title: Woonkamer
      icon: mdi:sofa
      slider: mushroom
      theme: synthwave
      style: |
        .brightness-slider {
          --mush-control-height: 20px;
          --slider-color: white;
        }

Can we create an animation on the icon?

Good morning,
Thank you for your work.
Just a quick question.
Can we create an animation on the icon?
Style:
{% if is_state('light', 'on') %}
--icon-animation: spin 2s linear infinite;

I do not know how.
Thank you very much

Can I invoke the hue-screen functionality from other cards? [API]

I love this card, but I'm not a fan of how small the slider is. My solution would be to use a Mushroom light slider, but when I tap, I would like the hue-screen for that light entity to show up, is that possible ?

Suggestion: Ability to edit 'icon' property as well as others when defining multiple entities.

I'd like to have the custom icons for the lights I've listed here as entities like you are able to define when it's a single 'entity:' :
'''
type: custom:hue-like-light-card
title: Downstairs
icon: hue:downstairs
entities:

• light.dining
• light.kitchen
  '''

Hue Dynamic Scenes

Hello,

One great addition would be adding support for the HUE Dynamic Scenes.
I'm only using Hue so I "hacked" the code to call a different service (line 77 in js file):
this._hass.callService("hue","activate_scene",{entity_id:this._config.entity,dynamic:true,transition:10,speed:40})

I also added transition and speed values.

For me this works well but it's not configurable. For others it would be a good idea to:

• Have a toggle parameter to switch between normal scene triggering or Hue (using the new hue.activate_scene service)
• Add parameters for:
  • dynamic scene - boolean
  • transition time - integer
  • speed - integer

Popup card color/background color too bright?

I have trouble seeing the text in the popup while using darkmode.

This is an example using the default theme:

And this is an example using the metro green theme:

Usually the popups look like this with my current theme:

I couldn't find anything to change the background or text myself.

Edit: My bad I was just not looking enough

card mod doesnt seem to apply to this card

For some reason card_mod doesn't seem to apply properly to this card? When i do the below, the height is correct whilst in the configuration screen but no longer applies when viewing the dashboard normally.

card_mod:
  style: |
    ha-card { 
    min-height: 600px
    }

Slider Problem

Sorry to bother you again:

It could be that i'm getting something wrong, but the function to hide the slider isn't working for me :(

Thank you in advance for your help :)