NSPanel Pro UI Design with Lovelace

[quenthal (Eero Konttaniemi)]

Thanks!

Yeah, sensor’s id was not sensor.solar, found it in entities as “sensor.day” and gave it manually entity_id sensor.solar.

There is still lot for me to do:

• exported icons from Figma (not familiar with that previously). Exported svgs came out with filenames such as [email protected]: batch renamed them to xxx.svg
• attributes “Solar picture”, “Solar emoji” and “Solar moon picture” seem to be currently the only attributes working, rest (Weather and Moon pictures and emojis) are still “Unknown”.
• I might read the template wrongly, but can’t see anything that points to moon(s) -directory for png/svg-resources? With solar and weather there are some explicit references such as /local/emoji/solar etc.
• With developer tools I manually set missing attributes to see is otherwise the layout card would show me something, but itis basically empty without most of graphics (one icon was visible, as was date, time, temperatures are as ‘raw’ unformatted strings).
• I’m quite sure that for example the theme/themes I’m using is causing issues as well when it comes to UI, transparency etc.
• With my skills I probably need much more than this one weekend to get good hold of your fantastic work to adjust it for my enviroment

[veli]

Forgot some steps that i had implemented and took for granted
Updated the main post for all steps.

exported icons from Figma (not familiar with that previously). Exported svgs came out with filenames such as [email protected]: batch renamed them to xxx.svg

Export now names and puts them in correct folders, no manual labor needed

attributes “Solar picture”, “Solar emoji” and “Solar moon picture” seem to be currently the only attributes working, rest (Weather and Moon pictures and emojis) are still “Unknown”.

Weather and Moon sensor configs added.

With developer tools I manually set missing attributes to see is otherwise the layout card would show me something, but itis basically empty without most of graphics (one icon was visible, as was date, time, temperatures are as ‘raw’ unformatted strings).

You need these front-end tools:

1. card-mod
2. layout-card

And rename all the entities in the sample code to match your own, these are mine and won’t correspond to yours

I’m quite sure that for example the theme/themes I’m using is causing issues as well when it comes to UI, transparency etc.

I’m using theme variables (–color, --font, etc), reset paddings/margins with card-mod, so all themes should be supported. You can get your own unique flavor this way

With my skills I probably need much more than this one weekend to get good hold of your fantastic work to adjust it for my enviroment

Have fun Hope I made it a bit easier now.

[quenthal (Eero Konttaniemi)]

@veli

Have fun Hope I made it a bit easier now.

Sure did! Thanks again!

Now all the attributes of the three sensors are as they should.

Also the “simpler and bigger screensaver with just images” is working most excellent!

Also the main - more detailed screensaver - is one step closer to be working for me. Instead of just those strings and numeric values from different sensors there is also some of the graphics (almost) visible, behind multiple dark layers (layout cards). But just as graphics being behind those card backgrounds, also the fontstyle of those strings and numeric values are not yet following the styles compared to your screenshots. One thing to notice is that atleast the colours of the strings are not all just white. So all in all, I must still have some missing declarations/definitions somewhere. I’m quite sure that I have not missed single entity nor made mistake on c&p.

Will keep you updated if I notice something and/or when I solve this for me

[veli]

I tried with all themes, even light and they work, get colors and fonts based on theme… maybe you are using a mushroom theme that uses custom layout? Perhaps try setting the theme to “no theme” or some basic “dark” one that is supplied.

Tested themes working:

[quenthal (Eero Konttaniemi)]

I’ll double check. However, same thing was with all my devices, so maybe it is not theme. Also, as stated, big composite picture one worked just fine.

[veli]

Do you have card-mod installed? This is the way to inject custom CSS and make it look like it is.

[quenthal (Eero Konttaniemi)]

Yes I do. I assume that without it, the other picture only -screen saver would be corrupt as well?

EDIT: before I dive deeper in the custom CSS, I tried out multiple different themes, and finally made this one myself with totally black background by editing some IOS-styled theme. Edited it to have cards with total transparency just to see if this would show something… Those 'x’s are calendar-marking placeholders, as I don’t have that currently in configured at all.

[clfberlin (Cliff)]

I love it. I have an open NSPanel Pro here with Fully Kiosk. I am currently converting from iobroker to Home Assistant. So I am not too familiar yet, but this looks like a nice project for a rainy day! Wish I could be of help, but I don’t have a clue yet.

[Raym0n (Raymond Nolasky)]

Loved your design . I am totally a noob to home assistant . I do have got components configured. As of now i am running everything on automations and voice commands . I would like to implement this in my system . I did understand the yaml codes for the detailed version but i am having hard time identyfying your sensors in the yaml code also i havent used template sensor before . Could you help me understand a bit more on template sensor . So when you integrate weather , sun into homeassistant it already creates sun , weather entity . So do you use that to grab values and set it to sun, weather template sensors ?. Also could you explain more on what you mean by renaming the entity id

[nalimsojerani]

Congratulations on the fantastic job you are doing. I have started to do some test but I see that the icons do not appear, any idea what I am doing wrong?

[alias6023]

Awesome UI. You really inspired me to tinker again with my NSPanel Pro. May I ask how you screensaver works? Is it linked to the proximity sensor? Does the screensaver “stop” as soon as you get close to the device?

[DerBo19]

Hey Veli and all others!

Thanks so much for that big effort and workload you all invest into these projects. Everything you´re posting looks so awesome. I´m still stunned, what you all can do after flashing this device! For me, as a totally noob in all of this, it´s very difficult to understand what exactly i have to insert where… For example i tried to copy and paste the first snippet (icon grid). But i dont know exactly where and how to paste it into. Veli tried to explain ist on Apr 20, but it still dont get it.

i tried to copy it in config via click on raw-configuration editor but then there is an error: No Card Type specified:
path: default_view title: Home type: custom: auto-entities

Is there some Step-by-Step Guidance for people like me?
At the moment, i´m using WallPanel-App. But it doesnt look as i want it… Would love to hear from you!

And thanks again!

Bo

[veli]

Just create a new dashboard, add a new page, there add a new card (any card), press “Show code editor” on bottom left and paste the codes.

alias6023 - as you desire and depends on what app you use. I use Fully Kiosk, which allows to set the screensaver url and non-screensaver urls separately, use motion sensor to wake, turn screen off at proximity to save energy (and burn-in) etc.

[veli]

In configuration.yaml, find (or add) the line: customize_domain: !include customize_domain.yaml
Inside that:

climate:
  templates:
     entity_picture: >
       if (attributes.preset_mode === 'eco') return '/local/emoji/climate/eco.svg';    
       if (attributes.hvac_action === 'idle') return '/local/emoji/climate/eco.svg';  
       if (attributes.preset_mode === 'away') return '/local/emoji/climate/eco.svg';              
       if (attributes.preset_mode === 'boost') return '/local/emoji/climate/heat.svg';                    
       if (state === 'heat') return '/local/emoji/climate/heat.svg';
       if (state === 'off') return '/local/emoji/climate/off.svg';     

[lpt2007]

Can you explain more this part: 2. Paste YAML from from the views you’d like to have into your dashboard.

I created new dashboard and I don’t know where to put your code? Under the raw configuration editor?

[veli]

add a new card (any card), press “Show code editor” on bottom left and paste the codes.

[lpt2007]

I have same problem here? Any solution?

[lpt2007]

Hi

Can you share code for: sensor.calendar_event and sensor.thermal_home_heatindex

[veli]

Thermal: GitHub - dolezsa/thermal_comfort: Thermal Comfort sensor for HA (absolute humidity, heat index, dew point, thermal perception)
Calendar: Google Calendar - Home Assistant
Calendar sensor:

template:
- sensor:
    - unique_id: next_calendar_event
      name: >-
        {% set midnight = as_timestamp(today_at()) %}
        {% set calendar = state_attr('calendar.google','start_time') | as_timestamp %}
        {% if calendar > as_timestamp(now()) %}
          {{ relative_time( (now() - timedelta( seconds =  calendar - as_timestamp(now())  )) )  }} 
        {% else %}
          {{ relative_time( (now() + timedelta( seconds =  calendar - as_timestamp(now())  )) )  }} 
        {% endif %}
      state: >-
        {{ state_attr('calendar.google','message') }}
      icon: >-
        {% set midnight = as_timestamp(today_at()) %}
        {% set event = state_attr('calendar.google','start_time') | as_timestamp %}
        {% if delta == 0 %}
          mdi:calendar-star-outline
        {% elif delta == 1 %}
          mdi:numeric-1-box-outline
        {% elif delta == 2 %}
          mdi:numeric-1-box-outline
        {% else %}
          mdi:calendar-month-outline
        {% endif %}
      attributes:
        start_time: >-
          {{ state_attr('calendar.google','start_time') }}
        number_days: >-
          {% set event = state_attr('calendar.google','start_time') | as_timestamp %}
          {% set when = (event | timestamp_custom('%d') | int) %}
          {% set today = (as_timestamp(now()) | timestamp_custom('%d')) | int %}
          {{ when - today - 1 }}

[lpt2007]

Thx:)

I still having a problem to get screensaver look as yours.

I am trying it on latest new installed ha version from scratch.
I installed card-mod, button-card, auto-entities, layout-card, more-info-card, mini-media.player, swipe card.
I checked all sensor entity.