Even Pomodoro Timer

A full-featured Pomodoro timer optimized for Even Realities G2 smart glasses. Stay focused with 25-minute work sessions, take strategic breaks, and track your productivity—all displayed clearly on your glasses.

📸 Screenshot

The Pomodoro timer displaying on Even Realities G2 glasses with the minimalist single-line layout

✨ Features

Core Pomodoro Functionality

25-minute focus sessions with traditional Pomodoro technique
5-minute short breaks after each focus session
15-minute long breaks every 4 Pomodoros
Automatic mode switching based on session completion
Session tracking with daily counters and total focus time

Smart Glasses Integration

Minimalist single-line display optimized for G2 glasses (576×288px)
R1 ring control for start/pause without touching your phone
Auto-pause when glasses removed - timer pauses automatically
Auto-resume when glasses on - seamlessly continue your session
Real-time sync between phone and glasses display
Battery level monitoring and wearing detection

Phone Companion UI

Clean, Even Design System interface following Even OS 2.0 guidelines
Mode tabs for manual switching (Pomodoro/Short Break/Long Break)
Visual session counter showing current Pomodoro (#1-#4)
Daily statistics with completed sessions and total focus minutes
Detailed event log for debugging and monitoring

📱 Glasses Display Layout

┌──────────────────────────────────────────────────────────┐
│  FOCUS          25:00                    Start           │
└──────────────────────────────────────────────────────────┘
   Mode           Timer                    Button
  (left)        (center)                 (top-right)

Display States

During Focus:

FOCUS          25:00                    Start
FOCUS          24:59                    Pause    (when running)

During Short Break:

SHORT BREAK    05:00                    Start
SHORT BREAK    04:59                    Pause    (when running)

During Long Break:

LONG BREAK     15:00                    Start
LONG BREAK     14:59                    Pause    (when running)

🚀 Quick Start

Prerequisites

Node.js 20+ (Download)
Even Realities G2 glasses
Even Realities app (TestFlight for iOS or APK for Android)
Same WiFi network for phone and development machine

Installation

Clone or download this repository

git clone <repository-url>
cd even-pomodoro

Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```
Server starts on http://localhost:3000
Generate QR code for Even app
```
npm run qr
```
Scan QR code with Even Realities app
- Open Even Realities app on your phone
- Scan the QR code displayed in terminal
- App loads in WebView on your phone
Launch on glasses
- Menu appears on glasses after QR scan
- Use R1 ring to select the Pomodoro app
- Tap to launch - UI appears on glasses

🎯 How to Use

Basic Controls

On Glasses (R1 Ring)

Single tap on button area (right side) - Start/Pause timer
That's it! Simple and focused.

On Phone

Mode tabs (top) - Switch between Pomodoro/Short Break/Long Break
Start button - Begin or pause the current session
Reset button - Stop timer and reset to mode's default duration

The Pomodoro Flow

Start a Focus session (25 minutes)
- Tap Start on glasses or phone
- Timer counts down
- Work without distractions
Timer completes → Automatic switch to Short Break (5 minutes)
- Take a quick break
- Stretch, hydrate, rest your eyes
Repeat for 4 Pomodoros total
- Pomodoro #1 → Short Break
- Pomodoro #2 → Short Break
- Pomodoro #3 → Short Break
- Pomodoro #4 → Long Break (15 minutes)
After Long Break → Cycle restarts at Pomodoro #1

Manual Mode Switching

While automatic switching follows the Pomodoro technique, you can manually switch modes using the phone UI tabs:

Tap "Pomodoro" tab → 25-minute focus session
Tap "Short Break" tab → 5-minute break
Tap "Long Break" tab → 15-minute break

Switching modes stops any running timer and resets to the new mode's default duration.

Smart Auto-Pause

Glasses removed while timer running:

Timer automatically pauses
Phone shows: "Auto-paused: Glasses removed"
State is preserved

Glasses put back on:

Timer automatically resumes
Continues from where you left off
No manual intervention needed

Perfect for bathroom breaks, meetings, or any interruption!

📊 Session Tracking

Daily Statistics

Session counter resets at midnight (local time)
Total focus minutes accumulated throughout the day
Persistent storage via Even Hub localStorage API
Displayed at bottom of phone UI: X sessions today (Y min)

Pomodoro Counter

Shows current position in 4-Pomodoro cycle: #1, #2, #3, #4
Increments after each short break
Resets to #1 after long break
Helps you track progress toward your next long break

🛠️ Development

Project Structure

even-pomodoro/
├── index.html          # Main app (HTML + CSS + JavaScript)
├── app.json            # Even Hub app manifest
├── package.json        # Dependencies and scripts
├── README.md           # This file
└── node_modules/       # Dependencies (after npm install)

NPM Scripts

npm run dev      # Start development server (localhost:3000)
npm run qr       # Generate QR code for Even app
npm run pack     # Package as .ehpk for Even Hub submission

Technologies Used

Even Hub SDK (@evenrealities/even_hub_sdk) - Glasses WebView integration
Vite - Fast development server with hot reload
Vanilla JavaScript - No framework dependencies, pure ES6+
Even Design System - Official Even OS 2.0 design tokens
FK Grotesk typography with system font fallbacks

Key Components

State Management:

const state = {
  isRunning: boolean,           // Timer active state
  timeLeft: number,             // Seconds remaining
  mode: string,                 // 'focus' | 'shortBreak' | 'longBreak'
  currentPomodoroCount: number, // 1-4 tracking position in cycle
  completedSessions: number,    // Daily completed focus sessions
  totalFocusMinutes: number,    // Daily focus time accumulator
  bridge: object,               // Even Hub SDK bridge
  glassesInitialized: boolean,  // Glasses UI ready state
  isWearing: boolean,           // Wearing detection
  wasRunningBeforeRemoval: boolean // Auto-pause state
}

Glasses UI Containers:

Container 1 (Timer) - xPosition: 228, width: 120 (centered)
Container 2 (Mode) - xPosition: 20, width: 120 (left)
Container 3 (Button) - xPosition: 460, width: 100, isEventCapture: 1 (right)

Event Handling:

sysEvent type 3 = R1 click/tap
textEvent = Container-specific interactions (if SDK sends them)
deviceStatusChanged = Connection, battery, wearing detection

🐛 Troubleshooting

App shows on phone but not on glasses

Solution:

After scanning QR code, check if menu appears on glasses
Use R1 ring to navigate menu and select Pomodoro app
Tap to launch - UI should appear on glasses
Check phone log section for "✅ Glasses UI created successfully"

R1 clicks don't start/pause timer

Check:

Ensure you're clicking on the button area (right side of display)
Look for log message: "✅ R1 click detected (sysEvent type 3)"
Verify glasses are connected: Status shows "Connected (XX%)"

If still not working:

Refresh the app (rescan QR code)
Check for error messages in log
Ensure Even Realities app is up to date

Timer doesn't update on glasses

Solutions:

Check if updateGlassesDisplay() appears in log
Verify state.glassesInitialized is true
Restart the app and reconnect glasses

Session counters reset unexpectedly

Explanation:

Counters reset at midnight (local time) by design
This follows daily productivity tracking patterns
Data persists via localStorage as long as app remains open

QR code doesn't generate

Ensure:

npm install            # Install dependencies first
npm run dev            # Server must be running
npm run qr             # In a separate terminal

Alternative: Use IP address directly

# Find your local IP
ifconfig | grep "inet " | grep -v 127.0.0.1

# Generate QR for: http://YOUR_IP:3000

Different networks (phone and computer)

Use Cloudflare Tunnel:

# Install cloudflared
brew install cloudflared

# Start tunnel
npx cloudflared tunnel --url http://localhost:3000
# Copy the https://xxx.trycloudflare.com URL
# Generate QR code from that URL

📦 Packaging for Production

When ready to submit to Even Hub:

npm run pack

Creates even-pomodoro.ehpk file for submission. The .ehpk format bundles:

index.html - Main application
app.json - App manifest with metadata
All embedded resources

🎨 Design Philosophy

Minimalism

Single-line layout prevents visual clutter on glasses
Only essential information displayed
Clean, distraction-free focus

Even Design System Compliance

FK Grotesk typography
Official Even OS 2.0 color tokens
6px border radius, 12px/24px spacing
Accessibility-first design

Pomodoro Technique Fidelity

Traditional 25/5/15 timing
4-Pomodoro cycles before long break
Automatic mode transitions
Session tracking and metrics

🔮 Future Enhancements

Glasses-based mode switching - Tap mode text to cycle modes
Custom durations - User-configurable session lengths
Notification sounds - Audio alerts for session completion
Weekly statistics - 7-day productivity trends
Task integration - Associate Pomodoros with specific tasks
Gesture controls - Swipe gestures for additional actions

📄 License

MIT License - See LICENSE file for details

🙏 Acknowledgments

Even Realities for the G2 glasses and SDK
Francesco Cirillo for the Pomodoro Technique
Pomofocus for design inspiration

Built with ❤️ for focused work and smart glasses

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.gitignore		.gitignore
EvenPomodoro.png		EvenPomodoro.png
README.md		README.md
app.json		app.json
icon.svg		icon.svg
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json

gitpcl/even-pomodoro

Folders and files

Latest commit

History

Repository files navigation