Show off your picture-elements uses

Share your Projects! Dashboards & Frontend
102

I’ve had some projects in my home assistant setup.

Here’s one with my chargebox, it’s a quite simple setup with the chargebox and then colour changes based on the state:

image
image504×717 41.3 KB

A simple one to visualise the status of my NAS and the disk temps:
image

And then quite a dynamic card for the car + chargebox.
Buttons on top to control and show statuses of the car.
Windows go red when heater is started, cable is shown when charging, red blink in the window when car is locked, horseshoe lights are on if lights are left on…

image
image508×591 59.2 KB

The carnet card code and images is available here:

2 Likes
103

Would you mind sharing the config for the NAS device.
Thanks
carltonb

1 Like
104

I enjoy the flexibility of the picture-elements especially when it’s tied to mod-card. I built my system monitoring tab off it, although not extensive it meets my needs.

image
image972×1305 78.4 KB

7 Likes
105

Used picture-elements for a few cards on my vacuum tab. The left card gives some stats and common controls for the vacuum. The 4 cards on the right display maintenance for the vacuum by showing how many hours remain until a part needs to be replaced. Once you replace the part you can click on the reset icon in the top right of the card to reset the counter on the vacuum.

vacuum_tab
vacuum_tab1180×663 423 KB

And here is a blog post on how to create it: https://aarongodfrey.dev/home%20automation/roborock_s4_lovelace_dashboard/

9 Likes
106

Woow, thats great. Can you copy your config etc? What robot vacuum do you have?

107

I use it for my vacuum cleaner and air purifier:

image
image780×862 177 KB
image
image778×726 146 KB

4 Likes
108

I’ve got the roborock S4.

For the top left card the config is the following:

-
  type: 'custom:card-templater'
  entities:
    - vacuum.roborock_s4
  card:
    type: picture-elements
    image: /local/roborock_s4.jpg
    elements:
      -
        type: state-label
        entity: vacuum.roborock_s4
        style:
          left: 0
          right: 0
          bottom: 0
          background-color: 'rgba(0, 0, 0, 0.3)'
          padding: 10px
          font-size: 16px
          line-height: 16px
          color: white
          transform: 'translate(0%,0%)'
      -
        type: icon
        title: Battery
        icon_template: '{{ state_attr("vacuum.roborock_s4", "battery_icon") }}'
        style:
          right: 171px
          bottom: 0
          padding: 10px
          font-size: 16px
          line-height: 16px
          color: white
          transform: 'translate(0%,0%)'
      -
        type: state-label
        title: 'Battery Level'
        entity: sensor.roborock_s4_battery
        style:
          right: 120px
          bottom: 0px
          padding: 10px
          font-size: 16px
          line-height: 16px
          color: white
          transform: 'translate(0%,0%)'
      -
        type: icon
        title: 'Locate Vacuum'
        icon: 'mdi:map-marker'
        style:
          right: 90px
          bottom: 0
          padding: 10px
          font-size: 16px
          line-height: 16px
          color: white
          transform: 'translate(0%,0%)'
      -
        type: icon
        title: 'Clean First Floor'
        icon: 'mdi:broom'
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 1
            topic: /nodered/vacuum_first_floor
        style:
          right: 0
          bottom: 0
          padding: 10px
          font-size: 16px
          line-height: 16px
          color: white
          transform: 'translate(0%,0%)'
      -
        type: icon
        title: 'Return To Base'
        icon: 'mdi:home-map-marker'
        tap_action:
          action: call-service
          service: vacuum.return_to_base
          service_data:
            entity_id: vacuum.roborock_s4
        style:
          right: 45px
          bottom: 0
          padding: 10px
          font-size: 16px
          line-height: 16px
          color: white
          transform: 'translate(0%,0%)'
      -
        type: state-label
        entity: sensor.roborock_s4_last_cleaned
        prefix: 'Last ran '
        suffix: ' ago'
        style:
          background-color: 'rgba(0, 0, 0, 0.3)'
          bottom: 85%
          padding: 8px
          font-size: 16px
          line-height: 2px
          color: white
          transform: 'translate(0%,0%)'
      -
        type: state-label
        prefix: 'Ran '
        suffix: x
        entity: sensor.roborock_s4_lifetime_cleaning_count
        style:
          background-color: 'rgba(0, 0, 0, 0.3)'
          bottom: 85%
          right: 0px
          padding: 8px
          font-size: 16px
          line-height: 2px
          color: white
          transform: 'translate(0%,0%)'
          width: 25%
      -
        type: state-label
        prefix: 'Ran for '
        suffix: ' hrs'
        entity: sensor.roborock_s4_lifetime_cleaning_time
        style:
          background-color: 'rgba(0, 0, 0, 0.3)'
          bottom: 72%
          right: 0px
          padding: 8px
          font-size: 16px
          line-height: 2px
          color: white
          transform: 'translate(0%,0%)'
          width: 25%
      -
        type: state-label
        entity: sensor.roborock_s4_lifetime_cleaned_area
        prefix: 'Cleaned '
        style:
          background-color: 'rgba(0, 0, 0, 0.3)'
          bottom: 59%
          right: 0px
          padding: 8px
          font-size: 16px
          line-height: 2px
          color: white
          transform: 'translate(0%,0%)'
          width: 25%

Note this requires the lovelace-card-templater and a few custom template sensors. The sensor definitions look like the following:

sensor:
  roborock_s4_battery:
    friendly_name: 'Roborock S4 Battery'
    value_template: '{{state_attr(''vacuum.roborock_s4'', ''battery_level'')}}'
    unit_of_measurement: '%'
    device_class: battery
  roborock_s4_lifetime_cleaned_area:
    friendly_name: 'Lifetime Cleaned Area'
    value_template: '{{state_attr(''vacuum.roborock_s4'', ''total_cleaned_area'')}}'
    unit_of_measurement: ㎡
  roborock_s4_lifetime_cleaning_time:
    friendly_name: 'Lifetime Cleaning Time'
    value_template: '{{(state_attr(''vacuum.roborock_s4'', ''total_cleaning_time'') / 60)|round(1, ''floor'')}}'
  # NOTE: This date is converted to be timezone aware in PDT so that it plays nice
  # with some other templating functions and filters.
  roborock_s4_last_cleaned:
    friendly_name: 'Last Cleaned Date/Time'
    value_template: '{{relative_time(strptime(as_timestamp(state_attr(''vacuum.roborock_s4'', ''clean_stop''))|timestamp_custom(''%Y-%m-%d %H:%M:%S%z''), ''%Y-%m-%d %H:%M:%S%z''))}}'
  roborock_s4_lifetime_cleaning_count:
    friendly_name: 'Lifetime Cleaning Count'
    value_template: '{{state_attr(''vacuum.roborock_s4'', ''cleaning_count'')}}'

For the maintenance cards the config looks like:

-
  type: picture-elements
  image: /local/main_brush.png
  elements:
    -
      type: state-label
      title: '% Remaining Until Main Brush Should Be Replaced'
      entity: sensor.roborock_s4_main_brush_remaining
      style:
        font-size: 30px
        color: orange
        left: 0px
        right: 0px
        bottom: 0px
        background-color: 'rgba(0, 0, 0, 0.3)'
        transform: 'translate(0%,0%)'
    -
      type: state-label
      title: 'Hours Remaining Until Main Brush Should Be Replaced'
      entity: sensor.roborock_s4_main_brush_hrs_remaining
      suffix: ' left'
      style:
        right: 0px
        bottom: 0px
        padding: 10px
        font-size: 16px
        line-height: 16px
        color: white
        transform: 'translate(0%,0%)'
    -
      type: icon
      icon: 'mdi:restart'
      title: 'Reset Hours'
      tap_action:
        action: call-service
        service: vacuum.send_command
        service_data:
          entity_id: vacuum.roborock_s4
          command: reset_consumable
          params:
            - main_brush_work_time
        confirmation:
          text: 'Are you sure you want to reset the hours remaining counter for replacing the main brush?'
      style:
        top: 0px
        right: 0px
        padding: 7px
        transform: 'translate(0%,0%)'

And the custom template sensors needed for the maintenance cards:

sensor:
  roborock_s4_filter_remaining:
    friendly_name: '% Filter Remaining'
    unit_of_measurement: '%'
    value_template: '{{((state_attr(''vacuum.roborock_s4'', ''filter_left'') / 150) * 100) | round | int}}'
  roborock_s4_filter_hrs_remaining:
    friendly_name: 'Filter Remaining Hours'
    unit_of_measurement: hrs
    value_template: '{{state_attr(''vacuum.roborock_s4'', ''filter_left'')}}'
  roborock_s4_side_brush_remaining:
    friendly_name: '% Side Brush Remaining'
    unit_of_measurement: '%'
    value_template: '{{((state_attr(''vacuum.roborock_s4'', ''side_brush_left'') / 200) * 100) | round | int}}'
  roborock_s4_side_brush_hrs_remaining:
    friendly_name: 'Side Brush Remaining Hours'
    unit_of_measurement: hrs
    value_template: '{{state_attr(''vacuum.roborock_s4'', ''side_brush_left'')}}'
  roborock_s4_main_brush_remaining:
    friendly_name: '% Main Brush Remaining'
    unit_of_measurement: '%'
    value_template: '{{((state_attr(''vacuum.roborock_s4'', ''main_brush_left'') / 300) * 100) | round | int}}'
  roborock_s4_main_brush_hrs_remaining:
    friendly_name: 'Main Brush Remaining Hours'
    unit_of_measurement: hrs
    value_template: '{{state_attr(''vacuum.roborock_s4'', ''main_brush_left'')}}'
  roborock_s4_sensors_remaining:
    friendly_name: '% Sensors Remaining'
    unit_of_measurement: '%'
    value_template: '{{((state_attr(''vacuum.roborock_s4'', ''sensor_dirty_left'') / 30) * 100) | round | int}}'
  roborock_s4_sensors_hrs_remaining:
    friendly_name: 'Sensors Remaining Hours'
    unit_of_measurement: hrs
    value_template: '{{state_attr(''vacuum.roborock_s4'', ''sensor_dirty_left'')}}'

Here’s a more detailed write up: https://aarongodfrey.dev/home%20automation/roborock_s4_lovelace_dashboard/

1 Like
109

@carltonb Sorry for the slow response.
The nas config is quite blunt without much fancy lights or so, it’s basically just a static picture with state-label and icons overlayed and positioned. Behaves a bit different on mobile browser compared to desktop so some trial and error needed for the positioning to work good. :slight_smile:

Here goes from my lovelace.yaml:

- type: picture-elements
        image: /local/nas.png
        elements:
          - type: state-label
            entity: sensor.nas_disktemp1
            style:
              top: 17%
              left: 50%
              color: white
              font-weight: bold
          - type: state-label
            entity: sensor.nas_disktemp2
            style:
              top: 17%
              left: 65%
              color: white
              font-weight: bold
          - type: icon
            icon: mdi:nas
            entity: sensor.nas_systemp
            style:
              top: 8%
              left: 5%
          - type: state-label
            entity: sensor.nas_systemp
            style:
              top: 8%
              left: 13%
          - type: icon
            icon: mdi:chip
            entity: sensor.nas_cputemp
            style:
              top: 17%
              left: 5%
          - type: state-label
            entity: sensor.nas_cputemp
            style:
              top: 17%
              left: 13%
          - type: icon
            icon: mdi:fan
            entity: sensor.nas_fanrpm
            style:
              top: 26%
              left: 5%
          - type: state-label
            entity: sensor.nas_fanrpm
            style:
              top: 26%
              left: 14%
          - type: icon
            icon: mdi:gauge
            entity: sensor.nas_freespace
            style:
              top: 35%
              left: 5%
          - type: state-label
            entity: sensor.nas_freespace
            style:
              top: 35%
              left: 14%
110

Thanks.
I will try to work on it in the next few days.
carltonb

111

I’ve been playing with your state card and have a couple questions.

  1. The card is huge. Is it supposed to be like that?
    2. The text for the state image normally in your code has quotes around it. That keeps stripping them out and not sure that works if there is a space in the value
    3. For the Time from home, I don’t have that but was going to stick in the value of dir_of_travel. Since that’s an entity and not a state is there a way to get that in there? Like normally I call it with states.proximity.jhome.attributes.dir_of_travel but it’s rejected.
    4. I get a big gray bar down the middle, any thoughts?

