Show off your picture-elements uses

[kravalli7]

Sorry I will try to clarify things.
This is my remote I am trying to perfect.

If you zoom in on the lower part of my dpad which is a picture element you can see the black line I am talking about. This line is also noticeable on the left and right side. However you can see it best on the lower part. I dont know why this is there because the dark gray part of the picture element is exactly the same colour as the whole background. The picture I posted before is the one i am using for my picture element and you can clearly see that the line isn’t there which means this is a homeassistant thing.

type: picture-elements
image: /local/dpad.png
style:
  box-shadow: none

This is just the code for my picture-element without the elements

cheynespcCheyne

1

Sep '18

My living room setup with Pi element to select the source so logo of source suits what’s playing. Eg kodi ps4 Xbox live tv netflix

On this post from another user you can clearly see the shadow/background of every card and picture-element, because he is using the light theme

[Ildar_Gabdullin]

I need to simulate your case.
For this I need the background picture , please upload it to some cloud (Dropbox etc).
I need exactly the same file.

[kravalli7]

Alright!
Here is the Dropbox with the background and the pictures for the buttons.

HomeAssistant

And here is the complete code:

type: picture-elements
elements:
  - type: image
    image: /local/up.png
    tap_action:
      action: call-service
      service: script.fernseher_up
    style:
      top: 19%
      left: 50%
      transform: translate(-50%, -50%) scale(0.62, 0.62)
  - type: image
    image: /local/down.png
    tap_action:
      action: call-service
      service: script.fernseher_down
    style:
      top: 81%
      left: 50%
      transform: translate(-50%, -50%) scale(0.61, 0.62)
  - type: image
    image: /local/right.png
    icon: mdi:chevron-right
    tap_action:
      action: call-service
      service: script.fernseher_right
    style:
      top: 50%
      left: 80%
      transform: translate(-50%, -50%) scale(1.5, 1.5)
  - type: image
    image: /local/left.png
    tap_action:
      action: call-service
      service: script.fernseher_left
    style:
      top: 50%
      left: 20%
      transform: translate(-50%, -50%) scale(0.37, 0.37)
  - type: icon
    icon: mdi:circle-outline
    tap_action:
      action: call-service
      service: script.fernseher_ok
    style:
      top: 50%
      left: 50%
      transform: translate(-50%, -50%) scale(1.5, 1.5)
image: /local/dpad.png
style:
  box-shadow: none
  background-color: rgba(0,0,0,0)

[bkr1969 (Brian)]

For my 3D Home Model, I wanted control of my thermostats in a more direct way. Clicking them on the plan opens this picture element which is an exact copy of my Honeywell thermostats. I’ve written a custom script to increment/decrement the setting by one degree when the corresponding chevron is clicked, made a custom sensor which pulls the outside temp from weather.home and rounds it to an integer and am working on a script to detect the current hvac_mode and switch to the opposite if the MODE area is clicked. In addition to picture_elements it also uses the Custom Text Element. Here’s the code, if you’re interested in the script and sensor, let me know.

type: picture-elements
elements:
  - type: icon
    icon: mdi:chevron-up
    tap_action:
      action: call-service
      service: script.liv_therm_up
      service_data:
        climate_id: climate.downstairs
        value: 1
    entity: climate.downstairs
    style:
      top: 39.1%
      left: 74.9%
  - type: icon
    icon: mdi:chevron-down
    tap_action:
      action: call-service
      service: script.liv_therm_down
      service_data:
        climate_id: climate.downstairs
        value: 1
    entity: climate.downstairs
    style:
      top: 60.8%
      left: 74.8%
  - type: icon
    icon: mdi:close
    tap_action:
      action: navigate
      navigation_path: /lovelace-floorplan/0
    style:
      top: 20%
      left: 10%
  - type: state-label
    entity: climate.downstairs
    attribute: temperature
    style:
      font-size: 335%
      top: 51.5%
      left: 76.4%
    suffix: °
  - type: state-label
    entity: climate.downstairs
    attribute: current_temperature
    style:
      font-size: 575%
      top: 49.8%
      left: 51.5%
    suffix: °
  - type: state-label
    entity: sensor.time
    style:
      top: 38%
      left: 22%
  - type: state-label
    entity: sensor.outside_temp
    suffix: °
    style:
      font-size: 335%
      top: 51.8%
      left: 24.5%
  - type: state-label
    entity: weather.home
    attribute: humidity
    suffix: '% Humidity'
    style:
      font-size: 75%
      top: 58%
      left: 24%
  - type: state-label
    entity: climate.downstairs
    attribute: current_humidity
    suffix: '% Humidity'
    style:
      font-size: 75%
      top: 62%
      left: 49.5%
  - type: state-label
    entity: climate.downstairs
    attribute: hvac_action
    style:
      font-size: 75%
      top: 66%
      left: 22%
  - type: custom:text-element
    text: MODE
    style:
      font-size: 110%
      top: 30.5%
      left: 59.5%
  - type: custom:text-element
    text: HOME
    style:
      font-size: 110%
      top: 30.5%
      left: 21.5%
  - type: custom:text-element
    text: FAN
    style:
      font-size: 110%
      top: 30.5%
      left: 40.5%
  - type: custom:text-element
    text: SETTINGS
    style:
      font-size: 110%
      top: 30.5%
      left: 78%
  - type: custom:text-element
    text: INDOOR
    style:
      font-size: 65%
      top: 38%
      left: 49.5%
  - type: custom:text-element
    text: OUTDOOR
    style:
      font-size: 65%
      top: 44.8%
      left: 22.9%
  - type: custom:text-element
    text: SET TO
    style:
      font-size: 65%
      top: 44.8%
      left: 75.1%
  - type: custom:text-element
    text: Downstairs
    style:
      font-size: 185%
      top: 75.8%
      left: 51.1%
