Show off your picture-elements uses

[smurf12345 (Patrick)]

Hi SolarCzar,

Here it is. What you are looking for is the “- attribute: current_temperature” to display. I’m using honeywell as well.

  - style:
      font-size: x-small
      left: 9%
      top: 14.8%
    text: HVAC
    type: 'custom:text-element'
  - entity: climate.home
    style:
      color: 'RGBA(0,0,0,0)'
      font-size: 75%
      left: 9%
      top: 24%
    title: HVAC Thermostat
    type: state-badge
  - attribute: hvac_action
    entity: climate.home
    prefix: 'State: '
    style:
      font-size: 75%
      left: 9%
      top: 29%
    suffix: ''
    type: state-label
  - attribute: current_temperature
    entity: climate.home
    prefix: ''
    style:
      font-size: 85%
      left: 6%
      top: 32%
    suffix: °F
    type: state-label
  - attribute: current_humidity
    entity: climate.home
    prefix: ''
    style:
      font-size: 85%
      left: 13%
      top: 32%
    suffix: '%'
    type: state-label

Full picture-element card:

elements:
  - entity: light.hallway_main_lights
    style:
      left: 44%
      top: 36%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.hallway_main_lights
    style:
      left: 44%
      top: 45%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.hallway_main_lights
    style:
      left: 47%
      top: 52%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.hallway_main_lights
    style:
      left: 56%
      top: 52%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.kitchen_main_lights
    style:
      left: 26%
      top: 12%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.kitchen_main_lights
    style:
      left: 36%
      top: 12%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.kitchen_main_lights
    style:
      left: 26%
      top: 22%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.kitchen_main_lights
    style:
      left: 36%
      top: 28%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.kitchen_table_pendants
    style:
      left: 48.5%
      top: 18%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.kitchen_island_pendants
    style:
      left: 30%
      top: 19.5%
      transform: 'translate(-50%, -50%) scale(.5, .5)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.kitchen_island_pendants
    style:
      left: 33.5%
      top: 19.5%
      transform: 'translate(-50%, -50%) scale(.5, .5)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.kitchen_island_pendants
    style:
      left: 37%
      top: 19.5%
      transform: 'translate(-50%, -50%) scale(.5, .5)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.family_room_main_lights
    style:
      left: 63%
      top: 14%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.family_room_main_lights
    style:
      left: 73%
      top: 14%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.family_room_main_lights
    style:
      left: 83%
      top: 14%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.family_room_main_lights
    style:
      left: 63%
      top: 28%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.family_room_main_lights
    style:
      left: 73%
      top: 28%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.family_room_main_lights
    style:
      left: 83%
      top: 28%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.family_room_accent_lights
    style:
      left: 88%
      top: 18%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.family_room_accent_lights
    style:
      left: 88%
      top: 25%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - aspect_ratio: 1/1
    entity: fan.family_room_fan
    show_name: false
    show_state: false
    size: 100%
    spin: false
    state:
      - spin: true
        value: 'on'
    style:
      left: 73%
      top: 21%
      width: 10%
    styles:
      card:
        - background-color: 'rgb(255,255,255,0)'
        - box-shadow: 0px 0px 0px 0px
    tap_action:
      action: more-info
    type: 'custom:button-card'
    value: 'off'
  - entity: light.stairs_main_lights
    style:
      left: 63%
      top: 37%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.playroom_light
    style:
      left: 80%
      top: 45%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.garage_entry_main_lights
    style:
      left: 56%
      top: 62%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: light.porch_fan_light
    style:
      left: 26%
      top: 3%
      transform: 'translate(-50%, -50%) scale(.7, .7)'
    tap_action:
      action: toggle
    type: state-icon
  - aspect_ratio: 1/1
    color_type: icon
    entity: fan.porch_fan
    show_name: false
    show_state: false
    size: 100%
    spin: false
    state:
      - spin: true
        value: 'on'
    style:
      left: 35%
      top: 3%
      width: 7%
    styles:
      card:
        - background-color: 'rgb(255,255,255,0)'
        - box-shadow: 0px 0px 0px 0px
    tap_action:
      action: more-info
    type: 'custom:button-card'
    value: 'off'
  - entity: weather.karr_daynight
    style:
      font-size: 75%
      left: 9.5%
      top: 4%
    type: state-icon
  - attribute: temperature
    entity: weather.karr_daynight
    style:
      font-size: 85%
      left: 6%
      top: 9%
    suffix: °F
    type: state-label
  - attribute: humidity
    entity: weather.karr_daynight
    style:
      font-size: 85%
      left: 14%
      top: 9%
    suffix: '%'
    type: state-label
  - style:
      font-size: x-small
      left: 9%
      top: 14.8%
    text: HVAC
    type: 'custom:text-element'
  - entity: climate.home
    style:
      color: 'RGBA(0,0,0,0)'
      font-size: 75%
      left: 9%
      top: 24%
    title: HVAC Thermostat
    type: state-badge
  - attribute: hvac_action
    entity: climate.home
    prefix: 'State: '
    style:
      font-size: 75%
      left: 9%
      top: 29%
    suffix: ''
    type: state-label
  - attribute: current_temperature
    entity: climate.home
    prefix: ''
    style:
      font-size: 85%
      left: 6%
      top: 32%
    suffix: °F
    type: state-label
  - attribute: current_humidity
    entity: climate.home
    prefix: ''
    style:
      font-size: 85%
      left: 13%
      top: 32%
    suffix: '%'
    type: state-label
  - style:
      font-size: x-small
      left: 9%
      top: 38%
    text: Internet
    type: 'custom:text-element'
  - entity: binary_sensor.metronet_gateway
    style:
      color: 'RGBA(0,0,0,0)'
      font-size: 60%
      left: 1.5%
      top: 38.8%
      transform: 'scale(.8,.8)'
    title: Internet
    type: state-badge
  - entity: sensor.speedtest_ping
    style:
      color: 'RGBA(0,0,0,0)'
      font-size: 60%
      left: 9%
      top: 38.8%
      transform: 'scale(.8,.8)'
    title: Internet
    type: state-badge
  - entity: sensor.speedtest_download
    style:
      color: 'RGBA(0,0,0,0)'
      font-size: 60%
      left: 1.5%
      top: 47%
      transform: 'scale(.8,.8)'
    title: Internet
    type: state-badge
  - entity: sensor.fast_com_download
    style:
      color: 'RGBA(0,0,0,0)'
      font-size: 60%
      left: 9%
      top: 47%
      transform: 'scale(.8,.8)'
    title: Internet
    type: state-badge
  - entity: media_player.rokutv
    style:
      left: 89%
      top: 17%
      transform: rotate(90deg) rotateX(70deg) skewX(18deg)
      width: 6%
    type: 'custom:now-playing-poster'
  - entity: media_player.rokutv
    style:
      left: 60%
      top: 25%
      transform: rotate(-0deg) rotateX(-50deg) skewX(-0deg)
      width: 10%
    type: 'custom:now-playing-poster'
  - entity: media_player.kitchen
    style:
      left: 48%
      top: 26%
      transform: rotate(0deg) rotateX(0deg) skewX(0deg)
      width: 7%
    type: 'custom:now-playing-poster'
  - conditions:
      - entity: alarm_control_panel.home_alarm
        state: armed
    elements:
      - entity: alarm_control_panel.home_alarm
        style:
          font-size: 50%
          left: 68.5%
          top: 81%
        type: state-badge
    type: conditional
  - conditions:
      - entity: input_boolean.guest_mode
        state: 'on'
    elements:
      - entity: input_boolean.guest_mode
        style:
          font-size: 50%
          left: 68.5%
          top: 81%
        tap_action:
          action: toggle
        type: state-badge
    type: conditional
  - entity: input_boolean.guest_mode
    style:
      font-size: 60%
      left: 17%
      top: 75%
    tap_action:
      action: toggle
    type: state-badge
  - conditions:
      - entity: sensor.mail_usps_mail
        state_not: '0'
    elements:
      - entity: sensor.mail_usps_mail
        icon: 'mdi:mail'
        style:
          left: 58%
          top: 93%
        tap_action:
          action: navigate
          navigation_path: /lovelace/mail
        type: state-icon
    type: conditional
  - conditions:
      - entity: sensor.mail_usps_delivering
        state_not: '0'
    elements:
      - entity: sensor.mail_usps_delivering
        style:
          left: 65%
          top: 93%
        tap_action:
          action: navigate
          navigation_path: /lovelace/mail
        type: state-icon
    type: conditional
  - conditions:
      - entity: sensor.mail_fedex_delivering
        state_not: '0'
    elements:
      - entity: sensor.mail_usps_delivering
        style:
          left: 65%
          top: 93%
        tap_action:
          action: navigate
          navigation_path: /lovelace/mail
        type: state-icon
    type: conditional
  - conditions:
      - entity: sensor.mail_ups_delivering
        state_not: '0'
    elements:
      - entity: sensor.mail_usps_delivering
        style:
          left: 65%
          top: 93%
        tap_action:
          action: navigate
          navigation_path: /lovelace/mail
        type: state-icon
    type: conditional
  - conditions:
      - entity: sensor.mail_amazon_packages
        state_not: '0'
    elements:
      - entity: sensor.mail_usps_delivering
        style:
          left: 65%
          top: 93%
        tap_action:
          action: navigate
          navigation_path: /lovelace/mail
        type: state-icon
    type: conditional
  - entity: media_player.office
    style:
      left: 84%
      top: 67%
      width: 10%
    type: 'custom:now-playing-poster'
  - entity: media_player.office
    style:
      color: 'RGBA(0,0,0,0)'
      left: 84%
      top: 67%
    type: state-label
  - entity: media_player.office
    style:
      left: 86.5%
      top: 62%
      transform: rotate(90deg) rotateX(80deg) skewX(-0deg)
    type: 'custom:now-playing-poster'
  - conditions:
      - entity: media_player.xbox_one
        state: 'on'
    elements:
      - entity: media_player.xbox_one
        style:
          left: 73%
          top: 92%
        type: state-icon
    type: conditional
  - conditions:
      - entity: sensor.basement_tv_electrical_measurement
        state_not: '0.0'
    elements:
      - entity: sensor.basement_tv_electrical_measurement
        style:
          font-size: 60%
          left: 73%
          top: 98%
        type: state-label
    type: conditional
  - entity: person.patrick
    style:
      font-size: 60%
      left: 83%
      top: 93%
    type: state-badge
  - entity: person.charissa
    style:
      font-size: 60%
      left: 93%
      top: 93%
    type: state-badge
  - charging_state:
      entity_id: binary_sensor.blink_evse_ischarging
      state: 'on'
    color_gradient:
      - '#ff0000'
      - '#ffff00'
      - '#00ff00'
    entity: sensor.mychevy_2012_chevrolet_volt_battery_level
    name: []
    style:
      color: 'RGBA(0,0,0,0)'
      left: 49%
      top: 80%
    type: 'custom:battery-state-card'
  - entity: sensor.mychevy_2012_chevrolet_volt_battery_level
    style:
      font-size: 70%
      left: 45%
      top: 84%
    type: state-label
  - entity: binary_sensor.blink_evse_ispluggedin
    style:
      left: 44.2%
      top: 68%
    type: state-icon
  - entity: sensor.garage_temperature
    style:
      font-size: 60%
      left: 37%
      top: 64%
    type: state-badge
  - conditions:
      - entity: group.basement_occupancy
        state: 'on'
    elements:
      - entity: group.basement_occupancy
        icon: 'mdi:motion-sensor'
        style:
          '--paper-item-icon-color': gold
          left: 59%
          top: 44%
          width: 5%
        type: state-icon
    type: conditional
  - entity: binary_sensor.front_door
    icon: 'mdi:door'
    style:
      left: 67%
      top: 67%
    type: state-icon
  - entity: binary_sensor.back_door
    icon: 'mdi:door'
    style:
      left: 48%
      top: 6%
    type: state-icon
  - entity: binary_sensor.garage_entry_door
    icon: 'mdi:door'
    style:
      left: 51%
      top: 61%
    type: state-icon
  - entity: cover.middle_garage_door
    hold_action:
      action: more-info
    name: Middle Garage
    style:
      left: 29%
      top: 91%
    tap_action:
      action: call-service
      service: cover.toggle
      service_data:
        entity_id: cover.middle_garage_door
    type: state-icon
  - entity: cover.right_garage_door
    hold_action:
      action: more-info
    name: Right Garage
    style:
      left: 44%
      top: 91%
    tap_action:
      action: call-service
      service: cover.toggle
      service_data:
        entity_id: cover.right_garage_door
    type: state-icon
image: /local/images/House_032620_Overhead_1080_1_shadow_nolight_crop.png
type: picture-elements

m,

[SolarCzar]

Patrick,

You’re Awesome thanks. I LOVE HA, but I have a day job and have struggle constantly to simply find the appropriate syntax for much of the coding needing to be efficient. I was up until 3am and came up with this… It works, but is a lot less efficient than yours, so thanks.

  - entity: sensor.kitchen_temperature_sensor
    style:
      font-size: 9px
      left: 45%
      top: 50%
    type: state-badge
  - entity: sensor.bedroom_temperature_sensor
    style:
      font-size: 9px
      left: 52%
      top: 20%
    type: state-badge

sensor:
  - platform: template
    sensors:
      kitchen_temperature_sensor:
        friendly_name: "Kitchen"
        value_template: '{{ states.climate.kitchen.attributes.temperature }}'
        unit_of_measurement: '°F'
      bedroom_temperature_sensor:
        friendly_name: "Bedroom"
        value_template: '{{ states.climate.bedroom.attributes.temperature }}'
        unit_of_measurement: '°F'

I don’t want to be one of those people that doesn’t do the research to find the answer, but the problem is that the answers are confusing and time consuming, so thank you thank you for your help. It’s guys like you that help us newbies grow and pay it forward.

Trey

[scstraus]

Hi all, I’m wondering if any of you picture-elemets gurus could help me execute on an idea.

What I want is a card that has only text and which respects the theme colors. I want to just position some labels and sensor values on a blank canvas but without the picture which is a requirement for picture-elements.

I really wanted to use picture-elements because it seems quite easy to lay things out but the requirement for a picture background means that it’s not going to look quite right with my changing themes… I tried it with markdown card but it wasn’t flexible enough with positioning the text to do what I wanted.

What do you think, is there some way to do this or do I have to learn how to make custom cards (which looks pretty far out of my level of ability seeing as I have no web development or javascript expertise)?

Thanks all.

[M1ke]

You can use a transparent png as (background) image.

[scstraus]

So simple. Of course. Thank you.

[scstraus]

Hi all,

One more question, I want this:

But get this:

Is there any way to tell the state-label that I don’t want it showing the units of my sensor? Or do I have to make a template sensor without a unit?

Code is here:

  - type: picture-elements
    image: /local/images/coronavirus_transparent.png
    elements:
#      - type: state-label  
#        entity: sensor.czechia_coronavirus_current
#        style:
#          top: 33%
#          left: 45%
#          font-size: large

# Header
      - style:
          font-size: large
          right: -13%
          top: 15%
        text: Coronavirus In Czechia
        type: 'custom:text-element'
