A different take on designing a Lovelace UI

Share your Projects!
2155

This now seems right but only the paul person button gets the time set correctly. All others get a “NaNd”

- id: '8423590985012'
  alias: Person Home
  initial_state: true
  trigger:
    - platform: state
      entity_id:
        - person.paul_boutin
        - person.nathalie_boutin
        - person.juliette_boutin
        - person.julien_boutin
      from:
        - home
        - not_home
      to:
        - home
        - not_home
  action:
    - choose:
      - conditions: >
          {{ trigger.entity_id == 'person.paul_boutin' }}
        sequence:
        - service: mqtt.publish
          data:
            topic: homeassistant/persistence/paul_boutin
            payload_template: >
              {{ now() }}
            retain: true
      - conditions: >
          {{ trigger.entity_id == 'person.juliette_boutin' }}
        sequence:
        - service: mqtt.publish
          data:
            topic: homeassistant/persistence/juliette_boutin
            payload_template: >
              {{ now() }}
            retain: true
      - conditions: >
          {{ trigger.entity_id == 'person.julien_boutin' }}
        sequence:
        - service: mqtt.publish
          data:
            topic: homeassistant/persistence/julien_boutin
            payload_template: >
              {{ now() }}
            retain: true
      default:
        - service: mqtt.publish
          data:
            topic: homeassistant/persistence/nathalie_boutin
            payload_template: >
              {{ now() }}
            retain: true
2156

Yes, everything is up-to-date.

Edit: Solved my problem, it reinstalled the popup-light-card, now it works.

1 Like
2157

I don’t see anything wrong. I think you have to wait for a state change (or force a state change in dev-tools) for the mqtt sensors to populate.

I would also indent the - service: mqtt.publish block but that may not matter.

2158

Yes, it started working after a while, thanks.

2159

@Mattias_Persson Any change you can share that handwave icon with green lines? I know i see it in your dashboard but can’t find it anywhere. :slight_smile:

Thx in advance!

2160

i have testet the curl command in a terminal, and there are no problem, I am getting all the date, but still my sensor says unknown… any ideas??

2161

Hello!

First of all, thank you Mattias for sharing the foundation for this dashboard! Out of the 3 I have tried, this is the only one that I have somewhat gotten to work. I am brand new to Home Assistant so I am still digesting how things work.

I am wondering if I can get some clarification on a couple of things:

1: Is there a way to change the icon based on the state of the device? For example, I am able to turn the wifi on or off to certain devices in my network. I have that part working. What I want to do is change the icon between wifi and wifi-off like in the picture below. (For the OCD: I have since made them to match)
Screenshot 2021-12-12 103016

2: In button_card_templates.yml, I see, and have used, that there is a way to add your own custom SVGs to make icons. Is there a way to be able to use the material icons without having to get the SVG paths? (Ex: being able to use mdi:wifi instead of having to use the paths)

3: I am not able to get pop-ups to work at all. I followed the instructions in this post to get started and none of the pop ups are going. If I click a button, nothing happens. For example, I am pretty sure that I have my iRobot vacuum set up correctly, but if I hit the button for it, nothing pops up. If I need to upload my code, let me know so I can scrub things and upload it somewhere.

I am sure I will have more at a later time.

2162

Hi @Mattias_Persson What am I doing wrong? I want to show the volume of media_player.bdv-9200w.
It tells me that state does not exist.

I made some changes and some things stopped working.
hiu-elements, and apexcharts-card.
The files are loading but it doesn’t seem to recognize them

Thanks

2163

I show you an example so you can see how it works

  custom_fields:
    icon: >
      [[[ return entity === undefined ? null : `<img src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`; ]]]
2164

Thanks for the reply.

I am a little confused. I don’t think I can use the icon field in the cards. This is what I am trying using your example:

          - type: custom:button-card
            entity: switch.kids_iphone
            name: iPhone
            template:
              - base
              - [[[ return switch.kids_iphone === on ? "icon_wifi" : "icon_wifi_off" ]]]

When I reload the dashboard, this is what I get: while parsing a flow sequence in "/config/ui-lovelace.yaml", line 125, column 19 expected ',' or ']', but got '?' in "/config/ui-lovelace.yaml", line 125, column 56

Am I using this correctly?

EDIT: After sifting through a few posts, I was able to combine them in to a working form:

          - type: custom:button-card
            entity: switch.kids_iphone
            name: iPhone
            custom_fields:
              icon: >
                [[[ return states['switch.kids_iphone'].state === 'on' ? '<ha-icon icon="mdi:wifi" width="100%"></ha-icon>' : '<ha-icon icon="mdi:wifi-off" width="100%"></ha-icon>' ]]]
            template:
              - base
1 Like
2165

I am still having a ton of trouble getting pop ups to work. I have been reading this thread all day and can not get them to work at all. Here is my configuration.yml:

# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

# Text to speech
tts:
  - platform: google_translate

group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

homeassistant:
  packages: !include_dir_named include #theme

lovelace:
  mode: yaml
  resources: #hacs
    - url: /hacsfiles/bar-card/bar-card.js
      type: module
    - url: /hacsfiles/button-card/button-card.js
      type: module
    - url: /hacsfiles/button-text-card/button-text-card.js
      type: module
    - url: /hacsfiles/custom-sidebar/custom-sidebar.js
      type: module
    - url: /hacsfiles/kiosk-mode/kiosk-mode.js
      type: module
    - url: /hacsfiles/light-entity-card/light-entity-card.js
      type: module
    - url: /hacsfiles/lovelace-card-mod/card-mod.js
      type: module
    - url: /hacsfiles/lovelace-card-tools/card-tools.js
      type: module
    - url: /hacsfiles/lovelace-fold-entity-row/fold-entity-row.js
      type: module
    - url: /hacsfiles/lovelace-hui-element/hui-element.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-state-switch/state-switch.js
      type: module
    - 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/search-card/search-card.js
      type: module
    - url: /hacsfiles/spotify-card/spotify-card.js
      type: module
    - url: /hacsfiles/swipe-card/swipe-card.js
      type: module
    - url: /hacsfiles/upcoming-media-card/upcoming-media-card.js
      type: module
    - url: /hacsfiles/weather-card/weather-card.js
      type: module

browser_mod:
  prefix: browser_

sensor:
  - platform: time_date
    display_options:
      - "time"
      - "date"

Am I just missing a package from HACS or something?

2166

Did you install browser-mod? Check this part of the read me. I missed that at first and couldn’t figure out why the pop-ups weren’t working either.

Edit: Looks like you do have browser-mod installed. Did you restart HA? Only other thing I can think of is did you copy over the popup folder and all the yaml files contained inside it?

2167

Trying to resolve timestamp for fullykiosk_last_app_start with the script below:

    - unique_id: fullykiosk_last_app_start
      icon: mdi:update
      device_class: timestamp
      state: >
        {% set time = states('sensor.samsung_tab_last_app_start') %}
        {{ strptime(time, '%d/%m/%y %H:%M:%S %p') | timestamp_custom | replace(' ','T') | as_datetime | as_local }}

but with warning message :-

Template warning: ‘timestamp_custom’ got invalid input ‘2021-12-12 01:39:16’ when rendering template ‘{% set time = states(‘sensor.samsung_tab_last_app_start’) %} {{ strptime(time, ‘%d/%m/%y %H:%M:%S %p’) | timestamp_custom | replace(’ ‘,‘T’) | as_datetime | as_local }}’ but no default was specified. Currently ‘timestamp_custom’ will return ‘2021-12-12 01:39:16’, however this template will fail to render in Home Assistant core 2022.1

Appreciate for any solution.

2168

Resolved with:-

    - unique_id: fullykiosk_last_app_start
      icon: mdi:update
      device_class: timestamp
      state: >
        {% set time = states('sensor.samsung_tab_last_app_start') %}
        {{ strptime(time, '%d/%m/%y %H:%M:%S %p') | as_timestamp(default=now()) | as_datetime | as_local }}
2169

I would do two things:

  1. Open the debug of the explorer and see if you have any code errors or something that is not loading and the other is to see the home assistant log to see if there is something that is not loaded or with errors.
2170

Noticed that as_timestamp → timestamp_local includes both T and tz

{{ as_timestamp(states('sensor.galaxy_tab_a_last_app_start'), default=0) | timestamp_local(default=0) }}

---
2021-12-12T09:46:44+01:00

but there must be a shorter way to handle dates…

1 Like
2171

Hmm… Does it show up in your integrations?

Open your Home Assistant instance and show your integrations.

1

documentation thomasloven/hass-browser_mod

2172

I’d try the command inside the container docker exec -it homeassistant bash to make sure it’s working on that system

2173

Not green but here

2174

Yes. I have it installed and have restarted HA.

Yes. It only has 1 device listed.
Screenshot 2021-12-14 123943