A different take on designing a Lovelace UI

[jompa68]

Need some help with setup of my AC entity to be as cool as the FAN entity are, anyone that can help?

hvac_modes:
  - auto
  - cool
  - dry
  - heat
  - fan_only
  - 'off'
min_temp: 17
max_temp: 30
target_temp_step: 1
fan_modes:
  - Auto
  - High
  - Medium
  - Low
  - Silent
preset_modes:
  - none
  - eco
  - boost
swing_modes:
  - 'Off'
  - Vertical
  - Horizontal
  - Both
current_temperature: 22.5
temperature: 19
fan_mode: Auto
preset_mode: none
swing_mode: 'Off'
outdoor_temperature: 24
friendly_name: midea_ac_91980000000f
supported_features: 57

[jompa68]

@Frank_Hagenbuch did you manage to add the glow effect?

[Frank_Hagenbuch]

Yes, but not with a simple way. It’s a mix os some things.

You can see it here. ( sorry for the Beta Logo;-)

Villa Kunterbunt

[Mattias_Persson]

@xusbadia

I’ve been struggling to get custom icons working. I have a custom icon set and I used to use the code inside the path=“” in the svg code for the icons. I’ve used your “custom-icons.js” file and replace the code with the one I had, but doesn’t seem to work. How did you get the svg code to work? Something I’m missing?

@xusbadia Just tried out your icon and I’m pretty sure it’s just a caching issue. I append a random number whenever I edit the resources /local/custom_icons.js?v=25052001

However, the proportions look wrong. You can read this and download the template Material Design

[Mattias_Persson]

@VPC

I have an error in my Developer Tools / Logs. I know this is my own doing but I’m not sure how to resolve it.

@VPC You should be able to overwrite keys like this, but I had no luck with that…

foo: &anchor
  K1: "One"
  K2: "Two"

bar:
  <<: *anchor
  K2: "I Changed"
  K3: "Three"

Anchors can get confusing if you overuse them. Correct the duplicate key warnings even if it means removing anchors. Then add them back one by one, keeping an eye on the logs.

[Mattias_Persson]

@Mariusthvdb

this is what I added to my light button templates, directly copied from your repo.
do you have a suggestion how to fix this?

@Mariusthvdb

I don’t have a fix but surely you can just edit the styles.

styles:
  custom_fields:
    info:
      [top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]

This scales well for me.

[Mattias_Persson]

@jompa68

Need some help with setup of my AC entity to be as cool as the FAN entity are, anyone that can help?

@jompa68 Is this what you’re looking for?

https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/290

A different take on designing a Lovelace UI

Thank you so much for your help. I have understand now how this work. [clima]

[lucibuz (Lucian Buzatu)]

Hey,
you can use Free Cam software for screen recording.

https://www.freescreenrecording.com/

[Mariusthvdb (Marius)]

how odd, because that’s what I use too…

could it be it needs an xtra position in the grid, I notice I havent done so. this is my base style:

  styles:
    custom_fields:
      info: &circle_pos
        [top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]

    card:
      - background-color: var(--paper-card-background-color)
      - padding-left: 5px
    name:
      - justify-self: start
      - font-weight: bold
      - font-family: Helvetica
      - font-size: 13px
      - text-overflow: unset
      - word-break: break-word
      - text-overflow: unset
      - white-space: unset
      - text-align: start
    grid:
      - grid-template-areas: '"i" "n" "stateDisplay"' #'"i" "n" "s" "l"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    img_cell:
      - justify-content: start
      - align-items: start

next to some extra styling based on state, but they dont mess with the custom_field: info

update

found that this:

  styles:
    custom_fields:
      info: &circle_pos
        - position: absolute
        - right: 5%
        - top: 10%
        - width: 30%

scales as it should in all dimensions, and perspectives, both desktop and mobile device.

experimenting a bit with where to put the style elements, as I understood RomRider always advices us to use either/or and they now are spread over the above style: field and the

  custom_fields:
    info: >

itself. the

fill="grey" font-size="14" font-weight= "bold"

would then probably best go into the Style field, and all others, related to the SVG box itself left in the custom_field declaration?

anyways, thanks for your reply! Learnt quite a few SVG things today

havent found the code for the color of the circle yet though, could you please help me out there? Id like the color to reflect the hs_color of the lightbulb, or the color_temp if applicable. stroke …

[odiv (Duta Ovidiu)]

@Mattias_Persson I tried to use from your config the button card for TV, but I get this error, can you point me in one way?

[Mattias_Persson]

Sure, but I have no idea by looking at a screenshot.

[odiv (Duta Ovidiu)]

This is the error!
Sorry for taking screenshots, but for now I dont have acces to a computer!

