Need a bit guidance for that please.
If i take the playstation logo from you lovelace.yaml and copy the style into self created “file.svg”
i cannot get it to load. when i go to Flaticon and download the ps4 logo the code also looks a lot different.
add xmlns to top tag <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
that’s because I don’t use flaticon
@george_b from your screenshot it looks like you have a swiper bar at the bottom can you shift your page over to expose more button cards? If so, can you share your configuration for this?
My code is a mess. I know mathematical programming not yaml… I will share when I get to a PC, but there should be better ways to do this…
I think the bar at the bottom was from the iPad as I was moving it around to take the screen capture. I do not see it on the tablet I have it deployed (a 2012 Fire, rooted with vanilla android and installed on a wall - that struggles to keep up). I have a swiper card in the bedroom lights (similar to what Mattias has for his media, but different kind of swipe).
From a usability perspective, I do not see value in multiple screens. I go close to the wall, fullykiosk wakes up, I see what’s on and turn it off (or the other way around anyway). I do not use home assistant from my iPad much. It’s more about seeing what’s going on and quick changes of settings. I guess I should record a video, but the functionality I found best is as follows:
Everything is automated and we have found automations that work for us sustainably. If there is one thing I could add is that people in bedrooms at night continuously complain that the light turned off while they were reading a book. I switched from smart switches to smart bulbs so they can turn it on manually. They have access to HASS but don’t use from bed…
For everything else, HASS is integrated with google assistant so voice commands work. As our automation grows maybe we will have different interfaces (views) in different rooms (have a second wall tablet in the works) but not different views in the same wall tablet.
I agree with Mattias’ design approach that emphasizes simplicity, beauty and usability over complexity and complete functionality. But that’s just me.
Mattias sorry for hijacking the thread…
I’m interested in this. Do you just send a critical notification to ios like this?
I tried the icloud integration and it doesn’t seem to work properly with 2 factor auth enabled on apples end and I have to constantly reauthenticate.
Need some SVG help.
Trying to set the “black” area to "yellow"when state == on
icon_lamp: >
[[[ 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);}}.animate{animation: animate 0.8s; transform-origin:
center;}</style> <g fill="#9da0a2""><path d="M32.6 50H17.5c-.4
0-.8-.2-1-.5-.5-.4-10.3-10.3-2.7-26.7a1.6 1.6 0 012.9 1.3c-5.9 12.6-.1 20.8
1.5 22.8h13.7c1.6-2 7.4-10 1.5-22.8a1.6 1.6 0 012.8-1.3C44 39.2 34.1 49 33.7
49.5c-.3.3-.7.5-1.1.5zm0 0M45.3 37.5c-.9 0-1.6-.7-1.6-1.6V23.4a1.6 1.6 0
113.2 0V36c0 .9-.7 1.6-1.6 1.6zm0 0"/> </g> <g path class="${state}"><g
fill="var(--button-card-light-color-no-temperature)"> <path d="M49.9
22.8L40.5 1c-.3-.5-.8-.9-1.4-.9H10.9c-.6 0-1.1.4-1.4 1L.1 22.7A1.6 1.6 0
001.6 25h46.8a1.6 1.6 0 001.5-2.2zm0 0"/> </g> </g></svg>`;]]]
remove fill="var(--button-card-light-color-no-temperature)" and add something like this to styles. It will only color paths without fill.
styles:
custom_fields:
icon_lamp:
[top: 10.5%, left: 10.1%, width: 2.9vw, position: absolute,
fill: "[[[ return entity.state === 'on' ? '#c7983e' : '#9da0a2'; ]]]"]
Thanks Mattias, i will try.
Hi George,
I’m interested how you manage to root with vanilla android your old kindle fire tablet.
Can you point me to a tutorial?
thanks
Somehow, I don’t have an icon/color RGB at the popup card.
The icon shows the “light-popup-card” but it doesn’t have any color. Do you know how to fix this?
First off, do you have card-mod installed? I’m asking because yours looks like the default light-popup-card.
Regarding the rgb icon, your actions at the bottom are in a different order, it’s relevant because the selector targets the second div in the second div, the last action if you have two by two actions. You have three and then one.
#popup > div.action-holder > div:nth-child(2) > div:nth-child(2) > span
I guess you could also do this that would work in any configuration.
#popup > div.action-holder > div:last-child > div:last-child > span
First, thanks for your reply!
I have installed the card-mod. I do not use your fully setup with picture-elements, but only using the buttons etc. That is why it looks different to your setup.
I tried both, however
‘#popup > div.action-holder > div:nth-child(2) > div:nth-child(2) > span’
gives me the following result on my iPhone:
On the following screenshot, you see the css of what I tried.
. Firefox does not recognize the background (second yellow marked text.https://caniuse.com/#feat=css-conic-gradients
In firefox go to url about:config and set layout.css.conic-gradient.enabled flag to true
I didn’t have names on my actions so the correct selector should be
#popup > div.action-holder > div:last-child > div:last-child > .color
Thanks, that works!
I really appreciate your help! 
Hi,
First off amazing work.
Hopefully an easy one, I’m pretty new to this so apologies if this is a stupid question, tried searching and couldn’t find anything of relevance.
A few months back I started implementing this and I’ve just come back to it and the sensor.time font in the sidebar markdown is showing the same font size as all the other sensors (it’s no longer larger).
I’m just wondering how to change this back so that it is large again.
Thanks
old custom:hui-markdown-card, needs lovelace-card-preloader, with class from themes.yaml.
- type: custom:hui-markdown-card
class: sidebar
style:
{top: 9%, left: 11.1%}
content: >
<span>{{ states('sensor.time') }}</span>
main picture-elements style with card-mod
- type: picture-elements
image: /local/background.png
style:
"#root > hui-markdown-card, #key1":
$: |
ha-card > ha-markdown {padding: 0 !important;}
"#root > hui-markdown-card, #key2":
$:
"ha-card > ha-markdown":
$: |
ha-markdown-element > p > span {font-family: SF Text; font-size: 5vw;
font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}
custom:hui-element placed anywhere to fix load problem
- type: custom:hui-element
card_type: markdown
style: {opacity: 0}
content: preload
reference ui-lovelace.yaml
Amazing, thank you so much.