Το Home Assistant φτιάχνει μόνο του ένα dashboard τη στιγμή που προσθέτεις την πρώτη συσκευή. Για δύο λάμπες φτάνει. Στην πρώτη εγκατάσταση με τριάντα entities γίνεται μια λίστα που κανείς δεν διαβάζει. Το βλέπω σε σπίτια πελατών και το έβλεπα στο δικό μου: ο έλεγχος υπάρχει, αλλά θέλει τέσσερα πατήματα για να χαμηλώσεις μια λάμπα.
Εδώ δείχνω πώς φτιάχνω κάρτες που δουλεύουν στην καθημερινή χρήση. Ξεκινάω από την ενσωματωμένη tile card, που δεν θέλει τίποτα επιπλέον, και φτάνω σε σύνθετες κάρτες με τρία πρόσθετα από το HACS: Mushroom, stack-in-card και card-mod. Ο κώδικας είναι δικός μου, γραμμένος και δοκιμασμένος στη δική μου εγκατάσταση, με σχόλια στα ελληνικά. Η αφορμή ήταν ένα βίντεο του καναλιού Make It Work Tech για dashboards. Τα παραδείγματα όμως είναι φτιαγμένα από την αρχή.
Δύο αρχεία YAML. Το karta-fotismou.yaml έχει τρεις εκδοχές μιας κάρτας φωτισμού με ένταση και θερμοκρασία χρώματος. Το mushroom-paradeigmata.yaml έχει ένα badge που αλλάζει εικονίδιο και χρώμα ανάλογα με την κατάσταση, και μια σύνθετη κάρτα ελέγχου για ρομποτική σκούπα. Τα παραθέτω σε κομμάτια, με εξήγηση ανάμεσα, και σημειώνω από ποιες γραμμές του αρχείου προέρχεται το καθένα. Τα κομμάτια κάθε εκδοχής, ενωμένα με τη σειρά, κολλάνε αυτούσια στον επεξεργαστή κώδικα μιας κάρτας. Τα δύο αρχεία ολόκληρα υπάρχουν για κατέβασμα στο πλάι.
1. Τι είναι ένα dashboard
Ένα dashboard στο Home Assistant έχει τέσσερα επίπεδα. Αν τα ξεχωρίσεις στο μυαλό σου, ξέρεις πάντα πού μπαίνει κάθε κομμάτι κώδικα.
- Views. Οι καρτέλες στην κορυφή. Κάθε view είναι μια σελίδα με δικό της URL, π.χ.
/lovelace/salon. Συνήθως μία ανά χώρο ή ανά λειτουργία. - Sections. Ομάδες καρτών μέσα σε μια view, η καθεμία με τίτλο. Είναι ο προεπιλεγμένος τύπος view στις εκδόσεις από το 2024 και μετά. Οι κάρτες μπαίνουν σε πλέγμα και μετακινούνται με σύρσιμο.
- Badges. Η λωρίδα με τα μικρά τσιπάκια στην κορυφή της view, πάνω από τα sections. Ένα εικονίδιο και μια τιμή: θερμοκρασία, ποιος είναι σπίτι, αν έμεινε ανοιχτή η γκαραζόπορτα.
- Cards. Η βασική μονάδα. Κάθε κάρτα δείχνει ή ελέγχει μία ή περισσότερες οντότητες. Υπάρχουν δεκάδες ενσωματωμένοι τύποι και εκατοντάδες custom.
Δύο όροι που θα χρησιμοποιώ συνέχεια: entity είναι η οντότητα (μια λάμπα, ένας αισθητήρας, μια σκούπα) και entity_id το αναγνωριστικό της, π.χ. light.saloni. Τα βρίσκεις στο Ρυθμίσεις → Συσκευές και υπηρεσίες → Οντότητες.
Το YAML πίσω από όλα αυτά είναι ένα δέντρο: views → sections → cards, με το badges: να κρέμεται από κάθε view. Το badge του άρθρου μπαίνει εκεί, όχι μέσα στα cards. Θα το ξαναπώ όταν φτάσουμε.
2. Γιατί δεν φτάνει το Overview
Το Overview είναι αυτόματο. Το Home Assistant παίρνει κάθε entity, το ομαδοποιεί ανά χώρο και το εμφανίζει. Το πλεονέκτημα είναι προφανές: μηδέν δουλειά, και κάθε καινούργια συσκευή εμφανίζεται μόνη της. Τα προβλήματα φαίνονται μετά τη δέκατη συσκευή.
- Δείχνει τα πάντα με την ίδια βαρύτητα. Το firmware update του router δίπλα στο φως της κουζίνας.
- Τη σειρά και το μέγεθος τα αποφασίζει ο αλγόριθμος, όχι εσύ.
- Οι κάρτες είναι απλές γραμμές οντοτήτων. Για ένταση ή θερμοκρασία χρώματος ανοίγεις κάθε φορά το παράθυρο more-info.
- Αν πατήσεις «ανάληψη ελέγχου» για να αλλάξεις κάτι, χάνεις τον αυτοματισμό. Ό,τι προστεθεί από εκεί και πέρα δεν εμφανίζεται πια.
Η δική μου πρακτική: αφήνω το Overview ανέγγιχτο, ως πλήρη λίστα για έλεγχο, και φτιάχνω ξεχωριστό dashboard για καθημερινή χρήση. Εκεί μπαίνουν μόνο όσα χρειάζεται κάποιος να πατήσει ή να δει με μια ματιά.
Τα βήματα:
- Ρυθμίσεις → Dashboards → «Προσθήκη dashboard».
- Επίλεξε «Νέο dashboard από την αρχή». Δώσε τίτλο και εικονίδιο. Άφησε ενεργό το «Εμφάνιση στο πλαϊνό μενού».
- Άνοιξέ το από το μενού και πάτα το μολύβι πάνω δεξιά. Το Home Assistant ρωτά αν θέλεις να ξεκινήσεις με κενό dashboard. Ναι.
- Πρόσθεσε μια view, μέσα της ένα section, μέσα του την πρώτη κάρτα.
Ο κώδικας του άρθρου μπαίνει με δύο τρόπους. Ο πρώτος είναι ανά κάρτα: στον επεξεργαστή της κάρτας πατάς «Εμφάνιση επεξεργαστή κώδικα» και βλέπεις το YAML αριστερά με ζωντανή προεπισκόπηση δεξιά. Εκεί κολλάς τα κομμάτια που ξεκινούν με type:. Ο δεύτερος είναι για ολόκληρο το dashboard: μολύβι → τρεις τελείες πάνω δεξιά → «Επεξεργαστής ακατέργαστης διαμόρφωσης» (raw configuration editor). Εκεί βλέπεις όλο το δέντρο και εκεί μπαίνει το badges: μιας view.
Ένα ακόμα βήμα που ξεχνιέται: για να ανοίγει το δικό σου dashboard πρώτο, πήγαινε στο προφίλ σου (κάτω αριστερά) και όρισέ το ως προεπιλεγμένο. Η ρύθμιση είναι ανά συσκευή, οπότε την κάνεις και στο κινητό.
3. Η tile card και τα features της
Η tile card μπήκε στο Home Assistant στα τέλη του 2022 και από τότε έγινε η κάρτα που χρησιμοποιώ πιο πολύ. Μικρή, με εικονίδιο που παίρνει χρώμα από την κατάσταση, και με features: μικρά χειριστήρια που εμφανίζονται κάτω από την κάρτα. Για ένα φωτιστικό υπάρχουν μπάρα έντασης και μπάρα θερμοκρασίας χρώματος. Για ρολά υπάρχουν κουμπιά ανοίγματος, για κλιματιστικά επιλογή λειτουργίας, για σκούπες εντολές εκκίνησης. Η λίστα μεγαλώνει σε κάθε έκδοση.
Δεν χρειάζεται HACS, δεν χρειάζεται τίποτα. Αυτό είναι το βασικό της πλεονέκτημα και ο λόγος που είναι η πρώτη εκδοχή της κάρτας φωτισμού.
Η προϋπόθεση
Πριν γράψεις μία γραμμή, έλεγξε τι υποστηρίζει η λάμπα. Η μπάρα θερμοκρασίας χρώματος εμφανίζεται μόνο αν η οντότητα δηλώνει color_temp στα supported_color_modes. Το ίδιο ισχύει για όλες τις εκδοχές παρακάτω. Η επικεφαλίδα του αρχείου το λέει ακριβώς:
# =============================================================
# ΚΑΡΤΑ ΦΩΤΙΣΜΟΥ ΜΕ ΕΝΤΑΣΗ ΚΑΙ ΘΕΡΜΟΚΡΑΣΙΑ ΧΡΩΜΑΤΟΣ
# Τρεις εκδοχές: από την απλή χωρίς HACS, μέχρι τη σύνθετη.
# Όλα τα σχόλια είναι στα ελληνικά.
# =============================================================
#
# ΠΡΟΫΠΟΘΕΣΗ ΓΙΑ ΟΛΕΣ:
# Η οντότητα πρέπει όντως να υποστηρίζει ρύθμιση θερμοκρασίας
# χρώματος. Έλεγχος:
# Εργαλεία προγραμματιστή -> Καταστάσεις -> βρες το light.xxx
# Στα attributes πρέπει να υπάρχει "color_temp" μέσα στο
# supported_color_modes. Αν υπάρχει μόνο "brightness" ή
# "onoff", ο σχετικός διακόπτης απλά δεν θα εμφανιστεί.
#
# Αντικατέστησε παντού το light.saloni με τη δική σου οντότητα.
#
# =============================================================karta-fotismou.yaml · γραμμές 1–17
Μια μονόχρωμη dimmable λάμπα δηλώνει μόνο brightness. Ένα απλό ρελέ δηλώνει onoff. Και στις δύο περιπτώσεις η κάρτα δεν σκάει, απλώς δεν εμφανίζει τη μπάρα. Αν περιμένεις μπάρα και δεν τη βλέπεις, εδώ κοιτάς πρώτα.
Εκδοχή 1: tile card
# -------------------------------------------------------------
# ΕΚΔΟΧΗ 1: TILE CARD (ενσωματωμένη - ΔΕΝ θέλει HACS)
# -------------------------------------------------------------
# Η πιο σταθερή επιλογή. Δουλεύει σε κάθε εγκατάσταση, δεν
# σπάει σε αναβαθμίσεις και είναι η προτεινόμενη για πελάτες.
# Τα "features" είναι οι μπάρες που εμφανίζονται από κάτω.
# -------------------------------------------------------------
type: tile
entity: light.saloni
name: Σαλόνι
# Το εικονίδιο χρωματίζεται με το πραγματικό χρώμα του φωτιστικού
color: amber
# Πατώντας το εικονίδιο -> άναμμα/σβήσιμο
icon_tap_action:
action: toggle
# Πατώντας το υπόλοιπο της κάρτας -> αναλυτικό παράθυρο
tap_action:
action: more-info
features_position: bottom # bottom ή inline
features:
# ΜΠΑΡΑ 1: ΕΝΤΑΣΗ (0-100%)
- type: light-brightness
# ΜΠΑΡΑ 2: ΘΕΡΜΟΚΡΑΣΙΑ ΧΡΩΜΑΤΟΣ
# Δείχνει τον γνωστό διαβαθμισμένο διάδρομο από θερμό
# πορτοκαλί (~2000K) σε ψυχρό γαλάζιο (~6500K).
- type: light-color-tempkarta-fotismou.yaml · γραμμές 20–52
Τι κάνει κάθε γραμμή. Το name αντικαθιστά το friendly name της οντότητας μόνο σε αυτή την κάρτα. Το icon_tap_action και το tap_action είναι δύο διαφορετικά πατήματα: το εικονίδιο κάνει άναμμα και σβήσιμο, το υπόλοιπο σώμα της κάρτας ανοίγει το αναλυτικό παράθυρο. Έτσι δεν σβήνεις κατά λάθος το φως όταν θέλεις απλώς να δεις τις ρυθμίσεις.
Μια διευκρίνιση για το color: amber. Χωρίς αυτή τη γραμμή, η tile card βάφει το εικονίδιο με το πραγματικό χρώμα της λάμπας. Με amber το κλειδώνω σε ένα σταθερό πορτοκαλί, ώστε όλες οι κάρτες φωτισμού στο dashboard να δείχνουν ίδιες. Αν προτιμάς να βλέπεις το πραγματικό χρώμα, σβήσε τη γραμμή.
Για το features_position υπάρχουν δύο τιμές, bottom και inline. Με bottom οι μπάρες μπαίνουν κάτω από το όνομα, σε όλο το πλάτος της κάρτας. Με inline μπαίνουν δεξιά, στην ίδια γραμμή, και η κάρτα μένει χαμηλή. Για κινητό προτιμώ bottom, γιατί η μπάρα γίνεται πιο φαρδιά και σέρνεται ευκολότερα με τον αντίχειρα. Αν η έκδοσή σου δεν γνωρίζει την επιλογή, σβήσε τη γραμμή. Το bottom είναι η προεπιλογή.
Πατώντας στο σώμα της κάρτας ανοίγει το more-info, το ίδιο παράθυρο που ανοίγει και από το Overview. Εκεί υπάρχουν όλα: κύκλος έντασης, καρτέλα θερμοκρασίας, ιστορικό. Η tile card δεν το αντικαθιστά. Βγάζει μπροστά τα δύο χειριστήρια που χρησιμοποιεί κανείς καθημερινά και αφήνει τα υπόλοιπα ένα πάτημα πιο πίσω.
4. Πότε αξίζουν οι custom κάρτες
Η tile card καλύπτει το 80% των περιπτώσεων. Σε τρεις περιπτώσεις δεν φτάνει:
- Θέλεις κείμενο, εικονίδιο ή χρώμα που υπολογίζεται από template. Η tile card δείχνει την κατάσταση όπως την επιστρέφει η οντότητα, στα αγγλικά και χωρίς μετατροπές.
- Θέλεις πολλές κάρτες να φαίνονται σαν μία. Τα ενσωματωμένα vertical-stack και horizontal-stack βάζουν τις κάρτες τη μία δίπλα στην άλλη, αλλά κάθε μία κρατά το δικό της περίγραμμα.
- Θέλεις άλλη αισθητική. Λιγότερο περιθώριο, πιο μικρά εικονίδια, χειριστήρια που κρύβονται.
Υπάρχει και κόστος: εξάρτηση από το HACS, τρία πρόσθετα που συντηρούν τρεις διαφορετικοί άνθρωποι, και η πιθανότητα μια αναβάθμιση του Home Assistant να τα σπάσει για λίγες μέρες μέχρι να βγει ενημέρωση. Σε εγκαταστάσεις πελατών προτιμώ tile cards για αυτόν ακριβώς τον λόγο. Στο δικό μου σπίτι χρησιμοποιώ και τα τρία.
Τα τρία εργαλεία
Mushroom (piitaya/lovelace-mushroom). Οικογένεια καρτών με κοινή αισθητική. Οι δύο που χρησιμοποιώ πιο πολύ: η mushroom-light-card, που είναι μια κάρτα φωτισμού με ενσωματωμένες μπάρες, και η mushroom-template-card, που δέχεται Jinja templates στο κείμενο, στο εικονίδιο και στο χρώμα. Από την έκδοση 4 έχει και mushroom-template-badge, ένα badge με templates.
stack-in-card (custom-cards/stack-in-card). Κάνει ό,τι και το vertical-stack, με μία διαφορά: τα παιδιά του μπαίνουν μέσα σε ένα πλαίσιο. Από έξω φαίνεται μία κάρτα.
card-mod (thomasloven/lovelace-card-mod). Επιτρέπει να γράψεις CSS πάνω σε οποιαδήποτε κάρτα, με ένα κλειδί card_mod:. Εδώ το χρησιμοποιώ για ένα μόνο πράγμα: να σβήσω τα εσωτερικά περιγράμματα και τις σκιές, ώστε τα κομμάτια μέσα στο stack-in-card να μη φαίνονται σαν ξεχωριστές κάρτες.
Εγκατάσταση από το HACS
Προϋπόθεση είναι να έχεις ήδη το HACS. Για κάθε ένα από τα τρία:
- Άνοιξε το HACS από το πλαϊνό μενού.
- Γράψε το όνομα στο πεδίο αναζήτησης:
Mushroom, μετάstack-in-card, μετάcard-mod. - Άνοιξε το αποτέλεσμα με το σωστό όνομα repository (φαίνεται κάτω από τον τίτλο).
- Πάτα «Λήψη» κάτω δεξιά και επιβεβαίωσε.
- Όταν τελειώσουν και τα τρία, κάνε σκληρή ανανέωση στον browser: Ctrl+F5 σε Windows, Cmd+Shift+R σε Mac. Στην εφαρμογή κινητού, κλείσε την και ξανάνοιξέ την.
Κατά την εγκατάσταση, το HACS καταχωρεί μόνο του το JavaScript της κάθε κάρτας στους πόρους του dashboard. Το επιβεβαιώνεις στο Ρυθμίσεις → Dashboards → τρεις τελείες πάνω δεξιά → «Πόροι». Πρέπει να βλέπεις τρεις εγγραφές τύπου module. Αν δεν βλέπεις καθόλου το μενού «Πόροι», ενεργοποίησε την «Προηγμένη λειτουργία» στο προφίλ σου.
Η επικεφαλίδα του mushroom-paradeigmata.yaml έχει την ίδια λίστα, μαζί με τη διαδρομή για τον επεξεργαστή:
# =============================================================
# ΠΑΡΑΔΕΙΓΜΑΤΑ MUSHROOM ΚΑΡΤΩΝ ΓΙΑ HOME ASSISTANT
# Βασισμένα στη λογική του βίντεο "Dashboards for Beginners 2025"
# Όλα τα σχόλια είναι στα ελληνικά.
# =============================================================
#
# ΤΙ ΠΡΕΠΕΙ ΝΑ ΕΧΕΙΣ ΕΓΚΑΤΑΣΤΗΣΕΙ ΑΠΟ ΤΟ HACS (Frontend):
# 1. Mushroom -> piitaya/lovelace-mushroom
# 2. stack-in-card -> custom-cards/stack-in-card
# 3. card-mod -> thomasloven/lovelace-card-mod
#
# ΠΩΣ ΤΟ ΒΑΖΕΙΣ:
# Dashboard -> μολύβι (Επεξεργασία) -> τρεις τελείες ->
# "Raw configuration editor" (ή στην κάρτα: "Show code editor")
#
# ΠΡΟΣΟΧΗ: όλα τα entity_id παρακάτω είναι ΠΑΡΑΔΕΙΓΜΑΤΑ.
# Αντικατέστησέ τα με τα δικά σου (Ρυθμίσεις -> Συσκευές -> Οντότητες).
#
# =============================================================mushroom-paradeigmata.yaml · γραμμές 1–19
Εκδοχή 2: mushroom-light-card
Η πρώτη δοκιμή μετά την εγκατάσταση. Ίδια λάμπα, ίδια δύο χειριστήρια, αλλά με δύο δυνατότητες που η tile card δεν έχει: οι μπάρες κρύβονται πίσω από ένα βελάκι, και το εικονίδιο παίρνει το πραγματικό χρώμα ή τη θερμοκρασία της λάμπας.
# -------------------------------------------------------------
# ΕΚΔΟΧΗ 2: MUSHROOM LIGHT CARD (θέλει HACS -> Mushroom)
# -------------------------------------------------------------
# Πιο "στρογγυλή" αισθητική και δίνει την επιλογή να κρύβονται
# οι μπάρες μέχρι να πατήσεις το βελάκι.
# -------------------------------------------------------------
type: custom:mushroom-light-card
entity: light.saloni
name: Σαλόνι
icon: mdi:sofa-outline
# ΟΙ ΤΡΕΙΣ ΔΙΑΚΟΠΤΕΣ ΕΛΕΓΧΟΥ:
show_brightness_control: true # μπάρα έντασης
show_color_temp_control: true # μπάρα θερμοκρασίας χρώματος
show_color_control: false # παλέτα RGB - βάλε true αν θες χρώματα
# ΜΑΖΕΜΕΝΑ Ή ΑΝΟΙΧΤΑ:
# true = οι μπάρες κρύβονται πίσω από ένα βελάκι (πιο καθαρό)
# false = φαίνονται πάντα (πιο γρήγορο στη χρήση)
collapsible_controls: true
# Το εικονίδιο παίρνει το πραγματικό χρώμα/θερμοκρασία της λάμπας.
# Πολύ χρήσιμο: βλέπεις με μια ματιά αν το φως είναι θερμό ή ψυχρό.
use_light_color: true
layout: vertical # ή horizontal
fill_container: false
tap_action:
action: toggle
hold_action:
action: more-infokarta-fotismou.yaml · γραμμές 55–87
Το collapsible_controls: true είναι θέμα χρήσης. Σε dashboard τοίχου, όπου το φως ανάβει και σβήνει δέκα φορές τη μέρα και η ένταση αλλάζει μία, τα μαζεμένα χειριστήρια κρατούν την οθόνη καθαρή. Σε dashboard κινητού για το υπνοδωμάτιο, όπου η ένταση αλλάζει κάθε βράδυ, βάζω false.
Το use_light_color: true είναι ο λόγος που προτιμώ αυτή την κάρτα για λάμπες με ρύθμιση θερμοκρασίας. Το εικονίδιο γίνεται κιτρινωπό στα 2700 K και γαλάζιο στα 6000 K. Βλέπεις τη ρύθμιση χωρίς να ανοίξεις τίποτα.
Με layout: vertical το εικονίδιο πάει πάνω και το κείμενο κάτω, κάτι που δίνει τετράγωνες κάρτες. Το horizontal τα βάζει δίπλα-δίπλα, σε μια χαμηλή κάρτα σαν γραμμή λίστας. Και τα δύο δουλεύουν με τις μπάρες.
5. Badge με συνθήκες
Το ενσωματωμένο badge δείχνει την κατάσταση μιας οντότητας και σου αφήνει να διαλέξεις εικονίδιο και χρώμα, αλλά σταθερά. Έχει συνθήκες ορατότητας (να εμφανίζεται μόνο όταν κάτι ισχύει), όχι όμως templates. Δεν μπορείς να πεις «αν τυπώνει, δείξε ποσοστό, αλλιώς δείξε τη λέξη Αναμονή».
Το template badge του Mushroom το κάνει. Θέλει Home Assistant 2024.8 ή νεότερο, γιατί εκεί ξανασχεδιάστηκαν τα badges, και Mushroom έκδοση 4 ή νεότερη. Το παράδειγμα είναι ένας εκτυπωτής 3D με δύο αισθητήρες: sensor.printer_state που επιστρέφει printing, complete ή κάτι άλλο, και sensor.printer_progress με το ποσοστό.
# -------------------------------------------------------------
# ΜΕΡΟΣ 1: BADGE ΜΕ ΣΥΝΘΗΚΕΣ (3D printer)
# -------------------------------------------------------------
# Το badge είναι το μικρό "τσιπάκι" στην κορυφή της σελίδας.
# Το ενσωματωμένο badge της HA ΔΕΝ δέχεται templates — γι' αυτό
# χρησιμοποιούμε το template badge του Mushroom.
#
# Μπαίνει στην ενότητα badges: της κάθε view, ΟΧΙ στα cards:.
# -------------------------------------------------------------
badges:
- type: custom:mushroom-template-badge
# Η οντότητα-αναφορά. Μέσα στα templates τη λες σκέτα "entity".
entity: sensor.printer_state
# ΕΙΚΟΝΙΔΙΟ ΥΠΟ ΣΥΝΘΗΚΗ:
# αλλάζει ανάλογα με το τι κάνει ο εκτυπωτής αυτή τη στιγμή.
# Το "-" μετά το > σημαίνει: ένωσέ το σε μία γραμμή, χωρίς κενό στο τέλος.
icon: >-
{% if is_state(entity, 'printing') %}
mdi:printer-3d-nozzle
{% elif is_state(entity, 'complete') %}
mdi:check-circle
{% else %}
mdi:printer-3d-nozzle-off
{% endif %}
# ΧΡΩΜΑ ΕΙΚΟΝΙΔΙΟΥ:
# δέχεται ονόματα χρωμάτων του Material (red, blue, purple, grey...)
color: >-
{% if is_state(entity, 'printing') %}
purple
{% elif is_state(entity, 'complete') %}
green
{% else %}
grey
{% endif %}mushroom-paradeigmata.yaml · γραμμές 22–59
Τρία πράγματα να προσέξεις. Πρώτον, μέσα στα templates η οντότητα που δήλωσες στο entity: είναι διαθέσιμη ως μεταβλητή entity. Γράφεις is_state(entity, 'printing') αντί να επαναλαμβάνεις το entity_id τέσσερις φορές. Αν αργότερα αλλάξεις αισθητήρα, αλλάζεις μία γραμμή.
Δεύτερον, το >- μετά το icon: και το color:. Λέει στο YAML να πάρει τις γραμμές που ακολουθούν, να τις ενώσει σε μία και να μην αφήσει αλλαγή γραμμής στο τέλος. Έτσι το template γράφεται αναγνώσιμα, με μία συνθήκη ανά γραμμή, και το αποτέλεσμα βγαίνει καθαρό: mdi:printer-3d-nozzle χωρίς κενά γύρω του.
Τρίτον, τα χρώματα. Το color δέχεται ονόματα από την παλέτα του Material Design: red, pink, purple, blue, green, amber, orange, grey και τα υπόλοιπα. Δέχεται και κώδικα hex, αλλά τα ονόματα ταιριάζουν με το θέμα του Home Assistant και σε ανοιχτό και σε σκούρο φόντο.
# ΚΕΙΜΕΝΟ ΔΙΠΛΑ ΣΤΟ ΕΙΚΟΝΙΔΙΟ:
# όταν τυπώνει -> ποσοστό προόδου, αλλιώς λεκτικό στα ελληνικά.
# Το | int(0) βάζει 0 αν η τιμή είναι κενή/unavailable, ώστε
# να μη "σκάσει" η κάρτα με κόκκινο μήνυμα σφάλματος.
content: >-
{% if is_state(entity, 'printing') %}
{{ states('sensor.printer_progress') | int(0) }}%
{% elif is_state(entity, 'complete') %}
Ολοκληρώθηκε
{% else %}
Αναμονή
{% endif %}
# ΜΙΚΡΟ ΛΕΚΤΙΚΟ ΑΠΟ ΠΑΝΩ (προαιρετικό) - εδώ το όνομα της συσκευής.
label: Εκτυπωτής
# ΤΙ ΓΙΝΕΤΑΙ ΜΕ ΤΟ ΠΑΤΗΜΑ:
# navigate = πήγαινέ με κάπου αλλού.
# Το navigation_path μπορεί να είναι:
# - σελίδα συσκευής: /config/devices/device/<device_id>
# - άλλη view του dashboard: /lovelace/salon
tap_action:
action: navigate
navigation_path: /config/devices/device/ΑΛΛΑΞΕ_ΜΕ_ΤΟ_DEVICE_IDmushroom-paradeigmata.yaml · γραμμές 61–84
Το | int(0) στο content είναι το φίλτρο που κρατά την κάρτα ζωντανή. Αν ο αισθητήρας προόδου γίνει unavailable για δύο δευτερόλεπτα (ο εκτυπωτής έκλεισε, το WiFi έπεσε), το states() επιστρέφει κείμενο που δεν μετατρέπεται σε αριθμό. Χωρίς προεπιλογή, το template σκάει και το badge γίνεται κόκκινο πλαίσιο σφάλματος. Με int(0) δείχνει 0% και συνεχίζει.
Με navigate στο tap_action, το πάτημα στέλνει σε άλλη σελίδα. Το device id το βρίσκεις στο Ρυθμίσεις → Συσκευές και υπηρεσίες → Συσκευές, ανοίγεις τη συσκευή και το αντιγράφεις από τη γραμμή διευθύνσεων. Είναι το τελευταίο κομμάτι της διεύθυνσης. Εναλλακτικά βάζεις μια άλλη view του dashboard, π.χ. /lovelace/ektypotis, αν έχεις φτιάξει σελίδα μόνο για τον εκτυπωτή.
Πριν βάλεις οποιοδήποτε template σε κάρτα, δοκίμασέ το στα Εργαλεία προγραμματιστή → Πρότυπα. Κολλάς το κομμάτι από το {% if μέχρι το {% endif %} και βλέπεις αμέσως το αποτέλεσμα. Μία αλλαγή: εκεί δεν υπάρχει η μεταβλητή entity, οπότε την αντικαθιστάς με το πλήρες entity_id σε εισαγωγικά, 'sensor.printer_state'. Αν το αποτέλεσμα βγαίνει σωστό εκεί, θα βγει σωστό και στο badge.
6. Σύνθετη κάρτα ελέγχου
Η ιδέα: πολλές μικρές κάρτες ενωμένες ώστε να φαίνονται σαν μία. Επάνω μια template card με το όνομα και την κατάσταση στα ελληνικά. Κάτω μια σειρά από τέσσερα κουμπιά. Όλα μέσα σε ένα stack-in-card, με το card-mod να σβήνει τις γραμμές ανάμεσά τους.
Διάλεξα για παράδειγμα ρομποτική σκούπα, γιατί έχει ακριβώς αυτό που θέλει μια τέτοια κάρτα: μία κατάσταση που αλλάζει συχνά και τέσσερις εντολές που τις δίνεις χωρίς να ανοίξεις τίποτα.
# -------------------------------------------------------------
# ΜΕΡΟΣ 2: ΣΥΝΘΕΤΗ ΚΑΡΤΑ ΕΛΕΓΧΟΥ (ρομποτική σκούπα)
# -------------------------------------------------------------
# Η ιδέα: πολλές μικρές κάρτες ενωμένες ώστε να ΦΑΙΝΟΝΤΑΙ σαν μία.
#
# stack-in-card = τις βάζει όλες μέσα σε ΕΝΑ πλαίσιο
# card-mod = σβήνει τα εσωτερικά περιγράμματα και τις σκιές
# (χωρίς αυτό βλέπεις γραμμές ανάμεσα στις κάρτες)
#
# Μπαίνει στην ενότητα cards: της view.
# -------------------------------------------------------------
cards:
- type: custom:stack-in-card
mode: vertical # η μία κάρτα κάτω από την άλλη
cards:
# --- ΕΠΑΝΩ ΜΕΡΟΣ: κατάσταση συσκευής ---
- type: custom:mushroom-template-card
entity: vacuum.skoupa_salonioy
primary: Σκούπα σαλονιού # μεγάλο κείμενο
# ΜΕΤΑΦΡΑΣΗ ΚΑΤΑΣΤΑΣΗΣ ΣΤΑ ΕΛΛΗΝΙΚΑ:
# η HA επιστρέφει αγγλικά (cleaning, docked...), οπότε τα
# αντιστοιχίζουμε μόνοι μας.
secondary: >-
{% set s = states(entity) %}
{% if s == 'cleaning' %} Καθαρίζει
{% elif s == 'docked' %} Στη βάση
{% elif s == 'returning' %} Επιστρέφει
{% elif s == 'paused' %} Σε παύση
{% elif s == 'error' %} Σφάλμα
{% else %} Άγνωστη κατάσταση
{% endif %}
icon: mdi:robot-vacuum
icon_color: >-
{% set s = states(entity) %}
{% if s == 'cleaning' %} blue
{% elif s == 'docked' %} grey
{% elif s == 'error' %} red
{% else %} orange
{% endif %}
# Πατώντας το πάνω μέρος -> ξεκινά ο καθαρισμός.
# ΣΗΜΕΙΩΣΗ: το "perform-action" ισχύει σε HA 2024.8 και νεότερες.
# Σε παλαιότερες εκδόσεις γράφεις:
# action: call-service
# service: vacuum.start
tap_action:
action: perform-action
perform_action: vacuum.start
target:
entity_id: vacuum.skoupa_salonioy
# Κρατάμε πάτημα -> ανοίγει το αναλυτικό παράθυρο της συσκευής.
hold_action:
action: more-info
# CARD-MOD: αφαιρούμε σκιά και περίγραμμα ώστε να δένει
# οπτικά με την από κάτω σειρά κουμπιών.
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
}mushroom-paradeigmata.yaml · γραμμές 87–156
Το secondary μεταφράζει. Το Home Assistant επιστρέφει cleaning, docked, returning, paused, error, και το template τα αντιστοιχίζει σε ελληνικά. Το {% else %} πιάνει ό,τι δεν περίμενα, όπως idle ή unavailable, ώστε να μη μείνει η κάρτα κενή. Το icon_color ακολουθεί την ίδια λογική με τέσσερα χρώματα.
perform-action και call-service
Στο πάνω μέρος, το tap_action καλεί την ενέργεια vacuum.start. Η σύνταξη με action: perform-action και κλειδί perform_action: ισχύει από το Home Assistant 2024.8 και μετά. Σε εκείνη την έκδοση οι «υπηρεσίες» (services) μετονομάστηκαν σε «ενέργειες» (actions) σε όλο το σύστημα, και η παλιά σύνταξη των καρτών ακολούθησε. Σε παλαιότερη εγκατάσταση γράφεις:
tap_action:
action: call-service
service: vacuum.start
target:
entity_id: vacuum.skoupa_salonioyΗ παλιά σύνταξη εξακολουθεί να δουλεύει και στις νέες εκδόσεις, για συμβατότητα. Το αντίστροφο όχι. Αν κολλήσεις perform-action σε εγκατάσταση 2024.7, η κάρτα δεν θα κάνει τίποτα στο πάτημα. Αν η ενέργεια θέλει παραμέτρους, π.χ. ταχύτητα ανεμιστήρα, μπαίνουν κάτω από data: στο ίδιο επίπεδο με το target:. Σε πολύ παλιές εκδόσεις το ίδιο κλειδί λεγόταν service_data:.
# --- ΚΑΤΩ ΜΕΡΟΣ: σειρά κουμπιών ελέγχου ---
# Το horizontal-stack τα βάζει όλα στην ίδια γραμμή.
- type: horizontal-stack
cards:
# ΚΟΥΜΠΙ 1: Εκκίνηση
- type: custom:mushroom-template-card
icon: mdi:play
icon_color: green
tap_action:
action: perform-action
perform_action: vacuum.start
target:
entity_id: vacuum.skoupa_salonioy
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
/* λιγότερο κενό γύρω από το εικονίδιο */
--ha-card-border-width: 0;
}
# ΚΟΥΜΠΙ 2: Παύση
- type: custom:mushroom-template-card
icon: mdi:pause
icon_color: orange
tap_action:
action: perform-action
perform_action: vacuum.pause
target:
entity_id: vacuum.skoupa_salonioy
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--ha-card-border-width: 0;
}
# ΚΟΥΜΠΙ 3: Επιστροφή στη βάση
- type: custom:mushroom-template-card
icon: mdi:home-import-outline
icon_color: blue
tap_action:
action: perform-action
perform_action: vacuum.return_to_base
target:
entity_id: vacuum.skoupa_salonioy
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--ha-card-border-width: 0;
}
# ΚΟΥΜΠΙ 4: Εντοπισμός (η σκούπα κάνει ήχο για να τη βρεις)
- type: custom:mushroom-template-card
icon: mdi:map-marker
icon_color: purple
tap_action:
action: perform-action
perform_action: vacuum.locate
target:
entity_id: vacuum.skoupa_salonioy
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--ha-card-border-width: 0;
}mushroom-paradeigmata.yaml · γραμμές 158–231
Το horizontal-stack είναι ενσωματωμένο και βάζει τα τέσσερα κουμπιά στην ίδια γραμμή, με ίσο πλάτος. Κάθε κουμπί είναι μια mushroom-template-card χωρίς entity, χωρίς primary, χωρίς secondary: μόνο εικονίδιο, χρώμα και ενέργεια. Το card_mod επαναλαμβάνεται σε κάθε κουμπί γιατί κάθε Mushroom κάρτα φτιάχνει το δικό της στοιχείο ha-card, με το δικό του περίγραμμα. Το --ha-card-border-width: 0 είναι μεταβλητή CSS του Home Assistant και σβήνει το περίγραμμα και στα θέματα που το σχεδιάζουν διαφορετικά.
Αν αναρωτιέσαι τι ακριβώς προσφέρει το card-mod, αφαίρεσέ το. Κάθε κουμπί παίρνει δικό του πλαίσιο και σκιά, και η κάρτα γίνεται πέντε κάρτες.
Η ίδια τεχνική στο φωτιστικό
Η τρίτη εκδοχή της κάρτας φωτισμού είναι η ίδια κατασκευή: stack-in-card, επάνω template card, κάτω η light card με τις μπάρες. Η διαφορά είναι ότι εδώ το secondary γράφει νούμερα. Ποσοστό έντασης και Kelvin, με τη λέξη «θερμό», «ουδέτερο» ή «ψυχρό» δίπλα.
# -------------------------------------------------------------
# ΕΚΔΟΧΗ 3: ΣΥΝΘΕΤΗ ΚΑΡΤΑ ΜΕ ΕΝΔΕΙΞΕΙΣ ΣΕ ΚΕΙΜΕΝΟ
# -------------------------------------------------------------
# Εδώ προσθέτουμε από πάνω μια γραμμή που γράφει με λόγια
# πόσο τοις εκατό είναι η ένταση και πόσα Kelvin η θερμοκρασία.
# Χρήσιμο όταν ο πελάτης θέλει να βλέπει νούμερα, όχι μόνο μπάρες.
#
# Θέλει: Mushroom + stack-in-card + card-mod
# -------------------------------------------------------------
type: custom:stack-in-card
mode: vertical
cards:
# --- ΕΠΑΝΩ: όνομα + αριθμητικές ενδείξεις ---
- type: custom:mushroom-template-card
entity: light.saloni
primary: Σαλόνι
# ΤΟ ΒΑΣΙΚΟ ΚΟΜΜΑΤΙ:
# brightness -> έρχεται σε κλίμακα 0-255, άρα το μετατρέπουμε
# σε ποσοστό (τιμή / 255 * 100).
# color_temp_kelvin -> έρχεται έτοιμο σε Kelvin.
#
# Το state_attr() επιστρέφει "None" όταν το φως είναι σβηστό,
# γι' αυτό ελέγχουμε πρώτα αν είναι αναμμένο.
secondary: >-
{% if is_state(entity, 'on') %}
{% set fos = state_attr(entity, 'brightness') %}
{% set kelvin = state_attr(entity, 'color_temp_kelvin') %}
Ένταση {{ (fos / 255 * 100) | round(0) }}%
{% if kelvin %}
· {{ kelvin }}K
{% if kelvin < 3000 %} (θερμό)
{% elif kelvin < 4500 %} (ουδέτερο)
{% else %} (ψυχρό)
{% endif %}
{% endif %}
{% else %}
Σβηστό
{% endif %}
icon: mdi:lightbulb
# Το εικονίδιο αλλάζει χρώμα ανάλογα με τη θερμοκρασία:
# κιτρινωπό στα θερμά, γαλάζιο στα ψυχρά.
icon_color: >-
{% if not is_state(entity, 'on') %}
grey
{% else %}
{% set kelvin = state_attr(entity, 'color_temp_kelvin') | int(3000) %}
{% if kelvin < 3000 %} amber
{% elif kelvin < 4500 %} yellow
{% else %} light-blue
{% endif %}
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
}karta-fotismou.yaml · γραμμές 90–156
Δύο μετατροπές γίνονται μέσα στο template. Η ένταση έρχεται σε κλίμακα 0 έως 255 και τη διαιρώ με το 255 για να βγει ποσοστό. Η θερμοκρασία έρχεται έτοιμη σε Kelvin από το attribute color_temp_kelvin, και τα όρια 3000 και 4500 χωρίζουν τις τρεις λεκτικές ζώνες. Τα όρια είναι δικά μου. Μια λάμπα στα 2700 K είναι το κλασικό θερμό λευκό, στα 4000 K το ουδέτερο των γραφείων, από 5000 K και πάνω το ψυχρό.
Ο έλεγχος is_state(entity, 'on') στην πρώτη γραμμή δεν είναι διακοσμητικός. Όταν το φως είναι σβηστό, το state_attr() επιστρέφει None, και το None / 255 σκάει. Το | int(3000) στο icon_color κάνει το ίδιο με άλλον τρόπο: αν λείπει η τιμή, βάζει 3000 και το εικονίδιο βγαίνει κίτρινο αντί για σφάλμα.
# --- ΚΑΤΩ: οι δύο μπάρες ---
- type: custom:mushroom-light-card
entity: light.saloni
# Κρύβουμε ό,τι δείχνει ήδη η από πάνω κάρτα,
# ώστε να μη διπλογράφονται όνομα και κατάσταση.
primary_info: none
secondary_info: none
icon_type: none
show_brightness_control: true
show_color_temp_control: true
collapsible_controls: false # εδώ τις θέλουμε πάντα ορατές
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
}karta-fotismou.yaml · γραμμές 158–177
Η κάτω κάρτα είναι η ίδια mushroom-light-card της εκδοχής 2, με τρία κλειδιά που κρύβουν ό,τι δείχνει ήδη η επάνω: primary_info: none, secondary_info: none, icon_type: none. Μένουν μόνο οι μπάρες. Το collapsible_controls: false τις κρατά πάντα ανοιχτές, γιατί εδώ η κάρτα υπάρχει για να τις δείχνει.
7. Τι να προσέχεις
Τα λάθη που βλέπω πιο συχνά, με τη σειρά που εμφανίζονται.
Supported color modes. Αν λείπει μια μπάρα, η λάμπα δεν υποστηρίζει τη λειτουργία. Εργαλεία προγραμματιστή → Καταστάσεις, ψάξε το entity_id, διάβασε το supported_color_modes. Οι ενσωματωμένες ή Mushroom κάρτες δεν βγάζουν σφάλμα σε αυτή την περίπτωση, απλώς κρύβουν το χειριστήριο. Μια λάμπα μόνο RGB (χωρίς color_temp) θέλει show_color_control: true αντί για τη μπάρα θερμοκρασίας.
Ένταση 0 έως 255. Το Home Assistant κρατά την ένταση των φωτιστικών σε 8 bit. Το attribute brightness επιστρέφει 0 έως 255 και το μετατρέπεις σε ποσοστό μόνο για την εμφάνιση. Όταν στέλνεις ένταση σε ενέργεια light.turn_on, υπάρχει και το brightness_pct που δέχεται 0 έως 100 και σε γλιτώνει από τον υπολογισμό.
state_attr() και None. Σβηστό φως σημαίνει ότι τα attributes brightness και color_temp_kelvin δεν υπάρχουν. Κάθε αριθμητική πράξη πάνω σε None σκάει και η κάρτα δείχνει κόκκινο πλαίσιο. Δύο λύσεις, και τις χρησιμοποιώ και τις δύο: έλεγχος is_state(entity, 'on') πριν από την πράξη, ή φίλτρο με προεπιλογή, | int(0) και | float(0).
Kelvin και mireds. Οι πρόσφατες εκδόσεις δίνουν color_temp_kelvin. Σε παλαιότερες υπάρχει μόνο το color_temp σε mireds, και η μετατροπή είναι 1.000.000 διά mireds. Το αρχείο έχει τον τύπο στις σημειώσεις του.
Κενά, όχι Tab. Το YAML δέχεται μόνο κενά για την εσοχή, δύο ανά επίπεδο. Ένα Tab από αντιγραφή σε άλλο πρόγραμμα ρίχνει ολόκληρη την κάρτα με μήνυμα που δεν λέει πού είναι το πρόβλημα. Ο επεξεργαστής κώδικα του Home Assistant βάζει κενά, οπότε γράφε εκεί. Και προσοχή στα δύο σύμβολα πολλών γραμμών: το >- ενώνει τις γραμμές σε μία (για templates), το | τις κρατά όπως είναι (για το CSS του card-mod).
Custom element doesn't exist. Το JavaScript της κάρτας δεν φορτώθηκε. Ctrl+F5, μετά έλεγχος στους Πόρους, μετά επανεκκίνηση του Home Assistant. Αν το βλέπεις μόνο στην εφαρμογή κινητού και όχι στον browser, καθάρισε την προσωρινή μνήμη της εφαρμογής από τις ρυθμίσεις της.
Το entity_id είναι σε δύο σημεία. Στη σύνθετη κάρτα, το vacuum.skoupa_salonioy εμφανίζεται στο entity: της επάνω κάρτας και σε πέντε target:. Η αλλαγή με αναζήτηση και αντικατάσταση στον επεξεργαστή κώδικα πιάνει όλα.
Οι σημειώσεις στο τέλος των δύο αρχείων λένε τα ίδια πιο σύντομα:
# =============================================================
# ΣΗΜΕΙΩΣΕΙΣ
# =============================================================
#
# 1. ΔΕΝ ΕΜΦΑΝΙΖΕΤΑΙ Η ΜΠΑΡΑ ΘΕΡΜΟΚΡΑΣΙΑΣ;
# Το φωτιστικό δεν την υποστηρίζει. Δες την προϋπόθεση
# στην αρχή του αρχείου. Μονόχρωμες dimmable λάμπες έχουν
# μόνο ένταση.
#
# 2. ΓΙΑΤΙ 0-255 ΚΑΙ ΟΧΙ 0-100;
# Η Home Assistant αποθηκεύει εσωτερικά την ένταση σε 8 bit.
# Η μετατροπή σε ποσοστό γίνεται μόνο για την εμφάνιση.
#
# 3. ΠΑΛΑΙΟΤΕΡΕΣ ΕΚΔΟΣΕΙΣ HA:
# Αν το color_temp_kelvin δεν δίνει τιμή, δοκίμασε το παλιό
# attribute "color_temp" (σε mireds) και μετέτρεψέ το:
# {{ (1000000 / state_attr(entity, 'color_temp')) | round(0) }}
#
# 4. Τα templates δοκιμάζονται πρώτα στα
# Εργαλεία προγραμματιστή -> Πρότυπα.
#
# =============================================================karta-fotismou.yaml · γραμμές 180–201
# =============================================================
# ΣΗΜΕΙΩΣΕΙΣ ΠΡΟΣΑΡΜΟΓΗΣ
# =============================================================
#
# 1. Αν μια κάρτα βγάλει κόκκινο σφάλμα "Custom element doesn't
# exist", δεν έχει φορτώσει το HACS component. Κάνε σκληρή
# ανανέωση στον browser (Ctrl+F5) ή επανεκκίνηση της HA.
#
# 2. Τα templates δοκιμάζονται ΠΡΙΝ τα βάλεις στην κάρτα, στο:
# Εργαλεία προγραμματιστή -> Πρότυπα (Template).
# Κάνεις επικόλληση και βλέπεις αμέσως το αποτέλεσμα.
#
# 3. Πρόσεχε την εσοχή (indentation). Το YAML δουλεύει ΜΟΝΟ με
# κενά, ποτέ με Tab. Ένα λάθος κενό ρίχνει όλη την κάρτα.
#
# 4. Αν αλλάξεις entity_id αργότερα, θυμήσου ότι το entity_id
# εμφανίζεται και μέσα στα tap_action -> target.
#
# =============================================================mushroom-paradeigmata.yaml · γραμμές 233–251
Ποια κάρτα πού
Η επιλογή δεν είναι θέμα γούστου. Εξαρτάται από το ποιος θα χρησιμοποιεί το dashboard και ποιος θα το συντηρεί.
| Ανάγκη | Κάρτα | Πρόσθετα |
|---|---|---|
| Ένταση και θερμοκρασία χρώματος μιας λάμπας | tile με features | κανένα |
| Το ίδιο, με κρυφές μπάρες ή εικονίδιο στο χρώμα της λάμπας | mushroom-light-card | Mushroom |
| Κείμενο, εικονίδιο ή χρώμα από template | mushroom-template-card | Mushroom |
| Badge με τιμή που υπολογίζεται | mushroom-template-badge | Mushroom, HA 2024.8+ |
| Κατάσταση και κουμπιά εντολών σε ένα πλαίσιο | stack-in-card με template cards | Mushroom, stack-in-card, card-mod |
Σε dashboard που θα το χρησιμοποιεί κάποιος άλλος και δεν θα το ξανανοίξω για μήνες, μένω στην tile card. Δεν σπάει με αναβαθμίσεις και δεν εξαρτάται από κανέναν. Στο δικό μου, όπου η κάρτα της σκούπας γλιτώνει τέσσερα πατήματα κάθε μέρα, τα τρία πρόσθετα αξίζουν τη συντήρηση.
Πηγές
Τεκμηρίωση Home Assistant:
- Dashboards και Sections view
- Tile card και Badges
- Actions σε κάρτες (tap_action, hold_action, perform-action)
- Templating (is_state, state_attr, φίλτρα)
- Light integration (supported_color_modes, brightness, color_temp_kelvin)
- Έκδοση 2024.8 (μετονομασία services σε actions, νέα badges)
Τα τρία πρόσθετα: