Laifen Card

A frosted-glass Lovelace card for Laifen Wave and Laifen Wave Pro electric toothbrushes, built for the UrbanTechIO Laifen BLE integration (laifen_ble).

Apple-inspired neutral design: translucent frosted-glass surface, a ghosted product render rising from the bottom of the card, segmented controls, and thin sliders — in light or dark glass.

Features

• Live status ring — shows a countdown of the brushing session against your configured duration while brushing, and battery level when idle
• Mode selector — segmented control (Mode 1–3, Mode 4 appears when High Frequency is enabled)
• Sliders — vibration strength, oscillation speed, oscillation range (per-mode, ranges follow the integration's limits automatically)
• Feature toggles — High Frequency, 30s pacer, Airplane mode, and on the Wave Pro: Deep Clean, Anti-Splash, 3s Ramp-Up, Bristle Protection, Lift-to-Wake
• Wave Pro extras — over-pressure sensitivity (Light/Medium/Hard), brushing duration stepper, and a live pulsing warning dot in the header when you press too hard
• Power button — start/stop the brush motor
• Frosted glass or solid background; follows your Home Assistant theme colors by default, with fixed Apple-style light/dark presets as an alternative; adjustable brush-image opacity
• card-mod compatible — injected styles survive the card's re-renders
• Full UI editor — pick your model (Wave / Wave Pro), point it at any one entity of your brush, and every other entity is discovered automatically; every section can be shown/hidden and every entity can be overridden

Requirements

• Home Assistant 2024.1 or newer
• The Laifen BLE integration installed and connected to your brush

Installation

HACS (recommended)

1. Open HACS → three-dot menu → Custom repositories
2. Add https://github.com/UrbanTechIO/laifen-card with category Dashboard
3. Search for Laifen Card in HACS and install it
4. Reload your browser (HACS registers the resource automatically)

Manual

1. Download laifen-card.js from the latest release
2. Copy it to config/www/laifen-card.js
3. Add a dashboard resource: Settings → Dashboards → Resources → Add resource
   • URL: /local/laifen-card.js
   • Type: JavaScript module

Usage

Add the card from the dashboard card picker (search "Laifen"). In the editor:

1. Pick your model — Laifen Wave or Laifen Wave Pro (Pro reveals the extra pressure, duration, and feature options)
2. Pick any entity belonging to your brush (the status sensor is a good choice) — the card derives the device prefix and finds the rest automatically
3. Tune the look: theme, frosted glass, image opacity, and per-section visibility

YAML example

type: custom:laifen-card
model: wave_pro
entity: sensor.laifen_toothbrush_status
name: Bathroom Laifen
theme: ha
frosted: true
show_image: true
image_opacity: 0.85

Options

Option	Type	Default	Description
model	wave | wave_pro	wave	Which model UI to render; wave_pro unlocks pressure, duration, and Pro toggles
entity	string	—	Any entity of your Laifen device; used to auto-discover the rest
name	string	model name	Card title
theme	ha | auto | light | dark	ha	ha derives all colors from your active HA theme; light/dark are fixed Apple-style presets; auto picks the preset matching HA's dark mode
background_color	CSS color	—	Overrides the card background with any CSS color (#1a2b3c, rgb(26,43,60), teal, var(--my-color)). Text, controls, and the brush render automatically switch between light and dark to stay readable on your color
frosted	boolean	true	Translucent blurred glass; false renders a solid card
show_image	boolean	true	Ghosted brush render rising from the bottom of the card — the official Laifen app's device image, with separate day and night variants picked automatically
image_opacity	number 0–1	0.85	Brush render opacity
show_header	boolean	true	Name, connection status, battery pill
show_ring	boolean	true	Timer/battery ring
show_mode	boolean	true	Mode segmented control
show_sliders	boolean	true	Strength / speed / range sliders
show_features	boolean	true	Feature toggle grid
show_power	boolean	true	Start/stop button
show_pressure	boolean	true	Over-pressure sensitivity (Wave Pro)
show_duration	boolean	true	Brushing duration stepper (Wave Pro)
show_warning	boolean	true	Pulsing "pressing too hard" dot in the header (Wave Pro)
entities	object	{}	Per-role entity overrides (see below)

Entity overrides

Auto-discovery matches entities by the device prefix and the integration's default naming. If you renamed entities, override any role under entities::

type: custom:laifen-card
model: wave
entity: sensor.my_brush_status
entities:
  battery: sensor.my_brush_battery
  strength: number.my_brush_vibration_strength
  power: switch.my_brush_power

Available roles: status, battery, timer, brushing_time, mode, strength, speed, range, duration, pressure_level, power, connection, pressing, plus the feature switches high_frequency, reminder_30s, airplane, deep_clean, anti_splash, ramp_up, bristle, lift_wake.

card-mod

The card works with card-mod — styles injected into the card's shadow root are preserved across re-renders. Use card-mod's $ (shadow-piercing) syntax to reach the inner elements; the outer container has the .card class:

type: custom:laifen-card
model: wave
entity: sensor.laifen_toothbrush_status
card_mod:
  style:
    $: |
      .card { border-radius: 8px !important; }

Frosted glass tips

The blur effect shows whatever is behind the card — it looks best on dashboards with a wallpaper background (set one under your dashboard's theme or with background: in the view YAML). On a flat background the card falls back to a subtle translucent look; set frosted: false if you prefer a fully solid card.

Credits

• UrbanTechIO/Laifen — the BLE integration this card is built for
• Product imagery © Laifen Technology (device renders from the official Laifen app), used for device identification

License

MIT