h3n3/nspanel-lovelace-ui
1
0
Fork 0
mirror of https://github.com/joBr99/nspanel-lovelace-ui.git synced 2026-02-22 22:18:38 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
e3f3858d1e5edf94b9ba561cc350d7d71ac7001d
nspanel-lovelace-ui/config-screensaver/index.html
joBr99 e3f3858d1e deploy: d745d63def
2026-02-22 00:21:10 +00:00

1705 lines
39 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Custom Firmware for NsPanel with the design of HomeAssistant's lovelace UI in mind, works with Tasmota.">
<meta name="author" content="Johannes Braun">
<link rel="canonical" href="https://jobr99.github.io/nspanel-lovelace-ui/config-screensaver/">
<link rel="prev" href="../config-overview/">
<link rel="next" href="../card-entities/">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="zensical-0.0.23">
<title>Config screensaver - NsPanel Lovelace UI Docs</title>
<link rel="stylesheet" href="../assets/stylesheets/modern/main.1e989742.min.css">
<link rel="stylesheet" href="../assets/stylesheets/modern/palette.dfe2e883.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=arial,+sans-serif:300,300i,400,400i,500,500i,700,700i%7Cmonospace:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"arial, sans-serif";--md-code-font:"monospace"}</style>
<link rel="stylesheet" href="../_assets/user.css">
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,t)=>(e<<5)-e+t.charCodeAt(0)),0),__md_get=(e,t=localStorage,a=__md_scope)=>JSON.parse(t.getItem(a.pathname+"."+e)),__md_set=(e,t,a=localStorage,_=__md_scope)=>{try{a.setItem(_.pathname+"."+e,JSON.stringify(t))}catch(e){}},document.documentElement.setAttribute("data-platform",navigator.platform)</script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//ua.pky.eu/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="blue">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#possible-configuration-values-for-screensaver-config" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="./.." title="NsPanel Lovelace UI Docs" class="md-header__button md-logo" aria-label="NsPanel Lovelace UI Docs" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-menu" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
NsPanel Lovelace UI Docs
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Config screensaver
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="none" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="blue" aria-hidden="true" type="radio" name="__palette" id="__palette_0">
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-search" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog" aria-label="Search">
<button type="button" class="md-search__button">
Search
</button>
</div>
<div class="md-header__source">
<a href="https://github.com/jobr99/nspanel-lovelace-ui" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
jobr99/nspanel-lovelace-ui
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="./.." title="NsPanel Lovelace UI Docs" class="md-nav__button md-logo" aria-label="NsPanel Lovelace UI Docs" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
</a>
NsPanel Lovelace UI Docs
</label>
<div class="md-nav__source">
<a href="https://github.com/jobr99/nspanel-lovelace-ui" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
jobr99/nspanel-lovelace-ui
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="./.." class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
<span class="md-ellipsis">
Getting started (Home Assistant)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Getting started (Home Assistant)
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis">
First steps
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
First steps
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../prepare_nspanel/" class="md-nav__link">
<span class="md-ellipsis">
Prepare NsPanel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../prepare_ha/" class="md-nav__link">
<span class="md-ellipsis">
Prepare Home Assistant
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../configure_mqtt/" class="md-nav__link">
<span class="md-ellipsis">
Configure MQTT
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../faq/" class="md-nav__link">
<span class="md-ellipsis">
FAQ
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="">
<span class="md-ellipsis">
Configuration - apps.yaml (Home Assistant)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Configuration - apps.yaml (Home Assistant)
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../config-overview/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Screensaver
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="././" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Screensaver
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#possible-configuration-values-for-screensaver-config" class="md-nav__link">
<span class="md-ellipsis">
Possible configuration values for screensaver config
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#possible-configuration-values-for-screensaver-theme-config-only-normal-screensaver-layout-not-screensaver2" class="md-nav__link">
<span class="md-ellipsis">
Possible configuration values for screensaver theme config (only normal screensaver layout not screensaver2)
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_3_3" >
<label class="md-nav__link" for="__nav_3_3" id="__nav_3_3_label" tabindex="0">
<span class="md-ellipsis">
Cards
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_3">
<span class="md-nav__icon md-icon"></span>
Cards
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../card-entities/" class="md-nav__link">
<span class="md-ellipsis">
Entities Card
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../card-grid/" class="md-nav__link">
<span class="md-ellipsis">
Grid Card
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../card-climate/" class="md-nav__link">
<span class="md-ellipsis">
Climate/Thermo Card
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../card-media/" class="md-nav__link">
<span class="md-ellipsis">
Media Card
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../card-alarm/" class="md-nav__link">
<span class="md-ellipsis">
Alarm Card
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../card-qr/" class="md-nav__link">
<span class="md-ellipsis">
Wifi/QR Card
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../card-power/" class="md-nav__link">
<span class="md-ellipsis">
Power Card
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../card-unlock/" class="md-nav__link">
<span class="md-ellipsis">
Unlock Card
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../entities/" class="md-nav__link">
<span class="md-ellipsis">
Special Settings for Entities
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../subpages/" class="md-nav__link">
<span class="md-ellipsis">
Subpages
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../notifications/" class="md-nav__link">
<span class="md-ellipsis">
Notifications
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../phys-btn/" class="md-nav__link">
<span class="md-ellipsis">
Physical Buttons
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-ellipsis">
Getting started (ioBroker)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Getting started (ioBroker)
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../prepare_nspanel_ioBroker/" class="md-nav__link">
<span class="md-ellipsis">
Prepare NsPanel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../iobroker-install/" class="md-nav__link">
<span class="md-ellipsis">
Prepare ioBroker
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#possible-configuration-values-for-screensaver-config" class="md-nav__link">
<span class="md-ellipsis">
Possible configuration values for screensaver config
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#possible-configuration-values-for-screensaver-theme-config-only-normal-screensaver-layout-not-screensaver2" class="md-nav__link">
<span class="md-ellipsis">
Possible configuration values for screensaver theme config (only normal screensaver layout not screensaver2)
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1>Config screensaver</h1>
<h4 id="possible-configuration-values-for-screensaver-config">Possible configuration values for screensaver config<a class="headerlink" href="#possible-configuration-values-for-screensaver-config" title="Permanent link">&para;</a></h4>
<p><img alt="screensaver" src="../img/screensaver.png" /></p>
<table>
<thead>
<tr>
<th>key</th>
<th>optional</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>entity</code></td>
<td>True</td>
<td>string</td>
<td><code>weather.example</code></td>
<td>weather entity from homeassistant</td>
</tr>
<tr>
<td><code>entities</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>contains a list of entities of this card (will be used instead of entity)</td>
</tr>
<tr>
<td><code>statusIcon1</code></td>
<td>True</td>
<td>complex</td>
<td><code>None</code></td>
<td>status icon left to the date string, config similar to weatherOverride</td>
</tr>
<tr>
<td><code>statusIcon2</code></td>
<td>True</td>
<td>complex</td>
<td><code>None</code></td>
<td>status icon right to the date string, config similar to weatherOverride</td>
</tr>
<tr>
<td><code>doubleTapToUnlock</code></td>
<td>True</td>
<td>boolean</td>
<td><code>False</code></td>
<td>requires to tap screensaver two times</td>
</tr>
<tr>
<td><code>theme</code></td>
<td>True</td>
<td>complex</td>
<td></td>
<td>configuration for theme</td>
</tr>
<tr>
<td><code>defaultCard</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>default page after exiting screensaver; only works with top level cards defined in cards; needs to be a navigation item, see subpages (navigate.type_key) This config option will also be evaluated as a HomeAssistant Template.</td>
</tr>
<tr>
<td><code>key</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Used by navigate items</td>
</tr>
<tr>
<td><code>type</code></td>
<td>True</td>
<td>string</td>
<td><code>screensaver</code></td>
<td><code>screensaver</code> or <code>screensaver2</code></td>
</tr>
</tbody>
</table>
<p>Example for the a screensaver config with custom entities/overrides:</p>
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">screensaver</span><span class="p">:</span>
<span class="w"> </span><span class="nt">entities</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weather.demo_weather_north</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weather.demo_weather_north</span>
<span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">0</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weather.demo_weather_north</span>
<span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">1</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weather.demo_weather_north</span>
<span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">2</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">sensor.energy_usage</span>
</code></pre></div>
<p>Using a 6th entity will automatically activate the alternative layout.</p>
<p><img alt="screensaver-alt" src="../img/screensaver-alt.png" /></p>
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">screensaver</span><span class="p">:</span>
<span class="w"> </span><span class="nt">entities</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weather.demo_weather_north</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weather.demo_weather_north</span>
<span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">0</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weather.demo_weather_north</span>
<span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">1</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">sensor.energy_usage</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">delete</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">sensor.indoor_temp</span>
<span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">mdi:home-thermometer-outline</span>
</code></pre></div>
<p>You can use override the options described on the <a href="https://docs.nspanel.pky.eu/entities/">entities documentation page</a> to override colors, names or values of the entities. </p>
<p>With Version 4.0.0 there is another alternative layout for the screensaver:</p>
<p>Configuration is similar, you just need to add <code>type: screensaver2</code> to switch the layout.</p>
<p><img alt="screensaver2" src="../img/screensaver2.png" /></p>
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">screensaver</span><span class="p">:</span>
<span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">screensaver2</span>
<span class="w"> </span><span class="nt">entities</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">entity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weather.demo_weather_north</span>
</code></pre></div>
<h4 id="possible-configuration-values-for-screensaver-theme-config-only-normal-screensaver-layout-not-screensaver2">Possible configuration values for screensaver theme config (only normal screensaver layout not screensaver2)<a class="headerlink" href="#possible-configuration-values-for-screensaver-theme-config-only-normal-screensaver-layout-not-screensaver2" title="Permanent link">&para;</a></h4>
<table>
<thead>
<tr>
<th>key</th>
<th>option</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>background</code></td>
<td>True</td>
<td>list</td>
<td>Black</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>time</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>timeAMPM</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>date</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tMainText</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tForecast1</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tForecast2</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tForecast3</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tForecast4</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tForecast1Val</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tForecast2Val</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tForecast3Val</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tForecast4Val</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>bar</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tMainTextAlt2</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
<tr>
<td><code>tTimeAdd</code></td>
<td>True</td>
<td>list</td>
<td>White</td>
<td><code>[R, G, B]</code></td>
</tr>
</tbody>
</table>
<p>Specify colours as red green and blue values from 0-255 e.g. <code>[255, 0, 0]</code> for red or <code>[0, 0, 255]</code> for blue. These are translated internally to RGB565 (note that this has lower color depth so the colours may not appear the same). Also note that the screen has a low contrast ratio, so colors look sigificantly different at full display brightness and lowest brightness.</p>
<p>Example for the theme config:</p>
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">screensaver</span><span class="p">:</span>
<span class="w"> </span><span class="nt">theme</span><span class="p">:</span>
<span class="w"> </span><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="p p-Indicator">[</span><span class="nv">255</span><span class="p p-Indicator">,</span><span class="w"> </span><span class="nv">0</span><span class="p p-Indicator">,</span><span class="w"> </span><span class="nv">0</span><span class="p p-Indicator">]</span>
</code></pre></div>
<details>
<summary>Config Example for configured statusIcons</summary>
<br>
<div class="highlight"><pre><span></span><code> screensaver:
entity: weather.k3ll3r
statusIcon1:
entity: switch.example_item
statusIcon2:
entity: binary_sensor.example_item
</code></pre></div>
</details>
<p>It is possible to increase the size of the font used for the icons by adding <code>altFont: True</code> to the statusIcon configuration. Icon/Color Overrides are also possible like on any other Entity.</p>
<details>
<summary>Config Example for configured statusIcons with increased size of the icons</summary>
<br>
<div class="highlight"><pre><span></span><code> screensaver:
entity: weather.k3ll3r
statusIcon1:
entity: switch.example_item
altFont: True
statusIcon2:
entity: binary_sensor.example_item
altFont: True
</code></pre></div>
</details>
<details>
<summary>Config Example for all white icons on screensaver</summary>
<br>
<div class="highlight"><pre><span></span><code> screensaver:
entities:
- entity: weather.demo_weather_north
- entity: weather.demo_weather_north
type: 0
color: [255,255,255]
- entity: weather.demo_weather_north
type: 1
color: [255,255,255]
- entity: weather.demo_weather_north
type: 2
color: [255,255,255]
- entity: weather.demo_weather_north
type: 3
color: [255,255,255]
</code></pre></div>
</details>
<details>
<summary>Config Example for a custom date format on forecast</summary>
<br>
<div class="highlight"><pre><span></span><code> screensaver:
entities:
- entity: weather.demo_weather_north
- entity: weather.demo_weather_north
type: 0
name: &quot;%a %-d/%-m&quot;
- entity: weather.demo_weather_north
type: 1
name: &quot;%a %-d/%-m&quot;
- entity: weather.demo_weather_north
name: &quot;%a %-d/%-m&quot;
type: 2
- entity: weather.demo_weather_north
name: &quot;%a %-d/%-m&quot;
type: 3
</code></pre></div>
See Babel Documentation (https://babel.pocoo.org/en/latest/dates.html#date-fields) or the Python Documenation (https://docs.python.org/3/library/datetime.html#strftime-and-strptime-format-codes) in case you do not have babel installed.
</details>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-circle-arrow-up" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4M12 16V8"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2026 Johannes Braun
</div>
Made with
<a href="https://zensical.org/" target="_blank" rel="noopener">
Zensical
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate":null,"base":"..","features":["navigation.indexes","navigation.sections","navigation.top","navigation.tracking","navigation.expand","search.highlight","search.share","search.suggest"],"search":"../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="../assets/javascripts/bundle.5fcf0de6.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink