Hard Disk state

Hi there.

Im looking for some assistance into giving these icons some color.

What i would like is green when ok and red when not. I already know what icons i would like to use i just need a pointer in setting up the states if possible??

Thanks.

image

image

Can you show your card_generic template?

Please don’t post a picture of text. Paste the text and format it correctly.

This is the code i have in so far

    cards:
          - type: grid
            columns: 2
            square: false
            cards:
              - type: "custom:button-card"
                template: card_generic
                entity: binary_sensor.unvr_disk_0_health
              - type: "custom:button-card"
                template: card_generic
                entity: binary_sensor.unvr_disk_1_health
              - type: "custom:button-card"
                template: card_generic
                entity: binary_sensor.unvr_disk_2_health
              - type: "custom:button-card"
                template: card_generic
                entity: binary_sensor.unvr_disk_3_health

Good job on the formatting, but what I asked for was the template this is pointing to:

its just a generic binary sensor card i pulled from the ui minimalist card templates

https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_binary_sensor/

it probably isnt the right card but i did a quick google and it didnt appear anyone else had asked the question

Without the template you are using I can’t help you other than to say you need to add this to the template:

button_card_templates:
  card_generic:
    state:
      - value: 'off'
        styles:
          icon:
            - color: green
      - value: 'on'
        styles:
          icon:
            - color: red

You could add this to every button in the card but it would be a lot less efficient. e.g.

    cards:
          - type: grid
            columns: 2
            square: false
            cards:
              - type: "custom:button-card"
                template: card_generic
                state:
                  - value: 'off'
                    styles:
                      icon:
                        - color: green
                  - value: 'on'
                    styles:
                      icon:
                        - color: red
                entity: binary_sensor.unvr_disk_0_health
              - type: "custom:button-card"
                template: card_generic
                state:
                  - value: 'off'
                    styles:
                      icon:
                        - color: green
                  - value: 'on'
                    styles:
                      icon:
                        - color: red
                entity: binary_sensor.unvr_disk_1_health
              - type: "custom:button-card"
                template: card_generic
                state:
                  - value: 'off'
                    styles:
                      icon:
                        - color: green
                  - value: 'on'
                    styles:
                      icon:
                        - color: red
                entity: binary_sensor.unvr_disk_2_health
              - type: "custom:button-card"
                template: card_generic
                state:
                  - value: 'off'
                    styles:
                      icon:
                        - color: green
                  - value: 'on'
                    styles:
                      icon:
                        - color: red
                entity: binary_sensor.unvr_disk_3_health

where do i find the template?

### Card Generic ###
card_generic:
  template:
    - "icon_more_info_new"
    - "ulm_actions_card"
    - "ulm_translation_engine"
  variables:
    ulm_card_generic_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_card_generic_name: "[[[ return entity.attributes.friendly_name ]]]"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
              icon: "[[[ return variables.ulm_card_generic_icon; ]]]"
              styles:
                icon:
                  - color: "rgba(var(--color-theme),0.9)"
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
              name: "[[[ return variables.ulm_translation_state_unit ]]]"
              label: "[[[ return variables.ulm_card_generic_name ]]]"

Usually at the top of the raw config, but I’m not familiar with the UI-Lovelace-Minimalist theme, it looks like it uses include files for this.

I’d just add it to the buttons you want to be red/green in the card or you will stuff up the whole look of the theme.

Or duplicate and rename the template.

i attempted the changes you suggested above, it made no obvious signs of change in the state display

      - type: grid
        columns: 1
        square: false
        cards:
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                template: card_generic
                entity: sensor.unvr_storage_utilization
          - type: "custom:gap-card"
            height: 1px
          - type: grid
            columns: 2
            square: false
            cards:
              - type: "custom:button-card"
                template: card_generic
                entity: binary_sensor.unvr_disk_0_health
                state:
                  - value: "off"
                    style:
                      icon:
                        - color: green
                  - value: "on"
                    style:
                      icon:
                        - color: red
              - type: "custom:button-card"
                template: card_generic
                entity: binary_sensor.unvr_disk_1_health
              - type: "custom:button-card"
                template: card_generic
                entity: binary_sensor.unvr_disk_2_health
              - type: "custom:button-card"
                template: card_generic
                entity: binary_sensor.unvr_disk_3_health

Yeah, I can confirm that this does not work, even when correcting style: to styles:.

I thought that options supplied in the card overrode those in the template. Looks like this is not the case.

So you would have to edit the template.

EDIT: there may actually be an issue. I could not get either of these override options to work:

But using the red / green style in one template did work. So it’s not an issue with the config we are attempting to use (after correcting the use of “style”).

EDIT2: yeah it’s new behaviour. You have to merge by using id:

Screenshot 2022-07-06 at 16-00-56 custom-cards button-card ❇️ Lovelace button-card for home assistant

when you say ID?? is that the entity id??

No, not the entity id, this id that you must supply if you want to merge or overwrite options:

57a1fda7a58f73fb2866645902b7e1154c74a4bc

So again you would have to edit the original button card template to add this.

old post but here is my stuff: still need to finetune it do

1 Like