In diesem Beitrag zeige dir viele Einstellungsmöglichkeiten für die HACS Swipe Card von Bram Kragten (https://github.com/bramkragten/swipe-card). Mit dieser Karte kannst du zwischen verschiedenen Karten swipen. Ich gehe nicht nur auf die Installation dieser Karte, sondern auch auf die Einstellungsmöglichkeiten und Effekte ein.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenInhaltsverzeichnis
Installation Swipe Card
Diese Karte ann automatisch über den HACS heruntergeladen und installiert werden. Hierzu klickst du auf den HACS -> Frontend -> Repository hinzufügen. Im folgenden Menü suchst du nach der Swipe Card und klickst dann auf herunterladen. Nun wird die Swipe Card installiert. Im Anschluss muss der Cache noch einmal neu geladen werden.
Hinzufügen zum Dashboard
Mit folgendem yaml Code fügst du die Karte zu deinem Dashboard hinzu. Dazu klickst du auf Karte hinzufügen.
type: custom:swipe-card cards:
Im folgenden Code zeige ich dir, wie du drei Entitätenkarten (Temperatur außen, Temperatur 1 und Temperatur 2) hinzufügst.
type: custom:swipe-card
cards:
- type: entity
entity: sensor.gw2000a_outdoor_temperature
- type: entity
entity: sensor.gw2000a_temperature_1
- type: entity
entity: sensor.gw2000a_temperature_2
Zusätzliche Parameter
Die Swipe Card verwendet das Script von Swiper. Über die Swiper Parameter können einige Veränderungen vorgenommen werden. In den folgenden Absätzen zeige ich dir einige Einstellungsmöglichkeiten.
Autoplay
Mit dem Parameter autoplay können die Karten so eingestellt werden, dass sie automatisch wechseln.
type: custom:swipe-card
parameters:
autoplay:
delay: 5000
cards:
- type: entity
entity: sensor.gw2000a_outdoor_temperature
- type: entity
entity: sensor.gw2000a_temperature_1
- type: entity
entity: sensor.gw2000a_temperature_2
Beim Parameter Autoplay kannst du den Zeitraum zwischen dem Wechsel der Karten in Millisekunden (delay) eingeben.
Karte vertikal wischen
Mit dem folgenden Code kannst du die Karten vertikal wischen. Beachte jedoch, dass durch die Höhenangabe ggfls. dein Dashboard nicht mehr responsable ist.
type: custom:swipe-card
parameters:
height: 90
autoHeight: true
direction: vertical
cards:
- type: entity
entity: sensor.gw2000a_outdoor_temperature
- type: entity
entity: sensor.gw2000a_temperature_1
- type: entity
entity: sensor.gw2000a_temperature_2
width
Mit dem Parameter „width“ kannst du die Breite des Swipers verändern.
type: custom:swipe-card
parameters:
width: 200
cards:
- type: entity
entity: sensor.gw2000a_outdoor_temperature
- type: entity
entity: sensor.gw2000a_temperature_1
- type: entity
entity: sensor.gw2000a_temperature_2
Effekte
Du kannst unterschiedliche Effekte beim Wechsel der Karten einstellen.
Coverflow Effekt
Du kannst mit folgendem Code den Coverflow Effekt erstellen.
type: custom:swipe-card
parameters:
effect: coverflow
coverflowEffect:
rotate: 30
slideShadows: false
cards:
- type: entity
entity: sensor.gw2000a_outdoor_temperature
- type: entity
entity: sensor.gw2000a_temperature_1
- type: entity
entity: sensor.gw2000a_temperature_2
Es können noch weitere Einstellungen vorgenommen werden. Diese findest du auf der Seite des Programmierers (https://swiperjs.com/types/interfaces/types_modules_effect_coverflow.CoverflowEffectOptions).
Cube Effekt
Du kannst den Cube Effekt mit folgendem Code erstellen.
type: custom:swipe-card
parameters:
effect: cube
cubeEffect:
slideShadows: false
cards:
- type: entity
entity: sensor.gw2000a_outdoor_temperature
- type: entity
entity: sensor.gw2000a_temperature_1
- type: entity
entity: sensor.gw2000a_temperature_2
Fade Effekt
Möchtest du einen Fade Effekt erzielen, kannst du folgenden Code verwenden.
type: custom:swipe-card
parameters:
effect: fade
fadeEffect:
crossFade: true
cards:
- type: entity
entity: sensor.gw2000a_outdoor_temperature
- type: entity
entity: sensor.gw2000a_temperature_1
- type: entity
entity: sensor.gw2000a_temperature_2
Flip Effekt
Den Flip Effekt erhälst du mit folgendem Code.
type: custom:swipe-card
parameters:
effect: flip
flipEffect:
slideShadows: false
cards:
- type: entity
entity: sensor.gw2000a_outdoor_temperature
- type: entity
entity: sensor.gw2000a_temperature_1
- type: entity
entity: sensor.gw2000a_temperature_2
Nächster Schritt:Home Assistant – Leitfaden (DE)
Bewerte diesen Beitrag
Dein Feedback ist mir wichtig! Hat dir der Beitrag geholfen oder fehlte dir etwas? Schreib’s mir gerne in die Kommentare oder bewerte den Artikel – so kann ich meine Inhalte noch besser machen.
Support & Hilfe
Du hast eine Frage oder brauchst Unterstützung? Über meinen Support kannst du ganz einfach ein Ticket erstellen – ich helfe dir so schnell wie möglich weiter.
Meine Produktempfehlungen für dich
Einige der folgenden Produktlinks sind sogenannte Affiliate-Links. Wenn du darüber etwas kaufst, erhalte ich eine kleine Provision – für dich bleibt der Preis natürlich gleich.
- ✔ Leistungsstarker Raspberry Pi 5 mit 8GB RAM: Ideal für anspruchsvolle Projekte wie Smart Home, Home Assistant oder Retro Gaming – flüssige Performance für Einsteiger und Profis.
- ✔ Original 27W Netzteil: Stabile und zuverlässige Stromversorgung für Ihren Raspberry Pi 5.
- ✔ Original Gehäuse mit Lüfter: Schützt Ihren Raspberry Pi und sorgt für optimale Kühlung bei intensiver Nutzung.
- ✔ 128GB Speicherkarte: Bietet großzügigen Speicherplatz für Ihr Betriebssystem, Anwendungen und Dateien.
- ✔ USB-Kartenleser für Speicherkarten: Einfache und schnelle Einrichtung ihres Betriebssystem am PC oder Laptop.
- ✔ Aluminium-Kühlkörper: Zusätzliche Kühlung für eine zuverlässige Leistung und Langlebigkeit.
- ✔ 4K Micro-HDMI-Kabel 1 Meter: Perfekt für gestochen scharfe Videoausgabe auf kompatiblen 4K-Monitoren oder Fernsehern.
- ✔ Hochwertige db-tronic-Verpackung: Robuste und elegante Verpackung, ideal für sicheren Versand und als Geschenk geeignet.
- Vorgeflasht mit Z-Stack 3.x.0-Koordinator-Firmware
- Basis auf TI CC2652P + CP2102(N)
- Dieser zigbee 3.0 USB-Dongle-p als ZigBee-Gateway zur Verwaltung von Untergeräten in Open-Source-Plattformen mit HomeAssistant oder Zigbee2MQTT
- SMA-Schnittstelle externe Antenne,Aluminiumgehäuse reduziert effektiv Signalstörungen von Peripheriegeräten, +20dBm Ausgangsverstärkung
- Kann in ZigBee-Routing-Firmware flashen, als Router im ZigBee-Netzwerk die Netzwerkreichweite erweitern
- 1.SLZB-MR1: Ein Multi-Radio-, Dual-Antennen-Zigbee- und Thread-Koordinator basierend auf den Modulen CC2652P7 und EFR32MG21. Er integriert Zigbee und Thread in einem einzigen Gerät. Kann als Zigbee 3.0-Gateway in den Open-Source-Automatisierungsplattformen – Zigbee2MQTT, Home Assistant, ZHA – verwendet werden.
- 2.Funktioniert in beiden Modi – LAN und USB. Der Modus kann über die Firmware oder per Knopfdruck geändert werden.
- 3. Sie können einem Server beliebig viele Zigbee-Koordinatoren hinzufügen. So können Sie problemlos verschiedene Räume und Gebäude abdecken und sie mit derselben Home Assistant-Instanz verbinden.
- 4. Das Gerät kann entweder über PoE oder USB-C mit Strom versorgt werden.
- 5. Es gibt zwei separate Antennen - eine für jeden SoC - und beide sind mit Leistungsverstärkern ausgestattet, die eine Sendeleistung von über 20 dBm ermöglichen. Die Antennen selbst haben einen Gewinn von mindestens 5 dBi.
Transparenzhinweis
*Die mit Sternchen markierten Links sind sogenannte „Affiliate-Links“. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen. Wird über diese ein Einkauf getätigt, werde ich mit einer kleinen Provision beteiligt – ohne das Kosten für dich entstehen. Vielen Dank für deinen Support!
Gerne darfst du aber auch meine Arbeit über eine Pay Pal Spende unterstützen.
Beitragsversion
Dieser Beitrag wird regelmäßig aktualisiert, um dir stets die aktuellsten Informationen zu bieten.
12/2023: Veröffentlichung des Beitrages
Hallo, wie kann ich denn auf einer Karte zwei Werte anzeigen lassen (z.B. Temperatur und Luftfeuchtigkeit)?
Hallo Holger,
ich habe die BannerCard dazu benutzt
Also
type: custom:swipe-card
cards:
- type: custom:banner-card
heading:
entities:
- entity: ...
Ich hoffe es hilft dir.
LG Ingo
Hallo Ingo,
ich würde es gern so aussehen lassen. Bekomme es mit einem Rollo realisiert. Sobald ich nach gleichem Muster einen Zweiten einfüge, funktioniert es nicht mehr.
Kannst du mir helfen?
VG Sven
Hallo,
ist diese Karte auch farblich abstimmbar? Z. Bsp. rot für Hzg. Vorlauf, blau für Hzg. Rücklauf.