5 HACS Frontend Components that will make your data and UI look great

Summary

In diesem Video werden fünf verschiedene Frontend-Komponenten für Home Assistant vorgestellt, die die Einrichtung der Benutzeroberfläche beschleunigen, die Anzeige von Daten anpassen oder zusätzliche Informationen bereitstellen können, die sonst mühsam gesucht werden müssten. Von der Erstellung automatisierter Dashboards mit der Mushroom-Strategiekarte über verbesserte Timer-Visualisierungen bis hin zu detaillierten Wettervorhersage-Karten und einer effektiven Logbuch-Karte, bietet dieses Tutorial praktische Lösungen zur Optimierung der Home Assistant UI. Zudem wird betont, wie wichtig es ist, Entwicklern durch das Vergeben von Sternen auf HACS für ihre Beiträge zu danken, und es wird dazu ermutigt, die Dokumentation jeder Komponente für weiterführende Anpassungen zu konsultieren.

Takeaways

• 🔧 Das Erstellen einer Benutzeroberfläche in Home Assistant kann eine langfristige Aufgabe sein, die kontinuierliche Anpassungen erfordert.
• 🍄 Der 'Mushroom Strategy Card' von Alian Khan ist ein Frontend-Komponente in HACS, die dabei hilft, das Dashboard automatisch zu erstellen und zu organisieren, bietet jedoch begrenzte Anpassungsmöglichkeiten.
• ⭐ Das Bewerten von Komponenten mit einem Stern ist eine einfache Möglichkeit, den Entwicklern Dankbarkeit zu zeigen.
• 🕒 Der 'Timer Bar Card' ermöglicht eine visuell ansprechende Darstellung von Timern in Home Assistant, mit verschiedenen Anpassungsoptionen für das Design.
• 🌦 Der 'Hourly Weather Card' verbessert die Darstellung der stündlichen Wettervorhersage in Home Assistant mit einer visuellen und benutzerfreundlichen Oberfläche.
• 🌐 Der 'Weather Radar Card' bietet eine detaillierte und anpassbare Wetterradar-Ansicht, die in Home Assistant integriert werden kann.
• 📖 Für jede HACS-Komponente wird empfohlen, die Dokumentation für erweiterte Anpassungen und Nutzungsmöglichkeiten zu konsultieren.
• 📚 Der 'Logbook Card' ermöglicht eine übersichtliche und visuell ansprechende Darstellung von Logbuchdaten direkt im Dashboard.
• 👥 Die Unterstützung und Wertschätzung der Community, einschließlich der Entwickler von HACS-Komponenten, ist ein wichtiger Aspekt der Home Assistant Community.
• 🔍 Die Anpassung und Optimierung des Home Assistant Dashboards durch HACS-Komponenten erfordert ein gewisses Maß an technischem Verständnis und Bereitschaft zur Auseinandersetzung mit der Dokumentation.

Q & A

Was ist das Hauptproblem, das Home Assistant-Benutzer bei der Erstellung ihrer UI haben?

Das Hauptproblem ist der zeitaufwändige Prozess der Erstellung und Anpassung der UI, insbesondere bei einer großen Anzahl von Entitäten.

Was ist der Mushroom Strategy Card und wer hat es erstellt?

Der Mushroom Strategy Card ist eine Frontend-Komponente für Home Assistant, die von Alian Khan erstellt wurde. Sie dient dazu, automatisch ein komplettes Dashboard zu erstellen.

Was sind die Voraussetzungen für die Installation der Mushroom Dashboard Strategy?

Bevor man die Mushroom Dashboard Strategy installiert, sollte man sicherstellen, dass Mushroom und Mini Graph Card bereits im System installiert sind.

Welche Hauptnachteile hat die Mushroom Strategy Card?

Ein Hauptnachteil ist, dass die Karte nicht einfach angepasst werden kann; alle Anpassungen müssen direkt im YAML-Code vorgenommen werden.

Was ermöglicht die Timer Bar Card und wer hat sie erstellt?