image: /local/floorplan/therm2.png

[bkr1969 (Brian)]

And here’s the first floor of my 3d model (made with Sweet Home 3D). I am still working on making apng images for ceiling fans, and possibly a large apng of the Roomba moving around the floor when vacuuming.
The lights all have mdi icons over them that function as switches, the TV glows when on and the entire map brightens and dims with the sun elevation and cloud cover (Thanks, Will Surridge). Pretty happy with the results.

[Ildar_Gabdullin]

Are you talking about black shadow of the card?

Try this:

type: picture-elements
card_mod:
  style: |
    ha-card {
      box-shadow: none;
    }
...

Card-mod is required.

[kravalli7]

Thank you very much this finally worked!

[gdreelin (Greg Dreelin)]

I love this design!!! Now need one for a dryer with the duck all fluffed up…lol

[gdreelin (Greg Dreelin)]

I wonder if this would work with SmartThings Samsung washer? Home Connect does not allow Samsung devices.

[Hellis81]

In theory you just need the states.
If you have the states of prewash, rinse, machine operation and so on then it just needs a bit of adaption.

[gdreelin (Greg Dreelin)]

Yeah I can get that info from the sensor. Thanks

[Hellis81]

Since when I wrote the post I have also included a door open image.

I can update the images when I get home from work if I remember

[SeLLeRoNe (Andrea Iannucci)]

Any chance you would share the code for the card aswell?

[Hellis81]

Most of it is here:

Show off your picture-elements uses

Sure… I use both the Home connect integration and a rest sensor to the Home connect API to get all the data I want. sensor: - platform: rest name: washing_machine_json resource_template: "https://api.home-connect.com/api/homeappliances/<<<<My_Washing_Machine_ID>>>>>/programs/active" method: GET headers: authorization: 'Bearer <<<<<my_auth_code_here>>>>>' content-type: 'application/json' value_template: '1' json_attributes: - "data" scan_interval…

But since this does not include open door I will post a new post with all the new config, when/if I remember

[Hellis81]

Updated images:
http://www.hoppvader.nu/bilder/washing_machine.zip

And updated picture elements card:

elements:
  - conditions:
      - entity: sensor.washing_machine_operation_state
        state: Ready
    elements:
      - entity: sensor.washing_machine_door_state
        image: /local/washing_machine_ready.gif
        state_image:
          Open: /local/washing_machine_ready_open.gif
          Closed: /local/washing_machine_ready_closed.gif
          Locked: /local/washing_machine_ready_locked.gif
          DelayedStart: /local/washing_machine_ready_locked.gif
        style:
          left: 0%
          top: 0%
          transform: scale(1,1)
        tap_action:
          action: none
        type: image
    type: conditional
  - conditions:
      - entity: sensor.washing_machine_operation_state
        state: Run
    elements:
      - entity: sensor.washing_machine_door_state
        image: /local/washing_machine_ready.gif
        state_image:
          Open: /local/washing_machine_ready_open.gif
          Closed: /local/washing_machine_ready_closed.gif
          Locked: /local/washing_machine_ready_locked.gif
          DelayedStart: /local/washing_machine_ready_locked.gif
        style:
          left: 0%
          top: 0%
          transform: scale(1,1)
        tap_action:
          action: none
        type: image
      - entity: sensor.washing_machine_operation_state
        image: /local/washing_machine.gif
        style:
          left: 0%
          top: 0%
          transform: scale(1,1)
        tap_action:
          action: none
        type: image
      - conditions:
          - entity: sensor.washing_machine_operation_state
            state: Run
        elements:
          - entity: sensor.washing_machine_finish_time
            style:
              left: 79%
              top: 3%
              color: black
              transform: scale(2.5,2.5)
            tap_action:
              action: more-info
            type: state-label
          - entity: sensor.washing_machine_prewash
            image: /local/washing_machine_prewash_off.png
            state_image:
              'false': /local/washing_machine_prewash_off.png
              'true': /washing_machine_prewash_on.png
              'False': /local/washing_machine_prewash_off.png
              'True': /washing_machine_prewash_on.png
            style:
              left: '-18%'
              top: '-19%'
              transform: scale(0.23,0.27)
            tap_action:
              action: none
            type: image
          - entity: sensor.washing_machine_rinse
            image: /local/washing_machine_rinse_offt.png
            state_image:
              'Off': /local/washing_machine_rinse_offt.png
              Plus1: /local/washing_machine_rinse_1t.png
              Plus2: /local/washing_machine_rinse_2t.png
              Plus3: /local/washing_machine_rinse_3t.png
            style:
              left: 5%
              top: 17%
              transform: scale(1,1)
            tap_action:
              action: none
            type: image
          - entity: sensor.washing_machine_spin_rpm
            style:
              left: 5%
              top: 34%
              color: black
              transform: scale(2,2)
            tap_action:
              action: none
            type: state-label
          - entity: sensor.washing_machine_temperature
            style:
              left: 6%
              top: 47%
              color: black
              transform: scale(2,2)
            tap_action:
              action: none
            type: state-label
          - entity: sensor.washing_machine_idos1
            image: /local/i-dos_on.png
            state_image:
              'False': /local/i-dos_off.png
              'True': /local/i-dos_on.png
            style:
              left: '-1.8%'
              top: 60%
              transform: scale(0.9,0.9)
            tap_action:
              action: none
            type: image
          - entity: sensor.washing_machine_idos2
            image: /local/i-dos_on.png
            state_image:
              'False': /local/i-dos_off.png
              'True': /local/i-dos_on.png
            style:
              left: '-1.8%'
              top: 75%
              transform: scale(0.9,0.9)
            tap_action:
              action: none
            type: image
          - conditions:
              - entity: sensor.washing_machine_processphase
                state: Centrifugerar
            elements:
              - entity: sensor.washing_machine_processphase
                style:
                  left: 35.2%
                  top: 69%
                  color: black
                  transform: scale(2,2)
                tap_action:
                  action: none
                type: state-label
            type: conditional
          - conditions:
              - entity: sensor.washing_machine_processphase
                state: Tvättar
            elements:
              - entity: sensor.washing_machine_processphase
                style:
                  left: 40%
                  top: 69%
                  color: black
                  transform: scale(2,2)
                tap_action:
                  action: none
                type: state-label
            type: conditional
          - conditions:
              - entity: sensor.washing_machine_processphase
                state: Sköljer
            elements:
              - entity: sensor.washing_machine_processphase
                style:
                  left: 40%
                  top: 69%
                  color: black
                  transform: scale(2,2)
                tap_action:
                  action: none
                type: state-label
            type: conditional
        type: conditional
    type: conditional
  - conditions:
      - entity: sensor.washing_machine_operation_state
        state: Finished
    elements:
      - entity: sensor.washing_machine_operation_state
        image: /local/washing_machine_finished.gif
        style:
          left: 0%
          top: 0%
          transform: scale(1,1)
        tap_action:
          action: none
        type: image
    type: conditional
  - conditions:
      - entity: sensor.washing_machine_operation_state
        state: DelayedStart
    elements:
      - entity: sensor.washing_machine_operation_state
        image: /local/washing_machine_ready_locked.gif
        style:
          left: 0%
          top: 0%
          transform: scale(1,1)
        tap_action:
          action: none
        type: image
      - entity: sensor.washing_machine_finish_time_relative
        style:
          left: 79%
          top: 3%
          color: black
          transform: scale(2.5,2.5)
        tap_action:
          action: more-info
        type: state-label
      - type: icon
        icon: mdi:clock-end
        style:
          left: 85%
          top: 27%
          color: green
          transform: scale(2.5,2.5)
    type: conditional
image: /local/washing_machine_ready.gif
panel: true
type: picture-elements

[El_Duderino (Lance)]

Did you ever figure this out? I want something similar, but I want the icon to change based on the input_select.

[El_Duderino (Lance)]

I’m trying to have the icon change based on an input_select. Any idea what I’m doing wrong or what I need to do to make this happen. Is there a way to define multiple icons based on state for the actual input_select?

type: picture-elements
elements:
  - type: state-icon
    entity: input_select.pool_mode
    tap_action:
      action: call-service
      service: input_select.select_next
      service_data:
        entity_id: input_select.pool_mode
    state_image:
      Pool: mdi:swim
      Spa: mdi:hot-tub
      Spillover: mdi:fountain
    style:
      top: 12%
      left: 10%
image: /local/images/pool_auto.png

[yuval221183 (yuval)]

@Hellis81

resource_template: "https://api.home-connect.com/api/homeappliances/

**Hi, I have a question.

I connected the shally 1 PM to the machine - do you think I can use your sensor and how?

Thanks for the help.**

[yuval221183 (yuval)]

@Mike_D

Lovelace UI:

Lovelace UI:
Hi,
Really nice what you did - is it possible to collaborate on the previous Lovelace user interface as well:

I can not see the picture

[Hellis81]

You can get an idea if it’s running or not, an possibly where in the cycle.
But you can’t get the temperature and all that data.