A different take on designing a Lovelace UI

djoaza · June 23, 2023, 7:46am

Very strange because the binary sensor returns the state on or off. So if there is, the card should light up.

RomiSinghio · June 24, 2023, 10:30am

Getting this error but have installed mushroom ui, anyone know how I can fix this?

larryo108 · June 24, 2023, 7:05pm

I am using popups on my dashboard. I am trying to figure how to do a media query and return two different sizes. On my mobile, I want it to be fullscreen. On any other device, I want it to be normal size. Right now, on my two dashboards I am currently using two different popups. I would like to consolidate it all into one popup.

mobile popup

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Bathroom
    size: fullscreen
    content:

other device popup

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Bathroom
    style: |
      --popup-min-width: 500px;
      --popup-max-width: 750px;
      --popup-border-width: none;
      --popup-border-color: none;
      --popup-border-radius: 30px;
      --popup-padding-x: 20px;
      --popup-padding-y: 15px;
    content:

Any help would be greatly appreciated.

Remcove · June 24, 2023, 8:20pm

Hello all,

Currently i’m installing and configuring this for my own purposes. Thanks in advance for the great stuff! It looks amazing!!

However I find myself struggeling for hours with the media section. I cannot figure out what to change or so… I don’t use plex, Radarr or Sonarr… Is there any way of still using it to its fullest potentional?

Just some extra info for you guys. I have 2 televisions, 1 in the living and 1 in de master bedroom. In the living there is also a sonos setup which is being used for the TV or playing radio/spotify. Can anyone link me to a guide or maybe explain themselfs how to get going?

For example: We often use Videoland (streaming service) or Netflix or Youtube to watch content or just use the TV box from Ziggo. Is there a way to pull the data from the TV to change the image to whatever platform is being used?

Thanks! Remco

Remcove · June 25, 2023, 5:12pm

To explain a bit more on what I need help with:

First of all: How does it work. As I understand correctly the 1st screen is showing the last played media until its inactive for an x amount of time and then show the latest releases on (for example) Plex.

#################################################
      #                                               #
      #                     MEDIA                     #
      #                                               #
      #################################################

      - type: grid
        title: Media
        view_layout:
          grid-area: media
        columns: 1
        cards:
          - type: custom:swipe-card
            parameters:
              speed: 550
              spaceBetween: 40
              threshold: 5
            cards:
              - type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: **select.conditional_media** <- what is this? 
                        state_not: Vardagsrum

                      - entity: **select.conditional_media** <- what is this? 
                        state_not: Sovrum

                      - entity: **select.conditional_media** <- what is this? 
                        state_not: Spotify

                      - entity: **select.conditional_media** <- what is this? 
                        state_not: Kök
                    card:
                      type: custom:button-card
                      entity: **media_player.sonos** <- I put my Sonos bar here.. is this what is supposed to go here?
                      name: Sonos
                      tap_action:
                        action: none
                      template:
                        - conditional_media
                        - icon_plex

                  - type: conditional
                    conditions:
                      - entity: **select.conditional_media** <- what is this? 
                        state: Vardagsrum
                    card:
                      type: custom:button-card
                      entity: media_player.vardagsrum
                      triggers_update: **sensor.youtube_watching** <- how does this work?
                      template:
                        - conditional_media
                        - icon_apple_tv

                  - type: conditional
                    conditions:
                      - entity: **select.conditional_media** <- what is this? 
                        state: Sovrum
                    card:
                      type: custom:button-card
                      entity: media_player.sovrum
                      triggers_update: sensor.youtube_watching
                      template:
                        - conditional_media
                        - icon_apple_tv

                  - type: conditional
                    conditions:
                      - entity: select.conditional_media
                        state: Spotify
                    card:
                      type: custom:button-card
                      entity: media_player.spotify
                      template:
                        - conditional_media
                        - icon_spotify

                  - type: conditional
                    conditions:
                      - entity: select.conditional_media
                        state: Kök
                    card:
                      type: custom:button-card
                      entity: media_player.kok
                      template:
                        - conditional_media
                        - icon_nest_mini

              - type: grid
                columns: 2
                cards:
                  - type: custom:button-card
                    entity: media_player.woonkamer_tv_2
                    triggers_update: **sensor.youtube_watching** <- how does this work?
                    name: Woonkamer TV
                    template:
                      - media
                      - icon_tv

                  - type: custom:button-card
                    entity: media_player.slaapkamer_tv_2
                    triggers_update: **sensor.youtube_watching** <- how does this work. 
                    name: Slaapkamer TV
                    template:
                      - media
                      - icon_tv

                  - type: custom:button-card
                    entity: media_player.spotify_speenkruidhof
                    name: Spotify
                    template:
                      - media
                      - icon_spotify

                  - type: custom:button-card
                    entity: media_player.nest
                    name: Nest Mini
                    template:
                      - media
                      - icon_nest_mini

