h3n3/nspanel-lovelace-ui
1
0
Fork 0
mirror of https://github.com/joBr99/nspanel-lovelace-ui.git synced 2025-12-19 22:24:15 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
a9d998a33c8389bf62a1b625cf5b375e1db774e8
nspanel-lovelace-ui/stable/entities/index.html

1451 lines
38 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/stable/entities/">
<link rel="prev" href="../card-unlock/">
<link rel="next" href="../subpages/">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.22">
<title>Special Settings for Entities - NsPanel Lovelace UI Docs</title>
<link rel="stylesheet" href="../assets/stylesheets/main.84d31ad4.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.06af60db.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,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,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</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="#entities" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<div data-md-color-scheme="default" data-md-component="outdated" hidden>
</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" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></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">
Special Settings for Entities
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</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 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" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></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 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">
<a href="../config-screensaver/" class="md-nav__link">
<span class="md-ellipsis">
Screensaver
</span>
</a>
</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 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">
Special Settings for Entities
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Special Settings for Entities
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#possible-configuration-values-for-entities-key" class="md-nav__link">
<span class="md-ellipsis">
Possible configuration values for entities key:
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#override-icons-or-names" class="md-nav__link">
<span class="md-ellipsis">
Override Icons or Names
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hide-item-based-on-state" class="md-nav__link">
<span class="md-ellipsis">
Hide item based on state
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hide-item-based-on-ha-template" class="md-nav__link">
<span class="md-ellipsis">
Hide item based on HA Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#calling-service-directly-as-button" class="md-nav__link">
<span class="md-ellipsis">
Calling service directly as button
</span>
</a>
</li>
</ul>
</nav>
</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="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#possible-configuration-values-for-entities-key" class="md-nav__link">
<span class="md-ellipsis">
Possible configuration values for entities key:
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#override-icons-or-names" class="md-nav__link">
<span class="md-ellipsis">
Override Icons or Names
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hide-item-based-on-state" class="md-nav__link">
<span class="md-ellipsis">
Hide item based on state
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hide-item-based-on-ha-template" class="md-nav__link">
<span class="md-ellipsis">
Hide item based on HA Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#calling-service-directly-as-button" class="md-nav__link">
<span class="md-ellipsis">
Calling service directly as button
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<div><h1 id="entities">Entities<a class="headerlink" href="#entities" title="Permanent link"></a></h1>
<p>Entities are mainly used on cardEntities and cardGrid.</p>
<p>It is possible to overwrite and configure varrious things on Entities.</p>
<h2 id="possible-configuration-values-for-entities-key">Possible configuration values for entities key:<a class="headerlink" href="#possible-configuration-values-for-entities-key" title="Permanent link"></a></h2>
<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>False</td>
<td>string</td>
<td><code>None</code></td>
<td>name of ha entity</td>
</tr>
<tr>
<td><code>name</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Used to override names (supports home assistant templates)</td>
</tr>
<tr>
<td><code>value</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Used to override the value (supports home assistant templates)</td>
</tr>
<tr>
<td><code>icon</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Used to override icons</td>
</tr>
<tr>
<td><code>color</code></td>
<td>True</td>
<td>array</td>
<td><code>None</code></td>
<td>Overwrite color of entity <code>color: [255, 0, 0]</code></td>
</tr>
<tr>
<td><code>state</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Only displayed if Entity state is equal to this value</td>
</tr>
<tr>
<td><code>state_not</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Only displayed if Entity state is unequal to this value</td>
</tr>
<tr>
<td><code>status</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Only valid for navigate and service items, adds a entity to track state for the icon</td>
</tr>
<tr>
<td><code>assumed_state</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Only for cover items, up, down and stop buttons are always shown</td>
</tr>
<tr>
<td><code>action_name</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Only valid for script; Button label</td>
</tr>
<tr>
<td><code>font</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Used to change the font for cardGrid Icons; valid values are (<code>small</code>, <code>medium-icon</code> and <code>medium</code>). Currently only supported for homeassistant entities and not for internal ones.</td>
</tr>
<tr>
<td><code>effectList</code></td>
<td>True</td>
<td>string</td>
<td><code>None</code></td>
<td>Only valid for light; for example <code>[Android, Aurora</code> (fav list for effects)</td>
</tr>
</tbody>
</table>
<h2 id="override-icons-or-names">Override Icons or Names<a class="headerlink" href="#override-icons-or-names" title="Permanent link"></a></h2>
<p>To overwrite Icons or Names of entities you can configure an icon and/or name in your configuration, please see the following example.
Only the icons listed in the <a href="https://docs.nspanel.pky.eu/icon-cheatsheet.html">Icon Cheatsheet</a> are useable.</p>
<div class="highlight"><pre><span></span><code><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">light.test_item</span>
<span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">NameOverride</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:lightbulb</span>
</code></pre></div>
<p>It is also possible to configure different icon overwrites per state:</p>
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">icon</span><span class="p">:</span>
<span class="w"> </span><span class="s">"on"</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">mdi:lightbulb</span>
<span class="w"> </span><span class="s">"off"</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">mdi:lightbulb</span>
</code></pre></div>
<p>It is also possible to configure different color overwrites per state:</p>
<p></p><div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">color</span><span class="p">:</span>
<span class="w"> </span><span class="s">"on"</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="p p-Indicator">[</span><span class="nv">255</span><span class="p p-Indicator">,</span><span class="nv">0</span><span class="p p-Indicator">,</span><span class="nv">0</span><span class="p p-Indicator">]</span>
<span class="w"> </span><span class="s">"off"</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="p p-Indicator">[</span><span class="nv">0</span><span class="p p-Indicator">,</span><span class="nv">0</span><span class="p p-Indicator">,</span><span class="nv">255</span><span class="p p-Indicator">]</span>
</code></pre></div>
Dynamic color overwrites using homeassistant templates:
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">color</span><span class="p">:</span><span class="w"> </span><span class="s">'{{iif(states("binary_sensor.test")=="on",</span><span class="nv"> </span><span class="s">"[0,255,0]",</span><span class="nv"> </span><span class="s">"[255,165,0]")}}'</span>
</code></pre></div>
<p>It is also possible to use text instead of icons with <code>text:X</code></p>
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">icon</span><span class="p">:</span>
<span class="w"> </span><span class="s">"on"</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">mdi:lightbulb</span>
<span class="w"> </span><span class="s">"off"</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="s">"text:"</span>
</code></pre></div>
<p>Note: State Overrides are working with all state values, not only with "on" and "off".</p>
<p>To insert dynamic values from a homeassistant template, like a temperature you can also use <code>ha:</code> which will be rendered as homeassistant template.
There probably not much cases where this is needed, but here is an exmaple to show the current temperature on the status icon of the screensaver:</p>
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">statusIcon2</span><span class="p">:</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">climate.wohnzimmer_boden</span>
<span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="s">'ha:{{</span><span class="nv"> </span><span class="s">state_attr("climate.wohnzimmer_boden","current_temperature")}}'</span>
</code></pre></div>
<p>If you want to display icons from a template you can put them between <code>&lt;I&gt;&lt;/I&gt;</code></p>
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="s">'ha:{{</span><span class="nv"> </span><span class="s">iif(is_state('</span><span class="l l-Scalar l-Scalar-Plain">light.kitchen', 'on'), '&lt;I&gt;mdi:flashlight&lt;/I&gt;', '&lt;I&gt;mdi:flashlight-off&lt;/I&gt;') }}'</span>
</code></pre></div>
<h2 id="hide-item-based-on-state">Hide item based on state<a class="headerlink" href="#hide-item-based-on-state" title="Permanent link"></a></h2>
<p>This sensor will only be shown on the card if it's state is equal to <code>off</code></p>
<div class="highlight"><pre><span></span><code><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">binary_sensor.sensor_bad_contact</span>
<span class="w"> </span><span class="nt">state</span><span class="p">:</span><span class="w"> </span><span class="s">"off"</span>
</code></pre></div>
<p>This sensor will only be shown on the card if it's state is not equal to <code>on</code></p>
<div class="highlight"><pre><span></span><code><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">binary_sensor.sensor_kueche_contact</span>
<span class="w"> </span><span class="nt">state_not</span><span class="p">:</span><span class="w"> </span><span class="s">"on"</span>
</code></pre></div>
<h2 id="hide-item-based-on-ha-template">Hide item based on HA Template<a class="headerlink" href="#hide-item-based-on-ha-template" title="Permanent link"></a></h2>
<p>The template must evaluate to <code>true</code> for the entity to hide.</p>
<div class="highlight"><pre><span></span><code><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">binary_sensor.sensor_kueche_contact</span>
<span class="w"> </span><span class="nt">state_template</span><span class="p">:</span><span class="w"> </span><span class="s">'{{</span><span class="nv"> </span><span class="s">state_attr("sun.sun","azimuth")</span><span class="nv"> </span><span class="s">&lt;</span><span class="nv"> </span><span class="s">200</span><span class="nv"> </span><span class="s">}}'</span>
</code></pre></div>
<h2 id="calling-service-directly-as-button">Calling service directly as button<a class="headerlink" href="#calling-service-directly-as-button" title="Permanent link"></a></h2>
<p>The following example shows how to call services directly, this enables you to call services on entities not (yet) supported by the backend and also to pass data to services.</p>
<div class="highlight"><pre><span></span><code><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">service.light.turn_on</span>
<span class="w"> </span><span class="nt">data</span><span class="p">:</span>
<span class="w"> </span><span class="nt">entity_id</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">light.schreibtischlampe</span>
<span class="w"> </span><span class="nt">color_name</span><span class="p">:</span><span class="w"> </span><span class="s">"green"</span>
</code></pre></div></div>
</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" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></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; 2023 Johannes Braun
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</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">{"base": "..", "features": ["navigation.indexes", "navigation.sections", "navigation.top", "navigation.tracking", "navigation.expand", "search.highlight", "search.share", "search.suggest"], "search": "../assets/javascripts/workers/search.973d3a69.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": {"provider": "mike"}}</script>
<script src="../assets/javascripts/bundle.f55a23d4.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink