A smart Home Assistant card for TeddyCloud Toniebox integration with automatic device discovery, visual entity selection, and intelligent configuration. No more manual ID entry required!
Example of the TeddyCloud Toniebox Card showing content, status, and controls
Auto-discovery mode: Just select any Toniebox entity for instant configuration
Traditional mode: Enter Toniebox ID and name manually (backward compatible)
Responsive design that works perfectly on mobile devices
This card integrates with the TeddyCloud Add-on to provide a comprehensive overview of your Toniebox status, content, and server settings.
- 🔍 Auto-Discovery: Automatically finds all TeddyCloud devices in your Home Assistant
- 🎯 Entity Picker: Select any Toniebox entity for instant configuration
- ⚡ One-Click Setup: No more guessing Toniebox IDs or manual entry
- ✅ Real-Time Validation: Shows which entities are available vs. missing
- 🔄 Mode Toggle: Switch between automatic and manual configuration
- 🎵 Content Display: Current Tonie picture and title
- 📊 Status Information: Battery, charging, volume levels, and controls
- 👆 Interactive Elements: Click entities for detailed information
- 📱 Responsive Design: Perfect on desktop and mobile devices
- 🌍 Multi-Language: Full English and German support
- ⚙️ Visual Editor: Professional configuration interface with live validation
- 🔄 Backward Compatible: Existing configurations continue to work
- 🎯 HACS Ready: Easy installation and updates
- ⚡ Performance Optimized: Fast loading and smooth interactions
- Home Assistant 2024.4.1 or newer
- HACS installed
- TeddyCloud Add-on running and configured
- TeddyCloud entities available in Home Assistant
- Open HACS in your Home Assistant instance
- Navigate to "Frontend" section
- Click the three dots menu and select "Custom repositories"
- Add this repository URL:
https://github.com/rknall/teddy-card - Select "Dashboard" as the category
- Click "Add"
- Find "TeddyCloud Toniebox Card" in the HACS frontend list
- Click "Install"
- Restart Home Assistant
- Download the latest
teddy-card.jsfile from the releases page - Copy the file to your
config/wwwdirectory - Add the following to your
ui-lovelace.yamlor through the UI:
resources:
- url: /local/teddy-card.js
type: module- Restart Home Assistant
The card offers two configuration modes for maximum flexibility:
- Add the Card: Dashboard → Edit → Add Card → "TeddyCloud Toniebox Card"
- Enable Auto Mode: Toggle the "Configuration Mode" switch to ON
- Select Entity: Choose any Toniebox entity from the dropdown
- Done! ✨ Card automatically configures itself with your Toniebox information
Benefits: No manual typing, instant setup, automatic entity discovery!
Perfect for power users or when you need specific control:
- Add the Card: Dashboard → Edit → Add Card → "TeddyCloud Toniebox Card"
- Keep Auto Mode OFF (default for existing users)
- Enter Details:
- Toniebox ID: Found in your entity names (e.g.,
12345678) - Toniebox Name: Your custom display name
- Language: English or German interface
- Toniebox ID: Found in your entity names (e.g.,
- Validate: Check the entity validation section for missing entities
# Auto-discovery mode (recommended)
type: custom:teddy-card
selection_mode: "auto"
entity_source: "sensor.teddycloud_box_12345678_tag_valid" # Any Toniebox entity
language: "en" # Optional: 'en' or 'de'
# Manual mode (backward compatible)
type: custom:teddy-card
selection_mode: "manual" # Optional: defaults to manual
toniebox_id: "12345678"
toniebox_name: "My Toniebox"
language: "en" # Optional: 'en' or 'de'Existing configurations work automatically - no changes needed!
- Your cards continue using manual mode
- Switch to auto mode anytime for easier management
The card expects the following entities to be available in Home Assistant:
image.teddycloud_box_[ID]_content_picturesensor.teddycloud_box_[ID]_content_titlesensor.teddycloud_box_[ID]_tag_validbinary_sensor.teddycloud_box_[ID]_chargersensor.teddycloud_box_[ID]_volume_dbsensor.teddycloud_box_[ID]_volume_levelevent.teddycloud_box_[ID]_volume_downevent.teddycloud_box_[ID]_volume_upsensor.teddycloud_box_[ID]_content_audio_id
switch.teddycloud_server_cloud_cachecontent_cache_cloud_content_on_local_serverswitch.teddycloud_server_cloud_enabled_generally_enable_cloud_operation
The card displays information in the following sections:
- Content Picture: Current Tonie content image
- Content Title: Title of the currently active content
- Toniebox Status:
- Tag UID
- Charging station status
- Volume levels (dB and percentage)
- Volume control buttons (ears)
- Content Audio ID
- Server Settings:
- Cache cloud content toggle
- Enable cloud operation toggle
The card supports two languages:
- English (
en) - Default - German (
de)
Language can be set during configuration or changed later through the visual editor.
| English | German |
|---|---|
| Title | Titel |
| Charging Station | Ladestation |
| Small Ear (quieter) | kleines Ohr (leiser) |
| Big Ear (louder) | großes Ohr (lauter) |
| Cache Cloud Content | Cloud-Inhalte zwischenspeichern |
| Enable Cloud Operation | Cloud-Betrieb aktivieren |
No TeddyCloud devices found in auto mode?
- ✅ Ensure TeddyCloud Add-on is running
- ✅ Check Developer Tools → States for entities starting with
teddycloud_box_ - ✅ Switch to Manual Mode temporarily if needed
Card not appearing in dashboard editor?
- ✅ Restart Home Assistant after HACS installation
- ✅ Clear browser cache (Ctrl+F5)
- ✅ Check if card appears in HACS → Frontend section
The v1.1.0+ editor shows real-time entity validation:
- 🟢 Green: All entities found - perfect setup!
- 🟡 Yellow: Some entities missing - partial functionality
- 🔴 Red: Many entities missing - check TeddyCloud integration
Common solutions:
- TeddyCloud not running: Start the add-on
- Wrong Toniebox ID: Use auto-discovery mode instead
- Integration issues: Restart TeddyCloud add-on
Auto-discovery mode issues:
- Use any TeddyCloud entity (sensor, binary_sensor, image, etc.)
- The card extracts the Toniebox ID automatically
- Switch modes if auto-detection fails
Manual mode issues:
- Toniebox ID: Find it in entity names (e.g.,
teddycloud_box_12345678_*) - Entity format: Must match exactly what TeddyCloud creates
- Case sensitive: Use exact entity IDs from Developer Tools
Editor not loading:
- Update to Home Assistant 2024.4.1+
- Clear browser cache completely
- Disable browser extensions temporarily
- Check browser console for errors (F12)
Toggle switch not working:
- Requires TeddyCloud entities to be detected
- Try manual mode if auto-discovery fails
- Refresh the page and try again
Existing cards not working after update:
- Cards should work automatically (backward compatible)
- If issues occur, edit the card and save (no changes needed)
- Check the validation section for any missing entities
Card not responsive on mobile:
- Update to latest version (v1.1.0+)
- Clear mobile browser cache
- Try landscape orientation for better entity validation view
# Clone the repository
git clone https://github.com/rknall/teddy-card.git
cd teddy-card
# Install dependencies
npm install
# Build the card
npm run build
# Watch for changes during development
npm run watch- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
- 🐛 Bug Reports: GitHub Issues
- 💡 Feature Requests: GitHub Issues
- 📖 Documentation: Wiki
- TeddyCloud Add-on - The TeddyCloud Home Assistant Add-on that provides the entities for this card
- HACS - Home Assistant Community Store
This project is licensed under the MIT License - see the LICENSE.md file for details.
🎯 Major Enhancement: Transforms configuration from manual ID entry to intelligent device discovery!
🧠 New Smart Features:
- 🔍 Auto-Discovery: Automatically finds all TeddyCloud devices in Home Assistant
- 🎛️ Visual Entity Picker: Select any Toniebox entity for instant configuration
- ⚡ One-Click Setup: No more guessing Toniebox IDs
- 🔄 Mode Toggle: Switch between automatic and manual configuration
- ✅ Real-Time Validation: Shows which entities are available vs. missing with visual indicators
🎨 Enhanced User Experience:
- 🎯 Smart Editor: Professional interface with live validation and entity counts
- 📱 Improved Mobile: Better responsive design for configuration on phones
- 🌐 Extended Translations: New German/English translations for all new features
- 🚨 Better Error Messages: Clear feedback for troubleshooting
🔧 Technical Improvements:
- 📦 New Architecture: Modular utility functions for entity discovery and validation
- 🔄 Backward Compatibility: All existing configurations continue to work seamlessly
- ⚡ Performance: Optimized entity discovery and validation algorithms
- 🛠️ Developer Experience: Enhanced debugging and error handling
🎖️ Migration-Friendly:
- Zero breaking changes - existing cards work automatically
- Optional upgrade to smart mode when editing cards
- Fallback mechanisms for all edge cases
- 🚀 Initial release with manual configuration
- 🎵 Support for all TeddyCloud entities (content, status, controls)
- ⚙️ Visual editor with basic configuration
- 🌍 Multi-language support (English/German)
- 🎯 HACS compatibility and validation