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.
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 
@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!
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.
The first ones were just a mockup, might be possible with some custom front-end components, since there is no color slider. Initially the posts after it worked, but the lovelace shadow-root keeps changing so often i can’t keep up 
This was working one point
now the best i can do for a color light:
and white
Hi
I got a NS PANEL PRO from 1 week.
It’s working but the compagnion app is very slow to refresh state of light… Maybe 10 or more seconds randomly. Randomly it is short about 1 seconds but it’s very uncommon…
I updated the webview to the last 118 version compatible with android 8.1 but this is the same behaviour…
So is fully kiosk more quickly that the compagnion app ?
I have doubt because I tried the web page of my dashboard with the ewelink app web page and the behaviour was the same…
Thanks !
Hi @veli ,
I followed you design style. I’m creating custom buttons within custom buttons now, trying to make it look stylish and slick. I still want to use the top bar, So i’ll have to make it smaller, but i’m almost there 
after this, it’s templating and creating differen designs (don’t like the colors etc, but it’s just a first try with a random background on it.
how would you go from figma to the grid cards so it’s easy to use different designs?
greetings,
Tom
What layout are you using? Is this a Grid Layout and mind sharing the code for this? I’m looking into this and also want a similar layout on my NSPanel Pro
Is this Figma or screenshot from NSPanel? Looks very nice! 
after this, it’s templating and creating differen designs (don’t like the colors etc, but it’s just a first try with a random background on it.
If you’re doing the lovelace code (for auto-entities, and not just for personal use), the colors would/should/will follow the theme the user has selected, same with font family ,size, weight; card border radii and margin, padding etc… if you inspect page with dev tools you find the css variables like
var(--primary-text-color)
var(--ha-card-background)
var(--ha-card-box-shadow)
var(--ha-card-border-radius)
var(--ha-card-header-font-family)
...etc...
So the results will vary based on active theme, like:
For layout, custom: layout-card is what I use with mode: grid.
Just gotta learn CSS grids to make use of it Happy hunting!
Hi! Looks great, but mine gets too high for the nspnanel pro. How do I comment out the 26%, 3 hours ago, Effect, and Attributes? Have tried a bunch of different stuff without getting it right. Copy pasted your yaml config in this post
The shadow-root css is a bit too weird for me, and the code keeps changing in each update, so i didn’t bother to clean the tests of background-color:weid, etc out, but this is something:
Can’t seem to get the height to 100% still…
type: custom:more-info-card
entity: light.bedside
card_mod:
style:
$: |
:host{
--control-slider-color:green !important;
--control-slider-border-radius: 2rem !important;
}
ha-card ha-control-slider{
--control-slider-thickness: 10rem !important;
width: 200% !important;
background orange !important;
}
ha-card{
--control-slider-color:orange !important;
}
ha-card ha-more-info-state-header{
}
.card-header {
font: var(--h6-font) !important;
padding: 1rem 0 !important;
text-align:center;
background: red !important;
display:none !important;
}
ha-card .card-content{
}
ha-card more-info-content{
}
ha-more-info-control-select-container{
display:none;
}
ha-control-slider{
display:none;background:red;
--control-slider-thickness: 10rem !important;
}
ha-card div{
}
ha-card .last-changed{
background: red !important;
}
.: |
:host{
--control-slider-color:cyan !important;
}
ha-card ha-more-info-state-header{
background: orange !important;
}
ha-card .last-changed{
background: green !important;
}
ha-more-info-control-select-container{
display:none;
background:green;
}
.card-content {
padding: 0;
margin: 0;
}
.card-content .controls{
background: yellow !important;
}
ha-card{
background: transparent;
}
ha-card state-card-content{
display:none;
background: orange !important;
}
ha-card more-info-content{
}
ha-card more-info-light{
}
ha-card ha-attributes{
display:none;
}
ha-card more-info-content{
background: red;
}
more-info-card{
background:red;
}
.controls{
margin: 0 !important;
}
more-info-content$more-info-light:
$: >
div{
}
ha-attributes{
display:none;
}
:host{
--control-slider-color: amber !important;
display:flex;
align-items:center;
justify-content:middle;
padding: 4rem 0;
}
hui-card-options{
display:none;
}
.controls{
width: 100% !important;
margin: 0 !important;
}
.controls:last-child{
background: orange !important;
}
div:nth-child(1){
background:green !important
}
ha-more-info-control-select-container{
display:none;
}
ha-attributes{
display:none !important;
opacity:0.5;
height:0px;
overflow:hidden;
}
ha-state-control-light-brightness, light-color-temp-picker{
margin-top: 4rem;
overflow:hidden;
margin: 0 !important;
max-height:100vh !important;
flex: 2 1 auto;
}
ha-control-slider{
background: gold !Important;
height: 200vh !important;
--control-slider-thickness: 10rem !important;
}
.container{
background: magenta !important;
opacity: 0.2;
overflow:hidden;
margin: 0 !important;
height:200vh !important;
}
ha-control-slider{
background:orange !Important;
height:200vh !important;
}
ha-state-control-light-brightness ha-control-slider,
light-color-temp-picker ha-control-slider{
height: 100vh !important;
background: green !important;
--control-slider-thickness: 10rem !important;
}
ha-icon-button-group{
background: transparent !important;
flex: 0;
}
ha-icon-button-group > *{
background: transparent !important;
transition: all 1s ease-out;
}
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){
background: transparent !important;
opacity:0;
display:none;
}
ha-icon-button-group > *:nth-child(1){
opacity:0.2;
}
ha-icon-button-group:hover > *{
opacity:1;
display:block;
}
ha-more-info-light-brightness, ha-more-info-toggle,
light-color-temp-picker{
flex: 5;
margin: 0 !important;
}
.buttons{
flex:0 1 1rem;
padding: 0 !important;
margin: 0 !important;
background: red !important;
}
.buttons > *{
margin: 0 !important;
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--primary-color);
background: red !important;
}
.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);
background: red !important;
}
.buttons > md-outlined-icon-button:nth-child(2){
display:none;
}
ha-more-info-state-header{
background: cyan !important;
display: none !important;
}
.: |
ha-attributes{
background: blue;
background: orange !important;
}
.controls{
background: green !important;
}
ha-more-info-state-header{
background: green !Important;
display:none !important;
}
more-info-content$more-info-light$ha-more-info-state-header:
$: |
:host{
background: red !important;
display:none;
}
.state{
background:green !important;
display:none;
}
more-info-light$ha-more-info-control-select-container:
$: |
:host{
background: orange !important;
}
.controls{
background: green !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-control-slider:
$: |
:host{
background: magenta !important;
height: 100vh !important;
--control-slider-thickness: 10rem !important;
}
more-info-light$ha-state-control-light-brightness$ha-control-slider:
$: |
:host{
background: cyan !important;
height: 100vh !important;
}
.handle{
background: orange !important;
height: 100vh !important;
}
.: |
:host{
background: yellow !important;
height: 100vh !important;
}
more-info-light$ha-state-control-light-brightness:
$: |
:host{
--control-slider-border-radius:1rem !important;
width:200% !important;
max-height: none !important;
}
ha-card$ha-control-slider:
$: |
:host{
width:200% !important;
height: 100vh !important;
max-height: none !important;
}
ha-card$ha-state-control-light-brightness:
$: |
:host{
width:200% !important;
height: 100vh !important;
background: orange !important;
}
ha-state-control-light-brightness$ha-control-slider:
$: |
:host{
--control-slider-border-radius:1rem !important;
width:200% !important;
height: 200vh !important;
max-height: none !important;
background:green !important
}
.container{
background: purple !important;
height: 100vh;
}
more-info-light$ha-more-info-toggle:
$: |
ha-control-switch{
--control-slider-border-radius:1rem !important;
height: 100% !important;
width: 200% !important;
max-height: none !important;
}
more-info-light$ha-more-info-state-header:
$: |
:host{
display:none !important;
}
.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 !important;
}
.: |
.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-light$ha-control-select-menu:
$: |
:host{
display:none;
}
more-info-cover:
$: |
ha-attributes{
display:none;
}
.controls{
display:flex;
flex: 4;
height: 100%;
margin:0;
flex-direction: column;
}
.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-light$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:
$: |
:host{
background: red;
}
ha-more-info-control-select-container:
$: |
:host{
background: red;
}
more-info-content$more-info-light$ha-state-control-light-brightness$ha-control-slider:
$: |
:host{
height: 100%
}
ha-state-control-light-brightness:
$: |
:host{
background: orange !important;
height: 100vh !important;
}
Hi,
I’m trying to create these 3 sensors without success. Homeassistant is complaining about the length of the template. Here is an example:
I this the right process to create a sensor template?
Settings - Device&Services - Helpers - Create Helper - Template - Template a sensor
PS: Thank you for this nice UI for NSpanel Pro.
Thank you for your reply. I’m few steps closer to make it work.
Now I have an issue with sensor.solar not changing the frendly_name to select the right image
Update: Now the sensors are working fine, I moved all the Figma files in /homeassistant/www/emoji folder, I changed home assistant theme to metro and the end resut is this:
It is strange, because the other code that you give is working:
Do you have any ideeas?
The attributes seem to be included correctly 
Do not set a name manually, it comes automatically from template:
- sensor:
- unique_id: solar
name: >-
{%- set elevation = state_attr('sun.sun', 'elevation') | int -%}
{%- set rising = state_attr('sun.sun', 'rising') -%}
{%- set azimuth = state_attr('sun.sun', 'azimuth') | int -%}
{%- if elevation <= -12 -%}
{%- if (0 <= azimuth <= 10) or (350 <= azimuth <= 360) -%}
Midnight
{%- else -%}
Night
{%- endif -%}
{%- elif -6 < elevation <= 0 -%}
{{- 'Sunrise' if rising else 'Sunset' -}}
{%- elif -12 < elevation <= -6 -%}
{{- 'Dawn' if rising else 'Dusk' -}}
{%- else -%}
{%- if 160 <= azimuth <= 200 -%}
Noon
{%- else -%}
Day
{%- endif -%}
{%- endif -%}
edit:
the position and sizes seem to be theme dependent:
Sensor.solar is working fine now:
I still have 2 issues:
First is sensor.weather is not showing the temperature. What weather integration are you using? I think mine (Open-Meteo) doesn’t have the right attributes
The second, the code is not loading the images from /local/emoji/ folder. I have all the files downloaded from your Figma link and added to /www folder. (ex. /www/emoji/moon/full_moon.svg)
I have Metrology integration installed and I’m using “Metro Blue” theme