🌻 Lovelace UI • Minimalist

Share your Projects!
,
1151 
  custom_card_welcome_scenes:
    template:
      - ulm_custom_card_paddy_welcome_language_variables
    show_icon: false
    show_name: false
    show_label: false
    styles:
      grid:
        - grid-template-areas: '''item1'' ''item2'' ''item3'' ''item4'''
        - grid-template-columns: 1fr
        - grid-template-rows: min-content min-content
        - row-gap: 12px
      card:
        - border-radius: var(--border-radius)
        - box-shadow: var(--box-shadow)
        - padding: 12px
    custom_fields:
      item1:
        card:
          type: custom:button-card
          show_icon: true
          show_label: true
          show_name: true
          show_entity_picture: true
          entity_picture: |
            [[[ 
               if (hass.user.name == 'Javier'){      
                  return 'http://192.168.2.101:8123/api/image/serve/6f8ad131c0b0ca7ec5c8f6ae48913b5b/512x512';
               } else if (hass.user.name == 'Irma'){
                  return 'http://192.168.2.101:8123/api/image/serve/d39fe416e4ed47e269be3fbab4949ede/512x512';
               } else if (hass.user.name == 'Irmaris'){
                  return 'http://192.168.2.101:8123/api/image/serve/76c2d55c874f62b38a1bbd797d3367da/512x512';
               } else if (hass.user.name == 'Yairelis'){
                  return 'http://192.168.2.101:8123/api/image/serve/ea60a3981c25a01d39029a1cb5e91505/512x512';
               } else {
                  return 'https://www.home-assistant.io/images/home-assistant-logo.svg';
               }
             ]]]
          name: |
            [[[
              let time = states[variables.ulm_custom_card_paddy_welcome_time].state;
              let welcome = '';

              if (time > '18:00'){
                welcome = variables.ulm_custom_card_paddy_welcome_evening; 
              } else if (time > '12:00'){
                welcome = variables.ulm_custom_card_paddy_welcome_afternoon;
              } else if (time > '05:00'){
                welcome = variables.ulm_custom_card_paddy_welcome_morning;
              } else {
                welcome = variables.ulm_custom_card_paddy_welcome_hello;
              }

              return welcome + ', ' + user.name + '!';
            ]]]
          styles:
            icon:
              - color: rgba(var(--color-teal),1)
              - width: 42px
            label:
              - justify-self: start
              - align-self: start
              - font-weight: bold
              - font-size: 12px
              - filter: opacity(40%)
              - margin-left: 12px
            name:
              - align-self: start
              - justify-self: start
              - font-weight: bold
              - font-size: 20px
              - margin-left: 12px
            img_cell:
              - background-color: rgba(var(--color-teal),0.2)
              - border-radius: 50%
              - place-self: center
              - width: 42px
              - height: 42px
            grid:
              - grid-template-areas: '"i n"'
              - grid-template-columns: min-content auto
              - grid-template-rows: min-content min-content
            card:
              - box-shadow: none
      item2:
        card:
          type: custom:button-card
          template: card_title_welcome
          name: Scenes
      item3:
        card:
          type: custom:button-card
          template: card_scenes
          styles:
            card:
              - border-radius: none
              - box-shadow: none
              - padding: 12px
          variables:
            entity_1: scene.away
            entity_2: scene.work
            entity_3: scene.home
            entity_4: scene.bed_time
            entity_5: scene.night
            color_1: red
            color_2: blue
            color_3: green
            color_4: teal
            color_5: purple
      item4:
        card:
          type: custom:home-feed-card
          card_id: main_feed
          show_empty: false
          more_info_on_tap: true
          state_color: false
          compact_mode: true
          max_item_count: 3
          show_icons: true
          entities: |
            [[[
              return variables.ulm_custom_card_paddy_welcome_news_entities;
            ]]]
          card_mod: null
          style: |
            ha-card {
              border-radius: 14px;
              box-shadow: none;
              font-size: 14px;
              text-align: left;
            }
  card_title_welcome:
    tap_action:
      action: none
    show_icon: false
    show_label: true
    show_name: true
    styles:
      card:
        - background-color: rgba(0,0,0,0)
        - box-shadow: none
        - height: auto
        - width: auto
        - margin-top: '-10px'
        - margin-left: 16px
        - margin-bottom: '-15px'
      grid:
        - grid-template-areas: '''n'' ''l'''
        - grid-template-columns: 1fr
        - grid-template-rows: min-content min-content
      name:
        - justify-self: start
        - font-weight: bold
        - font-size: 20px
      label:
        - justify-self: start
        - font-weight: bold
        - font-size: 1rem
        - opacity: '0.4'
  card_scenes:
    show_icon: false
    show_name: true
    show_label: false
    styles:
      grid:
        - grid-template-areas: '''item1 item2 item3 item4 item5'''
        - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
        - grid-template-rows: min-content
        - justify-items: center
        - column-gap: auto
      card:
        - border-radius: var(--border-radius)
        - box-shadow: var(--box-shadow)
        - padding: 12px
    custom_fields:
      item1:
        card:
          type: custom:button-card
          template: card_scenes_pill
          entity: '[[[ return variables.entity_1 ]]]'
          styles:
            icon:
              - color: '[[[ return `rgba(var(--color-${variables.color_1}), 1)`;]]]'
            img_cell:
              - background-color: '[[[ return `rgba(var(--color-${variables.color_1}), 0.20)`;]]]'
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: '[[[ return variables.entity_1 ]]]'
      item2:
        card:
          type: custom:button-card
          template: card_scenes_pill
          entity: '[[[ return variables.entity_2 ]]]'
          styles:
            icon:
              - color: '[[[ return `rgba(var(--color-${variables.color_2}), 1)`;]]]'
            img_cell:
              - background-color: '[[[ return `rgba(var(--color-${variables.color_2}), 0.20)`;]]]'
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: '[[[ return variables.entity_2 ]]]'
      item3:
        card:
          type: custom:button-card
          template: card_scenes_pill
          entity: '[[[ return variables.entity_3 ]]]'
          styles:
            icon:
              - color: '[[[ return `rgba(var(--color-${variables.color_3}), 1)`;]]]'
            img_cell:
              - background-color: '[[[ return `rgba(var(--color-${variables.color_3}), 0.20)`;]]]'
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: '[[[ return variables.entity_3 ]]]'
      item4:
        card:
          type: custom:button-card
          template: card_scenes_pill
          entity: '[[[ return variables.entity_4 ]]]'
          styles:
            icon:
              - color: '[[[ return `rgba(var(--color-${variables.color_4}), 1)`;]]]'
            img_cell:
              - background-color: '[[[ return `rgba(var(--color-${variables.color_4}), 0.20)`;]]]'
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: '[[[ return variables.entity_4 ]]]'
      item5:
        card:
          type: custom:button-card
          template: card_scenes_pill
          entity: '[[[ return variables.entity_5 ]]]'
          styles:
            icon:
              - color: '[[[ return `rgba(var(--color-${variables.color_5}), 1)`;]]]'
            img_cell:
              - background-color: '[[[ return `rgba(var(--color-${variables.color_5}), 0.20)`;]]]'
          tap_action:
            action: call-service
            service: scene.turn_on
            service_data:
              entity_id: '[[[ return variables.entity_5 ]]]'
  card_scenes_pill:
    show_icon: true
    show_label: false
    show_name: true
    styles:
      grid:
        - grid-template-areas: '''i'' ''n'''
        - grid-template-columns: min-content
        - grid-template-rows: 1fr 1fr
        - row-gap: 12px
        - justify-items: center
        - column-gap: auto
      card:
        - box-shadow: none
        - padding: 5px
        - box-shadow: var(--box-shadow)
        - border-radius: 50px
        - place-self: center
        - width: 52px
        - height: 84px
      icon:
        - color: '[[[ return `rgba(var(--color-theme), 0.20)`;]]]'
        - width: 20px
      img_cell:
        - background-color: '[[[ return `rgba(var(--color-theme), 0.05)`;]]] '
        - border-radius: 50%
        - width: 42px
        - height: 42px
      name:
        - font-weight: bold
        - font-size: 9.5px
        - width: 33px
        - padding-bottom: 7px
      state:
        - color: rgba(var(--color-theme),0.9)
    color: var(--google-grey)

