A different take on designing a Lovelace UI

piteriuz · September 17, 2021, 10:33pm

What am I doing wrong that the square incorrectly cuts off at the bottom?

My wrong code from ui-lovelace.yaml:


      - type: grid
        title: Bezpieczeństwo
        view_layout:
          grid-area: bezpieczeństwo
        columns: 1
        cards:
          - type: custom:swipe-card
            start_card: 4
            parameters:
              roundLengths: true
              effect: coverflow
              speed: 650
              spaceBetween: 20
              threshold: 7
              coverflowEffect:
                rotate: 80
                depth: 300
            cards:
              - type: grid
                columns: 2
                cards:
                  - type: custom:button-card
                    entity: binary_sensor.ogrod_drzwi
                    name: Ogród drzwi
                    hold_action: !include popup/sensor_ogroddrzwi.yaml
                    template:
                      - base
                      - icon_closet

                  - type: custom:button-card
                    entity: binary_sensor.piwnica_drzwi
                    name: Piwnica drzwi
                    hold_action: !include popup/sensor_piwnicadrzwi.yaml
                    template:
                      - base
                      - icon_closet

                  - type: custom:button-card
                    entity: binary_sensor.salon_balkon
                    name: Salon balkon
                    hold_action: !include popup/sensor_salonbalkon.yaml
                    template:
                      - base
                      - icon_closet

                  - type: custom:button-card
                    entity: binary_sensor.brama_garazowa
                    name: Brama garażowa
                    hold_action: !include popup/sensor_bramagarazowa.yaml
                    template:
                      - base
                      - icon_garagedoor

              - type: grid
                columns: 2
                cards:
                  - type: custom:button-card
                    entity: binary_sensor.piotr_balkon
                    name: Piotr balkon
                    hold_action: !include popup/sensor_piotrbalkon.yaml
                    template:
                      - base
                      - icon_closet

                  - type: custom:button-card
                    entity: binary_sensor.dziadek_pokoj_drzwi
                    name: Dziadek pokój
                    hold_action: !include popup/sensor_dziadekpokoj_drzwi.yaml
                    template:
                      - base
                      - icon_closet

                  - type: custom:button-card
                    entity: light.brama_parking
                    name: Brama parking
                    template:
                      - base
                      - icon_gate

Mattias_Persson · September 18, 2021, 4:21am

@piteriuz I think this will fix it

Mattias_Persson · September 18, 2021, 4:54am

Your #BASE# comment has the same indentation as your temperature template. Don’t do that

    custom_fields:
      temperature: >
        [[[ 
          const temp = entity.attributes.temperature
          return `${temp}°` 
        ]]]


        #BASE# 
  homekit_style:
    aspect_ratio: 1/1
    show_label: true
    show_state: true

elyisum · September 18, 2021, 6:05am

Hi
I would like to know if it’s possible to have a menu in the sidebard to show contents in a new grid instead of popup on icon click ? Do I need to configure a new lovelace panel for each item ? Or another way ? I have no idea how to develop someghing like this :

Thanks

Giblet · September 18, 2021, 6:16am

Pretty much fixing / replacing until it works for you

Mattias_Persson · September 18, 2021, 7:06am

github.com

matt8707/hass-config/blob/master/INSTALL.md

# Installation

