A Custom Lovelace Card for Home Assistant designed to visualize electric toothbrushes via Bluetooth LE integrations.
| Brand | Integration | Link |
|---|---|---|
| Oral-B | oralb |
Oral-B Integration (official, built into HA Core) |
| Philips Sonicare | philips_sonicare_ble |
philips_sonicare_ble (custom component) |
- Real-time brushing visualization with animated tooth SVG (4 or 6 sectors)
- Chip-based display for battery, pressure/intensity, and brushing mode
- Bluetooth connection status indicator (Pantone 285 blue)
- Progress bar based on brushing target (uses device routine length when available)
- Success badge when all sectors are complete
- Automatic entity discovery — no manual YAML required
- Sector tracking: device-reported (Oral-B) or time-based calculation (Sonicare)
- Configurable title, subtitle, and accent color
- Configurable sector order with drag & drop and up/down buttons
- Responsive layout with container queries (icon-only chips on narrow cards)
- Multi-language support (auto-detects Home Assistant language)
- Light and dark mode support via HA CSS variables
| Sensor | Oral-B | Philips Sonicare |
|---|---|---|
| Status | idle, running, charging, … | off, standby, run, charge, … |
| Sector | Reported by device (1–6) | Calculated from routine time (4 or 6 sectors, configurable) |
| Duration | Brushing session (seconds) | Brushing time (seconds) |
| Pressure | low, normal, high | — |
| Intensity | — | low, medium, high |
| Mode | Daily Clean, Sensitive, Turbo, … | Clean, White+, Gum Health, Deep Clean+ |
| Battery | Battery level (%) | Battery level (%) |
- Smartes Badezimmer? So hilft dir ein Shelly Wall Display beim Zähneputzen & Rasieren! — Video by @smartmatic showing the card on a Shelly Wall Display alongside the Philips Shaver integration (German)
- Open HACS → Frontend → Custom Repositories
- Add the repository:
https://github.com/mtheli/toothbrush-card - Install Toothbrush Card
- Refresh your Home Assistant dashboard
- Download
dist/toothbrush-card.jsfrom the latest release - Copy it to
/config/www/community/toothbrush-card/ - Add as a Lovelace resource:
resources:
- url: /local/community/toothbrush-card/toothbrush-card.js
type: moduleThe card is configured via the UI — just add it and select your toothbrush device.
| Option | Type | Default | Description |
|---|---|---|---|
| device_id | string | — | (required) Toothbrush device to use |
| title | string | — | Custom title (default: manufacturer) |
| show_subtitle | boolean | true | Show device name as subtitle |
| accent_color | string | — | Header accent color (hex, e.g. #0085FF) |
| num_sectors | 4 | 6 | auto | Override sector count (Oral-B: from device; Sonicare: 4 default, set to 6 for Prestige/HX999B) |
| sector_order | string[] | — | Custom sector order (drag & drop in UI) |
type: custom:toothbrush-card
device_id: 1234567890abcdef
title: My Toothbrush
show_subtitle: true
accent_color: "#0085FF"| Language | Code |
|---|---|
| English | en |
| Deutsch | de |
| Nederlands | nl |
The card automatically detects the language configured in your Home Assistant instance. If your language is not yet supported, it falls back to English. Contributions for additional languages are welcome — just add a new JSON file in src/locales/.
- 6-sector brushes (IO Series): The oralb_ble integration only maps sectors 1–4. When a 6-sector brush reaches sectors 5 or 6, the integration incorrectly reports them as sector 4. The card includes a client-side workaround that tracks brushing progress and auto-advances past duplicate sectors, but the root cause needs to be fixed upstream in the oralb_ble parser.
git clone https://github.com/mtheli/toothbrush-card.git
cd toothbrush-card
npm install
npm run buildThis is an independent community project and is not affiliated with, endorsed by, or sponsored by Philips or Oral-B. All product names, trademarks, and registered trademarks are property of their respective owners.
MIT License — see LICENSE