5 HACS Frontend Components that will make your data and UI look great
Summary
TLDRIn 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
🛠 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.
🔄 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.
🌦 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.
📊 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.
Mindmap
Keywords
💡Hax
💡UI
💡Mushroom Strategiekarte
💡Entitäten
💡Timer
💡Wettervorhersage
💡Wetterradarkarte
💡Logbuchkarte
💡Dashboard
💡Anpassung
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
تصفح المزيد من مقاطع الفيديو ذات الصلة
Crashkurs für Anfänger | Canva Tutorial Deutsch
Der Schnellste Weg zu 10k Instagram Follower für OnlyFans Models
SIMIT Simulation Framework: Tests of the PCS 7 engineering
GAUß ALGORITHMUS einfach erklärt – lineare Gleichungssysteme lösen
Day 3: Learn How to Produce Music (How to Lay Down Drums)
Sinnvolle Tuningreihenfolge beim Roller für Anfänger / so macht ihrs Richtig
5.0 / 5 (0 votes)