Can you push a button and after that the world will have peace? Joking of course… but this has been asked dozens of times. It is not that simple.
So funny😂. I wanna learn. I’m just asking from where to start. I don’t wanna all ready of course. If you know how to start instead spending time writing me funny messages please help me🎉
1 Like
Best way to start is to read from the beginning. I think most of all here have done this. Its a hard way, but you learn a lot and after some time , you have it. I came here with zero idea but with reading and testing and fail and error i have all setup like i want.
Matthias helps always when you have a specific question. So, its hard to start, but its worth.
1 Like
quick question…how do i change this line inside the button_card_templates.yaml so that the person template displays the zone i´m in…instead of Ja/Nej
state_display: >
[[[ return entity.state === 'home' ? 'Ja' : 'Nej'; ]]]
help is very appreciated
thanks
If there is any specific part where you need help or examples for, let me know
Hello people,
I need yout help again, I want to change the color of my heat-icon if its on.
icon_heat:
styles:
custom_fields:
icon_heat:
- top: 11%
- left: 6.3%
- width: 3.05vw
- position: absolute
custom_fields:
icon_heat: >
[[[
const state = entity.state === 'heat' ? 'animate' : 'null';
const style = `
<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);
fill: #e15b64;
}
}
.animate {
animation: animate 0.8s;
transform-origin: center;
}
</style>
`;
const path = `
<path d="M71.684 50.656c-1.106-1.249-3.024-3.678-4.701-4.028.81 5.24.902 10.16-1.555 14.774-.587-5.587-4.781-10.095-10.212-11.16 2.027-2.1 4.079-4.193 5.517-6.654 3.164-5.418 3.466-12.281 1.163-18.108s-7.073-10.577-12.782-13.279c-2.698-1.277-5.677-2.171-7.851-4.203 4.04 6.908 4.551 15.72 1.335 23.039-2.576 5.862-7.235 10.528-11.458 15.369-3.728 4.274-7.585 8.985-9.26 14.544-1.816 6.028-.424 12.713 2.768 18.07 3.134 5.261 8.402 9.107 14.216 11.169 9.918 3.518 21.564 1.823 30.035-4.371 4.219-3.085 7.709-7.305 9.27-12.257 2.43-7.704-1.327-17.078-6.485-22.905z"/>
`;
if (entity.state === 'on') {
return `
<svg viewBox="0 0 100 100"> ${style}
<path class="animate" fill="#8d8e90"/> ${path}
</svg>
`;
} else if (entity.state === 'off') {
return `
<svg viewBox="0 0 100 100"> ${style}
<path fill=#e15b64"/> ${path}
</svg>
`;
}
]]]
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
style: |
:host .content {
width: 37em;
height: 500px;
}
hide_header: true
card:
type: custom:thermostat-popup-card
entity: "[[[ return entity.entity_id ]]]"
I try it like this, but now theres no Icon at all.
I need a push in the right direction.
Using the theme, the Lovelace and font.css is loaded but I still can’t get the right size of the fonts. why?
Is it this or where is it defined?
The time should be much bigger.
Hi,
I would like to make my own icon.
How do you add your icon in your custom-icon.js ?
I have my icon in *.svg and I think I need to convert them, but I don’t know how.
Thanks.
Hi, im in the proceeds of trying to re-create a new tablet display since the last breaking changers and was trying to understand parts of your UI.
Its the only way I learn, is to pull bits out and workout how they function.
This is not a criticism on your work, I’m certainly not in a position to do that, but I was wondering why you create the sidebar_date as you do:
{% set months = ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'] %}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
In the pass, I’ve used:
{{ states('sensor.date') and as_timestamp(now()) | timestamp_custom('%d %B')}}
Is there any advantages or disadvantages in either templates.
Thank you, I was just curious.
Hi, first of all I want to than @Mattias_Persson for such an amazing GUI. I’m actually implementing this across 5 wall tablets now… its going quite slow as I really only know c and fortran, so understanding the css and js is a bit uphill, but I’m getting there!
Quick question regarding text alignment - I have some text (and sensor) on the sidebar which I would like to align right (to the right of the sidebar) but cannot figure it out. I put in the following line:
<p style="text-align:right;">הבדלה: {{ as_timestamp(states('sensor.jewish_calendar_upcoming_havdalah'))| timestamp_custom('%H:%M') }}</p>
but that doesn’t seem to do anything - still aligned left as seen in following image - any ideas?
Check with your browser tools (F12), that gives a better understanding why and how things work. 
My guess is, the text is aligned on the right of the paragraph, but that p isn’t a 100% wide…
markdown != html
While some basic tags like <p> works fine, inline styles like <p style="... won’t work.
@kaaspad you have to style it with card-mod
- type: custom:hui-element
card_type: markdown
style:
top: 9%
left: 11.1%
card_mod:
class: markdown-sidebar
style:
ha-markdown:
$: |
ha-markdown-element > font > p {
text-align: right;
}
I do it that way so that it is displayed in swedish. If you know how to edit localization in templates I’m all ears 
1 Like
[[[
const state = entity.state === 'on' ? 'animate' : 'off';
return `
<svg viewBox="0 0 100 100">
<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;
fill: red;
}
.off {
fill: green;
}
</style>
<path class="${state}" d="M71.684 50.656c-1.106-1.249-3.024-3.678-4.701-4.028.81 5.24.902 10.16-1.555 14.774-.587-5.587-4.781-10.095-10.212-11.16 2.027-2.1 4.079-4.193 5.517-6.654 3.164-5.418 3.466-12.281 1.163-18.108s-7.073-10.577-12.782-13.279c-2.698-1.277-5.677-2.171-7.851-4.203 4.04 6.908 4.551 15.72 1.335 23.039-2.576 5.862-7.235 10.528-11.458 15.369-3.728 4.274-7.585 8.985-9.26 14.544-1.816 6.028-.424 12.713 2.768 18.07 3.134 5.261 8.402 9.107 14.216 11.169 9.918 3.518 21.564 1.823 30.035-4.371 4.219-3.085 7.709-7.305 9.27-12.257 2.43-7.704-1.327-17.078-6.485-22.905z"/>
</svg>
`;
]]]
1 Like
I don’t know.
“zoning is the state a zone has when it is configured. A zone doesn’t have another state; all configured zones are zoning all the time.”
Maybe automate an input select and display that state?
1 Like
Hi! May I know how can I make the pop up in the sidebar info looks like this — transparent with blurred back ground?
And the pop up in the dashboard looks like this?
Using the existing themes, it looks like this - dark box:
I have copied and pasted from IOS Dark Theme to Mattias’ themes.yaml but to no avail.
That did the trick! Thanks!
@Mattias_Persson Beautiful job with this dashboard design. It’s really inspired me to buckle down and create something useful for our household as well.
I’m curious about your layout mechanism: a picture-elements card and (what appears to be) manual positioning of each element using top: and left:. Has this worked well for you? Have you found it to be difficult to maintain? I’m trying to decide if I should do something like that, or if I should try the Lovelace Layout Card system and a CSS grid.