[atomicpapa (Glenn Morrison)]

@Mattias_Persson I have been admiring this for a few months and I must say it is is absolutely beautiful. I now have the time to get this setup for myself and have run into a bit of a snag. I have just added the swipe-card section and I am getting a “Custom element doesn’t exist: swipe-card” error. I have triple checked to make sure the swipe-card resource is showing up in Lovelace Dashboards and I have been unable to find anything related to this problem in the forum, your GitHub or swipe-card’s GitHub. Any ideas anyone?

[Mattias_Persson]

I don’t know. Because it’s only affecting you maybe you’ve made a small error somewhere. Make a new dashboard …8123/config/lovelace/dashboards and try to use minimal setup to see if that works first.

views:
  - title: Test
    path: Test
    cards:
      - type: 'custom:swipe-card'
        cards:
          - type: entity
            entity: light.test

Have you added it to resources in configuration.yaml and is it type: module. Did you install using hacs or do you use hosted / manual? Does it exist in www/community and are you using /hacsfiles/swipe-card/swipe-card.js. Are you using this repo https://github.com/bramkragten/swipe-card. Have you tried to reinstall it. Do you have version 4.0.0 installed or have you tried v3.2.1. What browser do you use, clear cache. Restart Home Assistant/ check logs.

[NovaG]

Your icons are great! Any chance of sharing.

That error relates to it can’t find something. There might be a typo somewhere. Maybe post the whole card info so we can help.

[Roland_Matta]

Hello @Mattias_Persson … Thanks a lot for the repo its a true inspiration!
Im trying to make SVGs work with the button cards. i.e I’ve found this SVG:
view-source:https://upload.wikimedia.org/wikipedia/commons/c/c3/Google-home.svg
If I open it locally it render correctly… however Im not able to use it in the custom_fields in the button cards.
Im not understanding what to clean , and couldnt find a proper documentation for that . Any hints ?

[Frank_Hagenbuch]