* Install and configure [HACS](https://hacs.xyz/)

* Within HACS Frontend add the following repositories
  * [button-card](https://github.com/custom-cards/button-card)
  * [card-mod](https://github.com/thomasloven/lovelace-card-mod)
  * [layout-card](https://github.com/thomasloven/lovelace-layout-card)
  * [Swipe Card](https://github.com/bramkragten/swipe-card)

* Manually copy over these files from [matt8707/hass-config](https://github.com/matt8707/hass-config)
  * `ui-lovelace.yaml`
  * `button_card_templates` folder
  * `popup` folder
  * `themes.yaml`
  * `sidebar.yaml`

* In `configuration.yaml` add lines [[docs](https://www.home-assistant.io/lovelace/dashboards/)]

  ```yaml

This file has been truncated. show original

Mattias_Persson · September 18, 2021, 7:25am

I have not explored this but I have some ideas

as you said new lovelace panel for each item with navigation_path
maybe https://github.com/DBuit/sidebar-card if it’s sticky
change the grid to sidebar and main, and within main have a conditinal card using input select and within that a subgrid with your selected content

Giblet · September 18, 2021, 8:55am

I had the same problem, for which your proposed fix doesn’t seem to work
I “fixed” it by adding

              - type: custom:mod-card
                style:
                  swipe-card:
                    $: |
                      .swiper-container {            
                        padding: 0px 0px 20px 0px !important;        
                      }
                card:
                  type: custom:swipe-card
                  start_card: 1
                  parameters:
                    roundLengths: true
                    effect: coverflow
                    speed: 650
                    spaceBetween: 20
                    threshold: 7
                    coverflowEffect:
                      rotate: 80
                      depth: 300
                  cards:

But there’s probably a WAY more elegant fix for this problem
Maybe something where a custom:mod-card isn’t needed

elyisum · September 18, 2021, 9:19am

Thanks for the tip !
I have some issues with Sidebar-card, I prefer to use native features of HA

Mattias_Persson · September 18, 2021, 1:06pm

@piteriuz did swipe-card height work for you?

@Giblet you don’t need mod-card if you style from themes

Giblet · September 18, 2021, 1:08pm

Well yes, but I don;t know how to style it from themes
I have tried a lot of things, but my CSS knowledge is just not good enough
The css your proposed doesn’t seem to work for me (the swiper-container doesn’t receive the height:100%)
However I did test with the browser inspect tool and added height: 100% to the swiper-container and that did solve the issue
I just don’t know enough about css to know how to put that in themes.yaml

xADDRx · September 18, 2021, 10:19pm

xianweitudou · September 19, 2021, 9:14am

Hello，can you share the code？thank you。

chaconc · September 19, 2021, 8:36pm

Is it possible to achieve the same look and feel just on the dashboard? I see " * Theme now only applies to dashboard and not other sections" in the recent changes, but the only way I get a complete theme (popup blur, background image, fonts, etc) is by selecting the “Tablet” theme in my user config.

This ends up messing up my other sections (like auto generated cards, Energy panel)) a few posts up, I had copied the one from configuration.yaml on github

xADDRx · September 20, 2021, 9:02am

HI Mattias,

do you see a chance to animated the weather icons with svg?

Mattias_Persson · September 20, 2021, 10:40am

Previously heading size etc affected other parts like energy panel, for auto generated cards set another theme?

Mattias_Persson · September 20, 2021, 10:43am

Do you mean if it’s possible? Then yes
https://www.amcharts.com/free-animated-svg-weather-icons/

xADDRx · September 20, 2021, 1:59pm

Hi Mattias,

thank you. I dwonload th icons and copied in /local/wetter.

i try this

  weather_button_style:
    template: homekit_style
    icon: >
      [[[
        if (entity.state === 'cloudy'){
          return '/local/wetter/cloudy.svg'
        }
      ]]]

and this:

 {% if is_state("weather.home","cloudy") %} /local/wetter/cloudy.svg

but doent work.

anon36468094 · September 20, 2021, 6:29pm

I did it like this.

            icon: |
              [[[ 
                if (states["weather.openweathermap"].state == "partlycloudy" && states["sun.sun"].state == "below_horizon") return '/local/custom_icons/weather/nt_partlycloudy.svg';
                if (states["weather.openweathermap"].state == "partlycloudy" && states["sun.sun"].state == "above_horizon") return '/local/custom_icons/weather/partlycloudy.svg';
                if (states["weather.openweathermap"].state == "mostlycloudy" && states["sun.sun"].state == "below_horizon") return '/local/custom_icons/weather/nt_mostlycloudy.svg';
                if (states["weather.openweathermap"].state == "mostlycloudy" && states["sun.sun"].state == "above_horizon") return '/local/custom_icons/weather/mostlycloudy.svg';
                if (states["weather.openweathermap"].state == "sunny") return '/local/custom_icons/weather/sunny.svg';
                if (states["weather.openweathermap"].state == "cloudy") return '/local/custom_icons/weather/cloudy.svg';
                if (states["weather.openweathermap"].state == "overcast") return '/local/custom_icons/weather/cloudy.svg';
                if (states["weather.openweathermap"].state == "rainy") return '/local/custom_icons/weather/rain.svg';
                if (states["weather.openweathermap"].state == "rain") return '/local/custom_icons/weather/rain.svg';
                if (states["weather.openweathermap"].state == "possible light rain") return '/local/custom_icons/weather/chancerain.svg';
                if (states["weather.openweathermap"].state == "possible drizzle") return '/local/custom_icons/weather/chancerain.svg';
                if (states["weather.openweathermap"].state == "clear") return '/local/custom_icons/weather/clear.svg';
                if (states["weather.openweathermap"].state == "clear-night") return '/local/custom_icons/weather/nt_clear.svg';
                if (states["weather.openweathermap"].state == "windy") return '/local/custom_icons/weather/hazy.svg';
                if (states["weather.openweathermap"].state == "fog") return '/local/custom_icons/weather/fog.svg';
                if (states["weather.openweathermap"].state == "snowy") return '/local/custom_icons/weather/snow.svg';
                if (states["weather.openweathermap"].state == "snowy-rainy") return '/local/custom_icons/weather/chanceflurries.svg';
              ]]] ```

andrew47 · September 21, 2021, 6:36am

I try to use the template sonarr_upcoming but it isn’t working.

I have this in the ui-lovelace.yaml:

                  - type: custom:button-card
                    entity: sensor.sonarr_upcoming_media
                    tap_action:
                      action: none
                    template:
                      - sonarr_upcoming
                      - media
                      - conditional_media

The sensor is working

data:
  - title_default: $title
    line1_default: $episode
    line2_default: $release
    line3_default: $rating - $runtime
    line4_default: $number - $studio
    icon: mdi:arrow-down-bold
  - airdate: '2021-09-21T00:00:00Z'
    release: $day, $time
    flag: false
    title: NCIS
    episode: Blood in the Water
    number: S19E01
    runtime: 45
    studio: CBS
    rating: ★ 9.1
    genres: Action, Adventure, Crime, Drama
    poster: https://artworks.thetvdb.com/banners/posters/72108-5_t.jpg
    fanart: https://artworks.thetvdb.com/banners/fanart/original/72108-4_t.jpg
  - airdate: '2021-09-22T01:00:00Z'
    release: $day, $time
    flag: false
    title: 'FBI: Most Wanted'
    episode: Exposed (2)
    number: S03E01
    runtime: 45
    studio: CBS
    rating: ''
    genres: Crime, Drama
    poster: >-
      https://artworks.thetvdb.com/banners/series/364088/posters/5ee0f6c47f23a_t.jpg
    fanart: >-
      https://artworks.thetvdb.com/banners/series/364088/backgrounds/62044236_t.jpg
friendly_name: Sonarr_Upcoming_Media

what am i missing