Die Timer Bar Card, erstellt von Ranon, ist eine HACS-Frontend-Komponente, die es ermöglicht, Timer in Home Assistant visuell ansprechender darzustellen.

Wie kann man einen Timer in Home Assistant erstellen?

Man kann Timer über die UI-Hilfsprogramme erstellen oder sie direkt im YAML-Code definieren.

Was ist die Hourly Weather Card und was ermöglicht sie?

Die Hourly Weather Card ist eine HACS-Frontend-Komponente, die eine ansprechendere Darstellung der stündlichen Wettervorhersage ermöglicht, unabhängig von der Version von Home Assistant.

Was ist die Weather Radar Card und welche Anpassungsmöglichkeiten bietet sie?

Die Weather Radar Card ist eine HACS-Frontend-Komponente, die Radarbilder des Wetters anzeigt. Sie bietet umfangreiche Anpassungsmöglichkeiten wie Kartenstil, Zoomlevel und Datenquelle.

Was zeigt die Logbook Card an und wie kann sie angepasst werden?

Die Logbook Card zeigt Daten aus dem Home Assistant Logbuch in einer visuell ansprechenden Form an. Sie kann angepasst werden, um bestimmte Entitäten, Ereignisdauern und weitere Details darzustellen.

Wie können Benutzer die Entwickler der HACS-Frontend-Komponenten unterstützen?

Benutzer können die Entwickler unterstützen, indem sie ihre Repositories auf GitHub mit einem Stern versehen, was eine einfache Möglichkeit ist, Dankbarkeit für ihre Arbeit auszudrücken.

Outlines

00:00

🛠 Einleitung zu HACS Frontend-Komponenten

Dieses Segment führt in die Welt der Home Assistant Community Store (HACS) Frontend-Komponenten ein, die das Benutzerinterface (UI) von Home Assistant verbessern. Mit über 3.826 Entitäten kann die Verwaltung und Personalisierung des UIs eine Herausforderung sein. Der Autor stellt die Mushroom Cards vor, eine Komponente von Alian Khan, die das Erstellen von Dashboards vereinfacht, jedoch begrenzte Anpassungsmöglichkeiten bietet. Der Installationsprozess und die Grundkonfiguration werden erläutert, einschließlich der Notwendigkeit, sowohl Mushroom als auch die Mini Graph Card vorab zu installieren. Es wird gezeigt, wie man ein automatisch generiertes Dashboard erstellt, das verschiedene Elemente wie Wetter, Lichter und Schalter umfasst. Obwohl die Anpassung begrenzt ist, wird auf Möglichkeiten hingewiesen, bestimmte Entitäten auszublenden oder spezifische Anpassungen über erweiterte Karteneinstellungen vorzunehmen.

05:02

🔄 Anpassung und Timer-Karten

Der zweite Abschnitt behandelt die Herausforderungen bei der Anpassung der durch die Mushroom Cards erstellten Dashboards und führt in die Verwendung von Timern innerhalb von Home Assistant ein. Es wird erläutert, wie Timer durch die UI mit Hilfe von 'Helpers' erstellt werden können und wie die Timer Bar Card aus HACS genutzt wird, um visuell ansprechende Timer auf dem Dashboard anzuzeigen. Es werden verschiedene Anpassungsmöglichkeiten für die Timer Bar Card vorgestellt, wie z.B. die Anpassung der Farbe und des Icons basierend auf dem Timer-Fortschritt. Der Abschnitt schließt mit dem Hinweis, dass die Dokumentation des Timer Bar Cards weitere fortgeschrittene Anpassungen bietet, die die Kreativität und spezifischen Anforderungen der Benutzer unterstützen.

10:03

🌦 Wetterkarten und -vorhersagen

Dieser Teil konzentriert sich auf die Darstellung von Wetterinformationen in Home Assistant, beginnend mit der Vorstellung der Hourly Weather Card für stündliche Wettervorhersagen. Die Installation und Konfiguration dieser Karte wird erklärt, einschließlich der Auswahl von Wetterentitäten und der Anpassung der Darstellung. Anschließend wird die Weather Radar Card vorgestellt, die Satellitenbilder und Wetterradardaten visualisiert. Die vielfältigen Konfigurationsoptionen dieser Karte, wie z.B. Kartentitel, Datenquelle und Kartenstil, werden besprochen. Es wird auch darauf hingewiesen, wie wichtig es ist, die genaue Position des Benutzers einzustellen, um die Wetterdaten korrekt anzuzeigen.

15:05

📊 Logbook und Abschluss

Im letzten Abschnitt wird die Logbook Card eingeführt, eine Frontend-Komponente, die Ereignisse aus dem Home Assistant Logbuch in einer visuell ansprechenden Form anzeigt. Die Konfiguration dieser Karte ermöglicht es Benutzern, spezifische Entitäten für die Anzeige auszuwählen und die Darstellung anzupassen, einschließlich der Anzahl der anzuzeigenden Tage und Ereignisse. Dieser Teil schließt mit einer Zusammenfassung des Videos, in der der Wert der vorgestellten HACS Frontend-Komponenten hervorgehoben und Zuschauer dazu ermutigt werden, die Dokumentation der einzelnen Komponenten für weitere Anpassungen zu konsultieren. Es wird auch die Bedeutung des Beitrags der Community zu HACS betont und Zuschauer werden dazu aufgerufen, die Entwickler durch Sternebewertungen zu unterstützen.

Keywords

💡Hax

Hax bezieht sich auf eine Sammlung von benutzerdefinierten Komponenten für Home Assistant, die von der Community entwickelt wurden, um die Funktionalität und das Benutzererlebnis der Home Assistant Plattform zu erweitern. Im Kontext des Videos werden verschiedene Hax-Komponenten vorgestellt, die helfen, das User Interface (UI) zu beschleunigen, Daten anzupassen und zusätzliche Informationen bereitzustellen. Diese Komponenten ermöglichen es den Benutzern, ihre Home Assistant-Umgebung effizienter und individueller zu gestalten.

💡UI

UI steht für 'User Interface', also Benutzeroberfläche, und bezieht sich auf die Art und Weise, wie Benutzer mit einem System, einer Anwendung oder einem Gerät interagieren. Im Video geht es darum, wie man mit Hilfe von Hax-Komponenten das UI von Home Assistant optimieren kann, um eine benutzerfreundlichere und ästhetisch ansprechende Oberfläche zu schaffen. Es wird betont, dass die Erstellung eines effektiven UI eine langfristige Aufgabe sein kann, die durch diese Komponenten erleichtert wird.

💡Mushroom Strategiekarte

Die Mushroom Strategiekarte ist eine spezifische Hax-Komponente, die vorgestellt wird, um ein vollständiges Dashboard automatisch zu generieren. Diese Komponente vereinfacht die Darstellung und Organisation von Daten in Home Assistant, indem sie eine experimentelle, aber als Ausgangspunkt nützliche Möglichkeit bietet, das UI zu gestalten. Sie hilft besonders bei der Herausforderung, eine große Anzahl von Entitäten effizient zu gruppieren und zu sortieren, was sonst eine zeitaufwändige Aufgabe wäre.

💡Entitäten

Entitäten in Home Assistant repräsentieren Geräte oder Funktionen, die gesteuert oder überwacht werden können, wie Lichter, Schalter oder Sensoren. Im Video wird die Komplexität der Verwaltung von 3,826 Entitäten thematisiert und wie bestimmte Hax-Komponenten dabei helfen können, diese effektiver zu organisieren und zu kontrollieren, um ein übersichtlicheres und funktionelleres UI zu schaffen.

💡Timer

Ein Timer in Home Assistant ist eine Funktion oder Integration, die es ermöglicht, Aktionen für eine bestimmte Dauer zu planen oder zu verzögern. Im Video wird eine Hax-Komponente vorgestellt, die Timer visualisiert und benutzerfreundlicher macht, indem sie fortschrittliche Anpassungen und visuelle Darstellungen wie Fortschrittsbalken ermöglicht, was die Verwaltung von Zeit-basierten Aktionen im Smart Home vereinfacht.

