My Custom Cards for Minimalist UI

DanySilvaa · December 7, 2023, 11:19am

Hi,

I’m trying to using your cards but i’m having some problems to use room colors.
For example in my kitchen i have this code:

  # Kitchen
  - type: custom:button-card
    view_layout:
      grid-area: room3
    template:
      - custom_card_andyblac_room
    name: Kitchen
    icon: fas:kitchen-set
    icon: mdi:silverware-fork-knife
    tap_action:
      action: navigate
      navigation_path: kitchen
    variables:
      ulm_custom_card_andyblac_room_color: red
      ulm_custom_card_andyblac_room_color_on: true
      sensor_label_1: sensor.ble_temperature_cozinha
      sensor_label_2: sensor.ble_humidity_cozinha     
      sensor_1:
        entity_id: cover.estore_cozinha
      entity_2:
        entity_id: light.focus_channel_1
        ulm_custom_card_andyblac_room_use_light_color: true
      entity_3:
        entity_id: light.focus_channel_2
        ulm_custom_card_andyblac_room_use_light_color: true

Can you please help to understand what i’m doing wrong?

andyblac · December 7, 2023, 11:23am

have you set your Theme to minimalist-desktop or minimalist-mobile ?

DanySilvaa · December 7, 2023, 11:24am

Thank you for help, i set minimalist-desktop.

andyblac · December 7, 2023, 11:24am

working now ?

DanySilvaa · December 7, 2023, 11:25am

Now i tried to minimalist-mobile but still not working…

andyblac · December 7, 2023, 11:26am

hmm, can you view the java console, do you see any errors ?

andyblac · December 7, 2023, 11:29am

you also have ulm_custom_card_andyblac_room_color_on: true, but you have not supplied an entity, try removing this line if not needed.

DanySilvaa · December 7, 2023, 11:35am

Ok, i tried to remove it too but still not working

DanySilvaa · December 11, 2023, 9:28am

I would like to say a big thank you @andyblac for this help and support!
All issues are now corrected.

andyblac · December 11, 2023, 9:41am

good to hear it.

radekD · December 12, 2023, 1:35pm

Hello,
Small question about color.
When I set variable ulm_custom_card_andyblac_room_sensor_color_on: red, the icon isnt clearly red but lightly red

and when I try to definy colour in rgb style ulm_custom_card_andyblac_room_sensor_color_on: rgb(255, 255, 0) then the icon color is white.

Also tha colour of card isn same as colour of icon (card is little lighter)

  - type: custom:button-card
    view_layout:
      grid-area: room108
    template:
      - custom_card_andyblac_room
    icon: mdi:bed-empty
    tap_action:
      action: navigate
      navigation_path: loznice
    variables:
      ulm_custom_card_andyblac_room_color: blue
      sensor_1:
        entity_id: binary_sensor.mg_108_loznice
        icon: mdi:window-open-variant
        ulm_custom_card_andyblac_room_sensor_color_on: red
      sensor_2:
        entity_id: binary_sensor.pir_108_loznice
        icon: mdi:motion-sensor
        ulm_custom_card_andyblac_room_sensor_color_on: red
      sensor_3:
        entity_id: media_player.108_loznice
        icon: mdi:play-pause
        ulm_custom_card_andyblac_room_sensor_color_on: red
      sensor_4:
        entity_id: cover.zaluzie_jih
        icon: mdi:window-shutter
        ulm_custom_card_andyblac_room_sensor_color: red
        ulm_custom_card_andyblac_room_sensor_color_on: blue

Whats wrong?
Theme set in HA is minimalistic-desktop.
Thanks for help!

andyblac · December 12, 2023, 2:22pm

hi,

the red colour is from your theme chosen, and atm the card does not support a custom colour like you have tried to define. Make a feature request in my git, and I’ll see if it is possible to do.

Themes are located in /homeassistant/themes, the easiest ways to change, is to duplicate it and make a new theme, don’t just edit the theme as it will be overriden on Minimalist UI update.

here is an example of how to do it, I created a theme called minimalist-andy HA_config_files/themes/minimalist-andy/minimalist-andy.yaml at f15df9a4912e41760f7f766ae32afbbde3e4f921 · andyblac/HA_config_files · GitHub

thats by design, if you mean the room icon is lighter than the off state, but darker than the on state, it so you can clearly see the state of the entities. Remember the room icon can also have a state.

andyblac · December 13, 2023, 11:50am

i’m in the process of adding this suoport to all my cards (beta should be in dev branch soon)

  - type: custom:button-card
    view_layout:
      grid-area: room10
    template:
      - custom_card_andyblac_room
    name: Office
    icon: mdi:desk
    tap_action:
      action: navigate
      navigation_path: office
    variables:
      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
      climate:
        entity_id: climate.wiser_office
      sensor_1:
        entity_id: binary_sensor.office_door_contact
      sensor_2:
        entity_id: cover.office_window_shade
      sensor_5:
        entity_id: switch.office_socket_1_left
        tap_action:
          action: toggle
      sensor_6:
        entity_id: switch.office_socket_1_right
        tap_action:
          action: toggle
      entity_3:
        entity_id: light.office_dimmer
        ulm_custom_card_andyblac_room_icon_color_on: amber

andyblac · December 13, 2023, 3:42pm

this is now supported in the latest Dev branch, @radekD please test it report back if it works for you, the alpha channel (transparency) is hardcoded, it you want rgba to be supported i can add that too, but it is more work.

radekD · December 13, 2023, 7:53pm

Hello.
Thanks for this modification. Set card color by code
ulm_custom_card_andyblac_room_color: rgb(116,216,255)
works perfect:

But is a problem with light icon - off state = dark grey (ok), on state = light grey (not ok). On state of light should be yellow, not light grey.

And one qustion about cover. Why the red color of cover is different from red color of TV (sensors).

  - type: custom:button-card
    template:
      - custom_card_andyblac_room
    name: Obývák
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: obyvak
    variables:
      ulm_custom_card_andyblac_room_color: blue
...
      sensor_5:
        entity_id: cover.zaluzie_vychod_zahrada
        icon: mdi:window-shutter
        ulm_custom_card_andyblac_room_sensor_color: red
        ulm_custom_card_andyblac_room_sensor_color_on: lightblue
      sensor_6:
        entity_id: media_player.televize_v_obyvaku
        icon: mdi:television
        ulm_custom_card_andyblac_room_sensor_color_on: red

andyblac · December 13, 2023, 8:54pm

the light grey is from your theme, if you have not set a on colour or using ulm_custom_card_andyblac_room_use_light_color: true can you tell me what have you got set for on colour ? for example:

      entity_3:
        entity_id: light.office_dimmer
        ulm_custom_card_andyblac_room_icon_color_on: amber

looks ok here.

can you post the full code for that room.

EDIT:
on a second look, it looks like your covers are closed ie in off state, and therfore it darker, TV is in on state therefore brighter.

as I said above if you want to also control the alpha channel (brightness) , i’ll need to add support for rgba ie rgba(255,0,0,100)

radekD · December 13, 2023, 9:24pm

Light color - my fault. I used ulm_card_room_use_light_color: true instead of ulm_custom_card_andyblac_room_icon_color_on: amber. Now it works perfect!

Cover icon color - You are right that TV is On state and cover is Closed state. Now I understand that color difference. So each icons with on/open state is always lighter and each icon with off/closed state is alway darker - right? Its hardcoded (without possibility of change) or I can set the brightness of on/open state?
Overall it will be perfect, if you add support for rgba color. Primary I would like to use red color for all on states and closed covers and darker color (set by card color) for all icons with off states and open cover.

andyblac · December 13, 2023, 9:32pm

correct

correct, it’s hard coded, I could add rgba support, but this will not work with theme colour names, you would have to use rgba(255,0,0,100) for example.

radekD · December 14, 2023, 7:32am

Its ok, that theme colour names not works, when there will be rgba possibility.

andyblac · December 14, 2023, 9:56am

ok, i’ll try to add support today, for sensors.