Show off your picture-elements uses


Awsome!!! Thanks for sharing :slight_smile:

2 Likes

Hi
Can someone please tell me how they use the picture element. How do you create the ui-Lovelace.yaml? I tried many things but nothing works.

Running Hassio 89.2
Thanks.

Jim, a bit off topic - do you use your Mi Flora outside? If so, any issues?

Yes I have about 15 of them outside for over a year and they are all still going. We just had 150mm of rain over the weekend and they are all still working. They have also survived an Australian summer which is the ultimate litmus test lol. Only thing is I had to put a pi zero outside to connect to them as Bluetooth range is limited.

1 Like

4 Likes

Update some of my Lovelace Cards to picture-elements.


Got my inspiration from over here: System Monitoring - How does your look?

1 Like

I like your home assistant card. I think I may use that idea. Thanks for posting.

1 Like

Make picture elements truly dynamic using the group-element:

9 Likes

Example of two of my crowded picture elements :slight_smile:
All rooms have an overlay with opacity based on measured lux, so will show up as dark if dark. Click in any room to toggle lights in the room.

The Network diag picture shows all Sonoffs, ESPs and other pingable equipment in the house.

16 Likes

very impressive! that’s a lot of hard work right there

1 Like

Hi all !
well for my fist time i did a harmony hub remote where the background changes depending on what device are you using.

this is based on the sensor:
configuration.yaml
sensor:
- platform: template
sensors:
living_room:
value_template: ‘{{ states.remote.living_room.attributes.current_activity }}’
friendly_name: ‘Living room hub’

and the picture elements card:
elements:

  • entity: sensor.living_room
    state_image:
    Netflix: /local/pictures/netflix.png
    PowerOff: /local/pictures/harmony-remote.png
    Watch TV: /local/pictures/kodi.png
    xbox: /local/pictures/xbox-one.png
    style:
    left: 50%
    top: 50%
    width: 100%
    tap_action:
    action: none
    type: image
  • icon: ‘mdi:xbox’
    style:
    color: withe
    left: 5%
    top: 87%
    tap_action:
    action: call-service
    entity_id: remote.living_room
    service: REMOTE.TURN_ON
    service_data:
    activity: xbox
    title: Xbox one
    type: icon
  • icon: ‘mdi:netflix’
    style:
    color: withe
    left: 13%
    top: 87%
    tap_action:
    action: call-service
    entity_id: remote.living_room
    service: REMOTE.TURN_ON
    service_data:
    activity: Netflix
    title: Xbox one
    type: icon
  • icon: ‘mdi:kodi’
    style:
    color: withe
    left: 21%
    top: 87%
    tap_action:
    action: call-service
    entity_id: remote.living_room
    service: REMOTE.TURN_ON
    service_data:
    activity: Watch TV
    title: Xbox one
    type: icon
  • entity: remote.living_room
    service: REMOTE.TURN_OFF
    style:
    color: withe
    left: 87%
    top: 87%
    title: Turn All Off
    type: service-button
    image: /local/pictures/harmony-remote.png
    style: null
    type: picture-elements

Hope you all like it… it took me a better part of Sunday (first time i make one like this) :smiley:

5 Likes

Here is my setup, it took some doing and learning photoshop :slight_smile:
It show’s 2 floors. the 1st floor is not done yet. so i’m just focussing on the 1st floor.
I forgot to show it in the video, but the orange layovers show in what area the lights are on. you can press that area anywhere to toggle the light state of corresponding light group.

i’ve used the following recourses:

  • power-wheel-card.js
  • card-tools.js?track=true
  • auto-entities.js
  • bar-card.js
  • slider-entity-row.js
  • popup-card.js?track=true
  • dark-sky-weather-card.js
  • compact-custom-header.js?v=0.0.1

If somebody needs the lovelace yaml code , just sent me a PM.

ezgif-2-8463a982a903

1 Like

So, a little update.

I manged to remake the above without the use of any images except for the background and a 1 pixel transparent image (png).
I’ll share my code here :slight_smile:

cards:
  - elements:
      - conditions:
          - entity: group.covers
            state: 'off'
        elements:
          - entity: group.covers
            image: /local/trans.png
            style:
              top: 50%
              left: 50%
              width: 100%
              height: 100%
              background: 'rgba(240,255,240,0.7)'
            type: image
          - entity: group.covers
            image: /local/trans.png
            style:
              top: 12.1%
              left: 76.6%
              width: 40%
              height: 20%
              background-image: >-
                radial-gradient(farthest-side at 0%
                100%,rgba(244,241,237,0.9)50%, rgba(240,255,240,0))
            type: image
          - entity: group.covers
            image: /local/trans.png
            style:
              top: 73.2%
              left: 17.8%
              width: 28.7%
              height: 49.8%
              background-image: >-
                radial-gradient(farthest-side at 100% 0%,
                rgba(244,241,237,1)50%, rgb(240,255,240,0))
            type: image
        type: conditional
      - conditions:
          - entity: group.cover_warn
            state: 'on'
        elements:
          - entity: group.cover_warn
            image: /local/trans.png
            style:
              top: 50%
              left: 50%
              height: 100%
              width: 100%
            type: image
          - entity: group.cover_warn
            image: /local/trans.png
            style:
              top: 12.1%
              left: 76.6%
              width: 40%
              height: 20%
              background-image: >-
                radial-gradient(farthest-side at 0% 100%,rgba(244, 229,
                0,0.3)50%, rgba(240,255,240,0))
            type: image
          - entity: group.cover_warn
            image: /local/trans.png
            style:
              top: 73.2%
              left: 17.8%
              width: 28.7%
              height: 49.8%
              background-image: >-
                radial-gradient(farthest-side at 100% 0%, rgba(244, 229, 0,
                0.5)50%, rgb(240,255,240,0))
            type: image
        type: conditional
      - conditions:
          - entity: group.cover_crit
            state: 'on'
        elements:
          - entity: group.cover_crit
            image: /local/trans.png
            style:
              top: 50%
              left: 50%
              height: 100%
              width: 100%
              background: 'rgb(255,0,0,0.15)'
            type: image
          - entity: group.cover_crit
            image: /local/trans.png
            style:
              top: 12.1%
              left: 76.6%
              width: 40%
              height: 20%
              background-image: >-
                radial-gradient(farthest-side at 0% 100%,rgba(255,0,0,0.5)50%,
                rgba(240,255,240,0))
            type: image
          - entity: group.cover_crit
            image: /local/trans.png
            style:
              top: 73.2%
              left: 17.8%
              width: 28.7%
              height: 49.8%
              background-image: >-
                radial-gradient(farthest-side at 100% 0%, rgba(255,0,0,0.7)50%,
                rgb(240,255,240,0))
            type: image
        type: conditional
      - entity: light.beneden
        image: /local/Beganegrond.png?011
        state_filter:
          'off': brightness(20%)
          'on': brightness(100%)
        style:
          top: 0
          transform: none
        tap_action:
          action: none
        type: image
      - type: conditional
        conditions:
          - entity: light.woonkamer
            state: 'on'
        elements:
          - entity: light.woonkamer
            type: state-label
            style:
              font-size: 0
              left: 64.4%
              top: 80.5%
              height: 32%
              width: 60.5%
              background-image: |
                linear-gradient(rgba(255,183,76,0), rgba(255,183,76,0.5))
      - entity: light.woonkamer
        hold_action:
          action: navigate
          navigation_path: /lovelace/5
        image: /local/trans.png
        style:
          left: 64.4%
          top: 80.6%
          height: 32%
          width: 60.5%
        tap_action:
          action: toggle
        type: image
      - entity: light.woonkamer_plafondlamp
        style:
          '--iron-icon-height': 40px
          '--iron-icon-width': 40px
          left: 70%
          top: 81%
        tap_action:
          action: toggle
        type: state-icon
      - entity: light.tuinverlichting
        style:
          left: 93%
          top: 16.5%
        tap_action:
          action: toggle
        type: state-icon
      - type: conditional
        conditions:
          - entity: light.fibaro_dimmer_eetkamer_level
            state: 'on'
        elements:
          - entity: light.fibaro_dimmer_eetkamer_level
            type: state-label
            style:
              font-size: 0
              left: 82.2%
              top: 35%
              width: 25%
              height: 25%
              background: >-
                radial-gradient(farthest-side at 70% 50%,rgba(255, 183, 76,0.8),
                rgba(255, 183, 76,0))
      - entity: light.fibaro_dimmer_eetkamer_level
        hold_action:
          action: navigate
          navigation_path: /lovelace/6
        image: /local/trans.png
        style:
          left: 82.2%
          top: 35%
          width: 25%
          height: 25%
        tap_action:
          action: toggle
        type: image
      - type: conditional
        conditions:
          - entity: light.keuken
            state: 'on'
        elements:
          - entity: light.keuken
            type: state-label
            style:
              font-size: 0
              left: 54.8%
              top: 32.7%
              width: 30%
              height: 22%
              background: >-
                linear-gradient(to right, rgba(255, 183, 76,0.8), rgba(255, 183,
                76,0))
      - entity: light.keuken
        hold_action:
          action: navigate
          navigation_path: /lovelace/6
        image: /local/trans.png
        style:
          left: 54.9%
          top: 32.7%
          width: 30%
          height: 22
        tap_action:
          action: toggle
        type: image
      - type: conditional
        conditions:
          - entity: light.bijkeuken
            state: 'on'
        elements:
          - entity: light.bijkeuken
            type: state-label
            style:
              font-size: 0
              left: 48.7%
              top: 12%
              width: 17.8%
              height: 16.2%
              background: 'linear-gradient(rgba(255, 183, 76,0.8), rgba(255, 183, 76,0))'
      - entity: light.bijkeuken
        image: /local/trans.png
        style:
          left: 48.7%
          top: 12%
          width: 17.8%
          height: 16.2%
        tap_action:
          action: toggle
        type: image
      - type: conditional
        conditions:
          - entity: light.wc
            state: 'on'
        elements:
          - entity: light.wc
            type: state-label
            style:
              font-size: 0
              left: 46.6%
              top: 48%
              width: 13.5%
              height: 7%
              background: 'linear-gradient(rgba(255, 183, 76,0.8), rgba(255, 183, 76,0))'
      - entity: light.wc
        image: /local/trans.png
        style:
          left: 46.6%
          top: 48.3%
          width: 13.8%
        tap_action:
          action: toggle
        type: image
      - type: image
        entity: media_player.sony_bravia_tv
        image: /local/trans.png
        style:
          left: 43.2%
          top: 67.5%
          height: 4%
          width: 14%
      - type: conditional
        conditions:
          - entity: media_player.sony_bravia_tv
            state: 'on'
        elements:
          - entity: media_player.sony_bravia_tv
            type: state-label
            style:
              font-size: 0
              left: 43.2%
              top: 67.5%
              height: 4%
              width: 14%
              background-image: >-
                radial-gradient(farthest-side at 50% 0%,rgba(255,0,0,1)10%,
                rgba(255,255,0,0.5) 50%, rgba(0,255,0,0) 100%
      - type: conditional
        conditions:
          - entity: cover.garagepoort
            state_not: closed
        elements:
          - entity: cover.garagepoort
            type: state-label
            hold_action:
              action: toggle
            style:
              font-size: 0
              left: 19%
              top: 48.3%
              height: 1.4%
              width: 24%
              background: red
      - type: conditional
        conditions:
          - entity: binary_sensor.neo_coolcam_door_sensor_schuifpui_sensor
            state: 'on'
        elements:
          - entity: binary_sensor.neo_coolcam_door_sensor_schuifpui_sensor
            type: state-label
            hold_action:
              action: toggle
            style:
              font-size: 0
              left: 76%
              top: 20.9%
              height: 1.4%
              width: 25%
              background: red
      - entity: plant.eetkamerplant
        style:
          font-size: 0px
          left: 90.7%
          top: 24.5%
          width: 8.5%
        type: state-label
      - type: conditional
        conditions:
          - entity: plant.eetkamerplant
            state: problem
        elements:
          - entity: plant.eetkamerplant
            type: state-label
            style:
              top: 24.5%
              left: 90.5%
              height: 12%
              width: 15%
              font-size: 0
              background-image: 'radial-gradient(rgba(255,0,0,0.5) , rgb(255,0,0,0) 50%)'
      - type: conditional
        conditions:
          - entity: binary_sensor.achterdeur
            state: 'on'
        elements:
          - entity: binary_sensor.achterdeur
            type: state-label
            style:
              font-size: 0
              left: 57.7%
              top: 13.6%
              height: 6%
              width: 2%
              background: red
      - type: conditional
        conditions:
          - entity: binary_sensor.garagedeur
            state: 'on'
        elements:
          - entity: binary_sensor.garagedeur
            type: state-label
            style:
              left: 38.7%
              top: 12.6%
              height: 5.7%
              width: 2%
              background: darkorange
      - entity: sensor.solaredge_vermogen
        icon: 'mdi:flash'
        style:
          color: grey
          left: 32%
          top: 25%
          width: 1%
        type: icon
      - entity: sensor.power_consumption
        icon: 'mdi:fuse'
        style:
          bottom: 48.8%
          color: grey
          left: 57.8%
          transform: rotate(90deg)
          width: 1%
        type: icon
      - entity: cover.garagepoort
        style:
          left: 19.5%
          top: 44.9%
        hold_action:
          action: toggle
        type: state-icon
      - type: conditional
        conditions:
          - entity: cover.garagepoort
            state_not: closed
        elements:
          - entity: cover.garagepoort
            type: state-label
            hold_action:
              action: toggle
            style:
              font-size: 0
              left: 19%
              top: 48.3%
              height: 1.4%
              width: 24%
              background: red
      - type: conditional
        conditions:
          - entity: binary_sensor.aeotec_zw089_recessed_door_sensor_gen5_sensor
            state: 'on'
        elements:
          - entity: binary_sensor.aeotec_zw089_recessed_door_sensor_gen5_sensor
            type: state-label
            style:
              left: 33.1%
              top: 56.5%
              height: 7%
              width: 1.6%
              background: red
      - entity: binary_sensor.beweging_trap
        style:
          left: 70%
          top: 64%
        tap_action:
          action: toggle
        type: state-icon
      - entity: binary_sensor.beweging_boekenkast
        style:
          '--iron-icon-height': 15px
          '--iron-icon-width': 15px
          left: 35.5%
          top: 93.5%
        type: state-icon
      - entity: binary_sensor.beweging_woonkamer
        style:
          left: 92%
          top: 94%
        type: state-icon
      - entity: binary_sensor.beweging_keuken
        style:
          left: 51.5%
          top: 36.7%
        type: state-icon
      - entity: binary_sensor.beweging_bijkeuken
        style:
          left: 50%
          top: 12.7%
        type: state-icon
      - entity: sensor.downstairs_thermostat_target
        style:
          color: grey
          font-weight: bold
          font-size: 70%
          left: 70%
          top: 54.2%
        tap_action:
          action: none
        type: state-label
      - entity: climate.downstairs
        style:
          '--iron-icon-height': 20px
          '--iron-icon-width': 20px
          left: 70%
          top: 51%
        type: state-icon
      - entity: sensor.woonkamer_temp
        style:
          align: center
          color: gray
          font-weight: bold
          font-size: 65%
          left: 54.3%
          top: 80.5%
        type: state-label
      - entity: sensor.woonkamer_hum
        style:
          color: gray
          font-weight: bold
          font-size: 65%
          left: 54.%
          top: 82.7%
        type: state-label
      - entity: sensor.licht_woonkamer
        style:
          color: gray
          font-weight: bold
          font-size: 10px
          left: 45%
          top: 97.2%
        type: state-label
      - entity: sensor.eetkamerplant_temperature
        style:
          color: gray
          font-weight: bold
          font-size: 65%
          left: 83.5%
          top: 21.8%
        type: state-label
      - entity: sensor.licht_eettafel
        style:
          color: gray
          font-weight: bold
          font-size: 65%
          left: 70%
          top: 38%
        type: state-label
      - entity: binary_sensor.beweging_eettafel
        style:
          left: 70%
          top: 34.5%
        type: state-icon
      - entity: camera.woonkamer
        icon: 'mdi:eye-outline'
        style:
          '--iron-icon-height': 20px
          '--iron-icon-width': 20px
          bottom: 11%
          color: grey
          right: 5%
          transform: rotate(90deg)
        type: icon
      - entity: camera.garage
        icon: 'mdi:eye-outline'
        style:
          color: grey
          left: 22%
          top: 25%
        type: icon
      - entity: camera.eetkamer
        icon: 'mdi:eye-outline'
        style:
          '--iron-icon-height': 20px
          '--iron-icon-width': 20px
          color: silver
          right: 2.8%
          top: 19.5%
          transform: rotate(45deg)
        type: icon
      - entity: binary_sensor.beweging_gang
        style:
          bottom: 35.5%
          left: 45%
        type: state-icon
      - entity: camera.gang
        icon: 'mdi:eye-outline'
        style:
          '--iron-icon-height': 20px
          '--iron-icon-width': 20px
          bottom: 38.5%
          color: grey
          left: 58.6%
        type: icon
      - entity: media_player.google_home_woonkamer
        style:
          left: 92.2%
          top: 77.6%
        type: state-icon
      - entity: binary_sensor.woonkamer_media
        style:
          '--iron-icon-height': 20px
          '--iron-icon-width': 20px
          left: 57.7%
          top: 66.4%
        type: state-icon
      - entity: sensor.weather
        style:
          '--iron-icon-height': 40px
          '--iron-icon-width': 40px
          right: 13%
          top: 10.5%
        type: state-icon
      - entity: sensor.buiten_temperature
        style:
          color: gray
          font-size: 100%
          font-weight: bold
          left: 90%
          top: 3.6%
        type: state-label
      - entity: switch.radiator_links
        style:
          '--iron-icon-height': 16px
          '--iron-icon-width': 16px
          '--paper-item-icon-color': silver
          '--paper-item-icon-active-color': orange
          left: 34.2%
          top: 96.8%
        tap_action:
          action: toggle
        type: state-icon
      - entity: switch.radiator_rechts
        style:
          '--iron-icon-height': 16px
          '--iron-icon-width': 16px
          '--paper-item-icon-color': silver
          '--paper-item-icon-active-color': orange
          left: 93.8%
          top: 96.8%
        tap_action:
          action: toggle
        type: state-icon
      - camera_image: camera.voordeur
        camera_view: live
        style:
          left: 19%
          top: 62%
          width: 24%
        type: image
    image: /local/Beganegrond.png?012
    type: picture-elements
  - entities:
      - entity: switch.greenwave_powernode_6_port_switch
      - entity: switch.greenwave_powernode_6_port_switch_6
      - entity: switch.greenwave_powernode_6_port_switch_5
      - entity: switch.greenwave_powernode_6_port_switch_3
      - entity: switch.greenwave_powernode_6_port_switch_2
      - entity: switch.greenwave_powernode_6_port_switch_4
    image: /local/banner.png?v3
    type: picture-glance
type: vertical-stack
3 Likes

Version 0.3 of group-element available. Even more cool now. Very efficient use of picture-elements.

11 Likes

Anyone know if it’s possible to lay an input_select drop down on top of a picture-elements card? I’m imagining a picture of the front of my receiver with a blanked out display and two drop down menus on top of it. One for sources and one for audio format. When I try this:

- type: picture-elements
  image: /local/interface_images/theater/receiver.png
  elements:
    - type: input_select.denon_source

I get “Unknown element type encountered: input_select.denon_source.” laid on top of the image of my receiver.

Edit: Well, I sort of got it going with a state-label:

- type: state-label
              style:
                left: 45%
                top: 30%
                font-size: 200%
              entity: input_select.denon_source

The click brings up a pop-up where I can change the source. I still have to get that hooked into the actual changing of the source on the receiver. Not as elegant as I wanted but it’s working. If anyone has any way to do it without the pop-up I’d love to get ideas.

Here’s what it looks like:

2 Likes

I haven’t found anything and wanted something similar for a floorplan to toggle which floor is visible. Currently I’m just using buttons for each floor that when clicked change the selected value of the input select.

I did something similar just using buttons. Not happy about how the white background looks with my shiny new brushed steel background but it’s something to work on later.

2 Likes

Went for a more colourful way to display my MiFlora data with a stripe for each.

The badges are a bit of a fudge as I couldn’t work out how to display a badge without text below it, so essentially I cut off the text display by limiting the size of the banner image.

In my case, the images are 272x43, like so:

oak-for-hass-halved

        - type: picture-elements
          image: /local/oak-for-hass-halved.png
          elements:
            - type: state-badge
              entity: sensor.miflora_ae_xx_moisture
              style:
                top: 68%
                left: 10%
                color: "#ffffff"
            - type: state-badge
              entity: sensor.miflora_ae_xx_conductivity
              style:
                top: 68%
                left: 30%
                color: "#ffffff"
            - type: state-badge
              entity: sensor.miflora_ae_xx_temperature
              style:
                top: 68%
                left: 50%
                color: "#ffffff"

The rest of it is fairly standard I guess, though for changing the font throughout the theme I used this tip:

For the curious it’s: an Oak, a serrated red Maple, regular Maple, Horse Chestnut, general garden patch reading, Lemon, Lemon, Labernum, and Robinia.

3 Likes

Picture elements with custom layout card:

And here’s what it looks like on my tablet:

30 Likes