A different take on designing a Lovelace UI

I am having the same issue, it has been working for a long time, but not anymore

Seems like you’ve got it working, empty cache

Basically the freedom to easily put an element anywhere. The downside is of course that the layout is not responsive for mobile etc but I’m sure that’s possible with layout-card/grid-card/media queries

1 Like

I’ve noticed that as well

1 Like

Yes, downgrade stack-in-card 0.2.0 -> 0.1.1

@soylant

popup-backdrop-filter doesn’t work since like 0.113, use card-mod

I have done that but it wasn’t fixed the issue

I fixed my issue by replacing entity.entity_id].attributes.data[1].fanart by entity.entity_id].attributes.data[1].poster. It works well

I can only downgrade to 0.2.1image

that’s the wrong card…

@Mattias_Persson why I got often this error when i open home the dasboard ?

Logger: frontend.js.latest.202010214
Source: components/system_log/init.py:193
First occurred: 8:27:22 PM (1 occurrences)
Last logged: 8:27:22 PM

Moreover, I have to refresh the dashboard, otherwise I can’t turn on the lights and the markedown at sidebar cannot be displayed

Got it :smile::smile: it’s working again​:+1:

Hej Mathias,

Jag har tittat på din HomeAssistant-design, jag tycker att den är mycket välgjord och skulle också vilja ha den.

Tror du att du kommer att få möjlighet att hjälpa mig installera detta tema via Teamviewer, tyvärr har jag tyvärr inte mycket erfarenhet av det själv.

Hoppas så mycket att du kommer att hjälpa till!

Did you add custom_icons.js? If not, that is your problem. Make sure it is in configuration.yaml (old style) or via UI, Configuration->Lovelace control panel.

1 Like

I used this theme and this ui-lovelace config

title: Title
views:
  - title: My view
    icon: 'mdi:home-assistant'
    popup_cards:
      switch.third_floor_powerstrip_bedroom_usbleft:
        title: 3F USB Left
        card:
          type: entities
          entities:
            - type: 'custom:fold-entity-row'
              head: switch.third_floor_powerstrip_bedroom_usbleft
              entities:
                - entity: input_datetime.3f_bedroom_powerstrip_smartlife_usblefton
                - entity: >-
                    input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnontimer
                - entity: input_datetime.3f_bedroom_powerstrip_smartlife_usbleftoff
                - entity: >-
                    input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnofftimer
                - type: section
                  label: Schedule
                - entity: group.3f_bedroom_powerstrip_smartlife_usbleft_timer
                - entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_monday
                - entity: >-
                    input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_tuesday
                - entity: >-
                    input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_wednesday
                - entity: >-
                    input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_thursday
                - entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_friday
                - entity: >-
                    input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_saturday
                - entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_sunday
    cards:
      - type: entity-button
        entity: switch.third_floor_powerstrip_bedroom_usbleft
        tap_action:
          action: call-service
          service: browser_mod.popup
          service_data: null
          deviceID: this
        hold_action:
          action: call-service
          service: browser_mod.popup
          service_data:
            deviceID: this
            title: 3F USB Left Settings
            card:
              type: entities
              entities:
                - type: 'custom:fold-entity-row'
                  head: switch.third_floor_powerstrip_bedroom_usbleft
                  entities:
                    - entity: input_datetime.3f_bedroom_powerstrip_smartlife_usblefton
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnontimer
                    - entity: >-
                        input_datetime.3f_bedroom_powerstrip_smartlife_usbleftoff
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnofftimer
                    - type: section
                      label: Schedule
                    - entity: group.3f_bedroom_powerstrip_smartlife_usbleft_timer
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_monday
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_tuesday
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_wednesday
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_thursday
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_friday
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_saturday
                    - entity: >-
                        input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_sunday
            large: true

and this card-mod config but to no avail

    - title: card-mod
      cards:
        # Style the card, but use special styles for the header
        - type: entities
          title: Simple configuration
          style: |
            ha-card {
              color: green;
            }
            .card-header {
              color: cyan;
            }
          entities:
            - switch.3f_br_switch_broadlink_mid
            - switch.3f_br_switch_broadlink_sidelight

image
Am I missing something?

Hi there. I don’t know how to edit popup card in order to, for instance, having these rounded borders as @Mattias_Persson did. In general, how can I custom these cards? Where can I find this piece of code? Thanks in advance!

Hi @Frank_Hagenbuch. Could you provide us whole code to have this awesome thermostat button card? thx

1 Like

yes, i do it but it doesn’t work.
if i use custom:tv it works.

Any ideas?

thanks :slight_smile:

I use it a little bit modified now:

lovelace.yaml:

          - type: custom:button-card
            entity: climate.wohnzimmer
            style:
              top: 36%
              left: 14%
              width: 20%
            template: climate

          - type: 'custom:mini-graph-card'
            entities:
              - sensor.heizung_wohnzimmer
            style:
              top: 40%
              left: 14%
              width: 20%
            line_color: blue
            line_width: 8
            font_size: 75
            show:
              name: false
              icon: false
              state: false

template.yaml:

  climate:
    aspect_ratio: 2/1
    show_state: false
    show_icon: false
    show_name: false
    show_current_temperature: true
    show_control: true
    custom_fields:
      room_temp: >
        [[[ const state = entity.attributes.current_temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >${state}°</text></svg>`; ]]]
      room_temp_target: >
        [[[ const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="54%" text-anchor="middle" >${state}°</text></svg>`; ]]]
      room_name: >
        [[[ return entity.attributes.friendly_name ]]]
      mode: >
        [[[ if (entity.state === 'auto') { return '<svg viewBox="0 0 799.36 795.5"><path fill="#9da0a2" d="M61.37,427.36c6...........................24.89Z"/></svg>'; } ]]]
    styles:
      card: *button_styles_card
      custom_fields:
        room_temp: [top: 30%, left: 5%, position: absolute, line-height: 3.25vw, font-size: 2.64vw, font-family: Assistant, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)']
        room_name: [top: 3%, left: 26%, position: absolute, line-height: 3.25vw, font-size: 2.64vw,]
        room_temp_target: [top: 8%, left: 6%, position: absolute, line-height: 1.60vw, font-size: 1.64vw, font-family: Assistant, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)']
        mode: [top: 7%, right: 8%, width: 2.5vw, position: absolute, opacity: 0.8]
    tap_action:
      action: more-info

(can not post the complete code for the SVG here, its to long. if you need it, let me know)

3 Likes

Ahhh. the key is to create to card one above the other!! Thx!

It looks great, nice work!
And I’m looking for something like that for my climate buttons. :smiley:
Can you send me the whole SVG? :slight_smile: