Zum Inhalt springen
Startseite » Swipe Card

Swipe Card

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 Informationen

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
Beispiel 1 Swipe Card
Beispiel 1

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.

Parameter Autoplay
Parameter Autoplay

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
Swipe card vertikal swipen
Karten vertikal swipen

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
Swipe card Width
Swipe card width

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).

Coverflow Effekt
Coverflow Effekt

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
Cube Effekt
Cube Effekt

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
Fade Effekt
Fade Effekt

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
Flip Effekt
Flip Effekt

Aktualisierunsprotokoll

12/2023: Veröffentlichung des Beitrages

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 2

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

* 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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

The maximum upload file size: 5 MB. You can upload: image. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop file here