image
image1207×824 177 KB

EDIT: Figured one out so crossed it out. Also this is where I’m at with the giant card. No one suggested this in other comments about it being large but not sure if I have to shrink all the images. Below is real size

image
image617×736 66.4 KB
Text

EDIT EDIT: Got them all figured out other than the size. Not sure if it’s tied to the original card size. If so was that a design choice as it’s literally like full screen.

112

I have 2 of them in an horizontal-stack and then the size becomes about half .
Im shure there is a way to solve it if you are only running 1 of them.

113

Here’s what I have so far. My two proximity elements that the picture changes when on the road and at the store and at work, etc. Plus a dynamic element that shows all lights that are currently on and allow me to turn them off.

image
image709×637 116 KB

114

Time to contribute!

home
home506×686 44.6 KB

A floorplan like many around, with all my lights, temperatures for every room, door sensors and my amplifier added :slight_smile:

musiccast

And inspired by @slemson I got basic functionality for my amplifier up and running!
This was a heck of a puzzle to do and may or may not require some tweaking, since with very long titles or artist names it obviously clips the ‘display’ on the picture.
Other than that, super happy with the picture elements card so far, will still look into source selection from the card itself rather than having to open the more information panel (which is opened with the little round disc icon top-left :wink: )

4 Likes
115

A shout out to all the people that have made home assistant, integrations, and plugins happen!

I just took the dive down the rabbit hole of doing a floor plan. I was pleasantly surprised I could get many of my devices in a single card and move many of my entity cards off my main page. It really cleaned it up and made it quicker / intuitive to turn on devices.

I’m using a couple custom elements: “text-element”, “color-lite-card”, “now-playing-poster”, and I’m sure a few more. The color-lite-card allowing the light status and toggle. The now-playing-poster is pretty cool and really made it happen to show what source/app is active on the TV or media player. I need to create some more 3d views of specific rooms so I can make it look like it showing on the screen. I played with it and put it on a picture above the fireplace but the angle is too sharp to really see it.

Lights: Lutron Caseta Dimmers and Switches
Fans: Lutron Caseta and Broadlink RM Pro RF Transceiver
Media: RokuTV and Alexa Echos
Sensors: Xiaomi aqara door and motion
Garage Control and Temperature: Wemos D1-Mini ESP boards with relays and temp sensors
EV Car: MyChevy (not working at the moment) and ssh shell CURL command to EVSE to check plug status
Hubs: Lutron Caseta, HUSBZB-1 (Zigbee), Honeywell Redlink (HVAC)
Running on ESX VM machine

image
image741×687 243 KB

2 Likes
116

@hoffdad Hi. Quick question, is the ll_matte_home1.png image, this one image ?

if yes, can you please share it?

thanks.

117

How did you remove the 2 circles at the bottom?

118

I’ve changed things up some from my initial setup. Here’s what it currently looks like.

HA
HA1660×936 158 KB

Much more I want to do (to everything!) but just haven’t had the time. As far as the circles, I did it all in Photoshop. If you don’t have that there’s probably some free software out there that would allow you to work with layers. In the below link I’ve included all the files I used to setup my trackers off off my phone and the life360 app. Works great and haven’t found anything better yet.

Now with the circles I just have them part of the entity_picture_template for each person’s sensor, making the opacity of the circles match to the background behind the cards fto keep it looking clean. I also have android app notifications based on all of this via node red as well if anyone is interested.

Device Tracker Files

5 Likes
119

Thanks alot.

Why do you have a empty frame? What is it for?

Also your smart body scale can you please tell me which one it is?

Thanks again.

120

I use it just as the default image in the picture-element. You could use your default tracking picture instead if you prefer.

As far as the scale, it’s the Withings Body+. I’ve had it for about a month and have been pretty happy with it thus far.

1 Like
121

Thank you @hoffdad :slight_smile:

Sorry @hoffdad are you saying you use it as the default image in the picture element as it would take the theme color of your HA theme when you change it? I suppose that is not possible with picture elements ?