Possibly solved by this:NSPanel Pro UI Design with Lovelace - #55 by podly
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.
I think UI (adding a āhelperā) might limit this:
Instead, I use ātemplate:ā, YAML has no limits
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: