Show state value in picture-glance card

Configuration Frontend
1

Situation: I have some cameras that I’m displaying with the picture-glance card. The cameras are from ZoneMinder, so they have event counts as state.cam1_events, which is a number value. I would like to be able to display that number in the entities list, but it doesn’t seem like there’s any way to do that without dropping it to a new line and looking pretty bad.

For an example, here’s what happens when I set show_state: true on the entity:

camera_image: camera.cam1
entities:
  - entity: sensor.cam1_events
    show_state: true
  - entity: binary_sensor.door_front
  - entity: binary_sensor.front_door_motion
  - entity: lock.front_door
title: CAM1
type: picture-glance

Showing "0 Eve..." on a new line in picture-glance
Showing "0 Eve..." on a new line in picture-glance1002×568 567 KB

I would prefer if the value (and the value alone) were able to display next to the icon (or in place of the icon). But there doesn’t appear to be any way to configure entities with templates on a picture-glance card.

Here’s a mockup of what I’m looking for:

Showing number "4" next to an icon in picture-glance
Showing number "4" next to an icon in picture-glance998×570 203 KB

Anyone come across a solution to do something similar?

2

Take the sensor and make an icon template for it using a template sensor. Change the icon based on the number of events.

3

The picture-glance card configuration does not appear to accept icon_template. It’s also not a thing that I want set globally, since the actual number can be infinite.

4

Right, that’s why you have to make a template sensor…

That’s fair, unfortunately, you’ll have to make a custom card and style it yourself. Currently those fields only accept icons above text. Moving the text to the side requires you to change the layout.

5

Ohhh… a template sensor. Sorry I must have glossed over that part.

Would be really awesome if icon_template and name_template were built-in everywhere icon and name were accepted in lovelace. I think that would really open up some interesting abilities.

6

Yah, I agree. I would assume there is a reason they don’t have this everywhere at this point.

7

I settled with using the custom button-card in a horizontal-stack beneath the camera. I’m mostly happy with the results:

57 AM
57 AM1008×676 239 KB

3 Likes
8

Could you share the code the used for your stack with custom buttons cards?

Thanks

9

Sure!

cards:
  - aspect_ratio: 0%
    camera_image: camera.cam1
    entities: []
    title: CAM1
    type: picture-glance
  - cards:
      - entity: sensor.cam1_events
        hold_action:
          action: more-info
        icon: 'mdi:record-rec'
        layout: icon_state
        show_label: false
        show_name: false
        show_state: true
        show_units: false
        tap_action:
          action: url
          url_path: >-
            http://10.0.1.220:8787/zm/?view=events&page=1&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Battr%5D=MonitorId&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Bop%5D=%3D&filter%5BQuery%5D%5Bterms%5D%5B0%5D%5Bval%5D=1
        type: 'custom:button-card'
      - entity: binary_sensor.front_door_motion
        icon: 'mdi:motion-sensor'
        layout: icon_name
        name: |
          [[[
            if (entity.state === 'on')
              return 'Motion';
            else
              return 'Clear';
          ]]]
        show_state: false
        state:
          - styles:
              icon:
                - color: var(--button-card-light-color)
            value: 'on'
        tap_action:
          action: more-info
        type: 'custom:button-card'
      - entity: lock.front_door
        layout: icon_name
        name: |
          [[[
            if (entity.state === 'locked')
              return 'Locked';
            else
              return 'Unlocked';
          ]]]
        show_state: false
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack
3 Likes
10

You can do this using card-mod (https://github.com/thomasloven/lovelace-card-mod/). I do it for displaying temperature/humidity on my picture-glance cards as follows:

style: |
      .box {
        background-color: rgba(0, 0, 0, 0.5) !important
      }
      .title:after {
        content: " ([[ climate.downstairs.attributes.current_temperature ]]\00B0, [[ climate.downstairs.attributes.current_humidity ]]%)";

This inserts the corresponding code after the “title” of the picture glance card (which is “CAM1” in your example). To insert it before/after other elements, just inspect the HTML and figure out a convenient element to put your text before/after.

11

Thanks for the tip.

Just a small correction: [[ ]] must be {{ }} instead.

12

Yes, I just updated to the latest version of card-mod and had to convert [[ … ]] to {{ … }}.

As a reference for anyone viewing this thread letter, here is a complete example:

  - type: picture-glance
    title: Downstairs
    show_state: false
    camera_image: camera.living_room
    entity: binary_sensor.livingroom_person
    state_filter:
      "on": brightness(50%) sepia(1) hue-rotate(315deg) brightness(150%) saturate(300%)
      "off": brightness(100%) sepia(0%) saturate(100%)
    aspect_ratio: 16x9
    style: |
      .box {
        background-color: rgba(0, 0, 0, 0.5) !important
      } 
      .title::after {
        content: " ({{ states.climate.downstairs.attributes.temperature }}\00B0 / {{ states.climate.downstairs.attributes.current_temperature }}\00B0, {{ states.sensor.downstairs_humidity.state }}%)";
      }
    entities:
      - entity: input_boolean.livingroom_motion_mode
        icon: mdi:walk
      - entity: light.twinkly
      - entity: light.kitchen_lights
        icon: mdi:fridge-outline
      - entity: light.living_room_lights
        icon: mdi:sofa
      - entity: group.downstairs_lights
        icon: mdi:home-floor-1
      - entity: group.house_lights
        icon: mdi:home-circle
      - entity: climate.downstairs
2 Likes
13

I was using card mod for many years …to show a price from a sensor.
Something is broken, because it is not working anymore.
here is my code

type: picture-glance
title: Last Sale
camera_image: camera_generic_camera
hold_action:
  action: none
aspect_ratio: '16:10'
tap_action:
  action: more-info
camera_view: live
style: |
  .box {
    background-color: rgba(0, 0, 0, 0.2) !important
  } 
  .box::after {
    content: "    [ {{ states('sensor._last_sale_price') }}€ ] ";
  }
entities:
  - entity: sensor._last_sale_price
    icon: mdi

Under firefox debugger is giving me the following error

Card-mod r: At path: style -- Expected a value of type `never`, but received: `".box {\n  background-color: rgba(0, 0, 0, 0.2) !important\n} \n.box::after {\n  content: \"    [ {{ states('sensor._last_sale_price') }}€ ] \";\n}\n"`
    r error.ts:41
    d struct.ts:195
    f struct.ts:125
    value hui-picture-glance-card-editor.ts:76
    value card-mod.js:1
    i card-mod.js:1
    value hui-element-editor.ts:377
card-mod.js:1:53251

please help

14

Now start using it with reading release notes before updating.
There are breaking changes in 3.4.0, described in release notes.

Besides, your question is not related to the thread’s topic.
Suggest to ask any card-mod questions in the main thread.

15

thank you!
you are right that I should read the release notes first, but the question is 100% related.

have a nice day