A different take on designing a Lovelace UI

VietNgoc · February 14, 2024, 8:11pm

I have something similar for conditional_media template, I added url for background image if youtube kids app is running.

github.com

ngocjohn/hass-config/blob/2d0b68e070d4c0060d1902fe7f570ff7785d931c/config/dashboards/templates/button_card_templates/tpl_media.yaml#L278C1-L280C23


      
          if (entity?.attributes?.app_id === 'com.google.ios.youtubekids') {
              return `url(/local/img/channels/youtubekids.png)`;
          } else {

Remcove · February 15, 2024, 12:59pm

Anyone know why this shows as NULL for me?

        date: >
          <font color='#6a7377'><b>
          {% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
          {% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
          {% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
          'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
            {{ days[now().weekday()] }}<br>
            {{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
          {% endif %}
          </b></font>

arifroni · February 16, 2024, 6:58pm

I tried your modified code. But I don’t get the PS5 icon and bottom bar. Can you point me where to look?

D34DC3N73R · February 16, 2024, 9:11pm

that looks like the small card, which doesn’t have the bottom blur. The large conditional card is the one with that feature.

Check that you have the icon set for the small card

                  - type: custom:button-card
                    entity: sensor.ps5_activity
                    name: PS5 Activity
                    template:
                      - media
                      - icon_playstation

The conditional card should also have the icon

                  - type: conditional
                    conditions:
                      - entity: select.conditional_media
                        state: PS5 Activity
                    card:
                      type: custom:button-card
                      entity: sensor.ps5_activity
                      template:
                        - conditional_media
                        - icon_playstation

hopkins2703 · February 17, 2024, 12:14am

Hi All, first time poster here and new to HA. Firstly thanks to Mattias for providing such a wonderful dashboard as well as all the files necessary to get going. I’ve been following along in this thread for a week or so now picking up various tips and nuggets of info along the way. I’ve managed to get myself to a good place, but am now stuck with CSS and grid issues. I’ve attached a screenshot of my dashboard creation along with a section of code with probably a feeble attempt to solve my issue. I would like to make all of the cards in the bottom row move up towards the top row, filling the large gap you can see in the pic. Any help would be most welcome.

arifroni · February 17, 2024, 12:08pm

I understand now. I didnt have any conditional media setup. Now I am trying to do that.

While doing that I have a problem. When I use media_player.android_tv_shield_tv_pro, I get following error, but if I use media_player.living_room_tv it seems to work but no picture (that’s ok, since there is no picture in the attributes.).

info for those media players

Any clue what could be the issue?

Edit: found the problem. My youtube_watching sensor doesn’t work. so remove that part

arifroni · February 17, 2024, 2:54pm

could you please share shield tv icon?

D34DC3N73R · February 19, 2024, 6:45pm

It’s just the nvidia logo

icon_shield_tv:
  custom_fields:
    icon: >
      <svg viewBox="0 0 50 50">
        <path d="M27.7,33.9h-0.8v3.7h0.8c1.2,0,1.9-0.5,1.9-1.9C29.6,34.5,28.8,33.9,27.7,33.9z"/>
        <path d="M36.1,22c-0.4-0.4-2.5-1.4-3-1.8c-3,2.6-6.2,4.8-10.5,4.8c-0.3,0-0.7,0-1-0.1v1.4c0.3,0,0.7,0.1,1.1,0.1
      		C26.5,26.3,33.3,24.4,36.1,22z"/>
      	<path d="M21.7,17.5c-1.7-0.2-3,1.4-3,1.4s0.7,2.6,3,3.4L21.7,17.5c1.7,0.2,2,0.9,3,2.6l2.2-1.9c0,0-1.6-2.1-4.4-2.1
      		c-0.3,0-0.6,0-0.9,0.1L21.7,17.5C21.7,17.5,21.7,17.5,21.7,17.5z"/>
      	<path d="M14.6,18.4c0,0,1.8,5.8,7.1,6.5v-1.4c-4-0.7-5.1-4.9-5.1-4.9s1.9-2.1,5.1-2.5v-1.6c0.2,0,0.3,0,0.5,0
      		c4.3-0.1,7.1,3.7,7.1,3.7s-3,4.2-6.3,4.2c-0.5,0-0.9-0.1-1.3-0.2v1.2c0.4,0.1,0.8,0.1,1.2,0.1c4.7,0,9.1-5.4,9.1-5.4
      		s-3.9-5.1-9.9-4.9c-0.2,0-0.3,0-0.5,0v1.3C16.9,14.9,14.6,18.4,14.6,18.4z"/>
      	<polygon points="37.4,36.8 39.7,36.8 38.6,33.7 	"/>
      	<path d="M49.5,11.8l-0.2-2.4c-0.5-2.7-2.1-4.9-4.2-6.6c-1.9-1.6-4.1-2.4-6.7-2.4L27.5,0.3L11,0.4c-0.5,0-0.9,0-1.4,0.1
      		C7.8,0.8,6.2,1.6,4.8,2.7C1.9,5,0.5,7.9,0.4,11.5v26.7c0.1,1.1,0.1,2,0.3,3C1.4,43.8,3,45.8,5,47.4c1.9,1.4,4.1,2.2,6.5,2.2
      		l13.7,0.1c0,0,13.3-0.1,13.4-0.2c0.7,0,1.3-0.1,1.9-0.2c2.8-0.6,5.1-2.2,6.8-4.4c1.3-1.7,2.1-3.7,2.2-5.9l0.1-6.7L49.5,11.8z
      		 M14.1,39h-1.8v-2.9c0-0.9-0.1-1.4-0.4-1.7c-0.2-0.2-0.6-0.4-1-0.4l-1.4,0v5H7.6v-6.5h3.3c1.6,0,3.3,0.3,3.3,2.9V39z M19.2,39h-2.7
      		l-2.1-6.5l2,0l1.5,5.2l1.5-5.2h1.9L19.2,39z M11.9,18.2c0,0,4.5-4.4,9.8-4.9V11h16.5v17.4H21.7v-2C14.4,25.6,11.9,18.2,11.9,18.2z
      		 M23.9,39h-1.8l0-6.5h1.8V39z M30.7,38.2C30.1,38.8,29.6,39,28,39h-3v-6.5h2.6c1.5,0,2.5,0.2,3.1,1.1c0.4,0.5,0.6,1.3,0.6,2.2
      		C31.4,36.9,31.1,37.8,30.7,38.2z M34.1,39h-1.8l0-6.5l1.8,0V39z M40.5,39l-0.4-1.2h-3L36.6,39h-1.8l2.6-6.5l2.5,0l2.6,6.5H40.5z"/>
        </svg>

djoaza · February 20, 2024, 7:46am

@D34DC3N73R Hey, I noticed that you have Nvidia Shield just like me. Do you have any way to display an image on the conditional media tab? When I watch Netflix or Disney, there is no picture. The photo below shows when I watch Netfix

D34DC3N73R · February 20, 2024, 8:31am

I don’t use netflix or disney, but you could make a local “default netflix/disney” image and use that when the app id matches.

Remcove · February 20, 2024, 7:56pm

no suggestions anyone? thanks

Anyone know why this shows as NULL for me?

        date: >
          <font color='#6a7377'><b>
          {% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
          {% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
          {% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
          'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
            {{ days[now().weekday()] }}<br>
            {{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
          {% endif %}
          </b></font>

VietNgoc · February 20, 2024, 9:55pm

Have you created sensor.date?

arifroni · February 21, 2024, 12:01pm

regarding you swipe card, how did you move those to bottom? mine stays at the top.

hopkins2703 · February 21, 2024, 9:50pm

Nothing special, the code looks like this for each swipe card. I like your temperature history inside your button cards. Could you share with me how you did that please?

hopkins2703 · February 21, 2024, 9:53pm

I got a feeling my pagination bullets were at the top once if I remember correctly, I didn’t change any of my code so I can only assume they moved there after a complete reboot and therefore a browser refresh, resource reload and initialisation of all .yamls. I’ve only been at home assistant for a week or so, so I can’t offer you some super technical answer !!

arifroni · February 22, 2024, 8:53am

ok, no problem. i tried to clear cache but didn’t work. i will keep looking what can I do.

Here is what you need to do for the temp card.

create a folder where you have your lovelace yaml file for the dashboard (mine is tablet-mobile.yaml).

add the 2nd line top of your lovelace

button_card_templates: !include_dir_merge_named button_card_templates
decluttering_templates: !include_dir_merge_named decluttering_templates

views:
  - type: custom:grid-layout

decluttering_templates/climate_card.yaml

climate_card:
  card:
    type: custom:button-card
    entity: '[[entity_display]]'
    name: '[[title]]'
    show_name: true
    custom_fields:
      graph:
        card:
          entities:
            - entity: '[[entity_temperature]]'
            - entity: '[[entity_valve]]'
              y_axis: secondary
              color: grey
          card_mod:
            style: |
              :host{
                --ha-card-border-width: 0px;
              }
    template:
      - tilt
      - climate
      - icon_temperature
      - graph_temperature

button_card_templates/climate.yaml

climate:
  show_state: false
  show_icon: true
  template:
    - base_temp
    - additional_values
  state:
    - operator: template
      value: >
        [[[ return entity.state == 'heat' && entity.attributes.target_temperature > 15]]]
      styles:
        card: [box-shadow: '0px 0px 10px 2px #FFCCCC']
    - value: 'auto'
      styles:
        card: [box-shadow: '0px 0px 10px 2px #FFCCCC']
  variables:
    heating_state: >
      [[[ return entity === undefined || entity.state; ]]]
    temp_target: >
      [[[ return entity === undefined || Math.round(entity.attributes.target_temperature) + '°C'; ]]]
    temp: >
      [[[ return entity === undefined || entity.attributes.current_temperature; ]]]

graph_temperature:  
  custom_fields:
    graph:
      card:
        type: "custom:mini-graph-card"
        line_color: "#3182b7"
        line_width: 0
        font_size: 75
        tap_action:
          action: none
        show:
          name: false
          icon: false
          state: false
          legend: false
          labels: false
        color_thresholds:
          - value: 20
            color: "#35FFA5"
          - value: 23
            color: "#35FF00"
          - value: 24
            color: "#FF9200"
          - value: 26
            color: "#CD1B00"
        lower_bound_secondary: 0
        upper_bound_secondary: 100
  styles:
    # name: [top: 57%, left: 0%, width: 100%, position: absolute]
    custom_fields:
      graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]

icon_temperature:
  custom_fields:
    icon: >
      [[[
        var temp_color ="'#9da0a2";
        if(entity.attributes.current_temperature < 18) {
          temp_color = "#0302FC";  
        } else if(entity.attributes.current_temperature >= '18' && entity.attributes.current_temperature < 22) {
          temp_color = "#63009E";  
        } else if(entity.attributes.current_temperature >= '22' && entity.attributes.current_temperature < 25) {
          temp_color = "#008000";  
        } else if(entity.attributes.current_temperature >= '25' && entity.attributes.current_temperature < 30) {
          temp_color = "#D80027";  
        } else if(entity.attributes.current_temperature >= '30') {
          temp_color = "#FE0002";  
        }               
        return `<svg viewBox="-949 951 100 125"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
        <path fill="#9da0a2" d="M-895.9,1020.1v-56.7c0-5.5-4.5-10-10-10c-5.5,0-10,4.5-10,10v56.7c-3.7,3-6,7.6-6,12.4c0,8.8,7.2,16,16,16 c8.8,0,15.9-7.2,15.9-16C-890,1027.7-892.2,1023.1-895.9,1020.1z M-905.9,1045.1c-6.9,0-12.5-5.6-12.5-12.5c0-4.4,2.3-8.4,6-10.7 v-58.4c0-3.6,2.9-6.6,6.6-6.6c3.6,0,6.6,2.9,6.6,6.6v58.4c3.6,2.3,6,6.3,6,10.7C-893.4,1039.5-899,1045.1-905.9,1045.1z"/>
        <path fill="${temp_color}" d="M-902.8,1024v-22.9c0-1.7-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1v22.9c-3.5,1.3-6,4.6-6,8.5c0,5,4.1,9.1,9.1,9.1 c5,0,9.1-4.1,9.1-9.1C-896.8,1028.6-899.3,1025.3-902.8,1024z"/>
        <rect fill="#9da0a2" x="-892.4" y="963.6" width="16.3" height="3.4"/>
        <rect fill="#9da0a2" x="-892.4" y="974.9" width="7.7" height="3.4"/>
        <rect fill="#9da0a2" x="-892.4" y="986.3" width="16.3" height="3.4"/>
        <rect fill="#9da0a2" x="-892.4" y="997.6" width="7.7" height="3.4"/>
        <rect fill="#9da0a2"v x="-892.4" y="1008.9" width="16.3" height="3.4"/>
        </svg>`;
      ]]]

now you make the card in your lovelace yaml

        - type: custom:decluttering-card
          template: climate_card
          variables:
            - title: Bedroom
            - entity_display: sensor.display_temperature_bedroom
            - entity_temperature: sensor.temperature_bedroom
            - entity_valve: sensor.bedroom_thermostat_valvetappet

The reason I used sensor.display_temperature_bedroom instead of a climate entity, I have several brands thermostat and they have different current temperature attribute name. So I created a template sensor with same manner. like:

template:
  - sensor:
      unique_id: display_temperature_bedroom
      name: Display Temperature Bedroom
      state: "{{states('climate.room_climate_bedroom')}}"
      attributes:
        current_temperature: "{{states('sensor.temperature_bedroom') | float | round(1)}}"
        current_humidity: "{{states('sensor.humidity_bedroom') | float | round(0)}}"
        target_temperature: "{{state_attr('climate.room_climate_bedroom','temperature') | float | round(1)}}"
        valvetappet: "{{states('sensor.bedroom_thermostat_valvetappet') | float | round(0)}}"

hope this helps.

arifroni · February 22, 2024, 10:30am

when i swipe on my swipe card on my tablet, it register a press action along with the swipe action. how can i avoid that? it doesnt register a press action on desktop though.

slofii · February 22, 2024, 2:20pm

How did u do the glow around your card?

arifroni · February 22, 2024, 3:15pm

these lines in climate.yaml (button_card_template folder)

VietNgoc · February 23, 2024, 10:36am

edit in your themes yaml file, set pagination position.

github.com

ngocjohn/hass-config/blob/c8ff16f81c5d136e2985b0a2a28265e063bbbb7a/config/themes/tablet.yaml#L152C1-L161C14


      
          #################################################
          #                                               #
          #               SWIPE CARD MARGIN               #
          #                                               #
          #################################################
              $swipe-card$:
                .: |
                  .swiper-pagination {
                    top: 95%;
                  }