Hey Johannes, which tablet and dock are you using? I like the design!
guys ive got a real werid one and not sure if this is the right place to post.
my setup is as follows.
- Core2023.11.1
- Frontend20231030.1
Button card v4.1.1
So I have 2 lights (sideboard & underlight)
The code for these lights is
- type: custom:button-card
entity: light.kitchen_sideboard
name: <marquee behavior=scroll scrollamount="3">Side Board Lamp</marquee>
template:
- light
- icon_lamp
#- loader
- type: custom:button-card
entity: light.kitchen_under_light
name: Underlight
template:
- base
- icon_lamp
If i turn light.kitchen_sideboard on/off works fine no issues.
BUT if i turn off light.kitchen_under_light i get this error
When i turn the light back on goes back to normal.
So its as if it can report something in its off state? BUT the strange thing is the other light light.kitchen_sideboard works fine when on/off with no errors.? which is throwing me to work out what it is.?!?!
I have tried switching templates from -base to -light
Any help would be great
im getting same error on something that was working fine for months.
Seems something in latest Core update has broken something…?!
update the extra_styles template
- type: custom:button-card
entity: media_player.philipstv_2
name: TV
state_display: >
[[[
if (states['media_player.tv_wohnzimmer_3'].state === 'playing') {
return states['media_player.tv_wohnzimmer_3'].attributes.app_name;
}
if (states['media_player.tv_wohnzimmer_3'].state === 'idle') {
return states['media_player.tv_wohnzimmer_3'].attributes.media_title;
}
]]]
custom_fields:
c1: |
[[[
if (states['media_player.tv_wohnzimmer_3'].attributes.app_name === 'YouTube') {
return "<ha-icon icon='mdi:youtube'></ha-icon>";
}
if (states['media_player.tv_wohnzimmer_3'].attributes.app_name === 'Netflix') {
return "<ha-icon icon='mdi:netflix'></ha-icon>";
}
if (states['media_player.tv_wohnzimmer_3'].attributes.app_name === 'Disney+') {
return `
<svg fill="#000000" viewBox="0 0 24 24">
<path d="M10.896 13.837c.013.002.016.002.029.004.216.029.429.068.591.141.151.067.239.151.32.301.123.228.131.546.02.788-.083.18-.264.33-.43.41-.172.084-.342.123-.537.146-.34.037-.708-.033-1.015-.181-.181-.089-.403-.241-.514-.437-.082-.144-.079-.331.02-.468.159-.218.5-.266.757-.257.196.008.548.068.734.134.052.019.242.093.275.127.023.024.038.058.028.09-.042.13-.358.198-.449.212-.244.037-.371-.055-.648-.165-.069-.027-.161-.057-.231-.063-.126-.012-.278.023-.302.161-.012.071.071.137.135.165.149.064.27.087.416.089.433.007.919-.064 1.273-.315.048-.035.096-.085.097-.149.002-.129-.224-.208-.224-.208-.238-.099-.679-.148-.906-.166-.238-.021-.613-.051-.703-.065-.093-.013-.193-.032-.274-.068-.081-.036-.159-.118-.183-.208-.041-.163.011-.362.102-.492.237-.34.791-.469 1.204-.52.401-.05 1.048-.049 1.442.16.061.033.092.063.079.128-.026.122-.117.2-.228.235-.117.037-.358.052-.463.058-.474.027-1.048.013-1.499.136-.035.01-.097.027-.116.049-.071.077.131.099.175.107.013.003.015.004.029.005L10.896 13.837M8.074 11.722c0 0 .077-.116.142-.204.118-.16.331-.382.491-.519.049-.042.107-.089.107-.089s-.091.009-.142.02c-.122.024-.3.142-.389.219-.147.126-.309.331-.236.513C8.057 11.688 8.074 11.722 8.074 11.722M8.892 11.941c.232-.016.45-.083.653-.195.199-.111.491-.328.461-.583-.009-.083-.063-.145-.131-.174-.089-.038-.135-.032-.248.001-.082.024-.119.039-.197.083-.228.133-.551.416-.727.642-.041.053-.082.113-.114.154-.02.025-.036.048-.034.055C8.561 11.95 8.801 11.947 8.892 11.941M8.3 12.376c-.024.025-.049.087-.076.131-.014.024-.04.054-.057.066-.061.044-.112.047-.17-.005-.082-.072-.129-.185-.133-.294-.002-.048.006-.1-.003-.14-.015-.068-.083-.137-.119-.202-.043-.076-.078-.209-.082-.295-.015-.268.126-.514.31-.709.185-.197.426-.36.689-.471.248-.105.612-.176.885-.081.089.03.212.106.275.185.013.016.024.034.037.043.012.008.044.011.069.015.087.015.212.081.263.125.103.089.159.173.185.296.052.247-.09.519-.253.684-.278.284-.552.484-.908.623-.156.061-.399.118-.576.102-.055-.005-.112-.019-.165-.023-.027-.002-.127-.028-.138-.035C8.32 12.381 8.303 12.372 8.3 12.376M8.617 12.924c.011.002.028.007.042.012.125.047.176.163.207.289.071.294.101.945.113 1.2C8.988 14.617 8.992 14.805 9 14.994c.007.16.02.373-.014.523-.012.054-.048.117-.1.149-.059.038-.194.041-.268.025-.182-.038-.242-.155-.268-.335-.062-.431-.032-1.276.004-1.632.012-.118.056-.495.118-.653C8.495 13.017 8.539 12.909 8.617 12.924M3.067 13.641c0 0-.272.019-.458.04-.238.026-.685.103-.942.195-.077.028-.234.093-.248.173-.014.082.037.147.094.214.033.039.219.218.271.261.219.183.663.465.99.601.112.046.298.113.298.113s-.014-.529-.011-1.05C3.061 13.913 3.067 13.641 3.067 13.641M8.046 13.851c.016.142-.021.411-.027.446-.012.082-.073.27-.083.293-.05.115-.099.208-.151.302-.089.16-.301.414-.426.523-.467.404-1.191.634-1.812.71-.421.051-.905.043-1.351-.039-.154-.028-.382-.081-.382-.081s.001.091-.007.156c-.004.029-.026.107-.038.132-.032.067-.086.102-.163.116-.094.017-.193.023-.279-.014-.142-.06-.193-.192-.218-.345-.02-.122-.041-.335-.041-.335s-.106-.05-.195-.094c-.272-.134-.53-.296-.756-.463-.063-.047-.331-.272-.391-.328-.166-.158-.316-.315-.43-.517-.089-.158-.114-.297-.047-.464.093-.233.426-.408.655-.508.168-.074.689-.244.905-.276.102-.015.261-.043.271-.049.004-.003.007-.006.01-.009C3.094 13 3.103 12.77 3.101 12.686c-.002-.083.061-.627.082-.742.011-.062.058-.302.106-.365.031-.042.087-.039.132-.011.248.154.324.69.342.962.011.166.017.416.017.416s.285-.008.46-.003c.17.004.358.031.534.059.226.036.667.132.92.261.208.106.403.283.466.472.059.173.05.292-.039.448-.1.176-.29.307-.483.317-.057.003-.273-.025-.34-.077-.026-.02-.025-.057-.006-.083C5.299 14.33 5.4 14.277 5.46 14.245c.03-.016.055-.034.078-.055.049-.044.094-.092.089-.148-.007-.073-.084-.118-.158-.147-.345-.137-1.035-.251-1.368-.271-.13-.008-.316-.014-.316-.014l.039 1.839c0 0 .153.029.274.049.069.011.363.037.441.039.594.016 1.258-.038 1.803-.295C6.583 15.13 6.802 14.99 6.969 14.8c.219-.251.334-.595.304-.955-.033-.392-.309-.858-.53-1.142-.583-.749-1.582-1.366-2.46-1.727-.897-.369-1.784-.581-2.736-.616-.245-.009-.781.003-1.051.078-.039.011-.078.024-.113.032-.028.007-.073.026-.085.036-.007.005-.014.013-.014.013s.017.009.033.016c.029.013.149.02.212.031.056.011.114.04.137.081.022.039.025.07-.002.102-.061.075-.292.062-.394.046-.106-.017-.237-.049-.261-.141-.028-.108.023-.214.079-.313.112-.196.272-.298.506-.362.333-.092.752-.155 1.067-.167.711-.027 1.384.097 2.072.307.394.119.91.319 1.288.501.271.131.698.371.938.528.076.05.518.375.587.433.143.117.331.286.467.421.263.261.59.66.749.977.038.076.068.151.117.239.017.03.09.21.102.263.012.052.029.127.032.13C8.015 13.637 8.048 13.791 8.046 13.851M16.982 13.444c-.333.077-1.208.119-1.208.119l-.11.346c0 0 .437-.037.756-.004 0 0 .103-.012.115.117.004.12-.01.249-.01.249s-.007.078-.117.098c-.12.02-.943.052-.943.052l-.133.451c0 0-.05.104.061.074.103-.028.965-.189 1.078-.166.12.03.254.19.215.337-.046.181-.906.73-1.43.692 0 0-.275.018-.508-.354-.217-.354.082-1.025.082-1.025s-.137-.313-.038-.419c0 0 .059-.054.231-.066l.211-.436c0 0-.24.017-.383-.16-.133-.168-.144-.245-.042-.291.109-.054 1.11-.236 1.798-.213 0 0 .239-.023.447.392C17.052 13.236 17.152 13.404 16.982 13.444M14.392 15.122c-.088.208-.321.429-.611.291-.286-.138-.741-1.07-.741-1.07s-.173-.347-.206-.338c0 0-.037-.068-.06.312-.024.378.005 1.115-.146 1.231-.143.116-.316.07-.406-.066-.082-.134-.115-.452-.071-1.011.052-.56.182-1.156.349-1.341.166-.184.299-.05.351-.002 0 0 .222.201.588.792l.065.109c0 0 .333.558.367.557 0 0 .027.026.051.007.035-.01.021-.189.021-.189s-.069-.608-.373-1.638c0 0-.046-.128-.015-.249.031-.122.153-.065.153-.065s.47.237.699 1.002C14.634 14.222 14.482 14.913 14.392 15.122M19.455 14.664c-.214.374-.819 1.156-1.622.971-.265.643-.488 1.294-.616 2.268 0 0-.028.189-.185.124-.156-.055-.413-.314-.465-.672-.056-.471.154-1.267.582-2.18-.125-.203-.21-.493-.137-.907 0 0 .108-.767.878-1.459 0 0 .092-.08.146-.055.059.025.032.274-.015.396-.049.121-.392.715-.392.715s-.214.401-.154.718c.404-.622 1.323-1.875 1.893-1.48.191.137.28.435.28.756C19.648 14.139 19.581 14.439 19.455 14.664M19.289 13.679c0 0-.032-.247-.273.025-.208.23-.583.66-.884 1.245.317-.036.622-.207.714-.295C18.995 14.521 19.345 14.16 19.289 13.679M23.88 13.623h-1.472c-.029-.5-.09-.988-.185-1.49-.01-.052-.055-.09-.108-.09h-.339c-.03 0-.058.013-.077.036-.019.024-.027.053-.021.083.096.486.158.964.188 1.461H20.45c-.066 0-.12.053-.12.119v.306c0 .066.054.12.12.12h1.437c.001.076.002.143.002.207 0 .441-.019.805-.064 1.215-.004.032.007.063.028.087.021.023.051.037.082.037h.315c.061 0 .112-.046.119-.107.043-.413.061-.781.061-1.231 0-.063-.001-.131-.002-.207h1.452c.066 0 .12-.054.12-.12v-.306C24 13.677 23.946 13.623 23.88 13.623M4.193 9.521C4.172 9.552 4.167 9.59 4.179 9.625 4.192 9.661 4.219 9.688 4.254 9.7l.264.089C4.534 9.794 4.55 9.797 4.565 9.797c.049 0 .095-.024.122-.065.865-1.27 2.035-2.328 3.384-3.058 1.393-.754 2.971-1.153 4.565-1.153 1.925 0 3.781.568 5.37 1.642 1.55 1.048 2.754 2.509 3.481 4.226.022.051.072.085.128.085h.315c.036 0 .07-.018.091-.049.021-.03.025-.069.011-.103-.75-1.847-2.019-3.421-3.669-4.552C16.674 5.612 14.693 5 12.636 5 9.234 5 6.078 6.69 4.193 9.521"/>
</svg>
`;
}
]]]
styles:
custom_fields:
c1:
- top: '-5%'
- left: 55%
- width: 50%
- position: absolute
template:
- base
- icon_tv_ambilight
- loader
1 Like
so im using button_card_templates.yaml in the root.
my current exra styles section in that file is
extra_styles:
extra_styles: >
[[[
if (entity) {
let hs = entity.attributes.hs_color === undefined,
h = hs || entity.attributes.hs_color[0],
s = hs || entity.attributes.hs_color[1],
l_min = 28,
l_max = 48,
l_calc = entity.attributes.brightness / 2.54 * (l_max - l_min) / 100 + l_min;
var light_color = entity.attributes.color_mode === 'color_temp' || entity.attributes.color_mode === 'brightness'
? `hsl(204, 58%, ${l_calc}%);`
: `hsl(${h}, ${s}%, ${l_calc}%);`;
}
return `
svg {
--light-color:
${ variables.state_on && entity.attributes.brightness !== undefined
? light_color
: variables.state_on && entity.attributes.brightness === undefined
? 'var(--state-icon-active-color);'
: 'var(--state-icon-color);'
}
}
#container {
text-align: left !important;
}
#name, #state {
font-size: 1.32vw;
letter-spacing: -0.02vw;
}
#state::first-letter {
text-transform: uppercase;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name, #state {
font-size: 2vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name, #state {
font-size: 3vw;
}
}
/* tilt */
#ripple, .js-tilt-glare {
clip-path: inset(0 round var(--custom-button-card-border-radius));
overflow: hidden;
}
.js-tilt-glare {
z-index: 1;
}
.js-tilt-glare-inner {
background-color: rgba(0,0,0,0.9);
}
#container {
transform: translateZ(${variables.tilt_options.parallax});
}
#card {
transform-style: preserve-3d;
overflow: visible;
}
${this._config.template.includes('conditional_media') ? `
:host {
--blur-intensity: blur(4.5px) brightness(0.8);
}
/* phone */
@media screen and (max-width: 800px) {
:host {
--blur-intensity: blur(2.5px) brightness(0.8);
}
}
#ripple, .js-tilt-glare {
clip-path: inset(0 round calc(var(--custom-button-card-border-radius) / 2));
}
#container {
overflow: hidden;
}
.marquee {
animation: marquee 20s linear infinite;
}
@keyframes marquee {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
`:''}
${this._config.template.includes('footer') ? `
:host {
--name-font-size: 1.22vw;
--name-icon-size: 1.5vw;
--notify-font-size: 0.9vw;
--notify-box-size: 1.8vw;
--name-padding-v: 0.7vw;
--name-padding-h: 1.1vw;
--card-border-radius: 0.6vw;
}
#ripple, .js-tilt-glare {
border-radius: calc(var(--card-border-radius) - 0.1vw);
clip-path: inset(0 round calc( var(--custom-button-card-border-radius) - 0.1vw ));
}
#name {
font-size: var(--name-font-size);
padding: var(--name-padding-v) var(--name-padding-h);
letter-spacing: 0.012vw;
}
ha-icon {
width: var(--name-icon-size);
vertical-align: 7%;
padding-right: 0.1vw;
opacity: 0.4;
}
#card {
border-radius: var(--card-border-radius);
background: rgba(115, 115, 115, 0.04);
}
#notify {
font-size: var(--notify-font-size);
width: var(--notify-box-size);
height: var(--notify-box-size);
line-height: var(--notify-box-size);
padding-right: 0.5px;
padding-top: 0.5px;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name {
font-size: calc(var(--name-font-size) * 1.4);
padding: calc(var(--name-padding-v) * 1.4) calc(var(--name-padding-h) * 1.4);
}
ha-icon {
width: calc(var(--name-icon-size) * 1.4);
}
#card {
border-radius: calc(var(--card-border-radius) * 1.4);
margin: 0 0.5vw;
}
#notify {
font-size: calc(var(--notify-font-size) * 1.4);
width: calc(var(--notify-box-size) * 1.4);
height: calc(var(--notify-box-size) * 1.4);
line-height: calc(var(--notify-box-size) * 1.4);
}
}
/* phone */
@media screen and (max-width: 800px) {
#name {
font-size: calc(var(--name-font-size) * 2.7);
padding: calc(var(--name-padding-v) * 2.7) calc(var(--name-padding-h) * 2.7);
letter-spacing: 0.12vw;
}
ha-icon {
width: calc(var(--name-icon-size) * 2.7);
}
#card {
border-radius: calc(var(--card-border-radius) * 2.7);
background: rgba(115, 115, 115, 0.08);
margin: 0 0.5vw;
}
#notify {
font-size: calc(var(--notify-font-size) * 2.7);
width: calc(var(--notify-box-size) * 2.7);
height: calc(var(--notify-box-size) * 2.7);
line-height: calc(var(--notify-box-size) * 2.7);
padding: 0;
}
}
`:''}
`
]]]
should i copy and replace with the above extract you posted?
1 Like
it’s a mount from Displine: Companion Wall Home for Samsung Tab
I needed a mount that I can easily dismount the tablet — but I also love how minimal the design is, not a bulky frame. I think they are way on the expensive side, though. But super worth it because of their sleek frame.
They make mounts for only a few android tablets and iPads — i’m actually using a Samsung S6 tablet, which is slightly smaller than the frame, which causes it to wiggle, but it’s just a-OK because I already had the tablet, and it’s still large enough to fit the USB connection
1 Like
How did you get the state in the circle in the air quality
It looks very good, I did the floorplan in sweet home 3d, you can try it. I just updated the files, check github 
Hello
Do there are a way to have a scroll bar on the sidebar panel ?
Idea is to scroll down or up only sidebar part when there are many informations
Thanks
I have this dashboard now for 2 weeks, I did set it up like the “installation page” says.
So now I have the hacsmodules in mine configuration.yaml
Before I had minimalist, and didn’t have to point to the hacsmodules in mine configuration.yaml.
How can I set this dashboard up in like:
Do I need to include something special?
Did you find a solution to applying changes without restarting Home Assistant?
yeah, just do a quick load instead of a full restart. 
That doesn’t work for me with custom templates.
I’ve tried searching around for posts that have a solution but wasn’t able to find one.
I’ve searched through this thread, but I’m finding it difficult to locate a relevant/similar example. I would like to include the number of open windows in the circle, inside my custom button card.
My button card is representing my ‘all windows’ group, so that if any of the windows are in an open state, the card displays ‘Open’ with a window icon. Ideally, I would like to display the actual number of open windows inside the circle, if one or more windows are open. Because my windows group only has a state of on or off, I created a template sensor to give me the number of open windows
- name: Windows Open
state: >-
{% set windows_open = expand("binary_sensor.windows") | selectattr('state', 'eq', 'on') | list | count %}
{{ windows_open}}
I’m hoping to target this entity state inside the circle, to show the number. The problem is that it is a different entity to the one that the button card represents. Can anyone explain what changes I would need to make to the circle button card template, if any, or the extra_styles.yaml? By referencing the circle template in my button card, I have an empty circle appearing currently, when any of the windows are open, so do I need to make a modified circle.yaml template also, as I’m using the current circle template for other button cards such as lights, where it correctly displays brightness value. Thanks for any help!
@ZynanBob Just edit ui-lovelace.yaml and save, you don’t have to restart HA every time or shell command - refresh_lovelace: touch /config/ui-lovelace.yaml
can i ask you how you have made your home_climate sensor. does it contain all your info from your climate. temp, humidity, air quality?
Nullae’s solution is working fine: A different take on designing a Lovelace UI - #4241 by nullae
Simply put the service call in a button.
Use variables.circle_input
@pedolsky Thanks, can you elaborate a little please?
EDIT: Ah ok I see what you mean, so my button card would look like this:
- type: custom:button-card
entity: binary_sensor.windows
name: Windows
tap_action: !include popup/windows.yaml
template:
- base_window
- icon_window
- circle
variables:
circle_input: >
[[[
let number = states['sensor.windows_open'];
if (number) return parseInt(number.state);
]]]
That’s done the trick and I can see the number on the card now. I just need to address the styling, as it looks like the amount of circle showing is very small, due to the number of windows only being 1. It must be using the same styling as my light entities or speaker entities, where the amount of circle circumference showing relates to the state value. Would that need an additional section adding to the existing circle.yaml template to show the full circle for this type of domain or entity?