A different take on designing a Lovelace UI

epoxsv · August 20, 2023, 8:13am

Hello
Thanks it is a great job!
Just a question. Where is defined the screensaver ? How change pictures or desable it ?
It miss me Weather.home entity on it.
In what file this entity is declared ? I don’t find it !
Thanks for you help.

shred · August 20, 2023, 11:34pm

Edit: Figured it out. The solution is provided here.

Did you ever resolve the border issue? Even after adding all of the changes in release 2023.7 of matt8707/hass-config, I’m still seeing the borders except mine are orange. I don’t see them when using Safari but on my tablets using Fully Kiosk, they show up.

Ofir · August 21, 2023, 2:58pm

Beautiful one Mattihas!

Two questions for you:

How can I create my own MQTT last-changed to a person? currently, the circle around the person shows NaN instead of how many hours since the last-changed state.
When I swipe right in Media I see text in Swedish which I cannot find in all the YAML files
Spelare Where can I find this one?
How can I add new icons? I wanted to add an Xbox icon instead of the PS4 and an Aquairum SVG icon to create an aquarium popup monitor menu for me.

Thanks a lot!

Emad131 · August 21, 2023, 9:42pm

Hi @Mattias_Persson
If I want to fit the ui to resize to bee more acurate on a iPad Pro 11” what settings or changes do I need to make?

Now it’s ok in portrait mode but I want it to kind of resize it in landscape mode to fit more with all the buttons. Now I can only see to the middle of row 2 and to see the footer I need to scroll down. It’s like everything resizes to bigger text and layout buttons.

I try I’d with the home assistant app and the browser. I also did hide the left menu

If I can fix this I will mount my iPad on the wall

Or do anyone else know?

arifroni · August 23, 2023, 9:28am

ans to Q2

github.com

matt8707/hass-config/blob/dc798478f19f7b5a317fe374d1b0284e9f88bb2c/button_card_templates/media.yaml#L143

    
      
          [[[
            let horizontalStack = this.getRootNode().host,
                swipeCard = horizontalStack.getRootNode().host,
                gridTitle = swipeCard.getRootNode().querySelector("h1");
          
          
  swipeCard.swiper.on("slideChange", () => {
                if (swipeCard.swiper.realIndex === 0) {
                    gridTitle.textContent = "Media";
                }
                else if (swipeCard.swiper.realIndex === 1) {
                    gridTitle.textContent = "Spelare";
                }
            });
          
          
  if (entity) {
                let elt = this.shadowRoot,
                    await = setTimeout(marquee, 100),
                    data = entity.attributes.data,
                    artist = entity.attributes.media_artist,
                    title = entity.attributes.media_title;

VietNgoc · August 23, 2023, 12:39pm

https://github.com/matt8707/hass-config/blob/dc798478f19f7b5a317fe374d1b0284e9f88bb2c/ui-lovelace.yaml#L7C2-L43C45

You need to edit the mediaquery in lovelace.yaml. Take a look at A Complete Guide to CSS Media Queries | CSS-Tricks - CSS-Tricks

Ofir · August 23, 2023, 2:05pm

How can I create an icon like you used in your code?
Tried to open svg file on a notepad, and copied it to output but the icon is not loaded like I thought it should…

I want to create an aquarium icon and a Laundry machine icon.

Thanks for helping!

Emad131 · August 23, 2023, 9:04pm

Thx, does some hade change this settings to fit on an iPad or screen 11” before ?

Or do I need to experiment for my self to see witch value I need to change?

Is it only on landscape row?

AntoineDRN · August 23, 2023, 10:43pm

Hi ! How can I change the title of a swipe card like the Plex swipe card but for a grid swipe card.

Thanks a lot!

VietNgoc · August 24, 2023, 12:07pm

Here is for example my dashboard on a secondary monitor, it is in portrait mode and in landscape.

https://dropover.cloud/33ecf7#0c291371-49ad-434e-8867-e244e2f3ed78

    #portrait
    '(min-width: 801px) and (max-width: 1440px)':
      grid-gap: 2.2vw
      grid-template-columns: 0 1fr 1fr 1fr 0
      grid-template-rows: 0 fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) 0fr
      grid-template-areas: |
        ".  .          .           .         ."
        ".  sidebar    home        security  ."
        ".  media      cameras     climate   ."
        ".  mainrooms  devices     other     ."
        ".  floorplan  floorplan   floorplan ."
        ".  footer     footer      footer    ."
        ".  .          .           .         ."

Emad131 · August 24, 2023, 3:57pm

@VietNgoc
Wow! Really nice dashboard!
Can you share the whole setup? I’m kind of new here but have managed to get the installation from matt’s installation done and setup my own ui. However, I like people to come up with their own solutions and yours was exactly what I was looking for, i have one more setup i like but no one answers my questions…

Link: A different take on designing a Lovelace UI - #2749 by danieljarhult

I have a list of questions now:

How do you run home assistant

Synology NAS or RPI: in docker or as a virtual machine. Do you have supervised installed also?
Can you please share witch one and if it’s docker can you paste the link for the right install.
i tryied install supervised on docker and it dident work in my synology nas

Can I have home assistant installed on a virtual mashing on a Synology Nas and monitor docker via HA-Dockermon, how ?
In landscape mode you have a “top bar” and on the right side you have weater and date with a floor planer. How to setup that?

Where did you build youre floor planner in?

Climate section

Can you send how to setup that

Media

How did you setup playlist from spotify

Movies

Where do you save all movies, nas ?
Is that youre libary with latest downloaded, plz explaine more

Network, i have a Dream Machine Pro

How did you setup that to show:
WAN status, uptime, speeds and the access point information like clients

Footer vacum, Im running roborock with xiaomi intergration

How did you change the % becuse now when im looking at my setup i see diffrent value, exempel 9700000 %

Overview, whats that? Refresh, whats that?

Do you have a list of intergrations you use?
Do you have all the icons you use?

The message is long i know, if you have the time maybe i can send you private message and we can take it from there

Thx

Emad131 · August 24, 2023, 4:13pm

@VietNgoc
I have a Synology and RPI4

kkqq9320 · August 24, 2023, 5:21pm

It’s insanely beautiful. I want to do the same as you.

If you don’t mind me asking, I’d like the code for the swipe card in 3d floor and the code for the top bar, which is similar to the footer but perfectly beautiful.

And how did you get the dots that look like they’re showing page at the bottom of the swipe card? That looks so cool.

VietNgoc · August 25, 2023, 11:37am

@Emad131 @kkqq9320 All the knowledge I gained here in the forum. I recommend to read this whole topic and keep trying and trying. I uploaded part of my config that I got from this topic. I hope it will help you a bit to develop your dashboard.

Emad131 · August 25, 2023, 3:28pm

@VietNgoc

Thx!

But can still ask you about this:

How do you run home assistant

Synology NAS or RPI: in docker or as a virtual machine. Do you have supervised installed also?
Can you please share witch one and if it’s docker can you paste the link for the right install.
i tryied install supervised on docker and it dident work in my synology nas

Can I have home assistant installed on a virtual mashing on a Synology Nas and monitor docker via HA-Dockermon, how ?
Floorplan

Where did you build youre floor planner in?

VietNgoc · August 25, 2023, 3:48pm

HA OS on rpi, floorplan GitHub - ExperienceLovelace/ha-floorplan: Bring new life to Home Assistant. By mapping entities to a SVG-object, you're able to control devices, show states, calling services - and much more. Add custom styling on top, to visualize whatever you can think of. Your imagination just become the new limit.

kkqq9320 · August 26, 2023, 2:19am

Thank you so much
I’ll put your files to good use.

Emad131 · August 26, 2023, 5:48am

How can i monitor docker containers in HA-Dockermon if i install home assistant on a virtual machine @kkqq9320

Adelina · August 26, 2023, 8:26am

My light does not support RGB color adjustment. It only has color temperature adjustment and cannot be adjusted using your light template. What should I do to make it able to adjust color temperature and have a color temperature slider

Laffer · August 26, 2023, 10:04pm

@Adelina ; The recent versions of frontend should do that automatically. Have you updated HA?