A different take on designing a Lovelace UI

With an external base it worked well. Thank you.

Looking to make something similar to your media section.

Could you explain what happens in the different states of it… or show a screencap or something… Digging around but not exactly understanding it all =)

@Davst check out the github repo. Theres a demo vid. Maybe that helps?

@Fialad @Ghafla82
Hello. How to configure the mini-graph card to look like this? I tried but I don’t have the outline of the card. Thanks

Is there any possible way of scaling things down? I’m using a fire 7 tablet, with a max resolution of 1024x600, but the buttons are very big. I’d like to scale them down as well as remove their name from the button (which I think I can figure that one out) so that it allows for more buttons to be available on the screen without scrolling.

I like having the buttons in the lower portion of the side bar, but with the size of the buttons in the main section, I have to scroll down to see those.

Hi, I’m trying to make a swipe-card, but I’m noticing that with 4 buttons the ones at the bottom are cut in the lower part.
Is it possible to increase the height?

immagine

Searching the net I found this solution that currently works, if anyone recommends anything else.

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

immagine

3 Likes

@Mattias_Persson Could this be why the states are not being recorded in the database?

Logger: homeassistant.components.template.template_entity
Source: components/template/template_entity.py:72
Integration: Template (documentation, issues)
First occurred: 20:20:46 (2 occurrences)
Last logged: 20:20:46

TemplateError('TypeError: unsupported operand type(s) for +: 'NoneType' and 'str'') while processing template 'Template("{% set entity_id = 'none' %} {%- set date = strptime(state_attr(entity_id, 'date') + ' ' + state_attr(entity_id, 'time'), "%X") %} {%- set time = as_timestamp(date) | timestamp_custom('%H:%M') -%} El próximo bus sale {{ time }} från {{ state_attr(entity_id, 'name').split()[1] }}")' for attribute 'transport' in entity 'sensor.template_sidebar'
TemplateError('UndefinedError: 'None' has no attribute 'usage'') while processing template 'Template("{% set entity_id = 'sensor.docker_cpu' %} {{ (state_attr(entity_id, 'memory_stats')['usage'] / state_attr(entity_id, 'memory_stats')['limit'] * 100) | round(1) | default(0) }}")' for attribute '_state' in entity 'sensor.template_dockermon_mem'

And this can be for the same? That I do not have any status recorded in the database?

No. The template is throwing an error because you haven’t setup skånetrafiken/dockermon

Nope, that’s a frontend error. You don’t have “Plex Recently Added”

I think you’re the only one here with database errors

swipe-card not updating size unless resizing window #32 #147

Old screencap

Conditional cards tied to an input select, automate based on media player state.

@Mattias_Persson Thanks for the previous answers. I have the external database and all the data except the states are recorded. What can be?

I have added the integration. Should I have done something else? If I remove the recently_downloaded template and it shows me the plex card. It says that plex recently added is online

No. The template is throwing an error because you haven’t setup skånetrafiken/dockermon

I already corrected it. Thank you

would anyone share a cover button?

Hi @Mattias_Persson thanks for your work, it’s awesome!
I’m using it on my personal home assistant and I’m trying to adapt grid layout to my needs but it looks like it’s not working as expected.
I’ve removed the footer since I’m not using it (both from ui-lovelace.yaml and themes. yaml) and tried to setup a 5 columns layout (sidebar + 4 group of icons).
This is the config I’m using:
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(5, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)
grid-template-areas: |
"sidebar . . . . ."
"sidebar vardagsrum studio sovrum media ."
"sidebar . övrigt hemma hemma3 ."
". . . . . ."

With this config many things are messed up, buttons on the sidebar are at the bottom of the screen and there’s a big gap between last row of button cards and end of screen. Any idea on how to fix it?
here’s a screenshot from chrome:


and from firefox:

In parallel there’s something weird happening, many times on different browser it looks like theme is not applied to sidebar, a refresh fix it but this is annoying in fullykiosk. Any suggestion?

Thanks again
Dave

I’m not super well versed with grids but this part is wrong

row

#june-2021

and

1 Like

Hi,

did you manage the resolution?

thanks for the markdown fix, it worked.
I’m still working on the grid issue since I’m trying to adapt it to my config.