I put ** and ← where I don’t understand what to put there or how it works.

thanks in advance.

VietNgoc · June 25, 2023, 6:04pm

github.com

matt8707/hass-config/blob/1aac37814b22effac0a860407a3ec0e7158acece/packages/tv_media.yaml#L67-L112C27

    
      
          template:
            - select:
                - name: conditional_media
                  state: >
                    {% set recently_added = 'Senast tillagt' %}
                    {% set paused_timeout_minutes = 15 %}
                    {% set media_players = [
                      states.media_player.vardagsrum,
                      states.media_player.sovrum,
                      states.media_player.spotify ] %}
          
          
          {% macro media(state) %}
                    {% set state = media_players | selectattr('state','eq',state) | list %}
                    {% set last_changed = recently_added if state | length == 0 else state | map(attribute='last_changed') | list | max %}
                      {{ state | selectattr('last_changed','eq', last_changed) | map(attribute='name') | list | join }}
                    {% endmacro %}
          
          
          {% set playing = media_players | selectattr('state','eq','playing') | list %}
                    {% set timeout_playing = False if playing | length == 0 else
                      (as_timestamp(now()) - as_timestamp(playing | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}

This file has been truncated. show original

Remcove · June 26, 2023, 7:48am

Is this reply for me?

weaverprojects · June 26, 2023, 8:17am

I think so… this is the conditional media template

JochenZhou · June 26, 2023, 8:56am

大佬可以分享一下空调动画吗？

htpc2308 · June 26, 2023, 11:08am

has someone the same problem`?

Unbenannt

djoaza · June 26, 2023, 11:30am

weaverprojects · June 26, 2023, 2:32pm

and where is those js/plugin/popups.ts file or path?

herbus · June 26, 2023, 3:21pm

Sorry for this stupid question;-)
On my tablet I’ve:
Time, date and a welcome text
Schermafbeelding 2023-06-26 171742

On my phone I’ve only the welcome text. I’ve searched for an hour but can’t find where the time/day is skipped in the phone view.

Can anyone point me in the right direction?

djoaza · June 26, 2023, 4:26pm

VietNgoc · June 26, 2023, 6:24pm

Sidebar.yaml template line 12

github.com

matt8707/hass-config/blob/1aac37814b22effac0a860407a3ec0e7158acece/button_card_templates/sidebar.yaml

sidebar:
  show_state: false
  show_icon: false
  tap_action:
    action: none
  name: >
    [[[
      if (entity) {
          let attr = [];
          for (let [k, value] of Object.entries(entity.attributes))
              window.navigator.userAgent.match(/iPhone/i)
                  ? k !== 'time' && k !== 'date' && value !== false && (attr += `<p>${k === 'greet' ? `<span class="iphone">${value}</span>` : `${value}`}</p>`)
                  : value !== false && (attr += `<p>${value}</p>`);
          return attr;
      }
    ]]]
  extra_styles: >
    #card {
      padding: 0;
      border-width: 0;

This file has been truncated. show original

larryo108 · June 26, 2023, 6:26pm

I couldn’t find that file myself. I followed the instructions in this post and it fixed my issues after I refreshed my browser cache.

herbus · June 26, 2023, 9:55pm

Thank you very much! Very helpful.

Brkie · June 27, 2023, 6:50am

Hi, will you share “calender in sidebar” code? Thx

kkqq9320 · June 27, 2023, 7:32am

Can anyone help me?
When I write code like this, it’s normally written with margins on the right, which looks good.
views:

type: custom:grid-layout
title: Home
layout:
default
margin: 0
grid-gap: var(–custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 1fr
grid-template-rows: 0 repeat(0, fit-content(100%)) 1fr
grid-template-areas: |
“sidebar . . . . .”
“sidebar mode climate media restroom .”
“sidebar livingroom workroom bedroom closet .”
“sidebar footer footer footer footer .”

1.PNG1920×966 65.3 KB

But when I write it this way, it doesn’t have any margin on the right side, it’s stuck together, and it doesn’t look good. Should I edit the area?

views:

type: custom:grid-layout
title: Home
layout:
default
margin: 0
grid-gap: var(–custom-layout-card-padding)
grid-template-columns: repeat(5, 1fr) 1fr
grid-template-rows: 0 repeat(0, fit-content(100%)) 1fr
grid-template-areas: |
“sidebar . . . . .”
“sidebar mode climate media restroom livingroom”
“sidebar . workroom bedroom closet .”
“sidebar footer footer footer footer footer”

andiukas · June 27, 2023, 8:33am

Hello, can you share yours button shadow configuration ?

A different take on designing a Lovelace UI

default

default