I made a retro Flip Clock & Flip Sensor card

Share your Projects! Dashboards & Frontend
, , ,
1

Hi everyone

I’ve been working on my dashboard recently and really wanted that classic retro “splitflap” look for my alarm clock displays. I decided to build a couple of custom cards to handle this and figured I’d share them here in case anyone else likes this style.

fclock1
fclock1582×186 13.8 KB

flipconf2
flipconf21352×532 64.3 KB

I made two separate cards:

1. Flip Clock Card A simple animation-based clock. Repo: GitHub - dzaczek/lovelace-flip-clock-card: A retro-style Flip Clock with realistic 3D fall-down animations for Home Assistant.

2. Flip Sensor Card Uses the same style but for displaying any entity state (numbers, text, etc.). I use it mostly for temperature and humidity, but it should work with pretty much anything. Repo: GitHub - dzaczek/lovelace-flip-sensor-card: custom card for Home Assistant that shows an entity value as a mechanical flip flap counter

Let me know what you think! These are still fresh, so if you spot any bugs or have ideas for improvements.
Cheers!

12 Likes
2

Very nice, i use this on my dashboard but whenever i change to another page and go back to the homepage of my dashboard the clock stops.

4

Hi thx for update . I will check this during the weekend. Can you tell me if it happens on the phone, laptop, or all devices?

5

Hi.
I have the fix for the Flip Clock Card freezing issue after the user leaves the dashboard. The fix uses the Intersection Observer pattern.

I stopped using the disconnection callbacks. The IOer watches the card on the screen. The IOer stops the timer when the card is hidden. The IOer starts the timer again when the user returns to the view. The fix stops the timer when the card is hidden and starts it again when the user returns.

Thx for feedback i have o clue about this gap ;D.

New version 24.0.1 is ready to download.