A different take on designing a Lovelace UI

hello,

i tried to replace the background of the theme, its the background.png under local or www or?

i tried to replace an reboot and deletet my browser cache but no luck

Just add a padding in the template

... card:
      - padding: 10.9% 9.9% 8.9% 10.9%;
 #Additional padding to the template (Based on the % found on the extra_styles.yaml)
1 Like

check what path you have assigned based on the themes.yaml file
Matts is like:

    card-mod-root: |
      ha-app-layout {
        background: url('/local/background.png');
        background-size: cover;
      }

The file would be in: www/background.png

Based on my own experiences the background was sometimes missing (full-on black) when a card would be broken (Erroring out). Not sure why is this thing; but that’s what I use as an early identifier of a broken card sometimes😂

Hi!

Sorry for the stupid question, but how can I add more icons like (wall sockets, motion sensors) the same way you did with icon_alexa?

Many thanks.

hey this looks amazing well done. Can I just ask how have you got all the time remaining and temp control etc integrated from your washer/dryer? Is it a smart dryer?

Yes, I have an LG washer and dryer and use the LG ThinQ Devices integration.

1 Like

Hello, how do you make the button light up, the radiator only lights up if the heating is on or off but not when it is really heating up.

And since you have managed to do the temperature circle, I don’t quite understand the other partner’s code.

Thank you so much.

      - type: custom:button-card
        entity: climate.termostato
        name: Calefacción
        double_tap_action:
          !include popup/sovrum_klimat.yaml
        triggers_update: sensor.termostato_temperature
        template:
          - base
          - icon_climate
          - circle
        variables:
          circle_input: "[[[ return Math.round(states[this._config?.triggers_update].state).toString(); ]]]"
          circle_input_unit: '°C'

Hello and welcome! Maybe I can help clarify a little bit.

The code you posted is just for using an alternate sensor source to display a temperature in the circle. It won’t show the temperature difference using the circle as a scale. It will show up like this, with the outline always a full circle.

Getting the circle to show the temperature difference or a countdown is more involved. This is my original post about how to accomplish that, but I’m using it as a countdown to when my laundry is done.

And finally, if you want the button to stay “on” or lit up, you might need an alternate state_on variable in your button code.
The original code will only show a button as active or “on” if the entity state matches one of these states: 'on', 'home', 'cool', 'fan_only', 'playing', 'unlocked'. You can change that by defining an alternate state_on variable in specific buttons.

for instance, I do that with my washing machine by adding this

  variables:
    state_on: >
      [[[ return ['Detecting', 'Washing', 'Rinsing', 'Spinning'].indexOf(!entity || entity.state) !== -1; ]]]

You’ll have to look and see what the entity state is when it’s running vs when it’s off to figure out what states you should add.

1 Like

okay yeah it takes several minutes to load the new background after change and browser cache deleting.

has someone make a own background and whant to share ?

hi,
please, where can I find the correct SVG icons for dishwasher (mdi:dishwasher) and oven (mdi:stove) ?

This site is my go to for mdi icons: Material Design Icons - Icon Library - Pictogrammers
They recently switched their URL from materialdesignicons.com

thank you, do you use Illustrator or other tool to resize the svg icons from (0 0 24 24) to (0 0 50 50)? I think that it’s difficult for me this “svg job” :roll_eyes:

I do use Illustrator because I work with it every day, but there are other options like Inkscape or Affinity Designer. Or, check out this post by @masoncrawford1994 which details the whole process and uses a website to resize the icons.

2 Likes

Thanks for the work on this. Can someone tell me where to put the downloaded github files? The installation instructions simply say " Manually copy over these files from [matt8707/hass-config]" I don’t exactly know where to put them. I see a reference to /hacsfiles/ in the configuration.yaml entry…I don’t have such a folder. Any help is appreciated.

Same folder as your configuration.yaml here chemgeek. I was a bit unsure too then it was a case of find and add.

Hello, I try to use a iPad to show home assistant in my house . And I use your front end ( your amazing theme ).
But I see no icon on the dashboard .
It’s work great on iPhone but on iPad no way to show the icon . Do you know why ?
Thanks

Whoa wait - I don’t have this entity at all. Followed all your steps but i guess i missed something prior to that? How do i get this entity?

The entity id is select.conditional_media. It’s a template select that’s created in packages/tv_media.yaml. I’m guessing you probably do have it if the conditional media cards are working with your install.

Beacuse of this dashboard I publish all devices from Homey to HA. Bought two tablets and a NUC for HA. :slight_smile:

Awesome work @Mattias_Persson

The buttons for “stäng allt” and “Hemma”

How do I get them to return to an off state after pressing them?
Have them trigger virtual device linked to a flow or is it better to run scripts within HA instead?