Hi all,
I am new with ha i tried to create this dashboard on the nspanel pro but i got a message template: nspanel missing.
How can i create this?
thanks
You need to do card-mod and put the card-mod templates in the resources.
However, I’ve done everything, and am getting the results that others have posted (Blank black boxes, single weather icon in top left corner.
At this time I haven’t seen anyone successfully pull main dashbaord off, except OP
Update:
Media one works great although it is the simplest.
I tried doing lights, and this is what I am ending up with, it seems like there is something wrong with the CSS somehow, but I do not know too much CSS.
And I got the icon and fonts to change color on the main one:
Lets debug this together. 
0. Assuming you have completed all the steps listed here and above/below, all the plugins are installed and sensors are configured.
1. You have a dashboard
2. your dashboard has a view
2.1 - view type is panel or grid, so the following covers the whole page
3. you have a card
4. your card has cards
Try:
- in that code editor you have pasted the yaml in my post
- delete cards one by one and check the live preview for changes
5. to test if is your sensors giving error, use this code
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
}
ha-card>ha-markdown{
border-radius: 100%;
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
opacity:{{brightness}};
{% set time = now().hour %}
{% set top = ( (time - 12)*1 ) %}
transform:scale(5) translateY({{top}}px) translateX(-48px);
{% set blur = ((((((time/24))-0.5)|abs)*5)|round(0)|int)+5 %}
filter:blur({{blur}}px);
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
{% set time = now().hour %}
{% set sun = 10 %}
{% set sunpos = ((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) * 24 / 100) | round(0) %}
{% set left = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 24 ) | int - 240 %}
{% set top = ( (time - 12)*2 ) %}
transform: scale(5) translateX(-48px) translateY({{top}}px);
}
ha-card>ha-markdown
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
{% set sun = 10 %}
transform:scale(2.5) translateY({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px) translateX({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px);
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
}
ha-card>ha-markdown{
transform:scale(0.5) translateY(150%) translateX(-100%);
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
layout:
grid-gap: 0
margin: 0
padding: 0
height: 100%
width: 100%
card_mod:
style: |
ha-card{
height:100%;
background:red;
}
:root{
overflow:hidden;
height:100%;
}
layout-card, grid-layout{
overflow: hidden;
height:100%;
transform:scale(3);
}
view_layout:
grid-column: 1 / span 6
grid-row: 1 / span 6
- type: markdown
content: ' '
card_mod:
style: |
:host{
overflow:hidden;
width:100%;
height: 100%;
padding:0;
margin:0
}
ha-card{
box-sizing:border-box;
{% set time = now().hour %}
{% set hue = (time/24*360 | round(2) ) | int %}
{% set hue2 = ((time/24*360 | round(2) ) | int) - 45 %}
{% set hue3 = ((time/24*360 | round(2) ) | int) - 30 %}
background: radial-gradient( transparent, hsla({{hue3}},100%,50%,0.0), hsla({{hue2}},100%,50%,0.0), hsla({{hue}},100%,50%,0), hsla({{hue}},100%,50%,0));
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: top center;
backdrop-filter: blur(10px);
display: flex;
align-items: end;
justify-content: left;
font:var(--h3-font);
color: var(--accent-text-color);
border-radius: 100%;
{% set time = now().hour %}
{% set left = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 24 ) | int - 120 %}
{% set top = ((5 - ((time/24*10) | round(0) -5 ) ) * -24 ) | int + 240 %}
/*transform: translateX({{ left }}px) translateY({{top}}px);*/
transform: translateX(-50%) translateY(50%);
position:relative;
}
ha-card .card-header{
font-size:1rem;
}
ha-card > ha-markdown{
padding:0 !important;
}
view_layout:
grid-column: 1 / span 6
grid-row: 1 / span 6
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
{% set sun = 10 %}
transform:scale(1.5) translateY({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px) translateX({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px);
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
}
ha-card>ha-markdown{
transform:scale(0.5) translateX(-200%);
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
{% set sun = 10 %}
transform:scale(2.5) translateY({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px) translateX({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px);
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
}
ha-card>ha-markdown{
transform:scale(0.5) translateY(150%) translateX(-100%);
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
@keyframes float{
0% {transform:translateY(-0.5em)}
50% {transform:translateY(0.5em)}
100% {transform:translateY(-0.5em)}
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
{% set sun = 10 %}
transform:scale(2.5) translateY({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px) translateX({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px);
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
}
ha-card>ha-markdown{
animation: 5s ease-out infinite alternate float;
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
layout:
grid-gap: 0
margin: 0
padding: 0
height: 100%
width: 100%
card_mod:
style: |
ha-card{
height:100%;
background:red;
}
:root{
overflow:hidden;
height:100%;
}
layout-card, grid-layout{
overflow: hidden;
height:100%;
transform:scale(3);
}
view_layout:
grid-column: 1 / span 6
grid-row: 1 / span 6
- type: markdown
content: veli<span class="minutes">:veli</span>
card_mod:
style: |
ha-markdown span{
color:green !important;
background:red;
}
ha-card > span {
border: 3px dotted magenta;
padding: 0px;
display: unset;
}
ha-card{
background:transparent;
display: flex;
align-items: center;
justify-content: right;
font: var(--h1-font);
font-weight: 500;
letter-spacing:-0.05em;
{% set time = now().hour %}
{% set int = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
font-size: calc(var(--h1-font-size)*3*{{int}} );
transform: translateX({{ -((((( -16 - (100 ) - 8)) / 32 * 100) | round(0) ) * 24 / 100) | round(0)}}px);
mix-blend-mode:difference;
}
ha-card > ha-markdown{
padding:0 !important;
margin:0 !important;
{% set hue = (now().hour*15 + ((now().minute/60*100)/100) | round(2)*15 ) | int | abs %}
{% set hue2 = (((now().hour*15 + ((now().minute/60*100)/100) | round(2)*15 ) | int) - 45) | abs %}
{% set hue3 = ((now().hour*15 + ((now().minute/60*100)/100) | round(2)*15 ) | int) - 90 | abs %}
{% set time = now().hour %}
{% set br1 = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
{% set br2 = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 ) | float %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 10 ) | int + 25 %}
background: linear-gradient(45deg, hsl({{hue}},100%,{{brightness}}%), hsl({{hue2}},100%,{{brightness}}%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/*mix-blend-mode:difference;*/
/*color:hsla({{hue}},100%,50%,{{brightness}});*/
/*text-shadow: 0 3px 3px hsla({{hue }},100%,50%,0.5), 0 3px 10px hsla({{hue }},100%,50%,1);*/
}
ha-card > .card-header, .card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
font-size:10px;
}
view_layout:
grid-column: 1 / span 5
grid-row: 2 / 4
- type: markdown
content: veli
card_mod:
style: |
ha-card{
background: transparent;
display: flex;
align-items: flex-end;
justify-content: right;
text-align:right;
font: var(--card-title-font);
line-height: 0.8em;
color: var(--primary-color);
mix-blend-mode:difference;
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-row: 4 / 5
grid-column: 4 / 7
- type: markdown
content: veli
card_mod:
style: |
ha-card{
background: transparent;
display: flex;
align-items: center;
justify-content: right;
font:var(--h3-font);
color:var(--accent-text-color);
mix-blend-mode: lighten;
{% set hue = (25/20*360) | int %}
{% set time = now().hour %}
{% set br1 = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 10 ) | int + 25 %}
color: hsl({{hue}},100%,{{brightness}}%);
/*mix-blend-mode:difference;*/
/*color:hsla({{hue}},100%,50%,{{brightness}});*/
/*text-shadow: 0 3px 3px hsla({{hue }},100%,50%,0.5), 0 3px 10px hsla({{hue }},100%,50%,1);*/
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-row: 1
grid-column: 3 / 7
- type: markdown
content: veli
card_mod:
style: |
ha-card{
background:transparent;
display: flex;
align-items: center;
justify-content: left;
font: var(--h3-font);
color: var(--accent-color);
mix-blend-mode: difference;
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-column: 1 / span 4
grid-row: 1
- type: markdown
content: veli
card_mod:
style: |
:host {
}
ha-card{
background: transparent;
display: flex;
align-items: center;
justify-content: right;
text-align:right;
font: var(--body-font);
color: var(--accent-text-color);
mix-blend-mode: difference;
font-size: 1rem;
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-row: 4
grid-column: 2 / 7
- type: markdown
content: veli
card_mod:
style: |
ha-card{
box-sizing:border-box;
background: transparent;
display: flex;
align-items: center;
justify-content: left;
font:var(--h3-font);
color: var(--accent-text-color);
mix-blend-mode: screen;
{% set wefer = 25 %}
{% set hue = 180-((((wefer)*10)) | int) %}
{% if hue <= 0 %}
{% set hue = 0 %}
{% elif hue >=360 %}
{% set hue = 360 - hue %}
{% else %}
{% endif %}
{% set time = now().hour %}
{% set br1 = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 10 ) | int + 25 %}
color: hsl({{hue}},100%,{{brightness}}%);
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-column: 1 / span 3
grid-row: 6
- type: markdown
content: veli
card_mod:
style: |
ha-card{
background: transparent;
display: flex;
align-items: center;
justify-content: right;
color:var(--secondary-text-color);
font: var(--body-font);
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-column: 2 / span 5
grid-row: 6
layout:
grid-template-columns: repeat(6, minmax(60px, 1fr))
grid-template-rows: repeat(6, minmax(60px, 1fr))
grid-gap: 0.5em
margin: 0
padding: 0
height: 100vh
min-height: 480px
overflow: hidden
card_mod:
style: |
:host{
--card-header-font-size:1px;
}
:host > ha-card > .card-header{
display:none;
}
ha-card{
width:100%;
height:100vh;
}
:root{
overflow:hidden;
height:100vh;
}
layout-card{
overflow: hidden;
height:100vh;
}
5.1 you should be greeted with this image, all me
6.1 - If you dont see this or similar: go to step 0 and post your screenshot.
6.2 if you do: go to step 5 - and change any instance of “veli” to any of your values you want to show. instead
Yes, as the developers release new versions and change the more-info design with each update, it breaks the injected css which needs to match selectors, classes, shadow dom structure…
- So my lights are almost ok
- but climate is useless…
- not using it much more than the screensaver, so CBA to update it at the moment.
- if you want quicker updates, i apologise in advance for being a beggar, you can sponsor me so i dont have to work so much and can do more HA stuff…
Hi,
thanks for the nice job!
It took me hours to figure out why I couldn’t get weather screensaver to work with the correct font sizes.
You are using non-standard font and color variables:
font:var(--h3-font);
color:var(--accent-text-color);
To have this layout properly working, additional theme is needed from: GitHub - Madelena/Metrology-for-Hass: 🎨 Give your Home Assistant a modern and clean facelift. 🟥🟧🟩🟦🟪 24 Variations with 2 Styles + 6 Colors (Magenta Red / Orange / Green / Blue / Purple) + 🌞 Light and 🌚 Dark modes included. Based on Metro and Fluent UI Design Systems from Microsoft Windows..
Without this, all fonts will be in small default size.
It took me also a moment to find out, that sun elevation in sun integration is disabled by default in HA.
1 Like
By enabling sun elevation I’ve gotten much further it seemed this was a major issue preventing many items from showing. I am still combing through the rest of the code to see if anything else was missed
Also I notice sensor.solar is looking for a file called ‘clear-night.svg’ in ‘weather’ but this does not exist
1 Like
Also I notice sensor.solar is looking for a file called ‘clear-night.svg’ in ‘weather’ but this does not exist
it should replace it with sensor.moon_phase at night…
<template TemplateState(<state sensor.solar=🌘; entity_picture=/local/emoji/moon/waning_crescent.svg, weather_picture=/local/emoji/weather/cloudy.svg, weather_emoji=☁️, solar_picture=/local/emoji/solar/Midnight.svg, solar_emoji=🌘, moon_picture=/local/emoji/moon/waning_crescent.svg, moon_emoji=🌘, solar_moon_picture=/local/emoji/moon/waning_crescent.svg, random_picture=/local/pea/mint.png, icon=mdi:moon-waning-crescent, friendly_name=Midnight>
new climate card
- as swipe card this time, since the new more-info popup looks nice, but wont fit more than 1. Also pretty hard to grasp the shadow doms…
type: custom:auto-entities
card:
type: custom:swipe-card
parameters:
loop: true
preloadImages: true
cssMode: true
resistance: true
focusableElements: .controls
noSwipingClass: .controls
pagination:
type: bullets
clickable: true
hideOnClick: false
dynamicBullets: false
scrollbar:
draggable: true
card_mod:
style:
$: |
ha-card{
background: red;
height: 100vh;
}
.swiper-container{
background: red;
height: 100%;
width: 100%;
}
.swiper-scrollbar{
background: green !important;
}
.swiper-pagination-bullet{
bottom:0 !important;
background: red !important;
}
.swiper-scrollbar{
background: green !important;
}
.swiper-scrollbar .swiper-scrollbar-drag{
background: green !important;
}
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fit,minmax(clamp(100%/(3), 15rem,100%),1fr))
grid-template-rows: auto
align-items: stretch
margin: 0
padding: 0
height: 100%
grid-gap: 1em
box-sizing: border-box
card_param: cards
filter:
include:
- domain: climate
options:
type: custom:more-info-card
entity: this.entity_id
card_mod:
style:
$: |
ha-card{
background: transparent;
height: 100vh;
}
ha-card state-card-content{
display:none;
}
ha-card more-info-content{
height: 100%;
}
ha-card more-info-climate{
height: 100%;
}
ha-card ha-attributes{
display:none;
}
.card-header {
sdisplay:none !important;
padding: 0 !important;
text-align: center;
font-size: var(--h5-font-size) !important;
color: var(--secondary-text-color) !important;
font-weight: bold !important;
}
more-info-card{
background:red;
}
.: |
more-info-card{
background:red;
height:100vh;
}
.card-header {
display:none !important;
}
.swiper-container{
background: green;
}
.card-content {
padding: 0;
margin: 0;
display:flex;
flex-direction: column;
box-sizing:border-box;
justify-content: center;
height: calc( 100% - calc( var(--h5-font-size, 2rem) * 2) );
--mdc-select-ink-color: var(--accent-color);
--mdc-select-label-ink-color: var(--secondary-text-color);
--mdc-select-dropdown-icon-color: var(--primary-color);
--mdc-select-idle-line-color: var(--secondary-background-color);
}
ha-card{
box-sizing:border-box;
min-height: 100%;
padding: 0;
background: transparent;
height: 100vh;
}
ha-card state-card-content{
flex: 0;
}
ha-card state-card-climate{
display:flex;
display:none;
flex-direction: column;
justify-content: center;
box-sizing:border-box;
height: 100%;
border-radius: var(--ha-card-border-radius);
--mdc-icon-size: 1.5rem;
}
ha-card more-info-content{
flex: 4;
display:flex;
flex-direction: column;
justify-content: center;
box-sizing:border-box;
height: 100%;
}
ha-card more-info-climate{
display:flex;
flex-direction: column;
justify-content: center;
box-sizing:border-box;
padding:0;
margin: 0;
height: 100%;
}
state-card-climate:
$: |
.current{
background:red !important;
position: absolute;
}
ha-climate-state{
overflow:hidden;
position:relative;
font:var(--card-title-font);
color: var(--primary-color);
flex:1;
}
state-info{
font:var(--card-title-font) !important;
flex:1;
}
.: |
div.name{
background: blue;
}
state-card-climate$state-info:
$: |
div.name{
color:var(--secondary-text-color);
}
state-card-climate$ha-climate-state:
$: |
div.target{
display:none;
}
div.current{
color:var(--primary-text-color);
margin-left:100%;
position: absolute;
}
div.current .label{
display:none;
}
div.unit{
position: absolute;
right: 0;
left: auto;
text-align: center;
color: var(--secondary-text-color);
}
.: |
div{
}
more-info-climate$ha-more-info-climate-temperature:
$: |
.label-container{
background: red;
display:none !important;
}
more-info-climate:
$: |
div.container-temperature > div > div:first-child{
display:none;
}
div:first-child:not(.controls){
display:flex;
flex-direction: column;
justify-content: center;
box-sizing:border-box;
width: 100%;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(clamp(100%/(2 + 1) + 0.1%,125px,100%),1fr));
grid-template-rows: repeat(auto-fit,1fr);
grid-column-gap: 1rem;
margin: 0;
padding: 0;
}
div:first-child:not(.auto) .value{
position: absolute;
top: 30%;
width: 100%;
color: var(--secondary-text-color);
}
div:first-child:not(.auto) .label{
display:none;
}
div:not(.controls){
display: flex;
align-items: flex-end;
justify-content: center;
}
ha-climate-control, .container-temperature{
grid-column: span 2;
display: flex;
align-items: center;
box-sizing:border-box;
}
.container-temperature ha-climate-control{
--mdc-theme-on-primary: red !important;
--mdc-theme-text-disabled-on-light: red !important;
--mdc-icon-size: 3rem !important;
}
more-info-climate$ha-climate-control:
$: |
div#target_temperature{
font:var(--h2-font);
flex: 1;
text-align:center;
}
div.control-buttons{
flex: 1;
display:flex;
flex-direction: row;
color:var(--primary-color);
}
div.control-buttons div{
flex: 1;
align-items: center;
justify-content:center;
text-align:center;
}
div.control-buttons div:first-child{
color:var(--state-climate-heat-color);
}
div.control-buttons div:last-child{
color:var(--state-climate-auto-color);
}
.: |
div#target_temperature{
background:green;
}
ha-card .header__icon {
color:
{% set mode = states('climate.livingroom') %} {% if mode == 'off' %} grey {% elif mode =='auto' %} green {% elif mode == 'heat' %} red{% else %} grey {% endif %};
}
exclude:
- group: /*/
- state: /un/
- hidden_by: /user|integration/
card_mod:
style: |
:host{
height: 100%;
}
.card-content{
height: 100%;
}
ha-card, swipe-card, auto-entities{
height: 100% !important;
background: red;
}
.swiper-pagination-bullet{
bottom:0 !important;
background: red !important;
}
.swiper-scrollbar{
background: green !important;
}
.swiper-scrollbar .swiper-scrollbar-drag{
background: green !important;
}
.swiper-container{
background: red;
height: 100vh;
}
lights
- new more-info looks very nice
type: custom:auto-entities
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fit,minmax(clamp(100%/(8 + 1) + 0.1%, 3rem,50%),1fr))
grid-template-rows: repeat(auto-fit,1fr)
align-items: stretch
padding: 0
margin: 0
grid-gap: 1rem
box-sizing: border-box
width: 100%
height: 100%
card_param: cards
filter:
include:
- domain: /light/
group: light.areas
options:
entity_id: this.entity_id
type: custom:more-info-card
card_mod:
style:
$: |
ha-card{
background: red;
height: 100vh;
}
.card-header {
font: var(--h5-font) !important;
padding: 1rem 0 !important;
text-align:center;
}
ha-more-info-control-select-container{
display:none;
}
.: |
.card-content {
height: 100%;
padding: 0;
margin: 0;
}
ha-card{
background: transparent;
height: 100vh;
}
ha-card state-card-content{
display:none;
}
ha-card more-info-content{
height: 100%;
}
ha-card more-info-light{
height: 100%;
}
ha-card ha-attributes{
display:none;
}
more-info-light:
$: |
ha-attributes{
display:none;
}
.controls{
flex: 4;
height: 100%;
margin: 0;
}
ha-more-info-control-select-container{
display:none;
}
ha-attributes{
background: red;
display:none !imortant;
opacity:0.5;
height:0px;
overflow:hidden;
}
ha-icon-button-group > *:nth-child(2),
ha-icon-button-group > *:nth-child(3),
ha-icon-button-group > *:nth-child(4),
ha-icon-button-group > *:nth-child(5){
display:none;
}
ha-more-info-light-brightness, ha-more-info-toggle{
flex: 5;
width: 100%;
margin: 0 !important;
}
.buttons{
flex:0 1 1rem;
padding: 0 !important;
margin: 0 !important;
}
.buttons > *{
margin: 0 !important;
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--primary-color);
}
.buttons ha-button-menu md-outlined-icon-button{
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--state-light-inactive-color);
}
.buttons > md-outlined-icon-button:nth-child(2){
display:none;
}
.: |
ha-attributes{
background: blue;
display: none !important;
}
.controls{
background: red !important;
}
more-info-light$md-outlined-icon-button:
$: |
md-outlined-icon-button{
background: red !important;
}
md-outlined-icon-button$ha-button-menu:
$: |
md-outlined-icon-button{
background: red !important;
}
more-info-light$ha-more-info-light-brightness:
$: |
ha-control-slider{
--control-slider-border-radius:1rem !important;
width:100% !important;
height: 100% !important;
max-height: none !important;
}
more-info-light$ha-more-info-toggle:
$: |
ha-control-switch{
--control-slider-border-radius:1rem !important;
height: 100% !important;
width: 100% !important;
max-height: none !important;
}
more-info-light$ha-more-info-state-header:
$: |
.name{
font:var(--h5-font) !important;
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
padding: 0 0 1rem 0;
margin: 0 !important;
}
.state, .last-changed{
display:none;
}
more-info-cover$ha-more-info-state-header:
$: |
.name{
font:var(--h5-font) !important;
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
padding: 0 0 1rem 0;
margin: 0 !important;
}
.state, .last-changed{
display:none;
}
more-info-cover:
$: |
ha-attributes{
display:none;
}
.controls{
flex: 4;
height: 100%;
margin:0;
}
.main-control{
margin:0 !important;
width: 100%;
}
ha-more-info-cover-position, ha-more-info-toggle{
flex: 5;
width: 100%;
height: 100%;
margin: 0 !important;
}
.buttons{
flex:0 1 1rem;
padding: 0 !important;
margin: 0 !important;
}
.buttons > *{
margin: 0 !important;
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--primary-color);
}
.buttons ha-button-menu md-outlined-icon-button{
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--accent-color);
}
.buttons > md-outlined-icon-button:nth-child(2){
display:none;
}
more-info-cover$ha-more-info-cover-position:
$: |
ha-control-slider{
--control-slider-border-radius:1rem !important;
width:100% !important;
height: 50vh !important;
max-height: none !important;
}
more-info-cover$ha-more-info-cover-position$ha-control-slider:
$: |
.slider{
height:100vh;
background: var(--secondary-background-color);
}
more-info-light$ha-more-info-light-brightness$ha-control-slider:
$: |
.slider{
height:100vh;
background: var(--secondary-background-color);
}
ha-more-info-toggle:
$: |
ha-control-switch{
height: 100%;
width: 100%;
}
.: |
ha-control-switch{
height: 100%;
}
ha-more-info-toggle$ha-control-switch:
$: |
:root{
background: red;
}
exclude:
- hidden_by: /user|integration/
- state: /unknown|unavailable/
- entity_id: '*ceiling_*'
sort:
method: name
numeric: true
reverse: true
card_mod:
style:
$: |
:root{
min-height:100%;
}
i’ve the same result, how do you solve it
I am having untold issues with this.
Most if not all of the type: custom cards return card not found but I have card mod installed and working
Can not find the correct entity for solar, it looks like it should be sun.sun but when I replace all sensor.solar with sun.sun or vice versa it still doesn’t work.
I am not good with yaml at the best of times, maybe this is too advanced but a start to finish step by step would be really nice
Update: I have gotten pretty far after a lot of trial and error
Attached showing most of my sensors working, except I expect the weather forecast. Although I do now see clouds.
Now trying to deal with the host of issues in the logs 
Possibly solved by this:NSPanel Pro UI Design with Lovelace - #55 by podly
Or if you place this in 
what errors does it give?
Hi,
Same here with visible borders.
Solve it by add “border-style: none;” under all blocks “ha-card{”.
It corrects in same time the positions.
Fonts keep small after that, just change manualy “font-size” on each texts or add the variable used into your current theme.
So enjoy it, and thanks to veli to this good job.
1 Like
Hello, did anyone get it to work with a non-pro NSPanel running ESPHome?
I am running it with Blackymas’ HA Blueprint. (GitHub - Blackymas/NSPanel_HA_Blueprint: This allows you to configure your complete NSPanel via Blueprint with UI and without changing anything in the code)
Home page with weather widgets and so on seems rather straight forward, but the grid style for lights and switches is the one I am having the most trouble
I did not do the HMI file for non-pro version, too much work and no app for Mac. So no, it won’t work.
Hello @veli
First of all thank you for this work, very appreciated.
I can’t understand which theme are you using. I don’t get the same result as yours in those card.
I also prefer using “standard” cards instead “Auto Entities”. Can you help me achieve this?
Thanks 
I wonder if ITEAD visited this thread / my Figma file for inspiration 
Their newest release
Dear ITEAD/SONOFF - I’m available for hire and would love to work with you!
My old grid tests in the public Figma linked above 
1 Like
@veli , thank you for this amazing thread. Can I ask if you have managed to get the sliders to work in your original post? The three vertical sliders with colour temp and colour change on a gold to black gradient background. Was that just a mock up or have you managed to get card to resemble this?
Your whole build looks amazing BTW!
1 Like
Hi @veli
Thanks for your awesome work!
May I ask what is the recommended browser for using the screensaver and dashboards?
I tried to use the Companion app, with the NSPanel Pro app starting it on boot, but sometimes the clock just stops updating, the UI works though.
1 Like