Lovelace: Flexible Horseshoe Card (Donut graph, flexible layout, multiple entities, actions & animations), including next-gen experimental examples

daconrad0 · September 22, 2019, 12:31pm

Maybe you can see my error. I have reduced the card to base and still cannot get it to work. I only have one animation.

animations:
  entity.1:
    - state: 'on'
      icons:
        - animation_id: 1
          styles:
            - fill: red;
    - state: 'off'
      icons:
        - animation_id: 1
          styles:
            - fill: black;
            - opacity: 0.2;
color_stops:
  '10': green
  '45': orange
  '50': red
entities:
  - attribute: current_humidity
    entity: climate.south_main
    unit: '%'
  - entity: switch.south_dehumidifier
    icon: 'mdi:cup-water'
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.south_dehumidifier
horseshoe_scale:
  max: 60
  min: 30
layout:
  icons:
    - animation_id: 1
      entity_index: 1
      icon_size: 3.5
      id: 0
      xpos: 30
      ypos: 55
  states:
    - entity_index: 0
      id: 0
      styles:
        - font-size: 2.5em;
        - opacity: 0.9;
      uom_font_size: 1.5
      xpos: 50
      ypos: 28
show:
  horseshoe_style: colorstop
type: 'custom:flex-horseshoe-card'

Any help would be great and I love this card.

AmoebeLabs · September 22, 2019, 3:41pm

That is weird. I can’t see anything wrong looking at it. It looks very much the same as the light example.

Some assumptions & questions:

I assume you can switch your dehumidifier while clicking the icon?
The states of the switch are indeed ‘on’ and ‘off’?
If you hit F5, the icon shows the expected state?

Update:
I can’t reproduce the problem with your example.
I replaced the switch with my light:
‘off’ state:

‘on’ state:

I used this definition:

        - animations:
            entity.1:
              - state: 'on'
                icons:
                  - animation_id: 1
                    styles:
                      - fill: red;
              - state: 'off'
                icons:
                  - animation_id: 1
                    styles:
                      - fill: black;
                      - opacity: 0.2;
          color_stops:
            '10': green
            '45': orange
            '50': red
          entities:
            - entity: sensor.disk_use
              decimals: 1
              icon: mdi:harddisk
            - entity: light.1st_floor_hall_light 
              icon: mdi:lightbulb
              tap_action:
                action: call-service
                service: light.toggle
                service_data: { "entity_id" : "light.1st_floor_hall_light" }
          horseshoe_scale:
            max: 60
            min: 30
          layout:
            icons:
              - animation_id: 1
                entity_index: 1
                icon_size: 3.5
                id: 0
                xpos: 30
                ypos: 55
            states:
              - entity_index: 1
                id: 0
                styles:
                  - font-size: 2.5em;
                  - opacity: 0.9;
                xpos: 50
                ypos: 28
          show:
            horseshoe_style: colorstop
          type: 'custom:flex-horseshoe-card'

dac21 · September 22, 2019, 4:29pm

Thanks for your quick response.

Yes you can switch the dehumidifier on/off by clicking the icon
Yes the states for the swtich are on/off
Yes, when I hit F5 it updates

When I changed the line in the code, from false to true it did not make any difference. It still is not working.

AmoebeLabs · September 22, 2019, 4:35pm

I did update my previous answer. I made a mistake with your example (wrong entity_index). I posted the defininition I have used now including screenshots. I can switch my light and it updates immediately.

Question 1:
Does the state displayed change from on to off? As this reacts to the same update as the icon should…

Question 2:
Is you icon the same as the primary text color (probably white or black)? Or does it display the expected color, but not real-time, but only after hitting F5?
What browser are you using?

Question 3:
Do you have any error in the hass log? Or if you are using Chrome and check the inspector (right mouse button, → Inspector, or ctrl-shift-I), do you see errors?

dac21 · September 22, 2019, 5:03pm

Mars,

Yes the state is changing when the icon is clicked. I confirmed with Developer/States
Yes the icon displays correctly when using F5. Yes the icon is black and white. Since I am not using a theme, these should be my primary text colors.
I am using Chrome but also have the same issue on the IOS app
I do not see any errors in the logs or inspector.

Not sure it is matters but the switch is a value template created switch. I don’t have any lights defined.

Dennis

AmoebeLabs · September 22, 2019, 7:15pm

Template sensors have a history of not updating, it’s even a breaking change.

github.com/home-assistant/core

Binary template sensor not updating but working in dev template editor

opened 03:45PM - 09 Dec 18 UTC

closed 06:35PM - 09 Dec 18 UTC

w1ll1am23

