Analog Timer - Cross-Platform Timer App

A beautiful 60-minute analog timer application built with Tauri 2.0, React, and TypeScript. Works on desktop (macOS, Windows, Linux), Android, and iOS.

Features

• 60-Minute Analog Clock Face: Visual circular timer with red arc showing remaining time
• Intuitive Drag Interface: Click and drag anywhere on the clock face to set time (0-60 minutes)
• Timer Controls: Start, Pause, Reset, and Stop buttons
• Alarm System: Toggle sound notifications on/off (persisted in localStorage)
• Visual Notifications: Flashing red screen and "TIME'S UP!" overlay when timer completes
• System Notifications: Native OS notifications when timer finishes
• Audio Alarm: Looping alarm sound (when enabled)
• Responsive Design: Optimized for desktop, tablets, and mobile devices
• Touch Support: Full touch interface for mobile platforms
• Cross-Platform: Runs natively on macOS, Windows, Linux, Android, and iOS

Screenshot

The app displays a classic analog clock face with:

• Black and white background
• Red arc showing remaining time
• Digital time display (MM:SS) in the center
• 5-minute tick marks (0, 15, 30, 45, 60)
• Draggable red knob for setting time

Quick Start

Prerequisites

• Rust 1.70+ (https://rustup.rs/)
• Node.js 18+ and npm
• For mobile: See SETUP.md for platform-specific requirements

Installation

1. Clone and install dependencies:

npm install

2. Add an alarm sound (Required for audio functionality):
   • Download an alarm sound (MP3 or OGG format)
   • Save it as public/alarm.mp3
   • Free sounds available at: https://freesound.org/

Running

Desktop Development:

npm run tauri dev

Desktop Production Build:

npm run tauri build

Android:

npm run tauri android init  # First time only
npm run tauri android dev   # Run on device/emulator

iOS:

npm run tauri ios init  # First time only
npm run tauri ios dev   # Run on device/simulator

Usage

1. Set Time: Click and drag on the clock face to set desired time (0-60 minutes)
2. Start Timer: Click the "Start" button to begin countdown
3. Pause: Click "Pause" to pause the timer
4. Resume: Click "Start" again to resume
5. Reset: Click "Reset" to return to originally set time
6. Stop: Click "Stop" to clear timer completely
7. Toggle Alarm: Click the alarm button (🔊/🔇) to enable/disable sound

Technology Stack

• Framework: Tauri 2.0
• Frontend: React 18 + TypeScript
• Build Tool: Vite 6
• Backend: Rust
• Styling: CSS3 with responsive design
• Plugins:
  • tauri-plugin-notification - System notifications
  • tauri-plugin-opener - Open URLs

Project Structure

visual-timer-tauapp/
├── src/                    # React frontend
│   ├── App.tsx            # Main timer component
│   ├── App.css            # Styles
│   └── main.tsx           # React entry point
├── src-tauri/             # Rust backend
│   ├── src/
│   │   ├── lib.rs         # Tauri app setup
│   │   └── main.rs        # Entry point
│   ├── Cargo.toml         # Rust dependencies
│   └── tauri.conf.json    # App configuration
├── public/                # Static assets
│   └── alarm.mp3          # Alarm sound (add this)
├── SETUP.md               # Detailed setup instructions
└── README.md              # This file

Configuration

Window Settings (tauri.conf.json)

• Default size: 500x700px
• Resizable: Yes
• Centered on screen

Mobile Settings

• Android: Minimum SDK 24 (Android 7.0)
• iOS: Minimum iOS 13.0

Development

Key Implementation Details

1. Timer Logic (src/App.tsx:30-81):

   • Uses setInterval for 1-second countdown
   • Automatically stops and triggers notifications at 00:00

2. Drag Mechanism (src/App.tsx:105-163):

   • Calculates angle from mouse/touch position
   • Converts angle to minutes (0-60)
   • Supports both mouse and touch events

3. Visual Feedback (src/App.css):

   • SVG-based analog clock with arc drawing
   • Flashing red animation on completion
   • Responsive breakpoints for mobile

4. Notifications:

   • System notifications via Tauri plugin
   • Audio playback via HTML5 audio element
   • Visual overlay with pulsing animation

Building for Production

Desktop

npm run tauri build

Output: src-tauri/target/release/bundle/

Android APK

npm run tauri android build

Output: src-tauri/gen/android/app/build/outputs/

iOS

npm run tauri ios build

Output: src-tauri/gen/apple/build/

Troubleshooting

No alarm sound?

• Ensure public/alarm.mp3 exists
• Check alarm toggle is ON (green)
• Verify device volume

Build errors?

• Run platform init commands first
• Check Rust and Node.js versions
• See SETUP.md for detailed help

Performance issues?

• Timer uses <5% CPU normally
• Ensure no other heavy processes running

Contributing

This is based on the specification from /Users/gpalagan/source/visual-timer/SPECIFICATION.md

License

MIT

Recommended IDE Setup

• VS Code
• Tauri Extension
• rust-analyzer