Lovelace Card - Light with Profiles

raweidinger · May 1, 2020, 1:14pm

Hi there,

thanks for sharing the card. I really like the functionality.

However I have one issue. Somehow it looks like the card puts the space for an icon in front of the text:

Any idea to remove this space or what the problem could be?

Many thanks.

Raphael

malkie · July 10, 2020, 10:53pm

Hi,
I tried to get this working but horribly failed.
I installed it via HACS. As soon as I add the light_profiles.csv in my config folder and restart hass my hue lights become unavailable.
I tried to add

bright: '0.457,0.408,254'
dimmed: '0.457,0.408,77'
nightlight: '0.509,0.411,1'

Also tried to include

group.all_lights.default,0.326,0.333,255

Allways get an error message that my light conf is wrong. Not sure what to do.

BrianHanifin · August 18, 2020, 6:30pm

That’s because group.all_lights is not created by default any more. Your options are:

Create are new light group manually.
Specify individual lights in light_profiles.csv (e.g. light.porch.default).
Follow my guide: How to survive without the "ALL groups" to create a new group.all_lights.

KTibow · August 18, 2020, 7:55pm

You’re using YAML in a CSV file. Try out

bright, 0.457, 0.408, 254
dimmed, 0.457, 0.408, 77
nightlight: '0.509,0.411,1'

Nelinski · October 6, 2020, 9:02pm

Where do I define the YAML that displays the coloured icon when it’s active? I can’t seem to find the location. I installed this via HACS if that makes a difference.

finity · October 7, 2020, 10:41am

maurizio53 · October 25, 2020, 1:52pm

I followed all installation docs, put the light_profiles.csv inside the /config folder, added the entry light_profiles inside the ui.lovelace.yaml with the same values of light_profiles.csv, added the card inside ui.lovelace.yaml. but this is what i get:

I am able to turn on and off the lights, but clicking over a profile it do not nothing. Nothing change…

For more informations my light_profile.cvs is:

bright,0.5119,0.4147,254
dimmed,0.5119,0.4147,77
nightlight,0.363,0.3686,1

And this is what i added into ui.lovelace.yaml:

light_profiles:
  bright: '0.5119,0.4147,254'
  dimmed: '0.5119,0.4147,77'
  nightlight: '0.363,0.3686,1'

My card is:

  - title: Profili Luci
    path: profili
    icon: mdi:lightbulb
    cards:
      - type: custom:light-with-profiles
        title: Profili Luci
        debug: true
        entities:
          - entity: light.yeelight_1
            profiles:
              - name: bright
                icon: 'mdi:brightness-5'
              - name: dimmed
                icon: 'mdi:brightness-4'
              - name: nightlight
                icon: 'mdi:brightness-3'
          - entity: light.yeelight_2
            profiles:
              - name: bright
                icon: 'mdi:brightness-5'
              - name: dimmed
                icon: 'mdi:brightness-4'
              - name: nightlight
                icon: 'mdi:brightness-3'
          - entity: light.yeelight_5
            profiles:
              - name: bright
                icon: 'mdi:brightness-5'
              - name: dimmed
                icon: 'mdi:brightness-4'
              - name: nightlight
                icon: 'mdi:brightness-3'
          - entity: light.yeelight_9
            profiles:
              - name: bright
                icon: 'mdi:brightness-5'
              - name: dimmed
                icon: 'mdi:brightness-4'
              - name: nightlight
                icon: 'mdi:brightness-3'

I am running HASSOS 0.116.4 inside a RPi4

mcg · October 26, 2020, 5:01pm

Hi @maurizio53,

I currently have the same issue. I’m on RPi4 and 0.116.0.
Also have double-checked my two configs + card debug mode.

Nevertheless, it seems like you’re using non RGB lights (x,y: null), is that correct?
In that case both your light_profiles.csv and the profiles in your ui-lovelace.yaml must contains zeros for x & y:

light_profiles.csv

id,x,y,brightness
bright,0,0,254

and

ui-lovelace.yaml

light_profiles:
  bright: '0,0,254'

and then in debug mode you should see
x,y: null brightness: 254

Almost a year ago I’ve struggled with the issue that just RGB lights were supported by the card.
It’s documented in this very thread (also see the following posts).

Hope this helps.

maurizio53 · October 26, 2020, 5:23pm

Yes, one of them was a non RGB light.
I discovered also id di not put id,x,y,brightness inside the light_profiles.csv.
Now after a reset it seems working but when i click over a profile i do not have the change of the color in the icon. Maybe because i must put id,x,y,brightness also inside the light_profiles in ui-lovelace.yaml?
BTW thanks for the hints…

leonkunst88 · October 28, 2020, 5:58pm

FIXED ICON ACTIVE COLOR

@maurizio53

I discovered that the system actually DO add an ‘active’ attribute to the selected profiles. However, due to a CSS bug(feature) it does not change.

However, this can besolved!!!

Install Card Mod and add this:

style: |
  ha-card [active] {
    color: var(--primary-color);
  }
  ha-card .profile-icon {
    margin: -5px 5px;
    zoom: 1.3;
  }

So, complete card script:

entities:
  - entity: light.vensterbanken
    name: Vensterbanken
    profiles:
      - icon: 'mdi:brightness-5'
        name: bright
      - icon: 'mdi:brightness-4'
        name: dimmed
      - icon: 'mdi:brightness-3'
        name: nightlight
title: Woonkamer
debug: false
style: |
  ha-card [active] {
    color: var(--primary-color);
  }
  ha-card .profile-icon {
    margin: -5px 5px;
    zoom: 1.3;
  }
type: 'custom:light-with-profiles'

Works like a charm!

maurizio53 · October 28, 2020, 6:25pm

Thanks, it gives me the lamp icons correctly shown, but not the profiles icon as shown in the example GIF at the beginning of this thread…

leonkunst88 · October 28, 2020, 6:32pm

Can you check the code with inspector in Chrome? Please click one of the profile icons to ‘activate’ it. Than right click on the same icon and click: ‘inspect’. The Chrome Inspector will popup.

You should see this:

Mind the ‘active’ attribute. If it’s not there then something is wrong. But you can test the CSS code by clicking ‘add attribute’ by right clicking the

<ha-icon class="profile-icon" title="bright"></ha-icon>

element and click; ‘add attribute’ and type ‘active’.
The the HTML for that element should look like:

<ha-icon class="profile-icon" title="bright" active></ha-icon>

My card with this CSS working:

light_example

maurizio53 · October 28, 2020, 6:39pm

Yes, adding active the icon changes accordingly, but how to make it definitive in the yaml file?

KTibow · October 28, 2020, 6:40pm

That’s not how YAML works… It is definitive.

leonkunst88 · October 28, 2020, 6:43pm

did you add:

light_profiles:
  bright: '0.457,0.408,254'
  dimmed: '0.457,0.408,77'
  nightlight: '0.509,0.411,1'

On the very top of you lovelace yaml config (three dots on top right; raw config editor).

The values and names should match the ones in your light_profiles.csv (in the root of your config folder, next to where configuration.yaml is)

maurizio53 · October 28, 2020, 6:46pm

Yes, i did it and the two are same for names and values…

maurizio53 · October 28, 2020, 6:49pm

Actually i have this after clicking over the bright profile:

Schermata 2020-10-28 alle 19.47.13

leonkunst88 · October 28, 2020, 6:50pm

So, to summarize and check:

\\IP OF YOUR HA INSTALLATION\config\light_profiles.csv

Content:

bright,0.457,0.408,254
dimmed,0.457,0.408,77
nightlight,0.509,0.411,1

Lovelace yaml (raw editor) top content:

light_profiles:
  bright: '0.457,0.408,254'
  dimmed: '0.457,0.408,77'
  nightlight: '0.509,0.411,1'

adding debug: true to the card shows the exact same values as above?
Does your light support XY config( like Philips Hue ) or brightness only? ( 0,0, 150 e.g.) ?

maurizio53 · October 28, 2020, 6:52pm

Yes to both of the questions… all my lamps support XY config

leonkunst88 · October 28, 2020, 7:06pm

Hmmm. maybe stupid question, but have you already restarted HA to make the csv file active?