🌻 Lovelace UI • Minimalist

Neekster · May 31, 2022, 2:56pm

I added arming and vacation states to the header text. Previously, it would just display ‘disarmed’ while arming or on vacation mode. Updated template code is below.

---
custom_alarm:
  styles:
    card:
      - border-radius: 'var(--border-radius)'
      - box-shadow: 'var(--box-shadow)'
      - padding: 12px
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content"
      - row-gap: 12px
  custom_fields:
    item1:
      card:
        type: custom:button-card
        template:
          - "icon_info"
        entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
        tap_action:
          action: more-info
        label: '[[[ return states[variables.ulm_custom_alarm_grid_state].state ]]]'
        styles:
          card:
            - background-color: 'rgba(0,0,0,0)'
        state:
          - value: 'disarmed'
            label: 'Disarmed'
            icon: "mdi:shield-off"
            styles:
              icon:
                - color: 'rgba(var(--color-green), 1)'
              img_cell:
                - background-color: 'rgba(var(--color-green-bg), 1.0)'
          - value: 'armed_away'
            label: 'Armed'
            icon: "mdi:shield-lock"
            styles:
              icon:
                - color: 'rgba(var(--color-red), 1)'
              img_cell:
                - background-color: 'rgba(var(--color-red-bg), 1.0)'
          - value: 'armed_vacation'
            label: 'Vacation'
            icon: "mdi:shield-airplane"
            styles:
              icon:
                - color: 'rgba(var(--color-purple), 1)'
              img_cell:
                - background-color: 'rgba(var(--color-purple-bg), 1.0)'
          - value: 'arming'
            label: 'Arming'
            icon: "mdi:shield"
            styles:
              icon:
                - color: 'rgba(var(--color-yellow), 1)'
              img_cell:
                - background-color: 'rgba(var(--color-yellow-bg), 1.0)'
          - value: 'armed_home'
            label: 'Home'
            icon: "mdi:shield-home"
            styles:
              icon:
                - color: 'rgba(var(--color-green), 1)'
              img_cell:
                - background-color: 'rgba(var(--color-green-bg), 1.0)'
    item2:
      card:
        type: custom:button-card
        template: custom_alarm_state_grid_item_list
        custom_fields:
          disarm:
            card:
              type: custom:button-card
              icon: mdi:shield-off
              template: custom_alarm_state_grid_job_state_item_list_items
              entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
              state:
                - value: 'disarmed'
                  icon: "mdi:shield-off"
                  styles:
                    icon:
                      - color: 'var(--google-green)'
                    card:
                      - background-color: 'rgba(0,0,0,0)'
                      - border-radius: 'var(--border-radius-bar)'
              tap_action:
                action: call-service
                service: alarm_control_panel.alarm_disarm
                service_data:
                  entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
                haptic: success

          away:
            card:
              type: custom:button-card
              icon: mdi:shield-lock
              template: custom_alarm_state_grid_job_state_item_list_items
              entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
              state:
                - value: 'armed_away'
                  icon: "mdi:shield-lock"
                  styles:
                    icon:
                      - color: 'var(--google-red)'
                    card:
                      - background-color: 'rgba(0,0,0,0)'
                      - border-radius: '14px'
              tap_action:
                action: call-service
                service: alarm_control_panel.alarm_arm_away
                service_data:
                  entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
                haptic: success
                      
          home:
            card:
              type: custom:button-card
              icon: mdi:shield-home
              template: custom_alarm_state_grid_job_state_item_list_items
              entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
              state:
                - value: 'armed_home'
                  icon: "mdi:shield-home"
                  styles:
                    icon:
                      - color: 'var(--google-green)'
                    card:
                      - background-color: 'rgba(0,0,0,0)'
                      - border-radius: '14px'
              tap_action:
                action: call-service
                service: alarm_control_panel.alarm_arm_home
                service_data:
                  entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
                haptic: success
                
custom_alarm_state_grid_item_list:
    styles:
      card:
        - box-shadow: none
        - padding: 0px
        - border-radius: 'var(--border-radius-bar)'
        - pointer-events: none
        - background-color: 'rgba(var(--color-theme), 0.05)'
        - justify-items: center
      grid:
        - grid-template-areas: "'disarm away home'"
        - grid-template-columns: "1fr 1fr 1fr"
        - grid-template-rows: "min-content"
        - column-gap: 9px
        - justify-items: center
      img_cell:
        - justify-items: center

custom_alarm_state_grid_job_state_item_list_items:
    show_icon: true
    show_name: false
    size: 24px
    tap_action:
      action: none
    styles:
      card:
        - box-shadow: none
        - padding: 2px
        - border-radius: 'var(--border-radius)'
        - place-self: center
        - height: 40px
        - width: 80px
        - pointer-events: auto
        - background-color: transparent
      grid:
        - grid-template-areas: '"i"'
      icon:
        - color: var(--google-grey)

tj335 · May 31, 2022, 4:39pm

UPDATE: I stepped away from it and came back, then realized that the issue was in my use of the variables within the custom card. Issue is resolved.

I’m trying to put together a card for waste collection but can’t get it working. The card isn’t displaying at all. In Chrome Developer tools, here’s the error that I see:

ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'attributes') in 'var label;
  const dateToday = new Date();
  var dateCardboard = new Date();
  if (variables.entit...'
    at Je.eval (eval at _evalTemplate (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9295), <anonymous>:8:44)
    at Je._evalTemplate (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9379)
    at Je._getTemplateOrValue (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9964)
    at :8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9857
    at Array.forEach (<anonymous>)
    at Je._getTemplateOrValue (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9834)
    at Je._objectEvalTemplate (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9673)
    at :8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:433:360
    at Array.forEach (<anonymous>)
    at Je._buildCustomFields (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:433:292)

Here’s what I have in my dashboard:

          - type: custom:button-card
            template: custom_card_tj335_garbage_schedule
            variables:
              entity_cardboard:
                entity: "sensor.cardboard_collection"
                icon: "mdi:trash-can-outline"
                icon_color: "blue"
                name: "Cardboard"
                bg_color: "blue"

Here’s my custom card:

---
custom_card_tj335_garbage_schedule:
  show_icon: false
  show_name: false
  show_label: false
  styles:
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "0px"
    grid:
      - grid-template-areas: "'item1'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_info"
          - "custom_card_tj335_garbage_item"
        entity: "[[[ return variables.entity_cardboard.entity ]]]"
        icon: "[[[ return variables.entity_cardboard.icon ]]]"
        name: "[[[ return variables.entity_cardboard.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_cardboard.icon_color ]]]"
          color_bg: "[[[ return variables.entity_cardboard.bg_color ]]]"
        label: >
          [[[
            var label;
            const dateToday = new Date();
            var dateCardboard = new Date();
            if (variables.entity_cardboard) {
              if (states[variables.entity_cardboard].attributes.days == '0') {
                label = 'Today';
              } else if (states[variables.entity_cardboard].attributes.days == '1') {
                label = 'Tomorrow';
              } else {
                label = states[variables.entity_cardboard].attributes.days + ' days';
              }
              dateCardboard.setDate(dateToday.getDate() + Number(states[variables.entity_cardboard].attributes.days));
              return label + ' - ' + dateCardboard.toLocaleDateString('en-US', { weekday: 'long' }) + ', ' + dateCardboard.toLocaleDateString('en-US', { month: 'short' }) + ' ' + dateCardboard.toLocaleDateString('en-US', { day: '2-digit' });
            } else {
              return 'Not Available';
            }
          ]]]
        styles:
          card:
            - padding: "12px"
        
custom_card_tj335_garbage_item:
  styles:
    icon:
      - color: >
          [[[
            var color = [variables.color_icon];
            if(color == "yellow"){
              var color = "rgba(var(--color-yellow),1)";
            } else if(color == "blue"){
              var color = "rgba(var(--color-blue),1)";
            } else if(color == "purple"){
              var color = "rgba(var(--color-purple),1)";
            } else if(color == "green"){
              var color = "rgba(var(--color-green),1)";
            } else if(color == "red"){
              var color = "rgba(var(--color-red),1)";
            } else {
              var color = "rgba(var(--color-theme),0.20)";
            }
            return color;
          ]]]
    label:
      - font-weight: "bold"
      - font-size: "1.0em"
  state:
    - styles:
      operator: template

benm7 · May 31, 2022, 11:53pm

Confirmed I have the same issue and getting the same error

benm7 · May 31, 2022, 11:56pm

It is this card

Neekster · May 31, 2022, 11:57pm

Works fine for me, but I can’t seem to find the updated template code that is referenced in the documentation. Just the original one.

benm7 · June 1, 2022, 12:09am

Have uploaded all my files here:

I haven’t uploaded custom cards available from the Minimalist repository, only cards I have made myself. Have also added the theme file I use. I’m sure there is stuff missing but hopefully gives everyone a good idea of how its set up. Still much to clean up though!

Everything hangs off ui-lovelace.yaml so start there

Stephan_Burgwal · June 1, 2022, 5:28am

Sweet man thanks, have nothing to do at work anyway

corvy · June 1, 2022, 11:47am

You guys know if there is a way to use different color thresholds for the graph-card?

        - type: 'custom:button-card'
          template: card_graph
          variables:
            ulm_card_graph_color: "var(--google-blue)"
            ulm_card_graph_name: Temperature
            ulm_card_graph_entity: sensor.temperature
            ulm_card_graph_type: fill
            ulm_card_graph_hours: 24
            color_thresholds:
              - value: 0
                color: "#ff0000"
              - value: 12
                color: "#ffff00"
              - value: 18
                color: "#00ff00"
              - value: 25
                color: "#0000ff"

Just so you know… the above does not work. It s just my wish that it would work.

Stephan_Burgwal · June 1, 2022, 12:43pm

I think the original card_graph does indeed not support different colors, but perhaps custom_card_damix48_power_details can help you out? You may need to edit the template code a bit to your liking though.

corvy · June 1, 2022, 4:17pm

That worked

Benjaminh86 · June 2, 2022, 7:48am

Hello,
I love your dashboard. I’m trying to set it up for me.
on the other hand, what is “lovelace/custom_header/custom_header2.yaml” in ui-lovelace.yaml?
Thanks

benm7 · June 2, 2022, 9:30am

I use an old custom header integration/component but for some reason it stuffs up if I try to remove it, so have just kept on using it.

I’d delete/ignore that line, can’t see anyone else needing to use it

Benjaminh86 · June 2, 2022, 9:34am

Okay.
Another question: when I apply your theme, I don’t have a sidebar with tabs; I can’t navigate…
an idea?

benm7 · June 2, 2022, 9:47am

I may not have all the card mod code from the other minimalist themes, which could be causing the issue?!?! Let me see if I can make a new theme file for you that might work. Did you want the top bar at the bottom or the menu at the top?

Benjaminh86 · June 2, 2022, 9:53am

if it is possible with the top bar at the bottom

benm7 · June 2, 2022, 10:13am

Which minimalist theme specifically did you want to use? For some reason when I remove custom header I can never get the bar at the bottom, so best you tell me specifically which theme you want modified to include my colours, etc

Benjaminh86 · June 2, 2022, 10:18am

I use minimalist-desktop theme

benm7 · June 2, 2022, 10:26am

Try this one as a starter and see if it works “minimalist-shadow-2”

I think perhaps because mine is based on mobile you might need to modify it. Are you using desktop?

benm7 · June 2, 2022, 10:38am

Try this for desktop:

github.com

benmac7/Home-Assistant/blob/1dc89ac74e813dd0858858d03635128cbf32a73d/themes/minimalist-desktop-2.yaml

---
minimalist-desktop:
  # Journal
  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  state-icon-color: "rgb(var(--color-theme))"
  border-radius: "12px"
  border-radius-bar: "8px"
  ha-card-border-radius: "var(--border-radius)"
  error-color: "var(--google-red)"
  warning-color: "var(--google-yellow)"
  success-color: "var(--google-green)"

This file has been truncated. show original

Benjaminh86 · June 2, 2022, 11:55am

Thanks a lot!
It’s exactly that