A different take on designing a Lovelace UI

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

@piteriuz I think this will fix it

1 Like

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

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


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

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 :

image

Thanks

Pretty much fixing / replacing until it works for you

I would start with the basic layout and go from there

  • Install and configure HACS

  • Within HACS Frontend add the following repositories

  • Manually copy over these files from matt8707/hass-config

    • ui-lovelace.yaml
    • button_card_templates.yaml
    • popup folder
    • include/themes.yaml
  • In configuration.yaml add lines [docs]

    homeassistant:
      packages: !include_dir_named include #theme
    
    lovelace:
      mode: yaml #use ui-lovelace.yaml
      resources: #hacs
        - url: /hacsfiles/button-card/button-card.js
          type: module
        - url: /hacsfiles/lovelace-card-mod/card-mod.js
          type: module
        - url: /hacsfiles/lovelace-layout-card/layout-card.js
          type: module
        - url: /hacsfiles/swipe-card/swipe-card.js
          type: module
    
  • In secrets.yaml add placeholders

    youtube_token: abc
    apexcharts_tibber: abc
    apexcharts_influx: abc
    apexcharts_github: abc
    
  • Restart Home Assistant

  • Select tablet theme

Then add your entities, browser_mod for popups, the sidebar template sensor etc…

13 Likes

I have not explored this but I have some ideas

2 Likes

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 :stuck_out_tongue:

1 Like

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

@piteriuz did swipe-card height work for you?

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

1 Like

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

:smiley:

grafik

1 Like

Hello,can you share the code?thank you。

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

HI Mattias,

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

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

1 Like

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

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.

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';
              ]]] ```
2 Likes

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