**Home Assistant release with the issue:**  0.83.3 **Last working Home Assistant release (if known):** I want to say this started with 0.83 but not 100% **Operating environment (Hass.io/Docker/Windows/etc.):**  Ubuntu 18.04 running docker **Component/platform:**  https://www.home-assistant.io/components/binary_sensor.template/ **Description of problem:** I am using the below binary sensor template just recently I noticed automatons not working correctly during the day and tracked it down to the binary sensor being stuck in the on position. **Problem-relevant `configuration.yaml` entries and (fill out even if it seems unimportant):** ``` - platform: template sensors: night: value_template: "{{ (22 < now().hour < 24) or (0 <= now().hour < 7 ) }}" ``` **Traceback (if applicable):** I don't see anything standing out in the logs. **Additional information:** Screenshot showing the sensor still being on after 7 ![binary_sensor_error_crop](https://user-images.githubusercontent.com/6432770/49699422-f6463180-fb9e-11e8-9563-4fc2f47bec19.png) Other template sensors are working (using a ton for zwave binary sensors)

github.com/home-assistant/core

Template binary sensor to not track all state changes

home-assistant:dev ← amelchio:binary-template-no-match-all

opened 08:58AM - 19 Nov 18 UTC

amelchio

+111 -30

## Breaking change: Template binary sensors for which we could not determine …what states to track to re-render will now only be updated when manually refreshed using the homeassistant.update_entity service. ## Description: More or less a copy+paste of #17276 and #17319, but for `binary_sensor`. I did have to introduce `async_update()` to enable forced updates. Also updates the tests with async/await syntax. **Related issue (if applicable):** home-assistant/architecture#85 **Pull request in [home-assistant.io](https://github.com/home-assistant/home-assistant.io) with documentation (if applicable):** home-assistant/home-assistant.io#<home-assistant.io PR number goes here> ## Example entry for `configuration.yaml` (if applicable): ```yaml binary_sensor: platform: template sensors: static: value_template: '{{ "true" }}' ``` ## Checklist: - [X] The code change is tested and works locally. - [X] Local tests pass with `tox`. - [X] There is no commented out code in this PR. If user exposed functionality or configuration variables are added/changed: - [ ] Documentation added/updated in [home-assistant.io](https://github.com/home-assistant/home-assistant.io) If the code does not interact with devices: - [X] Tests have been added to verify that the new code works.

And the breaking architectural change:

github.com/home-assistant/architecture

Reduce templating entities renders

opened 08:49AM - 28 Sep 18 UTC

closed 11:05PM - 25 Jan 19 UTC

balloob

