Lovelace card-templater card (Jinja2 card templating in Lovelace!)

Is it only me thinking this sort of thing should be done in the backend with a template sensor?

Just trying to update this from Installed: 0.0.7 to 0.0.9 and get error
An error ocoured while processing
No module named ‘queueman’

Tried to step upgrade to 0.0.8 and get the same error.

Do I need to log an issue in Github?

I don’t use queueman in this card and that error looks like a Python error so, if it happens while trying to update, it looks more like an error in HACS (HACS does use the queueman package).

Thanks for the reply and for the project Steven. I will do some trouble shooting there.

Thank you for this awesome card. I was racking my brain for 3 days trying to get states into name: fields. I tried to use config-tempate-card but couldn’t get the syntax right, but yours just worked. Thank you!

Hi all!
I’m trying to template the bar-card, dynamically changing how the graph is displayed… if possible…
Based on reading I come up with following code for changing the target (2 charts for direct comparison, second one in the stack is actually templated):

type: 'custom:vertical-stack-in-card'
horizontal: true
cards:
  - type: 'custom:card-templater'
    card:
      type: 'custom:bar-card'
      entity: sensor.temp_max_1
      direction: up
      width: 40%
      height: 150
      min: 0
      max: 30
      target: 10
      positions:
        value: outside
        name: 'off'
        icon: 'off'
  - type: 'custom:card-templater'
    card:
      type: 'custom:bar-card'
      entity: sensor.temp_max_1
      direction: up
      width: 40%
      height: 150
      min: 0
      max: 30
      target_template: '{{ states(''input_number.watering_cycle'')|float}}'
      positions:
        value: outside
        name: 'off'
        icon: 'off'

Which gives following result:

Screenshot 2020-05-23 at 18.47.07

As you can see it does not work… Graph on the right that should have target lowered to 4 is not showing at all, instead I get some strange highlight line at the top of the graph. It might mean that it is somehow working (something changing in bart-card confirguration), but the way I desire. Any idea?

I think it may be due to the templating engine always returning a string. To confirm this, could you try changing the non-templated one to have target: '10' instead of target: 10 and see if it breaks it.
If that is the issue, I will need to work out how to solve it. I already implemented a fix for Boolean values (it casts “true” or “false” to a Boolean), but it won’t be as simple for integers or floats since it may depend on what the underlying card is expecting).

Edit: I noticed that you are missing the entities option for the templater, it should be something like this:

- type: 'custom:card-templater'
    card:
      type: 'custom:bar-card'
      entity: sensor.temp_max_1
      direction: up
      width: 40%
      height: 150
      min: 0
      max: 30
      target_template: '{{ states(''input_number.watering_cycle'')|float}}'
      positions:
        value: outside
        name: 'off'
        icon: 'off'
  entities:
    - input_number.watering_cycle

That is currently needed so that it knows what entities to monitor for changes when processing the template.

Hi many thanks to Steven for making this card! very nice to see how easy you can apply tamplates. But I ran into a problem so hope you can help. I don’t know if it’s a bug or my setup today the question here:

I use the template card together with the pie chart, now it seems that the template card is getting in the way of real time updating of the pie chart. As soon as I apply a template the Pie chart only refreshes when refreshing the whole page. Is this something I can set?

type: 'custom:card-templater'
card:
  type: 'custom:pie-chart-card'
  entities:
    - entity: counter.negative_hm2
      name: Negative
    - entity: counter.neutral_2_hm2
      name: Neutral
    - entity: counter.neutral_1_hm2
      name: Neutral
    - entity: counter.positive_hm2
      name: Positief
  title_template: '{{ states(''input_text.hm1'') }}'
  total_amount: sensor.hm2
entity: input_text.hm1

I have run all the updates, use hassIO via virtualbox and edit and open in chrome.

hope you can help!
cheers Luuk

Try it like this and see if it helps:

type: 'custom:card-templater'
card:
  type: 'custom:pie-chart-card'
  entities:
    - entity: counter.negative_hm2
      name: Negative
    - entity: counter.neutral_2_hm2
      name: Neutral
    - entity: counter.neutral_1_hm2
      name: Neutral
    - entity: counter.positive_hm2
      name: Positief
  title_template: '{{ states(''input_text.hm1'') }}'
  total_amount: sensor.hm2
entities:
  - input_text.hm1

hey! tnx for the fast reply, its to bad it dos not work i tryd to reboot and then test is but that did not work ether, is thare any place whare the card runst that is not real time?

cheers Luuk

Am using card-templater for the past 4+ months and it solved my needs. Thank you for that. But the page where the card has been using is getting crashed frequently. The only way is to refresh for web and restart the app in case of mobile. Could you please let me know what’s wrong?.

WebSocket is already in CLOSING or CLOSED state.

sendMessage @ bootstrap:2
(anonymous) @ bootstrap:2
subscribeMessage @ bootstrap:2
(anonymous) @ lovelace-card-templater.js:10
(anonymous) @ lovelace-card-templater.js:10
parseTemplate @ lovelace-card-templater.js:10
applyTemplate @ lovelace-card-templater.js:10
getCardConfig @ lovelace-card-templater.js:10
getCardConfig @ lovelace-card-templater.js:10
getCardConfig @ lovelace-card-templater.js:10
set hass @ lovelace-card-templater.js:10
(anonymous) @ hui-view.ts:51
value @ hui-view.ts:51
performUpdate @ bootstrap:2
_enqueueUpdate @ bootstrap:2

My config:

card:
  entities:
    - icon: 'mdi:router-wireless-settings'
      name: DLink DHP1565 - Access Point
      type: weblink
      url_template: 'http://{{ states.device_tracker.dlinkap1.attributes.ip }}/'
    - icon: 'mdi:router-wireless-settings'
      name: DLink DIR655 - Access Point
      type: weblink
      url_template: 'http://{{ states.device_tracker.dlinkap2.attributes.ip }}/'
    - icon: 'mdi:router-wireless-settings'
      name: TP-Link TL-WA850RE - Range Extender
      type: weblink
      url_template: 'http://{{ states.device_tracker.tplinkre1.attributes.ip }}/'
    - icon: 'mdi:router-wireless-settings'
      name: Comfast CF-WR150N - Access Point
      type: weblink
      url_template: 'http://{{ states.device_tracker.comfastap1.attributes.ip }}/'
    - icon: 'mdi:router-wireless-settings'
      name: DLink DIR816L - Repeater
      type: weblink
      url_template: 'http://{{ states.device_tracker.dlinkre1.attributes.ip }}/'
  show_header_toggle: false
  title: Routers/Extenders
  type: entities
entities:
  - device_tracker.dlinkap1
  - device_tracker.dlinkap2
  - device_tracker.tplinkre1
  - device_tracker.comfastap1
  - device_tracker.dlinkre1
type: 'custom:card-templater'

The only thing I can think of is if you have briefly lost access to the Home Assistant server (do you get the “Connection lost. Reconnection…” popup?) which may interrupt the WebSocket connection it needs.

I’ll need to see if I can reproduce the issue first, and then I may be able to implement a fix to handle it.

1 Like

Yes, you are correct. I get a popup on the left bottom which says Connection lost…

Here is an annoying thing that happens occasionally on refreshing the frontend or switching between tabs. Another refresh will always fix it it tho. It just started happening after I updated to v110.

ex1

I get it on one other card (state-switch) with a very similar error and a refresh clears that one up too.

ex2

I know that state-switch isn’t one of yours and I plan on posting this to that thread too but I thought it might give you more insight as to what could be causing it.

Hi @chipware,
this looks awesome, i wanted to check with you on how you doing the calculation for the cost . Are you setting up some custom entities based on reading you are getting. If so possible to share your example :slightly_smiling_face:

@joiboi

You have to turn watts into KWH, then KWH into Cost by multiplying by your utility’s cost per KWH. So:

In sensors.yaml:

- platform: integration
  source: sensor.centralite_3210_l_d07f4f0b_electrical_measurement
  name: "Server Plug Kwh"
  unit_prefix: k
  method: left
  round: 2

In utility_meter.yaml:

server_plug_kwh_daily:
  name: "Server Plug Kwh Daily"
  source: sensor.server_plug_kwh
  offset: 00:00:01
  cycle: daily

server_plug_kwh_monthly:
  name: "Server Plug Kwh Monthly"
  source: sensor.server_plug_kwh
  cycle: monthly
  offset:
    days: 1

That will accumulate KWH daily and monthly, resetting at midnight and the first of the month.

Then back in sensors.yaml:

- platform: template
  sensors:
    server_plug_cost_daily:
      friendly_name: Server Plug Cost Daily
      unit_of_measurement: '$' 
      value_template: "{{ (0.10853 * states('sensor.server_plug_kwh_daily') | float) | round(2) }}"
    server_plug_cost_monthly:
      friendly_name: Server Plug Cost Monthly
      unit_of_measurement: '$'
      value_template: "{{ (0.10853 * states('sensor.server_plug_kwh_monthly') | float) | round(2) }}"
1 Like

Hi @chipware,
Appreciate your reply and the same code you are using :smiley:

i currently am using some plugs which is configured via ESPhome. it gives me both Wattage value ( in Watts) and also a daily_energy (in Kwh) , so the plug keeps a cumulative value of the Kwh, although i found if i were to remove the plug this value is set to “0”.

i am guessing the best approach would be to take the “raw” watt value and and create a new template sensor to give me the watt ==> Kwh followed by applying the cost factor.

in your example above , i was wondering with the “sensor.centralite_3210_l_d07f4f0b_electrical_measurement” , do you get a Kwh directly from the sensor so are you also going through a conversion within Home assistant?

He s using the integration sensor to obtain energy from power:

- platform: integration
  source: sensor.centralite_3210_l_d07f4f0b_electrical_measurement
  name: "Server Plug Kwh"
  unit_prefix: k
  method: left
  round: 2

Please note the choice of integration method is critical for getting sensible values from this sensor. See which method to select here:

2 Likes

thanks @tom_l explanation :smiley: , its making sense , time to implement and see how it goes :smiley:

New in home assistant. Trying to do garbage collection (https://github.com/bruxy70/Garbage-Collection) and can not get the the days left to display. Wonder if anyone would know what I’m doing wrong. If I go to developer tools-templates I can see the correct data but they will now show on the png.