Seems the white X has gone from popups:
Any suggestions on what setting to check? I’m using your theme
Oh great so it shows me how to install and set it all up? I will watch the video and try it… Thanks so much.
It’s just a bunch of input_selects like this one:
input_select:
marlo_border_radius:
name: Border Radius
options:
- 0px
- 6px
- 12px
- 18px
And then the button-template is adapted to use these inputs:
button_card_templates:
light:
aspect_ratio: 1/1
show_state: true
show_icon: false
styles:
name: &button_style_name_state
[justify-self: start, padding-bottom: 0px, z-index: 1]
state: *button_style_name_state
custom_fields:
info: &circle_pos
[top: 8.5%, left: 61.5%, width: 30%, position: absolute, letter-spacing: 0.03vw]
card: &button_style_card
[font-family: "[[[ return states['input_select.marlo_font_selector'].state ]]]", letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: "[[[ return states['input_select.marlo_font_size_selector'].state ]]]",
background-color: var(--primary-color), opacity: 0.4, padding: 11vw 0.9vw 0.9vw 1.1vw, border-radius: "[[[ return states['input_select.marlo_border_radius'].state ]]]", box-shadow: "[[[ return states['input_select.marlo_box_shadow'].state ]]]", transition: none]
state: &button_card_state
- value: 'on'
styles:
card: [background-color: 'rgba(255, 255, 255)', opacity: 0.7]
name: [color: var(--primary-color)]
state: [color: var(--primary-color)]
2 Likes
I had wondered about the button-card. It says that “works with any toggleable entity” and for a menu I don’t have one. Would I just create a fake switch and tie it to that?
You don’t need a switch. Just add a tap_action
Yes. Update browser_mod.
1 Like
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
2 Likes
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
1 Like
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:
- I downloaded an icon in svg format
- edited in Adobe Illustrator and saved it as svg
- pushed it through nano and downloaded again and …
- now I am a bit lost
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 one starts with “M27.4 …”
- and the next “M14.1 …”
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!