Help with Conditional Picture Card on State Value

dudester · April 10, 2019, 12:10pm

Hi,
I have an ultrasonic sensor in my water tank and have 10 different images to display based on level. I was trying to do this with 10 conditional cards but i’m having trouble getting the syntax right…
I have the below code which does works if state = 10 but I want the image to display if the state is below 10 and cant get the logic/syntax for that right.

Any pointers appreciated.

card:
  image: /local/watertank_10.png
  title: watertank_10_percent
  type: picture
conditions:
  - state: '10'
    entity: sensor.watertank
type: conditional

jparthum · April 10, 2019, 12:43pm

You could create an input_boolean that turns ‘on’ below 10 and reference that as your condition.

Or, since you have ten different levels, you could create an input_select instead to use for all ten states.

dudester · April 10, 2019, 12:58pm

Ok, so we need to define 10 Boolean conditions, correct ?

I am not familiar with input_select, how does that work?

jparthum · April 10, 2019, 1:03pm

input_select creates a drop-down menu in the frontend (which can be hidden), but it can also be set using the input_select.select_option service. So you could use it the same way as an input_boolean but with more than two states.

jparthum · April 10, 2019, 1:21pm

Something like…

configuration.yaml:

 input_select:
   water_tank_level:
     name: Water Tank Level
     options:
       - "1"
       - "2"
       - "3"
       - "4"
       - "5"
       - "6"
       - "7"
       - "8"
       - "9"
       - "10"

ui-lovelace.yaml:

views:
  cards:
  - type: conditional
    conditions:
      - entity: input_select.water_tank_level
        state: "1"
      card:
        type: entities
        entities:
          - entity: <entity_1>
  - type: conditional
    conditions:
      - entity: input_select.water_tank_level
        state: "2"
      card:
        type: entities
        entities:
          - entity: <entity_2>
(etc...)

FrenchToast · April 10, 2019, 2:07pm

I do this a bit differently for a garage door card using picture glance. I’m assuming the states of your sensor.watertank are “1, 2, 3, 4, etc.”?

If so, maybe give this a try so you don’t have to create any input booleans or input selects. You wouldn’t have to create a group’d sensor like I did below, just sharing for clarity.

Your state image below would be your states from the watertank sensor and the entity is the sensor.watertank, I hope this makes sense!

Lovelace:

state_image:
  both closed: /local/both_closed.jpg
  zach open: /local/zach_open.jpg
  bri open: /local/bri_open.jpg
  both open: /local/both_open.jpg
entities:
  - cover.garage
  - cover.zach_s_garage
type: picture-glance
entity: sensor.cover_group

Sensor (not needed in your case):

- platform: template
  sensors:
    cover_group:
      value_template: >-
        {% if is_state('cover.garage', 'open') and is_state('cover.zach_s_garage', 'open') %}
          both open
        {% elif is_state('cover.zach_s_garage', 'open') %}
          zach open
        {% elif is_state('cover.garage', 'open') %}
          bri open 
        {% else %}
          both closed
        {% endif %}

jparthum · April 10, 2019, 2:10pm

I think FrenchToast’s solution is more elegant.

dudester · April 10, 2019, 2:54pm

Thank you jparthum and French Toast for your suggestions, the Glance Cards looks easiest but I still need some template logic whichever option I go with, this is where I was getting stuck. Condition picture cards didnt seem to allow templating but not sure how to do that with Glance-Cards either.

My states are:

below 10: empty
10-20: Image 1
20-30: Image 2
30-49: Image 3.
etc…

FrenchToast · April 10, 2019, 4:28pm

Are your states given as whole numbers or with decimal places? Should still be able to accomplish this with a template sensor similar to what I outlined above, it’ll just have different syntax.

FrenchToast · April 10, 2019, 5:23pm

Okay give this a shot, I think this should cover what you’re after. It’s not the most elegant template sensor but it should work. You can modify values to suit your needs.

Sensor:

- platform: template
  sensors:
    watertank_card:
      value_template: >-
        {% if states.sensor.watertank.state | float <10 %}
         empty
        {% elif states.sensor.watertank.state | float <20 %}
         20
        {% elif states.sensor.watertank.state | float <30 %}
         30
        {% elif states.sensor.watertank.state | float <40 %}
         40
        {% elif states.sensor.watertank.state | float <50 %}
         50
        {% elif states.sensor.watertank.state | float <60 %}
         60
        {% elif states.sensor.watertank.state | float <70 %}
         70
        {% elif states.sensor.watertank.state | float <80 %}
         80
        {% elif states.sensor.watertank.state | float <90 %}
         90
        {% elif states.sensor.watertank.state | float <100 %}
         Full
        {% endif %}

Lovelace:

state_image:
  empty: /local/(name of your empty image).jpg
  20: /local/(name of your image where water is between 10-19%).jpg
  30: /local/(name of your image where water is between 20-29%).jpg
  40: /local/...
  50: /local/...
  60:...
  70:
  80:
  90:
  Full:
entities: (I think you'll have to have at least one "entity" here as it's required for the card. Can be any entity)
type: picture-glance
entity: sensor.watertank_card

dudester · April 10, 2019, 11:57pm

Yep, works well ! Thank you for your help !
One last question…
Is there a way of capping picture display size, home assistant seems to scale images up when viewed on large monitors which I dont like.

Cheers.

FrenchToast · April 11, 2019, 11:10am

No problem at all !

Unfortunately I don’t know on the scaling, that one is beyond me but I’m pretty sure it’s baked into the Home Assistant Lovelace code.

fricci · April 15, 2020, 3:28pm

Folks, I’m quite new to HomeAssistant, learning by reading your posts. I’m trying to do the same as Phil here, but I can’t quite figure it out. The lovelace part I’m doing from within lovelace, add a manual card, and using the same code but I get this error:

Expected a value of type undefined for state_image but received {“20”:"/local/images/20percent.png",“40”:"/local/images/40percent.png",“60”:"/local/images/60percent.png",“80”:"/local/images/80percent.png",“100”:"/local/images/100percent.png"}

the sensor part I’m not sure where to configure it. is it on the configuration.yaml file?

thanks!!

FrenchToast · April 27, 2020, 2:19pm

Hi Fabio, sorry for delay.

The error is likely due to where you’re storing your photos. Can you share where you stored your images (are they in your www folder or can you share your folder structure)?

Can you share your code for your Lovelace card so i can help debug? Please be sure to use the “preformatted text” button when posting your yaml snippets so the formatting is retained.