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 InformationenInstallation 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
Aktualisierunsprotokoll
12/2023: Veröffentlichung des Beitrages
* 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!