Skip to content

Timeflow card v3.0.0

Choose a tag to compare

@Rishi8078 Rishi8078 released this 29 Jul 13:04

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_entity option.
  • Overrides Target Date: When a timer_entity is used, it takes priority over target_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: 20px

After (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.md file 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.