A different take on designing a Lovelace UI

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?

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?

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.

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 }}

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.

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

Hmm… Does it show up in your integrations?

Open your Home Assistant instance and show your integrations.

1

documentation thomasloven/hass-browser_mod

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

Not green but here

Yes. I have it installed and have restarted HA.

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

Works for me though

if I Putty into my HomeAssistant and running the command, and I still get all the data from the command so it shuld work right??

Just wanted to ping anyone. Any help appreciated.

Getting a lot of flickering sometimes with the latest updates. Wondering if @Mattias_Persson has experienced this or anyone else using this theme. This issue might be related to that mod-card causes flickering if jinjia2 used for styling · Issue #165 · thomasloven/lovelace-card-mod (github.com)

Guys just sharing some templating for sidebar for Xbox integration. used @Mattias_Persson lights and devices on/off templating code so i barely know what i did and im surprised that it works hahaha but if anyone can improve or correct code be welcome. unfortunately could not template to show game picture and nothing like that, as game entity doesn’t show picture url…

        xbox: |
          <b>
          {%- set player1_on = states('binary_sensor.player1') %}
          {%- set player2_on = states('binary_sensor.player2') %}
          {%- set player1_game = states('sensor.player1_status') %}
          {%- set player2_game = states('sensor.player2_status') %}
          {% if not is_state('sensor.player1_status', 'unknown') %}
            {%- if (player1_on | selectattr('state','eq','on')) and (player2_on | selectattr('state','eq','off')) -%}
              Player1 is playing {{ player1_game | regex_replace(',([^,]*)$') }}.
            {%- elif (player1_on | selectattr('state','eq','off')) and (player2_on | selectattr('state','eq','on')) -%}
              Player2 is playing {{ player2_game | regex_replace(',([^,]*)$') }}.
            {%- elif (player1_on | selectattr('state','eq','on')) and (player2_on | selectattr('state','eq','on')) -%}
              Player1 and PLayer2 are playing {{ player1_game | regex_replace(',([^,]*)$') }}.
            {%- endif %}
          {%- else %}
            <font color='#6a7377'>Nobody is playing...</font>
          {%- endif -%}
          </b>
2 Likes


79 / 5 000

how can i make the sidebar do it? i want to have hours, weather, etc …

how can i make the sidebar do it? i want to have hours, weather, etc …

That is usually caused by the theme not being set to ‘tablet’ under user profile (bottom left).

image

1 Like

I suppose there is no sandbox to develop this UI in? I would like to implement this but do not want to destroy my working dashboard while I get it set up. Any ideas?

You can set up another container with a different port

No issues here, not using jinja styling very much though