Try this:

 <svg viewBox="0 0 242.75 368.85"><defs><style>.cls-1{fill:#e6e6e6;}.cls-2{fill:url(#Unbenannter_Verlauf);}.cls-3{fill:#ccc;}.cls-4{fill:url(#Unbenannter_Verlauf_2);}.cls-5{opacity:0.9;}.cls-14,.cls-16,.cls-5{isolation:isolate;}.cls-6{fill:#2490e4;}.cls-15,.cls-7{fill:none;stroke:#000;}.cls-7{stroke-width:0.02px;}.cls-8{fill:#e41721;}.cls-9{fill:#33d138;}.cls-10{fill:#faf045;}.cls-11{fill:url(#Unbenannter_Verlauf_3);}.cls-12{fill:#333;}.cls-13{fill:url(#Unbenannter_Verlauf_4);}.cls-14{opacity:0.81;}.cls-15{stroke-width:0.26px;}.cls-16{opacity:0.86;}</style><linearGradient id="Unbenannter_Verlauf" x1="-410.54" y1="436.12" x2="-390.76" y2="435.05" gradientTransform="matrix(5.01, 0, 0, -5.01, 2045.58, 2370.57)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#999"/><stop offset="1" stop-color="#999" stop-opacity="0"/></linearGradient><linearGradient id="Unbenannter_Verlauf_2" x1="-1077.92" y1="-115.67" x2="-887" y2="-110.62" gradientTransform="matrix(1.32, 0, 0, -1.32, 1414.25, 142.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7ab9d3"/><stop offset="1" stop-color="#7f9648"/></linearGradient><linearGradient id="Unbenannter_Verlauf_3" x1="-1080.89" y1="-112.34" x2="-975.89" y2="-112.34" gradientTransform="matrix(1.32, 0, 0, -1.32, 1414.25, 142.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#333"/><stop offset="1" stop-color="#333" stop-opacity="0"/></linearGradient><linearGradient id="Unbenannter_Verlauf_4" x1="-1027.44" y1="-156.53" x2="-960.19" y2="-161.09" gradientTransform="matrix(1.32, 0, 0, -1.32, 1414.25, 142.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1a1a1a"/><stop offset="1" stop-color="#666"/></linearGradient></defs><title>layer1</title><g id="Ebene_2" data-name="Ebene 2"><g id="svg8"><g id="layer1"><g id="g4886"><path id="path4551" class="cls-1" d="M16.47,49.94C19.62,156.53-35.1,300.41,39.23,361.13c51.65,8,104.8,12,164,0,83.91-67.74,6.07-244.41,20.08-337.29Z"/><path id="path21" class="cls-2" d="M16.47,49.94C19.62,156.53-35.1,300.41,39.23,361.13c51.65,8,104.8,12,164,0,83.91-67.74,6.07-244.41,20.08-337.29Z"/><ellipse id="path23" class="cls-3" cx="119.87" cy="35.22" rx="103.64" ry="32.44" transform="translate(-3.73 17.01) rotate(-7.99)"/><path id="path27" class="cls-4" d="M240.75,214.78c-43.79,19.28-194,17.59-239.32,4.56-4.43,58.23-.1,110.83,37.8,141.79,51.65,8,104.8,12,164,0,39.15-31.6,43.09-86.91,37.57-146.35Z"/><g id="path29" class="cls-5"><ellipse class="cls-6" cx="131.64" cy="24.64" rx="6.42" ry="1.75" transform="translate(-2.25 21.41) rotate(-9.22)"/><ellipse class="cls-7" cx="131.64" cy="24.64" rx="6.42" ry="1.75" transform="translate(-2.25 21.41) rotate(-9.22)"/></g><g id="ellipse4507" class="cls-5"><ellipse class="cls-8" cx="145.22" cy="36.9" rx="6.42" ry="1.75" transform="translate(-4.04 23.74) rotate(-9.22)"/><ellipse class="cls-7" cx="145.22" cy="36.9" rx="6.42" ry="1.75" transform="translate(-4.04 23.74) rotate(-9.22)"/></g><g id="ellipse4509" class="cls-5"><ellipse class="cls-9" cx="95.49" cy="33.5" rx="6.42" ry="1.75" transform="translate(-4.13 15.73) rotate(-9.22)"/><ellipse class="cls-7" cx="95.49" cy="33.5" rx="6.42" ry="1.75" transform="translate(-4.13 15.73) rotate(-9.22)"/></g><g id="ellipse4511" class="cls-5"><ellipse class="cls-10" cx="107.92" cy="45.59" rx="6.42" ry="1.75" transform="translate(-5.91 17.88) rotate(-9.22)"/><ellipse class="cls-7" cx="107.92" cy="45.59" rx="6.42" ry="1.75" transform="translate(-5.91 17.88) rotate(-9.22)"/></g><path id="path4561" class="cls-11" d="M240.75,214.78c-43.79,19.28-194,17.59-239.32,4.56-4.43,58.23-.1,110.83,37.8,141.79,51.65,8,104.8,12,164,0,39.15-31.6,43.09-86.91,37.57-146.35Z"/><path id="path25" class="cls-12" d="M217.21,347c-65.85,11.75-128.68,8.36-190.79,1.38a91.92,91.92,0,0,0,12.81,12.75c51.65,8,104.8,12,164,0A91.37,91.37,0,0,0,217.21,347Z"/><path id="path4565" class="cls-13" d="M217.21,347c-65.85,11.75-128.68,8.36-190.79,1.38a91.92,91.92,0,0,0,12.81,12.75c51.65,8,104.8,12,164,0A91.37,91.37,0,0,0,217.21,347Z"/><g id="path4585" class="cls-14"><path class="cls-15" d="M1.43,219.34c64.79,12.58,181.56,13.75,239.32-4.56"/></g><g id="path4587" class="cls-14"><path class="cls-15" d="M26.42,348.38c65.25,6.41,129.9,10.28,190.79-1.38"/></g><g id="path4788" class="cls-16"><path class="cls-15" d="M39.23,361.13c55.52,7,110.9,12.81,164,0"/></svg>

[atomicpapa (Glenn Morrison)]

@Mattias_Persson

        cards:
          - type: entity
            entity: light.test

So, the first problem was something simple. A capitalization error for one of the cards. That fixed the initial problem and I now have an actual card showing up, but unfortunately it is red and I can’t read the error.

page 1 ^^^

page 2 ^^^

Should be a page 3 as well, but there isn’t…
Checking for other errors related and also been checking the debug console in Chrome for hints

Thank you for your help!!!

edit: Your suggestion to create a test page with a test card worked to show me that Swipe Card was indeed working. Thank you!

[Roland_Matta]

Thanks a lot it worked! Any hints on what to clean or a good documents that helps me understand how those SVGs are build?

[Frank_Hagenbuch]

A different take on designing a Lovelace UI

Hi Mattias, I manage to customize icons doing the following: download icons in .svg format [iconSVG] modify icon in Inkscape as need it and save it with a different name [ceiling-light0] open the original icon in a text editor and copy the viewBox=“0 0 24 24” and <path d=" …" and paste it in yaml [ceiling-lightcode1] open the modified icon in a text editor and copy the viewBox=“0 0 24 24” and <path d=" …" and paste it in yaml [ceiling-lightcode] the modified y…