📝 100% Templatable Lovelace Configurations

SeLLeRoNe · April 16, 2021, 7:54am

Yep I agree, but theoritically those entities are coming from an Integration so they should always have the same format across devices

I’ve tested you N/A option and works great! Thanks for that!

No biggy, I can simply revert

I know I can use templates but I’m trying to see if I can manage to have things working without having to create custom entities to reach a goal, so that others whom read my config don’t go “too crazy” (GitHub - SeLLeRoNe/HA-Config: Home Assistant Configuration If interested)

DavidFW1960 · April 16, 2021, 9:20am

Well that was where this all started and a requirement for what I was looking for.
Browser-mod?? Yet another custom-card… pass… that was the main reason I didn’t want to use the decluttering card!! I already had to retire a card I was using due to a card becoming unsupported so I am sensitive to adding more! But Romrider is very active and I do use other cards of his so low risk. Same with Thomas.

Well I could but for no real benefit really. I could also rename the firmware and status sensor from coffee_maker to sonoff1_2914 but the benefit would outweigh the gain/pain…

Well appreciated anyway… You guys are both outstanding.

DavidFW1960 · April 16, 2021, 9:23am

Same… I do try to avoid creating more sensors which is one of the benefits of this template card… attributes become more accessible without having to create sensors from them.

Ildar_Gabdullin · April 16, 2021, 9:28am

David, as I told you in one of my first posts, I know nothing about MQTT & Tasmota.
In one of your first examples I saw these entities:

              - sensor.sonoff1_2914_rssi
              - sensor.sonoff1_2914_signal
              - sensor.sonoff1_2914_wifi_connect_count
              - sensor.coffee_maker_firmware
              - sensor.coffee_maker_status

Based on these entities I simulated your case using these test sensors (for two devices - "test_david_1" & "test_david_2"):

input_number:

  test_david_1_device:
    min: 0
    max: 150
    step: 1
    mode: slider

  test_david_1_device_status:
    min: 0
    max: 10
    step: 1
    mode: slider

  test_david_1_wifi_connect_count:
    min: 0
    max: 10
    step: 1
    mode: slider

  test_david_1_signal:
    min: -100
    max: 0
    step: 1
    mode: slider

  test_david_1_rssi:
    min: 0
    max: 100
    step: 1
    mode: slider

###############################

sensor:
  - platform: template
    sensors:

      test_david_1_device:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_device' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"

      test_david_1_device_status:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_device_status' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"

      test_david_1_wifi_connect_count:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_wifi_connect_count' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"

      test_david_1_signal:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_signal' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"
        unit_of_measurement: "dB"

      test_david_1_rssi:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_rssi' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"
        unit_of_measurement: "%"

Then played with values of "input_number" entities while testing that "multiple-entity-row" with no idea about actual meaning of these values:

I hope that one day I will be ready to use this nice card which we created together.
By this moment I hope to understand which entities are required.

I do agree.Of course, in some cases I need to create template sensors instead of using attributes anyway - basically for creating graphs.

DavidFW1960 · April 16, 2021, 9:31am

No criticism implied or intended by me… I hope you didn’t think I was unhappy…

Ildar_Gabdullin · April 16, 2021, 9:34am

No no no, I just wanted to tell that I tried to simulate with no understanding about physical meaning.
May I ask you - which entities are finally required?

DavidFW1960 · April 16, 2021, 9:54am

The ones I posted with my latest screenshots and config are needed.

SeLLeRoNe · April 16, 2021, 10:37am

Sorry I wasn’t aware of the initial reasons
I like to use it because I can show exactly what I need to, it’s not perfect… but can be nice

yomotherboard · April 25, 2021, 9:43pm

Is there a way to access the url from the card? I am trying to pass in url parameters to set the entity for a scheduler card. For example, to display a scheduler card for the living room thermostat, I would use url https://my-hass-domain/schedule-entity?e=climate.living_room.

It seems like I cannot access window.location.href from the config-template-card. But maybe I am missing something.

Here is my attempt at the card:

- type: custom:config-template-card
  variables:
    getParameter: | 
      query => { 
          var vars = {};
          url = window.location.href;
          var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
              vars[key] = value;
          });
          return vars[query];
      } 
  entities:
    - '${getParameter("e")}'
  card:
    type: custom:scheduler-card
    title: false
    discover_existing: false
    include:
      - '${vars[0]}'

Also it seems like it would be very useful if passing url defined variables into config-template-card could be included as a feature/turned on in config. I am interested in working on this myself if I can, but I thought I’d share the idea in case anymore more talented liked the idea and could easily implement it.

adrien.b · May 2, 2021, 10:04am

Hi there,

I created an iframe card with this mod, that changes the theme of a grafana dashboard shown in the panel from light to dark based on sun’s state.

type: 'custom:config-template-card'
entities:
  - sun.sun
variables:
  SUN_STATE: states['sun.sun'].state
card:
  type: 'custom:hui-iframe-card'
  url: '${SUN_STATE === "above_horizon" ? "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1&theme=light" : "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1"}'
  aspect_ratio: 500%

On the mobile app, it works perfectly at the beginning, showing the Grafana dashboard, and switching the theme when the sun’s state is changed. But it wasn’t working on the web browser.
So I tried to refresh the cache of the browser, but it didn’t make it work. So I tried to edit the code again, and I saw that the code was reformatted that way :

type: 'custom:config-template-card'
entities:
  - sun.sun
variables:
  SUN_STATE: 'states[''sun.sun''].state'
card:
  type: 'custom:hui-iframe-card'
  url: >-
    ${SUN_STATE === "above_horizon" ?
    "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1&theme=light" :
    "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1"}
  aspect_ratio: 500%

I tried to reformat like original, but it didn’t help. On the mobile app it was still working, but then I disabled my WiFi to connect through 4G network and web access through Nabu Casa, and then it started failing, and I could not get it to work again even on WiFi. I always get the same message

Custom element doesn’t exist: hui-iframe-card.
type: ‘custom:hui-iframe-card’
url: ‘http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1&theme=light’
aspect_ratio: 500%

What’s wrong with this card ?

Thanks

Ildar_Gabdullin · May 2, 2021, 11:18am

Check simple things on mobile and web client:

Without config template card.
Without that “hui” card, use a stock card.

adrien.b · May 2, 2021, 11:57am

I tried with the stock iframe card, and it works when connected to my local network, not from web access. That’s expected, the URL is parsed from browser side, so if the phone/PC/tablet or whatever is not connected to the same private network than the Grafana server, it won’t work.

However, I can’t figure why the original code first worked on the mobile app while on LAN, but not on the Chrome browser on the same phone or on the PC connected to the same network.

When using stock iframe card, it works on all machines in the LAN.

Ildar_Gabdullin · May 2, 2021, 1:15pm

I suggest you to create a separate thread for this since this is not related to config-template-card

adrien.b · May 2, 2021, 1:36pm

No ; please, forget the local/web access issue, this is understood, I’ll need to add SSL/TLS and forward my Grafana server port on my router for a DynDNS access to be able to use a https://something.dyndns_provider.com:XXXX/… url externally.

My concern is about why this code :

type: 'custom:config-template-card'
entities:
  - sun.sun
variables:
  SUN_STATE: states['sun.sun'].state
card:
  type: 'custom:hui-iframe-card'
  url: '${SUN_STATE === "above_horizon" ? "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1&theme=light" : "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1"}'
  aspect_ratio: 500%

is changed by Lovelace to :

type: 'custom:config-template-card'
entities:
  - sun.sun
variables:
  SUN_STATE: 'states[''sun.sun''].state'
card:
  type: 'custom:hui-iframe-card'
  url: >-
    ${SUN_STATE === "above_horizon" ?
    "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1&theme=light" :
    "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1"}
  aspect_ratio: 500%

and finally returns the error :

