Timeflow card v3.0.0
Release v3.0.0: The Foundation Update
This is the most significant update to the TimeFlow Card yet! Version 3.0.0 represents a complete architectural migration from a single JavaScript file to a modern, modular TypeScript project. This "under-the-hood" overhaul provides a much stronger foundation for the future, resulting in better performance, stability, and easier maintenance.
✨ New Features
Timer Entity Support
You can now directly use Home Assistant timer entities to drive the countdown! This is perfect for kitchen timers, workout routines, or any other temporary countdowns you have in Home Assistant. The card will automatically display the remaining time and progress of the timer entity.
- Direct Integration: Simply provide a timer's entity ID to the new
timer_entityoption. - Overrides Target Date: When a
timer_entityis used, it takes priority overtarget_date.
Example:
type: custom:timeflow-card
title: "Kitchen Timer"
timer_entity: timer.kitchen_oven_timer🚨 BREAKING CHANGE: Styling Configuration
To streamline customization and align with best practices, the built-in styles configuration object has been removed.
All custom styling must now be done using the powerful card-mod integration. This provides a more consistent and flexible way to customize every aspect of the card.
How to Update Your Configuration
If you were using the old styles object, you will need to move your CSS into a card_mod block.
Before (Old method):
type: custom:timeflow-card
styles:
title:
- color: "#FF5722"
- font-size: 1.8rem
card:
- border-radius: 20pxAfter (New card-mod method):
type: custom:timeflow-card
card_mod:
style: |
ha-card {
border-radius: 20px;
}
.title {
color: #FF5722;
font-size: 1.8rem;
}🔧 Other Key Improvements
- Complete Rewrite in TypeScript: The entire card has been rewritten in TypeScript, making the code much more robust and maintainable.
- Modular Architecture: The codebase is now split into logical services (e.g.,
CountdownService,TemplateService,StyleManager), which improves performance and makes it easier to add new features in the future. - Performance Gains: The new architecture optimizes rendering and eliminates the flickering (FOUC) that could sometimes occur.
- Documentation Overhaul: The
README.mdfile has been completely rewritten with clearer examples and up-to-date configuration options.
🔧 Installation & Update
Due to the significant frontend changes, it is highly recommended to clear your browser cache after updating to ensure you are running the latest version of the card.
Thank you for your continued support! I'am excited about the solid foundation this update provides for future features.