šŸŒ» Lovelace UI ā€¢ Minimalist

Can someone explain me how I can get a second ui-minimalist theme to work?
I want a second one for my tablet dashboard in the hallway.

1 Like

This page should provide you with the basic instructions to create a second dashboard: Customizing - UI Lovelace Minimalist

Hello,
Very nice!
Can you share your code please :hugs:

ā€˜ā€™ā€™
Sorry to bother you again. but after putting the three include yaml files they all appear in top of each other. Donā€™t know that is that Iā€™m doing wrong. I have removed the body of the three include file and only left the tile of each include file. This is what I get:
image. I cant get them to display properly. Thank you for your time and help.

Hey!
try to check the grid area column if is correct

type: vertical-stack
view_layout:
  grid-area: column1

When configuring the Popup iā€™m referring to column1, 2 and 3 and the code above is mandatary or you get something similar to your error.

Based on my experience the error you got is because of layout order in the grid area

BR

Hey,

The layout of that card was customized by me, itā€™s a simple vertical layout of buttons and helpers.
For the announce message I took inspiration from this topic.

Iā€™ve tailored the configuration for my needs. Anyway is very simple :slight_smile:

BR

Go for https://github.com/thomasloven/lovelace-layout-card

Thanks mate :slight_smile:

What are other peopleā€™s tablet layout?

This is what I got, but Iā€™m not super happy with it

Hey!
Can you be so kind to share the code for this card?
image

BR

Nik

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)

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

Confirmed I have the same issue and getting the same error

It is this card :slight_smile:

1 Like

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.

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

9 Likes

Sweet man thanks, have nothing to do at work anyway :wink:

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.

1 Like

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.

1 Like

That worked :slight_smile:

1 Like

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