Can I ask 1 question. What does people’s cards look like when on a mobile device compared to laptop ?
I tried a basic card but when I checked it on my phone, the card was out of alignment.
All I had was an image background and the version and installed version of HA on it as a test
Thanks
Martyn
That is an issue yes.
If you want it to work nicely on both then you need to make two cards, one for each.
Washing machine as a card.
I can only view the states now but there are API put commands to set options, but I can’t make it work… Yet.
It displays if prewash is enabled, extra rinse, spin rpm, temperature, what i-DOS is activated, where in the cycle it is, and what the expected end time is.
Video of the animated GIF
When it’s done but not emptied:
When emptied:
Would love to borrow this if you’d share the code 
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: 180
- platform: template
sensors:
washing_machine_finish_time:
friendly_name: "sensor.washing_machine_finish_time"
value_template: "{{ as_timestamp(states('sensor.washing_machine_remaining_program_time')) | timestamp_custom('%H:%M') }}"
# Below templates loop to find the key it needs. It may seem cumbersome but
# the array is indexed and it can shift, I mean it has happened...
- platform: template
sensors:
washing_machine_spin_rpm:
friendly_name: "sensor.washing_machine_spin_rpm"
value_template: >-
{% if state_attr('sensor.washing_machine_json', 'data') != None %}
{% for value in state_attr('sensor.washing_machine_json', 'data').options -%}
{% if value.key == "LaundryCare.Washer.Option.SpinSpeed" %}
{{ value.value.split(".")[-1:][0].replace("RPM", "") }}
{%- endif %}
{%- endfor %}
{%- endif %}
- platform: template
sensors:
washing_machine_temperature:
friendly_name: "sensor.washing_machine_temperature"
value_template: >-
{% if state_attr('sensor.washing_machine_json', 'data') != None %}
{% for value in state_attr('sensor.washing_machine_json', 'data').options -%}
{% if value.key == "LaundryCare.Washer.Option.Temperature" %}
{{ value.value.split(".")[-1:][0].replace("GC", "") }}°c
{%- endif %}
{%- endfor %}
{%- endif %}
- platform: template
sensors:
washing_machine_prewash:
friendly_name: "sensor.washing_machine_prewash"
value_template: >-
{% if state_attr('sensor.washing_machine_json', 'data') != None %}
{% for value in state_attr('sensor.washing_machine_json', 'data').options -%}
{% if value.key == "LaundryCare.Washer.Option.Prewash" %}
{{ value.value }}
{%- endif %}
{%- endfor %}
{%- endif %}
- platform: template
sensors:
washing_machine_rinse:
friendly_name: "sensor.washing_machine_rinse"
value_template: >-
{% if state_attr('sensor.washing_machine_json', 'data') != None %}
{% for value in state_attr('sensor.washing_machine_json', 'data').options -%}
{% if value.key == "LaundryCare.Washer.Option.RinsePlus" %}
{{ value.value.split(".")[-1:][0]}}
{%- endif %}
{%- endfor %}
{%- endif %}
- platform: template
sensors:
washing_machine_processphase:
friendly_name: "sensor.washing_machine_ProcessPhase"
value_template: >-
{% if state_attr('sensor.washing_machine_json', 'data') != None %}
{% for value in state_attr('sensor.washing_machine_json', 'data').options -%}
{% if value.key == "LaundryCare.Common.Option.ProcessPhase" %}
{{ value.value.split(".")[-1:][0] }}
{%- endif %}
{%- endfor %}
{%- endif %}
- platform: template
sensors:
washing_machine_idos1:
friendly_name: "sensor.washing_machine_IDos1"
value_template: >-
{% if state_attr('sensor.washing_machine_json', 'data') != None %}
{% for value in state_attr('sensor.washing_machine_json', 'data').options -%}
{% if value.key == "LaundryCare.Washer.Option.IDos1.Active" %}
{{ value.value }}
{%- endif %}
{%- endfor %}
{%- endif %}
- platform: template
sensors:
washing_machine_idos2:
friendly_name: "sensor.washing_machine_idos2"
value_template: >-
{% if state_attr('sensor.washing_machine_json', 'data') != None %}
{% for value in state_attr('sensor.washing_machine_json', 'data').options -%}
{% if value.key == "LaundryCare.Washer.Option.IDos2.Active" %}
{{ value.value }}
{%- endif %}
{%- endfor %}
{%- endif %}
That is all the sensors.
The card yaml:
elements:
- entity: sensor.washing_machine_operation_state
image: /local/washing_machine.gif
state_image:
Run: /local/washing_machine.gif
Ready: /local/washing_machine_ready.gif
Finished: /local/washing_machine_finished.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.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_o.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
- 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
image: /local/washing_machine_ready.gif
panel: true
type: picture-elements
One thing that I might change is the pre wash icon and rinse icons.
Instead of black I will probably make them red for off and green for on, and use the pre wash on as the off icon also but red.
Images I used
http://www.hoppvader.nu/bilder/washing_machine.zip
If you need help with the Home connect API then just say so and I can guide you on how to get the Auth code.
(I don’t take any credit for the animated gif. That was found)
Does anyonne know how to make the hitbox of the icons bigger and how to remove the shadow of the picturelement?
I want to get rid of the black line at the bottom.
type: picture-elements
elements:
- type: icon
icon: mdi:chevron-up
tap_action:
action: call-service
service: script.fernseher_up
style:
top: 18%
left: 50%
transform: translate(-50%, -50%) scale(2, 2)
With shadow I mean this black line around the picture-element
This is not a shadow. This is a card’s background. Your button is of gray color (because of a using theme probably), that is why you can see the difference.
Nice to know and how can i remove the background of a picture-element?
Becuase this is my picture for the picture-element.
And i made the dark gray the same colour as my home assistant theme and the light grey the same colour as the other buttons colour so it blends in but now there is this black line you know.
You are posting one picture without a code and asking about a “shadow” which nobody else can see. Now it is realized that this black “shadow” is just a background picture. Replace this picture with another one of red color and start asking “how to remove red shadow?”. Now I am completely lost in your intentions.
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
1
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
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.
Alright!
Here is the Dropbox with the background and the pictures for the buttons.
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)
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
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.
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.
Thank you very much this finally worked!
I love this design!!! Now need one for a dryer with the duck all fluffed up…lol
I wonder if this would work with SmartThings Samsung washer? Home Connect does not allow Samsung devices.