Thanks for the pointers. Got it setup but because I’m using switches they have odd behaviour. For example my wake on lan switch will toggle on but then toggle back off until the pc is online then it toggles back to an online state.
So your automations end up switching the input Boolean off instantly. I’ve added a delay but it’s not elegant.
I’m trying to figure out a trigger to enable the input Boolean from a switch going on-off-on but I’m not sure there is.
switch.dator_template on my dash using wol.
script.dator_on turns on loader
one minute later
automation sees state change in wol and turn loader off
#switch:
- platform: wake_on_lan
mac: !secret wake_on_lan_mac_address
name: iMac
host: !secret wake_on_lan_host
- platform: template
switches:
dator_template:
value_template: "{{ is_state('switch.imac', 'on') }}"
turn_on:
service: script.dator_on
turn_off:
service: script.dator_off
#script:
dator_on:
sequence:
- service: input_boolean.turn_on
entity_id: input_boolean.dator_template
- service: shell_command.switchbot_rpi
- service: light.turn_on
entity_id:
['light.datorlampa', 'light.taklampor']
dator_off:
sequence:
- service_template: >-
{% if is_state('input_boolean.lock_computer', 'on') %}
script.dator_off_toast {% else %}
script.dummy {% endif %}
- condition: template
value_template: "{{ is_state('input_boolean.lock_computer', 'off') }}"
- service: input_boolean.turn_on
entity_id: input_boolean.dator_template
- service: shell_command.imac_turn_off
Hi Matthias. Just a general question regarding picture element. Should it not be possible to show all types of cards in the picture element? Right now i just cant get the shopping list to show.
Hello,
Great design, really inspiring!
How can I to change the layout resolution, to 1920x1080 for example?
thanks.
I just changed the scale of the background image to suit. BUT the scale of your buttons will change, as in the spacing will look a little funny and need adjusting.
Yeah, what @Drew.B said. In picture elements everything is dependent on the aspect ratio of the background image. All elements are positioned relative to that. I designed my interface based on my tablet screen size of 1920x1200 px. While the background image is only 24x15 px in size, it’s still an aspect ratio of 16:10.
So on the positive side of using picture elements is that you can position things however you like, the downside is if you want to change things up you’ll have to reposition everything again. So it would be wise to plan ahead.
You used to with custom:hui-shopping-list-card but now you’ll have to use hui-element.
- type: custom:hui-element
card_type: shopping-list
What you can do though (i did it with the phone layouts) is measure the css top value also in viewwidth. That way i can switch between 16:9 and 18,5:9 resolution pictures. Also negative values are accepted, so if you want to align something to the bottom, just put in a negative value and it will stretch with the picture.
Thanks for your feedback, much appreciated.
Hi Marlo,
you seem to have the trick understood - I am playing for the last two hours with sag files. which I have downloaded from the Noun Project but I am not making a lot of progress:
If I look e.g. at the &icon_hue definition I see a wide range of definition as follows:
icon_hue: &icon_hue >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]
If I am not mistaken, I see two icon definition areas,
The “transform code” above defines the size based on different percentages, right?
The code I have downloaded though from an icon I would like to use look as follows:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 792" xmlns:v="https://vecta.io/nano"><image width="767" height="756" xlink:href="data:image/png;base64,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 AIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEP AAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8 AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ /wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAh xD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBA CPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAA EEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8A AIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEP AAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8 AwBACPEPAAARSvkPI4z+Kotpk2QAAAAASUVORK5CYII=" transform="matrix(.1625 0 0 .1316 325 438)" overflow="visible"/></svg>
How have you done your logo, if I may ask and how did you insert which code?
Thanks!
That’s not a svg. It’s a base64 encoded png… nevertheless any html works so you could just do
icon_hue:
<svg xmlns="http://www.w3.org/2000/svg"...
The code you’re describing are two different shapes. The bulb and the fixture. The transform is the animation.
Thanks!
But how do I get the svg code then? I actually followed the process described above and end up with the base64 code.
I guess I can not work with transform if I just use an html code, right?
I don’t know. You can animate images but svg is way lighter. Post the noun link and I’ll help you out.
Wow - that’s very kind of you. If you help me out on one icon, I am sure I will be able to cover other ones to adapt That is very kind!
This is the icon I kick it off with is a cube. I am assigning a process via a button on this.
By the way: you definitely have designed the best and most sleek interface I have seen so far on HA - just great, thanks for that work and that you share it!
Download icon as SVG
If you paste that into button-card it will look like this.
Rather than fixing it in code we can have a consistent viewbox for all the icons we create or download.
<svg viewBox="0 0 50 50"></svg>
Open both icon and empty svg in illustrator
Copy over the icon to the empty svg
Resize the icon to fit artboard
Now, there’s a lot of paths so let’s make it into one with Compound Path with keyboard shortcut cmd + 8 (ctrl + 8)
So of course that didn’t work as you picked a complex icon 
Undo that and select everything again and go Pathfinder > Exclude
Lets try Compound Path again, we got one path
Save as svg and upload to nano
Now we got an SVG file of the icon in:
You don’t have to make it into one shape, we can split it into more paths so you can color and animate separate parts.
In lovelace it looks like this, you can fine tune the size and position.
custom_fields:
icon_cube3d: >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M47.6 8.1v-.4h-.3L19.2 1c-.1 0-.3 0-.4.1L2.6 12.6l-.1.1v29c0 .2.2.5.4.5l28 6.7h.4l16.1-11.6a.76.76 0 0 0 .2-.4V8.1c0 .1 0 0 0 0zm-28.5-6h.4l12.4 3-7 5-5.4-1.3v-.1h-.4L12.3 7l6.8-4.9zm-2.7 29.6h0V37l-.9-.2-.2.8 1 .2v6.8L3.5 41.4V28.1l12.9 3.1v.5zm0-14.4h0v12.9L11 28.8h.4v-1.3h-.8v1.2L3.5 27V13.7l7.2 1.7v.3h.8v-.1l5 1.2v.5zm-5-2.7v-.1H11l-6.8-1.6 6.8-5h.4l7.3 1.7v.4h.8v-.2l4.3 1-4.3 3.1h-.8v.6l-1.9 1.4-5.4-1.3zm7.2 1.7l-.4-.1.2-.2.2.3zM30.4 35h0v12.9l-12.9-3.1V31.9l.3-.2-.1-.1 12.7 3v.4zm0-1.5L19 30.8l.1-.1.5.1.2-.8-.3-.1v-.3h-.8v.4l-.4.3.3.4-1.1-.3V17.5l.3-.2-.1-.1 1 .2v.4h.8v-.2l7.6 1.8 3.3.8v13.3zm.7-14.5l-.3.2L19 16.4l.1-.1.5.1.2-.8-.6-.2-.1.4-.2-.2 6.2-4.4 7.6 1.8v.3h.8v-.1l4.3 1-4.3 3.1h-.8v.6l-.9.6-.5-.1-.2.6zm7.4 23.2h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-5.3l.3-.2-.3-.5v-.1l.9-.6h.1v-.1l.4.5.5-.4-.2-.3h.4V33l5-3.6v12.8zm0-14.1l-6.7 4.8-.4-.1V20l.9-.6h.1v-.1l6.1-4.4v13.2zm-5-16V12H33l-6.8-1.6L33 5.5h.4l12.4 3-7 5-5.3-1.4zm13 24.3h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-6.1l7-5v12.9zm0-14.4h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-6.1l7-5V22zM34.9 34.4l-1.3-.3.2-.8 1.3.3-.2.8zm7.6 1.8l-1.3-.3.2-.8 1.3.3-.2.8zm2.6.7l-1.3-.3.2-.8 1.3.3-.2.8zm-18.9-5.4l1.3.3-.2.8-1.3-.3.2-.8zm3.6 1.7l-1.3-.3.2-.8 1.3.3-.2.8zm-6.2-2.3l1.3.3-.2.8-1.3-.3.2-.8zm-2.5-.6l1.3.3-.2.8-1.3-.3.2-.8zM37.4 35l-1.3-.3.2-.8 1.3.3-.2.8zM8.7 38.2l-.5-.6 1-.7.5.6-1 .7zm4.1-2.9l-.5-.6 1-.7.5.6-1 .7zM4.7 41l-.5-.6 1-.7.5.6-1 .7zm10.1-7.2l-.5-.6 1-.7.5.6-1 .7zm-8.1 5.8l-.4-.6 1-.7.5.6-1.1.7zM19.5 4.7h-.8V3.4h.8v1.3zm0 2.7h-.8V6h.8v1.4zM18.7 27h.8v1.3h-.8V27zm0-2.6h.8v1.3h-.8v-1.3zm.8-11.8h-.8v-1.3h.8v1.3zm-.8 6.5h.8v1.3h-.8v-1.3zm0 2.6h.8V23h-.8v-1.3zm8 16.9l-.4-.6 1-.7.5.6-1.1.7zM19.2 43l.5.6-1 .7-.5-.6 1-.7zm1.5-.1l-.5-.6 1-.7.5.6-1 .7zm2-1.4l-.5-.6 1-.7.5.6-1 .7zm6.1-4.3l-.5-.6 1-.7.5.6-1 .7zm4.7-13.4h-.8v-1.3h.8v1.3zm0-2.6h-.8v-1.3h.8v1.3zm0 5.2h-.8v-1.3h.8v1.3zm0 2.6h-.8v-1.3h.8V29zm0 2.6h-.8v-1.3h.8v1.3zm-.8-22.2h.8v1.3h-.8V9.4zm0-2.6h.8v1.3h-.8V6.8zm.8 9.1h-.8v-1.3h.8v1.3zM19.2 38.4l-1.3-.3.2-.8 1.3.3-.2.8zm2.5.6l-1.3-.3.2-.8 1.3.3-.2.8zm11.7 2l1.3.3-.3.7-1.3-.3.3-.7zm3.6 1.7l-1.3-.3.2-.8 1.3.3-.2.8zm-12.7-3.1l-1.3-.3.2-.8 1.3.3-.1.5.9-.7.4.6v-.1l1.3.3-.2.8-1.3-.3.1-.5-.9.7-.4-.6v.1zm5.1 1.2l-1.3-.3.2-.8 1.3.3-.2.8zM13 36.1l1.3.3-.2.8-1.3-.3.2-.8zm-2.4-24.3h.8v1.3h-.8v-1.3zm0 5.3h.8v1.3h-.8v-1.3zm0-7.9h.8v1.3h-.8V9.2zm.8 24.9h-.8v-1.3h.8v1.3zm-.8-9.2h.8v1.3h-.8v-1.3zm.8 6.6h-.8v-1.3h.8v1.3zm-.7 5.2l-.5-.6.3-.2v-.4h.7v.1l.2.2h.2v.2h-.1l-.1.5-.5-.1-.2.3zm10.4-20.8l1.3.3-.2.8-1.3-.3.2-.8zm2.5.6l1.3.3-.2.8-1.3-.3.2-.8zm21.5 6l-1.3-.3.2-.8 1.3.3-.2.8zm-2.6-.6l-1.3-.3.2-.8 1.3.3-.2.8zm-16.3-4.8l1.3.3-.2.8-1.3-.3.2-.8zm2.5.7l1.3.3-.2.8-1.3-.3.2-.8zm8.7 2.9l-1.3-.3.2-.8 1.3.3-.2.8zm-2.5-.7l-1.3-.3.2-.8 1.3.3-.2.8zm-20.1-.6l-.5-.6 1-.7.5.6-1 .7zm-7.5 4.5l.5.6-1 .7-.5-.6 1-.7zm2-1.5l.5.6-1 .7-.5-.6 1-.7zm-4 2.9l.5.6-1 .7-.6-.6 1.1-.7zm7.5-4.4l-.5-.6 1-.7.5.6-1 .7zm-1.5.1l.4.6-1 .7h.6v1.3h-.8v-1.3h.1l-.4-.6 1.1-.7h-.7v-1.3h.8l-.1 1.3z"/></svg>
styles:
custom_fields:
icon_cube3d:
[fill: green, top: 7%, left: 10%, width: 3.5vw, position: absolute]
Listen Mattias, this is soooo nice of you to spend all the effort and time to help a rookie like I am, really appreciated. It looks not only great but now I know how it works and that is most important!
Really, really appreciated and big help! Thanks a lot!
We contribute and learn from each other. 
Hi Mattias,
I manage to customize icons doing the following:
download icons in .svg format
modify icon in Inkscape as need it and save it with a different name
open the original icon in a text editor and copy the viewBox=“0 0 24 24” and <path d=" …" and paste it in yaml
open the modified icon in a text editor and copy the viewBox=“0 0 24 24” and <path d=" …" and paste it in yaml
the modified yaml looks like this:
custom_fields:
icon_ceiling_light: >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 24 24"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8,9H11V4H13V9H16L20,17H4L8,9M14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18H14Z" /></svg>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="m 8,9 c 8,0 0.7559689,0 8,0 l 4,8 H 4 L 8,9"/></svg>`; ]]]
styles:
custom_fields:
icon_ceiling_light:
[fill: grey, top: 7%, left: 4.5%, width: 4.5vw, position: absolute]
the new icon animates the same as the icon in your design
I will release some animated SVG today. Thanks for the great help.
Here is a little video of my Lovelace. Here the video: https://imgur.com/xnF4aJf
WOW, great. Do you share your complete Config?