to use the persons images go to configuration / people and zones and select on of the people there and right click on the image to copy the link of the image and replace it with the one in the code.

Thanks @ SildeHoop for the scene card.

7 Likes
1152

Hello there. I have this prototypes of a smart door lock
But I want to change the icon for a door lock , if anybody can share the icon in svg format.

Screenshot_20220116-182131_Home Assistant
Screenshot_20220116-182131_Home Assistant1080×1498 97.3 KB

4 Likes
1153

Looks awesome, can you share please

1 Like
1154

Where do I can get the: custom: home-feed-card

1155

With some help, here is my Dashboard :

Capture d’écran 2022-01-17 à 09.56.03
Capture d’écran 2022-01-17 à 09.56.031171×577 98.9 KB

8 Likes
1156

hi there,

good morning!

I noticed that when the light is off it is showing area as undefined. so I tried the code under but is not working what am I doing wrong?

idea is when the light is on/off or unavailable it always shows the area.
in addition, I would also like to get rid off on/off, because I realised that it is clear enough from the color range of the card itself.

thanks in advance for your help. :pray:t3:

Screenshot 2022-01-17 at 10.56.23
Screenshot 2022-01-17 at 10.56.231074×366 28.9 KB 

        label: >-
          [[[
            if (entity.state !="unavailable"){
              if (entity.state =="off"){
                return variables.ulm_off + " | " + variables.ulm_custom_card_light_area;
              } else if (entity.state == "on"){
                if (entity.attributes.brightness != null){
                  var bri = Math.round(entity.attributes.brightness / 2.55);
                  return (bri ? bri : "0") + "%" + " | " + variables.ulm_card_light_slider_area;
                } else {
                  return variables.ulm_card_light_slider_area;
                }
              }
            } else {
              return variables.ulm_unavailable + " | " + variables.ulm_card_light_slider_area;
            }
          ]]]
