NSPanel Pro UI Design with Lovelace

[veli]

Possibly solved by this:NSPanel Pro UI Design with Lovelace - #55 by podly

Or if you place this in what errors does it give?

[fabal45 (Fabien)]

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.

[Relevart]

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

[veli]

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.

[NdR (Andrea Montanari)]

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

[veli]

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

[RichieGP (Richard)]

@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!

[daniel.szilagyi]

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.

[veli]

Fully Kiosk Browser with updated webview.

[veli]

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

[loic69]

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 !

[tom_el_camino (Tom)]

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

[Bramus]

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

[veli]

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!

[at8423 (akt)]

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

[veli]

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;
        }    

[ALeXXBody (Bogdan Turlea)]

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.

[veli]

I think UI (adding a “helper”) might limit this:

Instead, I use “template:”, YAML has no limits

[ALeXXBody (Bogdan Turlea)]

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?

[veli]

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:

NSPanel Pro UI Design with Lovelace

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 /…