How to change opacity of icons?

[alray31]

Hi,

First, thank you very much for these custom cards, exactly what I was looking for!
I wonder how can I change the opacity of the icons for entities 1 to 4 (the right side icons?)
I would like to have no opacity since I like to use background image on my room cards. With the actual opacity settings, the icons are barely visible when the entity is off. See attached picture, the lower card is the standard room card, the one on the top is yours.

Any idea?

Background image is applied using this

Here is the code used for this card:

  - type: custom:button-card
    template:
      - custom_card_andyblac_room
    name: "Salon"
    label: '[[[ return["🌡️"] + states["sensor.thermostat_salon_air_temperature"].state +"°C"]]]'
    ulm_custom_card_andyblac_room_color: grey
    styles:
      card:
        - background: url(/local/pictures/salon.jpg) center
        - background-size: cover
    tap_action:
      action: navigate
      navigation_path: salon
    variables:
      ulm_custom_card_andyblac_room_color: blue
      #sensor_label_1: 
      #sensor_label_2:
      #sensor_label_3: 
      custom_2:
        entity_id: climate.thermostat_salon
      sensor_1:
        entity_id: media_player.chromecast4883
        tap_action:
          action: toggle
      sensor_2:
        entity_id: media_player.television_salon
        tap_action:
          action: toggle
      entity_1:
        entity_id: light.h6072_4976
        ulm_custom_card_andyblac_room_icon_color_on: yellow
      entity_2:
        entity_id: light.govee_dreamview_tv_2
        ulm_custom_card_andyblac_room_icon_color_on: yellow
      entity_3:
        entity_id: cover.rideau_fenetre_salon
        ulm_custom_card_andyblac_room_icon_color_on: yellow
      entity_4:
        entity_id: cover.rideau_porte_patio
        ulm_custom_card_andyblac_room_icon_color_on: yellow

Thanks

[andyblac]

hi,

try adding a custom off colour to each icon, see it if works for you.

example 1:

      entity_1:
        entity_id: light.h6072_4976
        ulm_custom_card_andyblac_room_icon_color: rgba(var(--color-theme),0.4)
        ulm_custom_card_andyblac_room_icon_color_on: yellow

example 2:

      entity_1:
        entity_id: light.h6072_4976
        ulm_custom_card_andyblac_room_icon_color: rgba(221,221,221,0.4)
        ulm_custom_card_andyblac_room_icon_color_on: yellow

the 0.4 in rgba(221,221,221,0.4) controls the opacity of the colour, the background opacity is hardcoded, but if you really need to control this, I could add a new variable ulm_custom_card_andyblac_room_icon_color_bg for you to control this as well. But let me know how you get on with current controls.

you can also control the other icons In the same way, the full list of variables is listed in the guide here

[alray31]

Thank you very much for your answer!
Both examples works to change the color and opacity of the entity icon. Any way to change the opacity of the circle under the icons? Its way better then it was now but adding more opacity to the circle would help with the visibility.

[alray31]

If not possible I will just try to use colors that have more contrast with the background image. The yellon_on works well with the background image of the kitchen but not so much with the background of the living room. Just trying to keep things consistent by having all the same off/on colors on all cards.

[andyblac]

as I said atm the background opacity (the circle), does not have it own variable and is hard coded, I will look into adding support for this next week.

[andyblac]

also, for temperature label you can simply use

  - type: custom:button-card
    template:
      - custom_card_andyblac_room
    name: "Salon"
    styles:
      card:
        - background: url(/local/pictures/salon.jpg) center
        - background-size: cover
    tap_action:
      action: navigate
      navigation_path: salon
    variables:
      ulm_custom_card_andyblac_room_color: blue
      ulm_custom_card_andyblac_room_use_label_icons: true
      sensor_label_1: sensor.thermostat_salon_air_temperature

the sensors_label_1, sensors_label_2, sensors_label_3 will automatically detect what the entity is, if you want to keep the icons just use ulm_custom_card_andyblac_room_use_label_icons: true

hope this helps.

[alray31]

Thank you, will try that as well!

[andyblac]

ok, added more support

-- added option to use Area info:
ulm_custom_card_andyblac_room_area_id: *area_id*

with this you no longer need to specify an name or icon as these will use what you have set in the Area, but can be overridden .

also, if you are using ulm_custom_card_andyblac_room_area_id, you can now use ulm_custom_card_andyblac_room_use_area_picture: true and this will cause the room card to use the area picture as it's background.

and as promise you can now also use ulm_custom_card_andyblac_room_icon_color_bg and ulm_custom_card_andyblac_room_icon_color_on_bg to control the icon background opacity and colour.

Example:

  # Office
  - type: custom:button-card
    view_layout:
      grid-area: room10
    template:
      - custom_card_andyblac_room
    tap_action:
      action: navigate
      navigation_path: office
    variables:
      ulm_custom_card_andyblac_room_area_id: office
      ulm_custom_card_andyblac_room_use_area_picture: true
      # ulm_custom_card_andyblac_room_color: rgb(245,90,49)
      sensor_label_1: sensor.wiser_lts_temperature_office
      sensor_label_2: sensor.wiser_lts_humidity_office
      custom_2:
        entity_id: climate.wiser_office
        ulm_custom_card_andyblac_room_sensor_show_on_state_only: true
      sensor_1:
        entity_id: binary_sensor.office_door_contact
      sensor_2:
        entity_id: cover.office_window_shade
      sensor_5:
        entity_id: switch.office_sockets_1_left
        tap_action:
          action: toggle
      sensor_6:
        entity_id: switch.office_sockets_1_right
        # ulm_custom_card_andyblac_room_sensor_color: rgba(245,90,49,0.4)
        tap_action:
          action: toggle
      entity_3:
        entity_id: light.office_dimmer
        ulm_custom_card_andyblac_room_icon_color: rgba(var(--color-theme),0.5)
        ulm_custom_card_andyblac_room_icon_color_bg: rgba(var(--color-theme),0.2)
        ulm_custom_card_andyblac_room_icon_color_on: amber
        ulm_custom_card_andyblac_room_icon_color_on_bg: rgba(var(--color-amber),0.3)

please test by downloading from here

[alray31]

Awesome, thank you so much for your dedication to this custom card !

• ulm_custom_card_andyblac_room_area_id
• ulm_custom_card_andyblac_room_icon_color_bg
• ulm_custom_card_andyblac_room_icon_color_on_bg
• ulm_custom_card_andyblac_room_use_area_picture: true

all works perfectly fine!

I noticed is that when using ''ulm_custom_card_andyblac_room_use_area_picture: true'', the background image isn't centered and the quality is inferior than when using:

    styles:
      card:
        - background: url(/local/pictures/cuisine.jpg) center
        - background-size: cover 

But still really nice to have this feature.

My guess is that it's just because of how the pictures are cropped when added to a room VS when used directly from the www folder.

When using ''ulm_custom_card_andyblac_room_use_area_picture: true'' :

When NOT using area_picture: true:

Thank you again!

[andyblac]

hmm, it must be something to do with the area handles the image, as I'm using the code you provided in your room above

edit:

looks like it gets resized to 512x512, let me see if I can adjust it url parsed to use the original.

[andyblac]

OK, please try the new beta, it should now use the original image and not the resized 512x512 version.

[alray31]

It works perfectly with the changes made in b66b295, picture quality is now perfect!

Thank you so much!

[andyblac]

great hope you like the new features, please let me know if there's anything else I can do, can't always promise that I can add it, but I'll try.

Andrew.