#      - style:
#          font-size: large
#          left: 56%
#          top: 15%
#        text: In
#        type: 'custom:text-element'
#      - style:
#          font-size: large
#          left: 72%
#          top: 15%
#        text: Czechia
#        type: 'custom:text-element'

#Numbers

#      - type: state-label  
#        entity: sensor.czechia_coronavirus_current
#        style:
#          font-size: x-large
#          left: 20%
#          top: 42%
      - style:
          font-size: x-large
          left: 20%
          top: 42%
        text: 6838
        type: 'custom:text-element'
#      - type: state-label  
#        entity: variable.czechia_coronavirus_new_yesterday
#        style:
#          font-size: x-large
#          left: 51%
#          top: 42%
      - style:
          font-size: x-large
          left: 51%
          top: 42%
        text: 438
        type: 'custom:text-element'
#      - type: state-label  
#        entity:  variable.czechia_coronavirus_new_today
#        style:
#          font-size: x-large
#          left: 82%
#          top: 42%
      - style:
          font-size: x-large
          left: 82%
          top: 42%
        text: 121
        type: 'custom:text-element'

[scstraus]

Also is there any way to center something on the card? The header label moves around based on which device I open it on when positioned from the right. If I position it from the left it goes off the left of the card or wraps the text…

[Hellis81]

Regarding your unit problem.
Can’t you use the customize tool and just remove that?
Normally you add stuff, but I can’t see a reason why it wouldn’t work to remove a attribute.

And the position.
I believe that is because the image you base it on is larger than the screen size of the phone.
Untested, but perhaps you can resize the image smaller and use scaling to scale down the values the same way.
Maybe that will make it easier to fit?
I have not bothered but this is a possible solution I have thought of.

[scstraus]

Thanks. Yes, I guess I could. I use the sensors and variables in other places, and didn’t want to create new ones, but I suppose that’s what I’ll do.

About the position, is there a way to know the right size to make the image? I just compared the image to the card size on my screen and tried to trim it to the right size. How many pixels wide is a normal card?

[Hellis81]

Sorry can’t help you with that. It is just a guess as I said, based on that when I flip my phone on the side everything looks good.
But don’t know what size the image has to be to be correct.

[ASNNetworks]

Created my own take on a media player card. Used picture-elements, button-card and mini media player-card. Still working on some stuff to add, so not final yet

[evasilisin1984]

[Bart1]

[Hellis81]

You can have all the floors in the same card if you want.
I haven’t done it with three floors, we just have two so I just use a boolean to flip between the floors.
But I think a input_number that is the floor will work for you, and then have three buttons to switch between the floors by setting a number in the input_number.

[Bart1]

Thanks, i’ll try this out!

[devastator]

this looks fabulous ! Can you share it ?

[ASNNetworks]

I will try soon! I’m very busy at the moment and the card needs some explaining because I have also set stuff the card doesn’t show (like theme colors and input boolean for day/night theme).

This is the final card (well, almost, I’m still waiting how to link the new Media Browser to a button !)

Day Play + Pause

Night Play + Pause

[dennisaion]

Latest update!

Use of picture-elements and picture-entity (animated climacon change on state) with a generous sprinkle of CSS.

[jampez77 (Jamie Nandhra-Pezone)]

How did you get your tabs at the bottom of the page??

[dennisaion]

Hi. I used this Custom Header