Custom element doesn’t exist: hui-iframe-card.
type: ‘custom:hui-iframe-card’
url: ‘http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1&theme=light’
aspect_ratio: 500%

And why it started to fail ONLY when I tried to access this page from the browser on my PC using only LAN access ?
It had direct access to the 192.168.1.29 address from my Raspberry Pi 4 with Raspbian Buster, that runs Home Assistant Container in Docker, with also all my other Docker containers (zwave-js2mqtt, MQTT, HASS Configurator, influxDB, Chronograf, Telegraf, Grafana and Portainer). This PC is able to open Grafana dashboard live from the server, so it should not be an URL access issue.

Ildar_Gabdullin · May 2, 2021, 5:10pm

This is correct, it is always reformatted in my setup.

Check this custom card without config-template-card. Probably some issues with that custom card. Do not use it myself, cannot reproduce.
Are you sure you should use this hui-iframe-card??? Cannot even find it.

Check these urls without config-template-card.
Also google about X-Frame header

adrien.b · May 2, 2021, 9:08pm

I tried replacing the hui-iframe-card with a standard iframe card but still inside the custom config card, and it worked too. I thought the standard iframe wouldn’t work with the custom config and URL template.
Now it works perfectly.

I could confirm that when using my first code with hui-iframe-card in lovelace in my browser, it works till I refresh the browser’s cache ; then it fails saying the hui-iframe-card doesn’t exist.

This code works :

type: 'custom:config-template-card'
entities:
  - sun.sun
variables:
  SUN_STATE: 'states[''sun.sun''].state'
card:
  type: iframe
  url: >-
    ${SUN_STATE === "above_horizon" ?
    "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1&theme=light" :
    "http://192.168.1.29:4000/d/bf1i7YRRz/temperatures?orgId=1"}
  aspect_ratio: 100%

Now I can display a complete themed Grafana dashboard with nice charts as a full panel in Lovelace.
Thanks

Ildar_Gabdullin · May 2, 2021, 9:20pm

In my practice any card can work inside config-template-card.
My greetings)))

manjotsc · May 13, 2021, 6:26am

How would I integrate state_icon into this? New to home assistant

type: grid
cards:
  - type: grid
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.living_room_light
        icon: 'hass:lightbulb'
        show_name: true
        show_state: true
        name: Tube
        card_mod:
          style: |
            ha-card { 
              border-radius: 200px;
              }
      - type: button
        tap_action:
          action: toggle
        entity: light.living_room_leds
        icon: 'hass:lightbulb-outline'
        show_name: true
        show_state: true
        name: LEDs
        card_mod:
          style: |
            ha-card { 
              border-radius: 200px;
              }
    columns: 2
columns: 1
square: false

joshlawless · May 25, 2021, 9:14pm

I have an automation which updates the value of input_text:last_added_file with the local path of a surveillance station recording. That automation works fine, as far as I can see, because in the developer templating tab, I can check the value of {{states.input_text.last_added_file.state}} and it correctly resolves to /media/recording/Front Porch/20210525PM/Front Porch-20210525-145001-1621975801.mp4

What I’d like to do is have that automation feed a card in my frontend, so I can always access and play the most recent motion-detection recording, and it seems like this should work:

type: 'custom:config-template-card'
entities:
  - 'input_text.last_added_file'
card:
  type: iframe
  url: '${states.input_text.last_added_file.state}'

but the card doesn’t display anything

Using a static URL works fine, though:

card:
  type: iframe
  url: '/media/recording/Front Porch/20210525PM/Front Porch-20210525-145001-1621975801.mp4'

Can anyone help me understand what I’m doing wrong?

Ildar_Gabdullin · May 25, 2021, 9:23pm

You are trying to use a format which may be used for the “configuration.yaml” file, for the “Templates” window - but this will not work in "config-template-card".
Check the docs, especially code examples - you should use smth like this:

states['input_text.last_added_file'].state

BTW, even in the “configuration.yaml” file etc you should not use that "states.input_text.last_added_file.state":