Skip to content

SETUP.md

Latest commit

 

History

History
164 lines (128 loc) · 4.27 KB

SETUP.md

File metadata and controls

164 lines (128 loc) · 4.27 KB
Raw

Analog Timer - Setup Instructions

Overview

This is a cross-platform analog timer application built with Tauri 2.0, supporting desktop (macOS, Windows, Linux), Android, and iOS.

Prerequisites

Desktop Development

  • Rust 1.70+ (install from https://rustup.rs/)
  • Node.js 18+ and npm
  • Platform-specific dependencies:
    • macOS: Xcode Command Line Tools
    • Windows: Microsoft Visual Studio C++ Build Tools
    • Linux: webkit2gtk, libayatana-appindicator3

Mobile Development

Android

  • Android Studio
  • Android SDK (API 24+)
  • NDK (r26b or higher)
  • Java JDK 17+

Setup Android development:

npm run tauri android init

iOS

  • macOS with Xcode 13+
  • iOS 13.0+ target device or simulator
  • CocoaPods

Setup iOS development:

npm run tauri ios init

Installation

  1. Install dependencies:
npm install
  1. Add Alarm Sound (Required for alarm functionality):

Running the App

Desktop Development Mode

npm run tauri dev

Desktop Production Build

npm run tauri build

Android

# Development
npm run tauri android dev

# Build APK
npm run tauri android build

iOS

# Development
npm run tauri ios dev

# Build for App Store
npm run tauri ios build

Features

  • 60-Minute Analog Timer: Visual circular timer with red arc showing remaining time
  • Draggable Dial: Click and drag anywhere on the clock face to set time
  • Timer Controls: Start, Pause, Reset, and Stop buttons
  • Alarm Toggle: Enable/disable alarm sound (persisted in localStorage)
  • Visual Notifications: Flashing red screen and "TIME'S UP!" overlay when timer completes
  • Audio Notifications: Looping alarm sound (when alarm is enabled)
  • Responsive Design: Works on desktop, tablets, and mobile devices
  • Touch Support: Optimized for touch interfaces on mobile devices

Usage

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

Mobile-Specific Notes

Android

  • Minimum SDK: API 24 (Android 7.0)
  • Permissions: None required for basic functionality
  • The app will request audio playback permissions automatically

iOS

  • Minimum iOS version: 13.0
  • Background audio requires additional configuration in Xcode
  • App Store deployment requires Apple Developer account

Troubleshooting

No Sound Playing

  • Ensure alarm.mp3 exists in /public directory
  • Check that alarm toggle is set to ON (green)
  • Verify device volume is not muted
  • On mobile, ensure app has audio permissions

Build Errors (Mobile)

  • Run npm run tauri [android|ios] init first
  • Ensure all SDKs are properly installed
  • Check platform-specific requirements in Tauri docs

Performance Issues

  • Timer should use <5% CPU during countdown
  • If experiencing lag, check for other resource-intensive processes

Development

File Structure

visual-timer-tauapp/
├── src/
│   ├── App.tsx          # Main React component
│   ├── App.css          # Styles
│   └── main.tsx         # React entry point
├── src-tauri/
│   ├── src/
│   │   └── main.rs      # Rust backend
│   ├── Cargo.toml       # Rust dependencies
│   └── tauri.conf.json  # Tauri configuration
├── public/
│   └── alarm.mp3        # Alarm sound (ADD THIS)
└── package.json

Adding Features

  • Timer logic is in App.tsx (lines 30-55)
  • Drag/dial logic is in App.tsx (lines 105-163)
  • Styling is in App.css
  • Mobile configurations are in tauri.conf.json

Resources

License

MIT