Skip to content

README.md

Latest commit

 

History

History
193 lines (149 loc) · 5.38 KB

README.md

File metadata and controls

193 lines (149 loc) · 5.38 KB
Raw

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

Installation

  1. Clone and install dependencies:
npm install
  1. 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