A different take on designing a Lovelace UI

If I run the old version, the pop-up window will not look like the one you took in the screenshot, but will be the same style as the one I took in the previous screenshot, I have also attempted to upgrade ‘browser_mod’ in the old version, but it still remains the same after clearing the cache. Only by upgrading the home assistant to the latest version can the pop-up window look like the one in your screenshot, and the color temperature can be adjusted. The home assistant version I mentioned is’ August 3rd, 2023 ’ I don’t know how you managed to pop up windows like this in the old version. If I could be like you, I would be willing to stay in the old version because there are many bugs in the new version, such as the title of the pop-up window being garbled and the title text becoming smaller, which I still cannot solve

Is anyone else seeing an issue with fully kiosk browser throwing this error?

Failed loading sound: Wrong URL or unsupported format?

your project looks SO good. Do you mind sharing your sidebar or yaml?

I’ve been trying to figure an issue that started a while back and just want to verify if anyone else is experiencing it, or if I’ve botched some code somewhere I haven’t been able to decipher.

image

Blur overlay doesn’t want to update between tracks, but updates fine when conditional_media switches between cards.

I’ve tried replacing conditional_media with mattias’ original code, without any solution.

If any of yall could let me know if it’s behaving normally on album art changes between tracks on a media_player entity, I’d appreciate it.

(my dynamic progress_bar colors also seem affected by this issue actually, so I suspect the blur_overlay code itself is fine)

I wonder if my altered ui-lovelace.yaml layout is the culprit, despite being fairly sure it still worked when the changes were made…

ui-lovelace.yaml excerpt:
      #################################################
      #                                               #
      #                     MEDIA                     #
      #                                               #
      #################################################

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

        cards:
          - type: custom:button-card
            name: ↔ Media
            show_icon: false
            show_state: false
            tap_action:
              action: none
            template: title_button

          - type: grid
            columns: 1
            cards:
              - type: custom:mod-card
                style:
                  swipe-card:
                    $: |
                      .swiper-container {
                        margin: -1.5vw !important;
                        padding: 1.5vw !important;
                      }
                    $hui-horizontal-stack-card:
                      $: |
                        hui-conditional-card {
                          margin: 0 0.05vh 0 0 !important;
                        }
                card:
                  type: custom:swipe-card
                  parameters:
                    speed: 550
                    spaceBetween: 40
                    threshold: 5
                    #initialSlide: 1
                  cards:
                    - type: horizontal-stack
                      cards:
                        - type: conditional
                          conditions:
                            - entity: select.conditional_media

I have the same problem but have not had time to deal with it.
Restarting and clearing the cache did not help. This problem only seems to occur on my Fire Tab.

Cool Dashboard! Would you mind sharing your camera setup?

2 Likes

Hi,

Did you remove youre Github?

Why didn’t I think of that, thank you.

Any idea what changed to break it? I’d love to solve my code for updating progress-bar colours.

Hi,

I have a problem. I am not sure whether it’s based on the UI or the custom button card.

I tried to lock the button, so I don’t activate it by accident.
image

My problem is: The lock only works if i click exactly on the lock symbol. When I click beside it, it has no affect at all. Can somebody help me? How do I get the lock mechanism working on the whole button?

Code:

          - type: custom:button-card
            entity: switch.shelly1
            name: Licht
            template:
              - base
              - icon_hue
            lock:
              enabled: true
              unlock: hold

Can you kindly share your garage door animated icon?

HI All,

I am unable to make the similar setup like in the main ui.
Within a popup card I would like to have a 3 column 4 rows, with the similar button types