1157

Jesus Christ, those variables are way too long, it’s getting almost unreadable.


type: custom:button-card
entity: light.kugellampe
template:
  - icon_info_bg
  - ulm_language_variables
variables:
  ulm_card_light_slider_area: Kugel
hold_action:
  action: more-info
label: |-
  [[[
    if (entity.state !="unavailable"){
      if (entity.state == "on"){
        if (entity.attributes.brightness != null){
          var bri = Math.round(entity.attributes.brightness / 2.55);
          return (bri ? bri : "0") + "%" + " | " + variables.ulm_card_light_slider_area;}
        } 
      else {return variables.ulm_card_light_slider_area;}
    }
    else { return variables.ulm_unavailable + " | " + variables.ulm_card_light_slider_area; }
  ]]]
1 Like
1158

The home feed card is in hacs.

1159

Which card do you want to share?

1161

YES
works perfectly.

my next step is to add a custom fullscreen popup to the light with color control and scenes connected to each light. I have been trying to make popup work but is not working. have you managed to do so.

only when I use light_card only then it works!

Screenshot 2022-01-17 at 13.22.04
Screenshot 2022-01-17 at 13.22.041064×1646 118 KB

1 Like
1162

I tried your code!
YES works perfectly.

1165

You can share the electricity code? :pray:

1166

Electricity card code is a 2 generic card combine in one card.

custom_card_generic_dual_entity:
    show_label: false
    show_name: false
    show_icon: false
    variables:
      ulm_custom_card_generic_dual_entity_1_color: blue
      ulm_custom_card_generic_dual_entity_2_color: blue
    styles:
      card:
        - border-radius: var(--border-radius)
        - box-shadow: var(--box-shadow)
        - padding: 12px
      grid:
        - grid-template-areas: '"item1 item2"'
        - grid-template-columns: auto
        - grid-template-rows: min-content
    custom_fields:
      item1:
        card:
          type: custom:button-card
          template: custom_card_generic
          entity: '[[[ return variables.ulm_custom_card_generic_dual_entity_1; ]]]'
          icon: mdi:power-plug
          name: Today
      item2:
        card:
          type: custom:button-card
          template: custom_card_generic
          entity: '[[[ return variables.ulm_custom_card_generic_dual_entity_2; ]]]'
          icon: mdi:flash
          name: Monthly
custom_card_generic:
    template:
      - ulm_language_variables
    triggers_update: all
    show_label: true
    variables:
      color: blue
    label: |
      [[[
        var unit = entity.attributes.unit_of_measurement != null ? " " + entity.attributes.unit_of_measurement : ""
        if (entity.state == "on") {
          return variables.ulm_on;
        } else if (entity.state == "off") {
          return variables.ulm_off;
        } else if (entity.state == "unavailable") {
          return variables.ulm_unavailable;
        } else if (entity.state == "idle") {
          return variables.ulm_idle;
        } else if (entity.state == "open") {
          return variables.ulm_open;
        } else if (entity.state == "closed") {
          return variables.ulm_closed;
        } else {
          return entity.state + unit;
        }
      ]]]
    custom_fields:
      item1: |
        [[[
          return `</ha-icon><span>Power usage</span></span>`
        ]]]
    styles:
      icon:
        - color: rgba(var(--color-yellow),1)
        - width: 25px
      label:
        - place-self: center
        - font-size: 15px
        - font-weight: bold
      name:
        - place-self: center
        - font-size: 14px
      state:
        - place-self: center
        - font-weight: bold
        - font-size: 14px
      img_cell:
        - background-color: rgba(var(--color-yellow),0.2)
        - border-radius: 50%
        - place-self: center
        - width: 42px
        - height: 42px
      grid:
        - grid-template-areas: '''i n'' ''i l'' ''i item1'''
        - grid-template-columns: auto
        - grid-template-rows: min-content min-content min-content
      card:
        - box-shadow: none
        - padding: 0px
      custom_fields:
        item1:
          - font-size: 10px
          - place-self: center
5 Likes
1167

And the code of UI?

1168

Dude your work is awesome! :scream:
Now i also have to beg for a card. The Wifi Overview (network, traffic and stuff). Would you share the template and ui code?

Thank you!

1 Like
1169

Can you please share this code? :pray:

        entities: |
          [[[
            return variables.ulm_custom_card_paddy_welcome_news_entities;
          ]]]
1170

The welcome card with news is paddy’s work and you can find it here Custom-cards list - UI-Lovelace-Minimalist

1 Like
1171

I’d love to see this too!

1172

How you made the scene welkom notify card?

1173