Skip to content

v0.2.0 — first usable release

Choose a tag to compare

View all tags
@genericJE genericJE released this 10 May 17:28
v0.2.0
d89ccbb

The card now mounts the upstream weilSieDichLieben React app inside a Lovelace card and renders the BVG departure board with the upstream's kiosk aesthetic — DotMatrix bitmap font, scrolling marquee remarks, leaflet vehicle radar popovers, orange-on-black.

Install via HACS

Until this is in the HACS default catalog: HACS → Frontend → ⋯ → Custom repositories → paste https://github.com/genericJE/ha-weilSieDichLieben, type Lovelace. Then install weilSieDichLieben Card and add to a dashboard.

Configuration

Use the visual editor (card edit dialog → Show visual editor) to search for BVG stations and toggle transport modes per station. Or edit the YAML directly:

type: custom:weil-sie-dich-lieben-card
stations:
  - id: "900100003"
    value: "S+U Alexanderplatz"
    suburban: true
    subway: true
    tram: true
    bus: true
    when: 0
    results: 6
language: de              # de | en
fontSize: 16
remarksVisibility: true
standardRemarksVisibility: true
hideDepartureCol: false

Per-station fields match the upstream API: suburban, subway, tram, bus, ferry, express (IC/ICE), regional (RB/RE), plus when (min minutes ahead), results (departures shown), and optional destination for direction filtering.

What's in this release

  • Embeds the upstream React DepartureDisplay component via @r2wc/react-to-web-component
  • Card config flows in as React props — no cookies, no settings drawer in the card itself; HA Lovelace YAML is the source of truth
  • Visual config editor with debounced BVG station search (v6.bvg.transport.rest/locations)
  • DotMatrix font bundled inline as a data URI
  • antd CSS-in-JS injected into the shadow DOM via StyleProvider so flex columns, popovers, and switches actually render
  • react-fast-marquee and leaflet styles mirrored from document.head into the shadow root via MutationObserver, so animations run and the radar map is styled
  • Radar map popover renders as a 520px floating overlay, not clipped by the column's overflow: hidden
  • Header text color and line-height fixed up to match the reference site (HA's dark theme leaks otherwise)

Recommended dashboard layout

Set the view to panel: true so the card fills the full dashboard width — weilSieDichLieben was designed for kiosk-style fullscreen displays and looks compressed in masonry tiles.

views:
  - title: BVG
    path: bvg
    icon: mdi:tram
    panel: true
    cards:
      - type: custom:weil-sie-dich-lieben-card
        stations: ...

Bundle

Single ES module weil-sie-dich-lieben-card.js, ~706KB minified (includes React, antd, leaflet, the upstream React source, and the DotMatrix font binary). Loaded once per HA frontend session.

Assets 3
Loading