https://github.com/mtheli/toothbrush-card
Custom Lovelace card for electric toothbrushes — supports Oral-B (oralb_ble) and Philips Sonicare (philips_sonicare_ble)
https://github.com/mtheli/toothbrush-card
custom-card hacs home-assistant lovelace oralb philips sonicare toothbrush
Last synced: about 2 months ago
JSON representation
Custom Lovelace card for electric toothbrushes — supports Oral-B (oralb_ble) and Philips Sonicare (philips_sonicare_ble)
- Host: GitHub
- URL: https://github.com/mtheli/toothbrush-card
- Owner: mtheli
- License: mit
- Created: 2025-11-02T07:47:13.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-04-10T06:55:37.000Z (2 months ago)
- Last Synced: 2026-04-10T08:38:29.898Z (2 months ago)
- Topics: custom-card, hacs, home-assistant, lovelace, oralb, philips, sonicare, toothbrush
- Language: JavaScript
- Size: 523 KB
- Stars: 12
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Toothbrush Card
[](https://github.com/hacs/integration)
[](https://github.com/mtheli/toothbrush-card/releases)
[](LICENSE)
A **Custom Lovelace Card** for [Home Assistant](https://www.home-assistant.io/) designed to visualize **electric toothbrushes** via Bluetooth LE integrations.
### Supported Integrations
| Brand | Integration | Link |
|-------|------------|------|
| Oral-B | `oralb` | [Oral-B Integration](https://www.home-assistant.io/integrations/oralb/) (official, built into HA Core) |
| Philips Sonicare | `philips_sonicare_ble` | [philips_sonicare_ble](https://github.com/mtheli/philips_sonicare_ble) (custom component) |
 
---
## Features
- 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
## Supported Data Points
| 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 (%) |
## Community
- [Smartes Badezimmer? So hilft dir ein Shelly Wall Display beim Zähneputzen & Rasieren!](https://www.youtube.com/watch?v=ROI91x2Swv8) — Video by [@smartmatic](https://github.com/smartmatic) showing the card on a Shelly Wall Display alongside the Philips Shaver integration (German)
## Installation
### HACS (Recommended)
1. Open **HACS → Frontend → Custom Repositories**
2. Add the repository: `https://github.com/mtheli/toothbrush-card`
3. Install **Toothbrush Card**
4. Refresh your Home Assistant dashboard
### Manual
1. Download `dist/toothbrush-card.js` from the [latest release](https://github.com/mtheli/toothbrush-card/releases)
2. Copy it to `/config/www/community/toothbrush-card/`
3. Add as a Lovelace resource:
```yaml
resources:
- url: /local/community/toothbrush-card/toothbrush-card.js
type: module
```
## Configuration
The 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) |
### YAML Example
```yaml
type: custom:toothbrush-card
device_id: 1234567890abcdef
title: My Toothbrush
show_subtitle: true
accent_color: "#0085FF"
```
## Supported Languages
| 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/`.
## Known Issues
- **6-sector brushes (IO Series):** The [oralb_ble integration](https://github.com/Bluetooth-Devices/oralb-ble) 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.
## Development
```bash
git clone https://github.com/mtheli/toothbrush-card.git
cd toothbrush-card
npm install
npm run build
```
## Disclaimer
This 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.
## License
MIT License — see [LICENSE](LICENSE)