🌻 Lovelace UI • Minimalist

[Jarne_Roussard]

I like your whole dashboard how it works & certainly the shared of popup shared I would like to have the code of & also the clock card I would like the code & of the whole dashboard is also allowed?

[Gilganik (Nik)]

Hi,

I’m still ending come code cleaning (it’s full of drafts etc) but i can share something

Clock Card (The input_boolean.menu_tablet is need to switch the 5 main icons on the Top), you can comment it:

- type: custom:button-card #Time
  entity: sensor.time
  layout: vertical
  show_icon: false
  show_name: false
  show_state: true
  show_label: true
  label: "[[[ return states['sensor.pretty_date'].state; ]]]"
  tap_action:
    action: call-service
    service: input_boolean.toggle
    service_data:
      entity_id: input_boolean.menu_tablet
  styles:
    card:
      - background-color: transparent
      - height: 100px
      - box-shadow: none
    state:
      # - padding-top: 10%
      - font-size: 290%
      - font-weight: bold
      - justify-self: center
    label:
      - justify-self: center
      - font-size: 110%

this is the template code for the Label sensor:

- platform: template
  sensors:
    pretty_date:
      friendly_name: Data di oggi
      value_template: >-
        {% set today = states("sensor.date") %}
        {% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %}
        {% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %}
        {% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
        {% set day = as_timestamp(today) | timestamp_custom('%d') %}
        {% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
        {% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
        {{ arr_week_days[week_day] }}, {{ day }} {{ arr_months[month-1] }} {{ year }}

This is the code for the FirstFloor room card:

type: 'custom:button-card'
view_layout:
  grid-area: firstfloor
template:
  - card_room
  - blue_no_state
name: Primo Piano
entity: sensor.1p_temperature_round
icon: mdi:sofa
label: |
      [[[
        var temp = states['sensor.1p_temperature_round'].state;
        var humi = states['sensor.1p_humidity'].state;
        return '🌡️' + " " + temp + '°C' + " " + '💧' + " " + humi + '%';
      ]]]
tap_action:
  !include popup/first_popup.yaml  
variables:
  label_use_temperature: false
  label_use_brightness: false
  entity_1:
    entity_id: light.luci_1p
    templates:
      - yellow_on
    tap_action:
      action: none
  entity_2:
    entity_id: sensor.aqara_tvoc_soggiorno_level
    icon: mdi:air-filter
    templates:
      - green_no_state
    tap_action:
      action: more-info
  entity_3:
    entity_id: climate.1p
    templates:
      - red_on
    tap_action:
      action: more-info
  entity_4:
    entity_id: climate.1p_air_conditioner
    templates:
      - blue_on_cool
    tap_action:
      action: more-info
  entity_4_icon: mdi:air-conditioner

Popup for first floor:

action: fire-dom-event
browser_mod:
  command: popup
  title: 1P Recap
  style:
    !include /config/dashboards/template/popup_layout_template.yaml
  card:
    type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      !include /config/dashboards/template/popup_layout_setup.yaml
    cards:
      - !include /config/dashboards/1p/column1.yaml
      - !include /config/dashboards/1p/column2.yaml
      - !include /config/dashboards/1p/column3.yaml 

Columns are just a vertical-stack with the entities you need. This is Colum2 for es

type: vertical-stack
view_layout:
  grid-area: column2
cards:
  - type: 'custom:button-card'
    template: card_title
    name: "Luci"
  
  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        template: card_light
        entity: light.faretti_cucina
        variables:
          ulm_card_light_enable_slider: true
          ulm_card_light_enable_collapse: true
          ulm_card_light_enable_color: true
          ulm_card_light_name: Faretti
        hold_action:
          action: more-info
          entity: group.faretti_cucina
        
      - type: "custom:button-card"
        template: card_light
        entity: light.shelly_cucina
        variables:
          ulm_card_light_enable_color: true
          ulm_card_light_name: Cucina

  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        template: card_light
        entity: light.ikea_fungo
        variables:
          ulm_card_light_enable_slider: true
          ulm_card_light_enable_collapse: true
          ulm_card_light_enable_color: true
          ulm_card_light_name: Fungo
        hold_action:
          action: more-info

      - type: "custom:button-card"
        template: card_light
        entity: light.shelly_soggiorno
        variables:
          ulm_card_light_enable_color: true
          ulm_card_light_name: Divano

  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        template: card_light
        entity: light.shelly_bagno_pt
        variables:
          ulm_card_light_enable_color: true
          ulm_card_light_name: Bagno

      - type: "custom:button-card"
        template: card_light
        entity: light.shelly_lavanderia
        variables:
          ulm_card_light_enable_color: true
          ulm_card_light_name: Lavanderia

  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        template: card_light
        entity: light.shelly_scala
        variables:
          ulm_card_light_enable_color: true
          ulm_card_light_name: Scala

      - type: "custom:button-card"
        template: card_light
        entity: light.shelly_antebagno
        variables:
          ulm_card_light_enable_color: true
          ulm_card_light_name: Antebagno

  - type: 'custom:button-card'
    template: card_graph
    variables:
      ulm_card_graph_color: "var(--google-green)"
      ulm_card_graph_name: Tvoc
      ulm_card_graph_entity: sensor.aqara_tvoc_soggiorno_level
      ulm_card_graph_type: fill
      ulm_card_graph_hours: 48

BR

Nik

[Jarne_Roussard]

thanks man i will check it out later

[Jarne_Roussard]

hello what does the input boolean menu tablet mean can you also share it solid?

[Gilganik (Nik)]

As I’ve written above, You can comment that rows, it’s used to switch a state of a card

BR

Nik

[liminal (Shane)]

I cannot find it now

Maybe this

Simple Clock Card

Hmm it’s still showing as a 24 hour clock EDIT: clock-card… da@ha:/home/homeassistant/.homeassistant$ cat www/clock-card.js class ClockCard extends Polymer.Element { static get template() { return Polymer.html` <style> :host { cursor: pointer; } .content { padding: 24px 16px 16px; } .name { margin-left: 16px; font-size: 16px; color: var(--secondary-text-color); …

[tj335]

Hi,
I’ve tried searching this topic but couldn’t find what I’m looking for. I have several ceiling fans controlled by a GE Fan Switch which has Off, Low, Medium and High settings. Does anyone know of fan card with 3 speed settings?

Thanks

[benm7 (Ben M)]

HELP! Have quickly created a basic alarm card with buttons to change the mode, but it isn’t showing on two rows as I expect it to. I’m sure its a basic issue but can’t for the life of me work it out??!!?

Appreciate if someone can take a quick look and let me know what might be going on!

Here is what it looks like:

It should be a basic two line card with the standard “icon_info” element on the top, and the buttons below within a larger grey button. But the icon_info seems to end up in the second column?!?

Template:

---
custom_alarm:
  styles:
    card:
      - border-radius: 'var(--border-radius)'
      - box-shadow: 'var(--box-shadow)'
#      - padding: 12px
      - 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"
            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_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: 12px
        - 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)

Button code:

  - type: 'custom:button-card'
    template:
      - "custom_alarm"
    variables:
      ulm_custom_alarm_grid_state: alarm_control_panel.homebase

[marooned1978]

Hi,
Someone is experimenting any issue with Nginx and Minimalist?
I started to used Nginx add-on and sometimes all the cards of the dashboard display “Custom elements doesn’t exists…” error.
I missed to add any kind of configuration?
Thanks

[Andras]

I have both, no issue with their combination. Everything works properly. I used the official instruction for the setup of NGINX.

[Proche72 (Jiri Pragr)]

Hey guys, I am trying to add custom_card_yagrasdemonde_lights_count´but I got this error from my config: * Invalid config for [template]: invalid template (TemplateSyntaxError: expected token ‘,’, got ‘states’) for dictionary value @ data[‘sensor’][0][‘state’]. Got "{% set lights = [\n states.light.living_room_light,\n states.light.bedroom_light,\n states.light.bathroom_lights,\n states.light.backyard_lights,\n states.light.cupboard_lights\n states.light.dining_room_light,\n states.light.entry_lights,\n states.light.hall_lights,\n states.light.entry_lights,\n states.light.light.kitchen_light,\n states.light.lamp,\n states.light.laundry_room_light,\n states.light.living_room_light,\n states.light.pantry_light,\n states.light… (See /config/configuration.yaml, line 136).
my code is:

  - sensor:
      - name: "lights on"
        unique_id: lights_on
        icon: mdi:lightbulb-on-outline
        state: >
          {% set lights = [
            states.light.living_room_light,
            states.light.bedroom_light,
            states.light.bathroom_lights,
            states.light.backyard_lights,
            states.light.cupboard_lights
            states.light.dining_room_light,
            states.light.entry_lights,
            states.light.hall_lights,
            states.light.entry_lights,
            states.light.light.kitchen_light,
            states.light.lamp,
            states.light.laundry_room_light,
            states.light.living_room_light,
            states.light.pantry_light,
            states.light.toilet_light,
           ] %}
          {{ lights | selectattr('state','eq','on') | list | count }}

I am not able to see a mistake there, do you?

[Andras]

Remove the “states.” from the name of entities.

[Proche72 (Jiri Pragr)]

didn’t help much, now the error is:

• Invalid config for [template]: invalid template (TemplateSyntaxError: expected token ‘,’, got ‘light’) for dictionary value @ data[‘sensor’][0][‘state’]. Got “{% set lights = [\n light.living_room_light,\n light.bedroom_light,\n light.bathroom_lights,\n light.backyard_lights,\n light.cupboard_lights\n light.dining_room_light,\n light.entry_lights,\n light.hall_lights,\n light.entry_lights,\n light.light.kitchen_light,\n light.lamp,\n light.laundry_room_light,\n light.living_room_light,\n light.pantry_light,\n light.toilet_light,\n ] %}\n{{ lights | selectattr(‘state’,‘eq’,‘on’) | list | count }}\n”. (See /config/configuration.yaml, line 136).

the code for the sensor is from github so I reckon it should be working with the states. also

[Proche72 (Jiri Pragr)]

strangely enough it doesn’t work only for lights and covers. For doors it works perfectly

[Stephan_Burgwal (Stephan)]

Try removing the last comma after the toilet light

[tilaksidduram (tilak)]

Instead of state: > change it to value_template:>
Example below

- platform: template
  sensors:
    lights_on_livingroom:
      unit_of_measurement: "on"
      value_template: >
        {% set lights = [
          states.switch.sonoff_100136948d_1,
          states.switch.sonoff_100136948d_2,
          states.switch.sonoff_100136948d_3,
          ] %}
        {{ lights | selectattr('state','eq','on') | list | count }}

[Andras]

Or you can try this one, this doesn’t require to list your lights (dynamic):

          {% set lights = states.light
                 | selectattr('state', 'eq', 'on')
                 | rejectattr('domain', 'eq', 'group')
                 | map(attribute='state') %}
          {{ lights | list | count }}

[Proche72 (Jiri Pragr)]

this work perfectly! I did not try the other two ways as I want it dynamic. Thanks Andras

[matti1207]

hi benm7,

nice work

the header looks nice, can u share some codes of it?

thx

[DrHouseIOT]

Nice layout! Would you please share the code of this two include yaml pages?

/config/dashboards/template/popup_layout_template.yaml
/config/dashboards/template/popup_layout_setup.yaml

Thank you for all your hard work.