A template entity (sensor, switch, etc) has to render whenever states it depends… on are changing. This detection is done using a regex which is not always correct. If the regex cannot detect it, the template sensor will render on **every** state change. This is impactful. To limit this, we already have an option for template entities to specify which entities to rely on, however it's optional. The goal should be too limit useless renders of template entities as it's causing slowdowns and timers going out of sync. I think @arsaboo linked me a post on the forums some time ago where the solution that people found was to link certain templates to a time sensor that was changing every second. (sorry, can't find blog post anymore) This got me thinking this morning, we should limit rendering. Proposal: - If entity ID specified to track, don't limit anything - If listening to all state changes, we should add a cooldown of 1 second. If a state change comes in during the cooldown, we will schedule an update as soon as the cooldown expires. This means that a tenplate entity could be trailing the real state up to a second, that's not a bad trade off.

I have no idea of course if your template falls into this category, but I wonder if you manually call the homeassistant.update_entity_service if the icon does change!

daconrad0 · September 22, 2019, 8:01pm

I checked and the icon does not update after calling the homeassistant.entity_update service.

AmoebeLabs · September 22, 2019, 8:17pm

Ok. And the state you display, ie ‘on’ or ‘off’, does that change or not, just as the icon?

daconrad0 · September 22, 2019, 8:18pm

The state is changing when I click the icon.

AmoebeLabs · September 22, 2019, 8:29pm

Ok, so data is coming in.

I think it has to do with how the animation and entity state are compared in the card.

In the set hass(hass) function, you will find the following line of code:

// if animation state not equals sensor state, return... Nothing to animate for this state...
if (!(this.entities[entityIndex].state === item.state)) return;

Can you replace the triple ‘===’ with ‘==’ ??
so:

if (!(this.entities[entityIndex].state == item.state)) return;

Then save, and ctrl-F5 in the browser to force reloading the card.

daconrad0 · September 22, 2019, 8:41pm

I updated it on line 792. It did not work, but the update gave me an error about confusing use of !

AmoebeLabs · September 22, 2019, 8:53pm

I have some lint warnings I still have to fix, this is one of them.
Probably if you change the line to:

if (this.entities[entityIndex].state != item.state) return;

the error disappears.

I hoped that that compare change would fix this weird issue, but if it doesn’t I will have to look further.

dac21 · September 22, 2019, 8:56pm

Unfortunately that did not fix the main issue just the lint warning

AmoebeLabs · September 22, 2019, 8:57pm

That is what was expected.

Can you give me the switch template? I have no templates in my configuration, so can’t test with templates. If I can adapt your template for my config, I might be able to reproduce the problem

dac21 · September 22, 2019, 9:14pm

Thanks for all your help. I love this card as I see many uses of it.

  - platform: template
    switches:
      south_dehumidifier:
        value_template: '{{ states.input_select.south_dehumidifier.state }}'
        turn_on:
          - service: script.turn_on_south_dehumidifier
        turn_off:
          - service: script.turn_off_south_dehumidifier

Here is the input_select

  south_dehumidifier:
    name: South Dehumidifier
    options:
    - on
    - off
    initial: off

Here are the scripts

toggle_south_dehumidifier:
  alias: Toggle South Dehumidifier
  sequence:
  - service_template: >
      {% if is_state('binary_sensor.south_dehumidifier', 'on') %}
        script.turn_off_south_dehumidifier
      {% else %}
        script.turn_on_south_dehumidifier
      {% endif %}
turn_on_south_dehumidifier:
  alias:  Turn On South Dehumidifier
  sequence:
  - data:
      event: Turn South Dehumidifier On
    service: ifttt.trigger
  - data:
      entity_id: input_select.south_dehumidifier
      option: true
    service: input_select.select_option
  - data:
      event: Turn South Basement Fan On
    service: ifttt.trigger
  - data:
      entity_id: input_select.south_basement_fan
      option: true
    service: input_select.select_option
turn_off_south_dehumidifier:
  alias:  Turn Off South Dehumidifier
  sequence:
  - data:
      event: Turn South Dehumidifier Off
    service: ifttt.trigger
  - data:
      entity_id: input_select.south_dehumidifier
      option: false
    service: input_select.select_option
  - data:
      event: Turn South Basement Fan Off
    service: ifttt.trigger
  - data:
      entity_id: input_select.south_basement_fan
      option: false
    service: input_select.select_option

carltonb · September 22, 2019, 10:16pm

Ok new question for a great new card.
I have been playing with it and have tried to make a few things.
Here is what I want to do.
I have 15 XIOAMI (temp/humidity/pressure) sensors in my house.
Question 1, If using the card 4 example how would I display all the cards on a single page. Do I need to replicate the entire code for all 15 sensors?
Question 2, where I live up until a few days ago the temps were averaging 105 to 110 F for the last 3 months. I would like the display to show a blue color from 45 to 68, green from 69 to 82, and red from 83 to 95. Is this possible. If it is I can not seem to make it work.

Any help is greatly appreciated.
carltonb

AmoebeLabs · September 23, 2019, 10:42am

Just released 0.8.2. Mainly a maintenance release with some small changes.

@daphatty, this version has an extra show option. Requirements haven’t changed for the card

@daconrad0, if added some case insensitive compares. No idea if that fixes your icon, but you can give it a try of course. I still can’t replicate what you’re seeing with the icon animation.

AmoebeLabs · September 24, 2019, 10:25am

That is where I’m using card 4 for: the xiaomi sensors in the rooms!

Yes, you need a card per sensor. Normally, that would be done using a decluttering template. In that template you use card 4 for layout and colors, and in the view you only pass the entities and attributes to the template. This keeps you view very compact.

I’m using zigbee2mqtt for my Xiaomi sensors. This gives me these three sensors:

sensor.bathroom_iaq_temperature
sensor.bathroom_iaq_humidity
sensor.bathroom_iaq_pressure

In my view.yaml:

    - type: 'custom:decluttering-card'
      template: dc_horseshoe_example_4
      variables:
        - name: "Bathroom"
        - entity_1: sensor.bathroom_iaq_temperature
        - entity_2: sensor.bathroom_iaq_humidity
        - entity_3: sensor.bathroom_iaq_pressure

The decluttering template then uses the three variables for filling in the entity list:

      entities:
            - entity: '[[entity_1]]'
              decimals: 1
              name: '[[name]'
              unit: '°C'
            - entity: '[[entity_2]]'
              decimals: 0
              unit: '%'
              icon: mdi:water-percent
            - entity: '[[entity_3]]'
              decimals: 0
              unit: 'hPa'
              icon: mdi:gauge

That should be possible with the colorstop list and the show.horseshoe_style set to colorstop.

   show:
    horseshoe_style: 'colorstop'

  color_stops:
    30: 'purple'
    45: 'blue'
    68: 'green'
    83: 'red'
    120: 'red'

  horseshoe_scale:
    min: 30
    max: 120

I haven’t tested the above, but this is how it should work.
I have added purple for 30-45 btw.

Hope this helps!

carltonb · September 25, 2019, 9:38pm

Thank you for the response.
Lets start with what I understand what you said. I am good with the colorstop information.
I understand the concept of what you said but do not understand how to implement it.
For example if my lovelace for this is called house_temps.yaml what do I enter?
Then do I need another yaml file to contain what you call view.yaml.

If an example can be posted that would be good for me.
thanks
carltonb

daphatty · September 30, 2019, 3:15am

Were you referring to scale_tickmarks:? If so, that option doesn’t seem to remove the horseshoe. In fact, scale_tickmarks: doesn’t seem to do anything at all in my test card.

Edit: I should clarify, using scale_tickmarks: with any value (true or false) would display the tickmarks in my test card. Removing scale_tickmarks: from the YAML subsequently hid the tickmarks from my test card.