I made it llike this, but I am having a blank popup.

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
  - type: custom:grid-layout
    layout:
      #default
      margin: 0
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: repeat(4, 1fr) 0
      grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
      grid-template-areas: |
        ".       .       .       .       ."
        ".       lights  lights  lights  ."
        ".       lights  lights  lights  ."
        ".       lights  lights  lights  ."
        ".       lights  lights  lights  ."
        ".       .       .       .       ."
    cards:
      - type: grid
        view_layout:
          grid-area: sidebar
        columns: 3
        cards:
        - type: custom:button-card
          entity: light.lamp_master_bedroom
          name: "Bedroom"
          template: 
            - base
            - icon_lamp

        - type: custom:button-card
          entity: light.lamp_nursery
          name: "Nursery"
          template: 
            - base
            - icon_lamp

        - type: custom:button-card
          entity: light.lamp_master_bathroom
          name: "Bathroom"
          template:
            - base
            - icon_spot

        - type: custom:button-card
          entity: light.lamp_guest_bathroom
          name: "Guest Bathroom"
          template:
            - base
            - icon_spot

        - type: custom:button-card
          entity: light.lamp_living_room
          name: "Living Room"
          template:
            - base
            - icon_lamp
            
        - type: custom:button-card
          entity: light.lamp_dining_room
          name: "Dining Room"
          template:
            - base
            - icon_lamp
            

        - type: custom:button-card
          entity: light.lamp_kitchen
          name: "Kitchen"
          template:
            - base
            - icon_spot
            

        - type: custom:button-card
          entity: light.lamp_utility_room
          name: "Utility Room"
          template:
            - base
            - icon_lamp
            
        - type: custom:button-card
          entity: light.lamp_office
          name: "Office"
          template:
            - base
            - icon_lamp
                  
        - type: custom:button-card
          entity: light.lamp_hallway
          name: "Hallway"
          icon: "mdi:lightbulb"
          template:
            - base
            - icon_spot

        - type: custom:button-card
          entity: light.all_lights
          name: "All Lights"
          icon: "mdi:lightbulb"
          template:
            - base

        - type: custom:button-card
          entity: input_boolean.automations_light
          name: "Light Automations"
          icon: "mdi:lightbulb"
          template:
            - base

Getting this on the Plex recently added card:

type: custom:button-card
entity: sensor.plex_recently_added_episode
name: Senast tillagt
tap_action:
  action: none
template:
  - conditional_media
  - icon_plex

Anyone knows why?

Hello.

I’like to show weather information in the sidebar and I’ve got a little problem: height.

image

How can I make the height not so big and fit the content? FYI, this “weather card” is inside an horizontal stack.

Thanks in advance.

weather:
  template:
    - base_small
    - action_more_info
  variables:
    - min:
    - max:
  name: >
    [[[
      return entity.attributes.temperature + "º";
    ]]]
  state_display: >
    [[[
      let display = "";

      if (variables.min && variables.max)
      {
        display = states[variables.min].state + "º/" + states[variables.max].state + "º";
      }
      else
      {
        display = entity.state;
      }
      
      return display;
    ]]]

  custom_fields:
    icon: >
      [[[
        let states_dict = {
            'clear-night': 'clear-night',
            'cloudy': 'cloudy',
            'fog': 'fog',
            'hail': 'hail',
            'lightning': 'lightning',
            'lightning-rainy': 'lightning-rainy',
            'partlycloudy': 'partly-cloudy',
            'pouring': 'pouring',
            'rainy': 'rainy',
            'snowy': 'snowy',
            'snowy-rainy': 'snowy-rainy',
            'sunny': 'sunny',
            'windy': 'windy',
            'windy-variant': 'windy-variant',
        };

        return `
          <ha-icon icon="mdi:weather-${states_dict[entity.state]}"></ha-icon>
        `;
      ]]]

base_small:
  template:
    - base
  aspect_ratio: 2/1
  styles:
    grid:
      - grid-template-areas: |
          "icon  n"
          "icon  s"
      - grid-template-columns: 60px 1fr
      - grid-template-rows: repeat(2, min-content)
      - grid-gap: 0.2%
    card:
      - background-color: transparent
      - font-size: var(--sidebar-font-size)
      - line-height: var(--sidebar-line-height);
      - font-weight: 200;
      - letter-spacing: 0.07vw;
      - padding: 5.5% 4.9% 4.4% 5.5%;
    name:
      - font-size: 1.2rem
    state:
      - font-size: 1.2rem
    custom_fields:
      icon:
        - width: 80%
        - margin-left: 8%

After updating the latest version of “home assistant”, the wind speed adjustment in the pop-up card of the air conditioner cannot be used. It can only display the current status of the wind speed and cannot change the wind speed. I have cleared the browser cache, but there is no response when switching the wind speed

Hi all.

Does anyone know why that space appears when using iPhone in portrait mode?

image

Thanks in advance.

Can you please share your code for the sidebar? This is exactly what I’m looking for. Thanks!

Did you use Laffer config or Matt?

How did you do in floorplaner for the door.
I can see that the door is opened and it’s showing (blinking) as red on the floorplan. Also when you turn the tv / apple tv on.

I followed the instructions on this page.