A different take on designing a Lovelace UI

Frank_Hagenbuch · April 1, 2020, 8:31am

Yes. If you want, I can make a Button without the name under it for on and of.

poudenes · April 1, 2020, 9:06am

I see new ways, have PS as well. Can create my own… but yours are very nice as well!!

simposium · April 2, 2020, 4:30pm

Hi All

First of all thanks for sharing all the information.

In my case i try to replicate the configuration for this nice designig but im strugelling with the popup section

See below a basic example for the popup configuration:
config_popup

Im not able to display propertly the diferent entities on the card because i receive below error
error_popup

Would be really nice if you share with me the configuration about your popup, i tried to follow the configuration on github for @Mattias_Persson but is not working for me at all even if i change the entity and so on (https://github.com/matt8707/hass-config/tree/master/popup)

As and example below from the github repository not work for me

action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: sensor.hass_version_template
- entity: switch.watchtower
icon: ‘mdi:lighthouse-on’
- entity: sensor.hass_release_template
- entity: sensor.home_assistant_v2_db
icon: ‘mdi:database’
name: Databas
- entity: sensor.home_assistant_log
icon: ‘mdi:file-document’
name: Loggfil
- entity: sensor.docker_uptime
name: Senaste omstart
icon: ‘mdi:clock’

Mattias_Persson · April 2, 2020, 5:01pm

“No card type configured” error because you didn’t specify card type on line 6

action: call-service
service: browser_mod.popup
service_data:
  title: Home Assistant
  card:
    type: horizontal-stack
    cards:
      - entities:
          - entity: sensor.hass_version_latest
          - entity: sensor.last_boot
        type: entities
      - entities:
          - entity: sensor.hass_version_latest
          - entity: sensor.last_boot
        type: entities

simposium · April 4, 2020, 12:10pm

@Mattias_Persson really apreciated your help! now start working.

Today i just start to play arround with the background image and is incredible how stop working when i tried to change. looks like is not able to load from the folter \config\www\background.png

Did you facing before such type of issue? can be the case that any of the resources is not load properly? Im not able to found any log information about that?

See below the simple configuration, and always really apreciated your help!

custom_header:
kiosk_mode: false

resources:

type: module
url: /community_plugin/lovelace-card-preloader/lovelace-card-preloader.js
type: module
url: /community_plugin/lovelace-layout-card/layout-card.js
type: module
url: /community_plugin/custom-header/custom-header.js
type: js
url: /community_plugin/bar-card/bar-card.js
type: module
url: /community_plugin/button-card/button-card.js
type: module
url: /community_plugin/button-entity-row/button-entity-row.js
type: module
url: /community_plugin/circle-sensor-card/circle-sensor-card.js
type: js
url: /community_plugin/light-entity-card/light-entity-card.js
type: module
url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
url: /community_plugin/lovelace-card-tools/card-tools.js
type: module
url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
type: module
url: /community_plugin/mini-media-player/mini-media-player-bundle.js
type: module
url: /community_plugin/swipe-card/swipe-card.js
type: js
url: /community_plugin/upcoming-media-card/upcoming-media-card.js
type: js
url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
type: module
url: /community_plugin/popup-backdrop-filter/popup-backdrop-filter.js
type: js
url: /community_plugin/hass-bha-icons/hass-bha-icons.js
type: js
url: /community_plugin/light-slider-card.js

preload:

markdown
conditional
map
entities
iframe

title: Casa
views:

badges: []
panel: true
path: default_view
title: Home
cards:

type: picture-elements
image: /local/background.png

style: |
ha-card {
height: calc(100vh) !important;
width: auto !important;
}
elements:
###########################################
### SideBar Time
###########################################

  ###########################################
  ### Hora
  ###########################################
  - type: state-label
    entity: sensor.time
    hold_action:
      action: none
    style:
      color: 'rgba(255, 255, 255, 0.7)'
      font-family: SF Text
      font-size: 5.41vw
      font-weight: 600
      left: 5.5%
      letter-spacing: '-0.05vw'
      max-width: 1px
      pointer-events: none
      top: 7%
    tap_action:
      action: none

Mattias_Persson · April 4, 2020, 12:32pm

Please read this first

Vasco · April 4, 2020, 12:42pm

Sorry for asking, but why are you linking to that topic? Is it because you saw the line “now start working”?

If so, assuming here, but if i read the posts from @simposium i notice the lack of propper grammar in his sentences. I believe he’s using some kind of translation tool weird things can happen there.

I am assuming again he tried to say that it started to work again. Not trying to tell you to work.

Just trying to help out clear out some stuff

simposium · April 4, 2020, 12:56pm

Sorry for my gramar… i just try to said that from time to time the background image under the picture element not load

Mattias_Persson · April 4, 2020, 1:01pm

I understand. I’m not criticizing your grammar I’m asking you to read the post I linked because it shows you how to properly format code.

RichardU · April 4, 2020, 1:01pm

Don’t know if this will help, but a recent HASS update requires moving resources to: configuration.yaml.

Like this:

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/layout-card.js
      type: module
...

Mattias_Persson · April 4, 2020, 1:37pm

It’s not required yet.

This awesome new feature comes with a deprecation if you use Lovelace in manual YAML mode: You need to move the resources section from your ui-lovelace.yaml to the lovelace: section in configuration.yaml . It is not a breaking change yet; we still load them from the previous location if we didn’t find anything in the lovelace: section, however, this fallback is being removed in a future version.

simposium · April 4, 2020, 2:01pm

Thanks for the answer. Does it means that the configuration in your github is valid to load resources from configuration.yaml?

I read many documentation and when i ijust check the config looks fine, but still not unable to load the background. Again thanks for your patience and for your time

lovelace:
mode: yaml
resources:
[ {‘url’:’/hacsfiles/bar-card/bar-card.js’, ‘type’:‘js’},
{‘url’:’/hacsfiles/button-card/button-card.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/button-entity-row/button-entity-row.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/custom-header/custom-header.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/light-entity-card/light-entity-card.js’, ‘type’:‘js’},
{‘url’:’/hacsfiles/lovelace-card-mod/card-mod.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/lovelace-card-preloader/lovelace-card-preloader.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/lovelace-layout-card/layout-card.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/lovelace-slider-entity-row/slider-entity-row.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/lovelace-valetudo-map-card/valetudo-map-card.js’, ‘type’:‘js’},
{‘url’:’/hacsfiles/mini-graph-card/mini-graph-card-bundle.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/mini-media-player/mini-media-player-bundle.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/popup-backdrop-filter/popup-backdrop-filter.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/stack-in-card/stack-in-card.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/swipe-card/swipe-card.js’, ‘type’:‘module’},
{‘url’:’/hacsfiles/upcoming-media-card/upcoming-media-card.js’, ‘type’:‘js’},

  {'url':'/hacsfiles/mod/circle-sensor-card.js?v=1.2.0',                  'type':'module'},
  {'url':'/hacsfiles/mod/light-slider-card.js?v=3.2.2',                   'type':'js'},
  {'url':'/hacsfiles/mod/hass-bha-icons.js?v=f015ee3',                    'type':'js'},
  {'url':'/local/font.css',                                               'type':'css'} ]

venkattetali · April 4, 2020, 2:07pm

hello Mattias your UI is simply superb
I would like to install it but iam new to home assistant so can you help me some tutorials.
So that i can follow those and install your interface.

simposium · April 4, 2020, 2:09pm

This would be really nice … i just read all the files try to adap but is quite hard…

willowone · April 6, 2020, 6:56am

Taken so much inspiration from this, particularly loving hiding things away in pop-ups to keep the UI clean. Thanks so much for the details and config share

doktordoc · April 7, 2020, 9:21am

how to get buttons with title above, just like in first post
really like it

janseppenrade2 · April 9, 2020, 3:42pm

Thank you for your great work @Mattias_Persson!
I’m working on a copy of your design but having trouble with adding the popups to my light switches.

I get the following error:

unknown tag !<!include> at line

Do you know what I am doing wrong?

My code:

entity: light.office_desk
type: 'custom:button-card'
name: Desk
hold_action: !include popup/test.yaml
template: light
custom_fields:
  icon: >
    <svg viewBox="0 0 50 50"> <path d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3
    0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
    .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
    .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
    .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9
    5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7
    1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"
    fill="var(--primary-color)"/> <path d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0
    7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9
    6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2
    0.3.3.8.7 1.1z" fill="var(--button-card-light-color)"/> </svg>

Mattias_Persson · April 9, 2020, 7:22pm

Hard to say. Does test.yaml exist in folder popup. Do you have browser_mod installed. Test without !include and have the service call under hold action

Frank_Hagenbuch · April 10, 2020, 8:34am

Hi Matthias , did your state_image on the person tracking work at the moment? It works for me a time but now it dont show the “not_home” picture. The “home” picture is ok.

Mattias_Persson · April 11, 2020, 11:20am

I don’t know, I’m not using state images anymore