💡Wettervorhersage

Die Wettervorhersage-Karte ist eine weitere Hax-Komponente, die im Video vorgestellt wird. Sie bietet eine detailliertere und ästhetisch ansprechendere Darstellung der stündlichen Wettervorhersage im Vergleich zu den Standard-Wetterkarten in Home Assistant. Diese Komponente verbessert die Art und Weise, wie Benutzer Wetterdaten visualisieren und nutzen können, indem sie Anpassungsoptionen für die Darstellung verschiedener Wetterinformationen bietet.

💡Wetterradarkarte

Die Wetterradarkarte ist eine Hax-Komponente, die Satellitenbilder und Wetterradardaten visualisiert. Sie ermöglicht es Benutzern, Wetterbedingungen in Echtzeit oder über einen bestimmten Zeitraum hinweg zu verfolgen. Durch die Anpassung von Kartenstil, Zoomstufe und anderen Optionen können Benutzer die Darstellung an ihre Bedürfnisse anpassen, was eine wertvolle Ergänzung für die Überwachung von Wetterereignissen in der Home Assistant-Umgebung darstellt.

💡Logbuchkarte

Die Logbuchkarte ist eine Hax-Komponente, die Ereignisse aus dem Home Assistant Logbuch in einer visuell ansprechenden Form darstellt. Sie ermöglicht es Benutzern, wichtige Ereignisse und deren Dauer leichter zu überblicken und zu analysieren. Diese Funktion ist besonders nützlich für die Überwachung und das Troubleshooting von Automatisierungen und Gerätezuständen, indem sie eine klare und einfache Ansicht von Logdaten bietet.

💡Dashboard

Ein Dashboard in Home Assistant ist eine benutzerdefinierte Ansicht, die verschiedene Informationen und Steuerelemente auf einer einzigen Oberfläche zusammenfasst. Im Video wird die Erstellung eines Dashboards mit der Mushroom Strategiekarte demonstriert, um zu zeigen, wie man schnell und effizient ein umfassendes und anpassbares Dashboard erstellen kann, das verschiedene Aspekte des Smart Homes visualisiert und steuert.

💡Anpassung

Anpassung bezieht sich auf die Möglichkeit, das Aussehen und Verhalten von Komponenten und UI-Elementen in Home Assistant nach den eigenen Vorstellungen und Bedürfnissen zu modifizieren. Im Video wird hervorgehoben, wie Hax-Komponenten durch verschiedene Anpassungsoptionen dazu beitragen können, das Nutzererlebnis zu personalisieren und zu optimieren, etwa durch Ändern von Icons, Farben oder Anzeigeoptionen.

Highlights

Introduction to Hax front end components for Home Assistant to speed up UI setup.

Discussion on the complexity of creating UI in Home Assistant due to the vast number of entities.

Introduction to Mushroom Strategy Card for automatic dashboard creation.

Details on installing and configuring the Mushroom dashboard.

Explanation of customizing the auto-generated dashboard using advanced card options.

Introduction to the Timer Card for Home Assistant's timer integration.

Steps to create a timer via UI helpers in Home Assistant.

Showcasing the installation and customization of the Timer Bar Card.

Introduction to the Hourly Weather Card for detailed weather forecasts.

Steps to install and visually customize the Hourly Weather Card.

Introduction to the Weather Radar Card for satellite weather imagery.

Detailed customization options for the Weather Radar Card.

Introduction to the Logbook Card for visualizing Home Assistant's logbook data.

Steps to install and customize the Logbook Card.

Conclusion and encouragement to explore component documentation for further customization.

Acknowledgments to supporters and invitation to support the channel.

Transcripts

it's time for another Hax front end

component video today we'll be looking

at five different components that can

help you speed up the setup of your UI

customize how you see the data or just

bring you some more information that you

would be otherwise searching through the

home assistant we'll start in couple of

seconds one of the biggest issues for

all of the home assistant users is

creating UI it can be really a long-term

task because you create something then

you redo it then you find a much better

hccs alternatives to the ones available

in home assistant so you just work work

work and never finish on it and also if

you have a lot of entities and this

system my main system has

3,826 entities it can be a pain to group

everything to sort everything out to

know what the lights are what the

switches are what the covers are what

areas you have Etc well there is

actually one nice front end component in

HCS or hack that can help you with that

let's start with that one alian Khan

made this mushroom strategy card and if

you do like the card don't forget to

give it a star because it is the

simplest way of saying thanks this card

is card that will create your complete

dashboard but it's also I would call it

like that an experiment it will show you

what you can do with your UI but I would

use that as a starting point there is

one Pitfall or downside of this and that

is that you cannot simply customize it

but let's first install it let's look at

it and let's talk about customization

Plus on explore and download and type

mushroom and you must install

autogenerating mushroom dashboard

strategy before you install that one you

should also make sure that you have

mushroom available or installed on your

system system and also mini graph card

we have mushroom already installed and

mini graph card is also installed click

select download at the time of the

recording version

1.0.1 is the latest available version

and click on download

reload and the front end component

should now be active we need to do

couple of more things copy this text

here strategy type with empty View and

then let's go to settings dashboards add

dashboards call it

mushroom

strategy add an

icon create let's click on it three dots

edit

dashboard start with an empty dashboard

take control once again three dots a row

configuration

editor and replace everything with the

code we just cop it and click on Save

and this is how your dashboard may look

like it has created Auto dashboard we

have home one with the areas information

greeting weather condition total of

Lights available total of switches that

are turned on Etc we have lights here

with specific lights all the lights that

are available fans I have none

covers

switches climate C s or climate entities

and cameras but yeah there may be a lot

of entities or devices that you do not

want to see on those dashboards there is

a way on how to hide them left click and

hold and on this device click on Cog

wheel and set this visible switch to

false or disabled

update and the device is gone actually

it's still not gone but if we refresh

the page device will be gone but there

is also option for example if you have

one device device or one entity in

multiple cards to display it in one card

and then do not display it on the other

card for that you have to use Advanced

card options mode and this is done by

going to three dots edit dashboard and

here under type add options and card

uncore

options I do recommend that you go

through documentation and look on those

advanced settings we will not be

covering them through this video but the

idea is for example that you can use

card options to show some devices or

hide other devices on specific cards but

let's look at some more simpler

customizations that you can do for

example we can play with the titles

icons Etc let's click on three dots

remember that we have balcony here addit

dashboard and I will copy the example

but change it to match my setup click

save and now we have customized area

called balcony instead of balcony here

we now have area called open balcony

with a green sofa icon this is a very

easy and nice way to automatically

create cards or full dashboards for your

setup but there is also downfall

unfortunately you cannot edit the cards

remove play with them here everything

that you need to customize or everything

that you want to customize you have to

do through the yamama code directly for

each specific entity card type card Etc

so yeah on one side you gain something

but on the other side you do lose a bit

of customization again go through

documentation there are a lot of other

things that you can do more advanced

things than just changing the icon color

this card that I will show you now is a

great card if you already are using home

assistant internal integration called

timer if you don't know what timer is or

the timer exists in home assistant check

out the video I've created a long time

ago actually 3 years ago when still we

didn't have help ERS inside the UI at

the time you had to create each and

every timer through the EML this way of

creating timers is still available in

home assistant but you can now also

create them via the UI helpers first

let's create a dummy helper let's go to

settings Integrations helpers create

helper select timer we name it for

example recording we will use

microphone and let's say that this time

timer is 30 minutes you have option to

use restore if you take this box and

allow restore what it means it means

that it will retain the timer State at

the time of the home assistant restart

so if the timer was on countdown it will

not reset after the home assistant has

rebooted instead it will continue where

it left off so I do recommend that you

use restore unless you actually want to

reset timers each time home assistant

restarts let's go to our overview hacks

and let's add here timers the only way

or one of the ways you could do that

currently is to create an entity card

and then list timers here if the timers

would be triggered we would have simple

countdowns like this but we want to have

fancy or nice counters so there is a HCS

front end component just for that let's

go to

HCS front end type in timer and select

timer bar card there is also option to

use flip down timer cards but I will

leave that one for future Hax videos and

this is how timers can look let's click

on download latest version at the time

of the recording is version 1.

29.1 download and reload if we check the

documentation there are a lot of styles

that you can implement or push to your

timer card it all depends on your usage

how you want it to look does it match

your setup Etc there is also a mushroom

style the the simplest way of course is

to click three dots edit dashboard add

card time

cards add entities it can be one or

multiple timer recording and then we can

also add some modifications for

example this will create a simple card

that will change the icon and also the

color of the bar depending on the

percentage where the bar is or what the

timer is currently running out of course

on a longer timer such as this one you

may not see the difference but if we

replace it for example with a dishwasher

which is much shorter you see that the

bar is currently red because the time is

running out we only have 40 seconds left

you can further customize it for example

edit add layout full row and now we can

see full row without the text but we can

further customize

it text with zero pixel that means that

we don't even have time visible in terms

of seconds minutes or hours just the bar

itself let's click save let's start it

once

again and as you can see we only have

bar progress bar there are a lot of

other things that you can do with this

timer card I even haven't scratched the

surface for example we can add tap

action that means that we do not even

have to use internal timers inside home

assistant instead of that we can create

our own timers with the scripts or

automations for more information go to

the repository where you can read the

documentation and by the way if you're

there if you like this Hax component

don't forget to start it so we can thank

Ranon for this awesome Hax

contribution but as I mentioned go to

the documentation page and read what you

can do with this card I didn't even

scratch a surface of what this card can

do it all depends on your creativity on

your needs and there are are a lot of

examples cases use cases that are

written and documented here so go check

it out okay but time for our next

component let's once again go to front

end explore and type in

hourly weather cards we all know that

home assistant brought us some changes

in the version 20239 and this is how we

handle hourly weather no matter if

you're using older version or newer

version home assistant you can still use

this card and it looks much nicer than

any other available card inside home

assistant for your next whatever hours

weather forecast so let's start with

clicking download download at the time

of the recording the latest version not

beta is

5.3.0 and reload but what is great about

this component is that we can simply add

it by using visual editor click on ADD

card hourly and here we have to select

first entity you you have to know which

entity supports arly weather you can

give it a name you can select number of

segments this one has 12 for 12 hours it

can be lower

number or higher number but remember

that granularity also makes the text

smaller or bigger and it may or may not

show all the data from first glance we

have number of forecast segments to

offset for example you don't want to see

the weather for next 2 hours you have

number of forecast segments to space

time and temperature

labels it is currently every 2 hours you

can show icons instead of the text you

can show

speed and you can also show

dates if available you can also toggle

the

precipitation and Pro probability for

rain and click save if you do install

and like the component or this card

click on Star to thank Jonathan for

creating such an awesome hourly forecast

card while we are already talking about

weather what about nice weather Raider

map yes there is option for that too

let's go to HCS front end explore type

here weather and select weather Raider

card click on download the version ated

time of the recording is version

2.1.0 download and reload and that's it

the great thing about this component is

that you can use UI and it's great

because while it's also not that hard to

use yaml it has a lot of options so

let's added it to our love list overview

Hax three dots dashboard add card and

you can either type weather or just

search for it down in the list of all

the available cards it is custom weather

Rider

card okay a lot of options let us

quickly go through each one of them card

title of course is title of the map you

can avoid it and get a bit more real

estate available for the satellite image

itself data source you can leave as this

and that is the default or original one

but you can also go for Universal

blue

Titan The Weather Channel

style meteor

red next Rod rainbow and dark sky let's

go back to original then you can also

play with the map style I think there

are four versions We have light which is

this one here we have Voyager which I

don't know what is the difference we

have

satellite and we have dark if you're not

satisfied with how zoomed in or out this

looks you can play with either level

four which is the furthest one available

or level 9 or level even 10 which Zooms

in a lot I'll put it at level eight

location data is pulled from your home

assistant setup so if you haven't

specified your home assistant

installation location latitude and

longitude you will have to provide it

here also there are two options or two

latitudes and two longitudes one

latitude and longitude is used for map

Center it will Center the map based on

that coordinate but for example if you

have a large country map you you have

your country centered on the map maybe

your location is somewhere else than the

center then you can use that marker

latitude and longitude to mark your

location which is really an awesome idea

to include in this component next we can

Define frame count frame count is this

bar here I think the default value is 10

it means that it will create clip out of

how many frame counts you specified it

can be

five for very short brief clip or let's

say 20 for a clip that has a bit more

data you have option to use frame delay

and restart delay restart delay will

just delay restart when it reaches the

end of the clip Cycle Plus you have also

a lot of toggles static

map since this map can be moved around

you can specify that this is a static

map and you will not be able to drag it

around then you can show a marker on the

map you can show scale

show option to zoom in and zoom out show

playback option show

range Square the map show Extra labels

on the map or show recenter button this

is Handy if you are not using static map

let's click save and now we have a nice

customized weather satellite images or

clip inside our home assistant if you do

like this card don't forget to give it a

star to thank Jonathan for creating such

an awesome Hax front end component and

the last card is very simple very sweet

but it can help you especially if you

are into that data it's a Once Again HCS

Front End plus to explore and download

and type log and download logbook card

logbook card allows you to get data from

your logbook home assistant logbook in a

nice visual form it allows you to see

when the event started when it finished

and how long the event was going on for

click on download at the time of the

recording version

1.13.1 was the latest version download

and reload so for what you can use for a

lot of things for example I myself would

use it for the front door to see when it

was open how long it was open and when

it was closed or you can use it for your

TV to see how long the TV was on or in

whatever state it was let's add it to

our UI Hax three dots edit dashboard add

card select logbook card and in the UI

you can of course customize everything

first select an entity it can be

whatever you want to add for example

let's use this motion sensor you can

change the title how many days of

History you want to see one for example

maximum number of items since this is a

very long list I can say I want to see

only seven items in the list when there

is no event no event in log if you want

to create a collapsible list for example

you only have three events visible the

rest four will be collapsible down here

date format the list can be ascending or

descending and you also can customize

what you want to see display State

display duration start date end date

display icon you can use display

separator to have a line that separates

each of the event and custom logs if

custom logs are available let's save and

you have really nice cards that can show

you all the events that you would

normally see in a loog book but in much

nicer and presentable way and I think

that this card is really nice way to

wrap up this video but before we wrap up

let's check also one additional thing

and that is repository because if you do

like this log card go there start to say

thanks to author of this component

Julian Roy thanks Rao but of course when

you are already there check out the

documentation because it will tell you

what else you can do with what you can

play what each of the items attributes

or settings means and how you can

further customize your component and

this is it for yet another Hax frontend

components video I hope that you did

find this video useful I have bunch more

stored in my list that I will cover in

future videos don't forget for each of

those components as I wanted to keep

this video short although I can never

ever make video that is very short I

skipped through a lot of things so check

out the documentation for each of the

components that we've seen here to learn

how you can further customize them and

work better for your own setup but also

let me take this opportunity to thank

all those wonderful people that are

supporting me and that have become

YouTube channel members thank you for

all of your support and let me also

thank each and every one of you who has

watched liked subscribed or commented on

my videos I really do appreciate all of

your interactions if you do want to

support the channel you can do so by

clicking the join button down below and

becoming a YouTube channel member for

only €2 or $2 per month or you can go to

my merchandise store and get something

there but you can also do super thanks

and I will be as always super thank you

for all of your support I'll be seeing

you next time until then bye-bye and

have fun