Clooos/Bubble-Card
Bubble Card
Bubble-Card is a customizable UI framework and custom card for Home Assistant dashboards. It provides a system for building interactive smart home interfaces using JavaScript templates and CSS variables to create state-aware components.
The project is distinguished by its use of JavaScript dashboard templating to dynamically update icons, colors, and text in real-time based on entity states. It includes a modular CSS style manager for creating and sharing reusable style modules and functional logic to maintain visual consistency across multiple cards.
The framework covers smart home device control for climate, media, and cover entities through interactive buttons, sliders, and dropdowns. It also supports complex dashboard navigation via scrollable footers and pop-up overlay interfaces.
The system utilizes a schema-driven configuration editor to map user-defined values to template literals and runtime logic.
Features
- Home Automation Interfaces - Functions as a complete interface for managing climate, media, and cover devices via interactive controls.
- Dynamic Template Rendering - Provides runtime evaluation of JavaScript templates to dynamically update icons, colors, and text based on live entity states.
- UI Buttons - Provides customizable button controls that function as switches, sliders, and state indicators.
- Smart Home Control Interfaces - Provides intuitive interactive buttons, sliders, and dropdowns to manage smart home devices.
- UI State Triggers - Triggers specific UI behaviors and visibility changes by monitoring changes in the state and attributes of external entities.
- Smart Home Dashboards - Provides a framework for creating highly tailored and personalized Home Assistant dashboards.
- Buttons - Provides interactive buttons that function as toggles, range sliders, and state indicators.
- Dynamic State Templates - Uses JavaScript templating to dynamically update icons, colors, and text based on live entity states.
- State-to-UI Mapping - Transforms raw entity state data into formatted content for UI display through editor-configured template bindings.
- Custom Dashboard Cards - Provides a customizable UI card component for Home Assistant dashboards with dynamic styling.
- Pop-up Overlays - Builds overlay interfaces that remain hidden until triggered by a link or state-based automation.
- Cross-Component Style Sharing - Provides a system for saving and sharing reusable sets of styles across multiple dashboard cards.
- CSS Variable Styling Systems - Implements a styling architecture that leverages native CSS variables for theme propagation and dynamic property management.
- UI Frameworks for Home Automation - Offers a system for building interactive smart home interfaces with conditional logic and state-aware components.
- UI State Condition Evaluators - Evaluates boolean expressions and entity states to determine if specific visual interface conditions are met.
- Dynamic Templating - Renders reactive content within markup by using JavaScript logic to update icons and text in real-time.
- Template Data Binding - Binds structured configuration data into template strings to dynamically render content based on device state.
- Climate Control Interfaces - Provides a dedicated interface for managing thermostats and HVAC settings with automatic mode selection.
- Cover Control Interfaces - Provides a dedicated interface for operating blinds, shutters, and garage doors.
- Sub-button Embeds - Allows adding secondary buttons, sliders, or dropdowns to existing cards as quick-action chips.
- Card Layouts - Provides configurable grid and size settings for card-based dashboard layouts.
- Configuration Interfaces - Provides customizable user interfaces for settings using various input selectors like text, numbers, and entity pickers.
- Navigation Action Footers - Implements a persistent horizontal stack of scrollable buttons in the footer for navigation.
- Gesture-Based Action Triggers - Supports assigning custom behaviors to tap, double-tap, and hold gestures.
- Scrollable Navigation Footers - Ships a scrollable footer of buttons to trigger pop-ups or navigate dashboard pages.
- Dropdown Menus - Implements collapsible dropdown menus for selecting options for smart home entities.
- Navigation Controls - Implements interactive navigation controls including pop-up interfaces and scrollable footers for complex dashboards.
- Overlay Interfaces - Implements overlay interfaces for rendering detailed device control panels as pop-ups isolated from the main dashboard flow.
- Select Dropdowns - Provides dropdown selection menus for choosing between predefined options for input entities.
- Shared Style Modules - Shares reusable sets of functional logic and visual styles via a local or community-driven storage system.
- Media Player Controls - Provides interface elements for managing playback, volume, and progress of media player entities.
- Visual Style Customization - Provides mechanisms for applying custom themes and visual configurations to modify the appearance of dashboard cards.
- Dashboard Styling Systems - Offers a system for managing reusable visual themes and modular styles across various dashboard cards.
- Dashboard Frameworks - Minimalist card collection with pop-up interactions.
