Skip to content

ANALOG_CLOCK_README.md

Latest commit

 

History

History
272 lines (211 loc) · 6.41 KB

ANALOG_CLOCK_README.md

File metadata and controls

272 lines (211 loc) · 6.41 KB
Raw

Analog Clock Display Feature 🕐

Fitur display jam analog yang elegan dan fully customizable untuk menampilkan waktu di berbagai zona waktu dengan pilihan design yang berbeda.

📋 Fitur Utama

1. Multiple Design Options

  • Traditional: Design klasik dengan angka romawi
  • Modern: Design contemporary dengan gradient dan shadow
  • Minimal: Design minimalis dengan hanya dots sebagai markers

2. Animation & Real-time Updates

  • ✅ Smooth clock hand animation menggunakan requestAnimationFrame
  • ✅ Second hand yang bergerak smooth (millisecond precision)
  • ✅ Real-time update setiap frame
  • ✅ No CPU-intensive setInterval (menggunakan RAF)

3. Size Customization

  • ✅ Small (150px)
  • ✅ Medium (250px) - default
  • ✅ Large (350px)
  • ✅ Quick toggle antar ukuran

4. Display Options

  • ✅ Toggle visibility untuk second hand
  • ✅ Toggle visibility untuk hour labels
  • ✅ Support 12-hour dan 24-hour format
  • ✅ Real-time timezone offset display

5. Grid Display

  • ✅ Responsive grid layout untuk multiple cities
  • ✅ Auto-fill grid yang menyesuaikan ukuran screen
  • ✅ Smooth animations saat display

🎨 Design Showcase

Traditional Design

- Roman numerals (XII, I, II, III, etc)
- Classic thick borders
- Traditional hand styling

Modern Design

- Gradient backgrounds (purple-blue)
- Arabic numerals (1, 2, 3, etc)
- Gradient clock hands dengan shadow
- Contemporary styling

Minimal Design

- Hanya dots pada 12, 3, 6, 9 positions
- Tanpa labels
- Clean dan simple

🔧 Component Structure

AnalogClockService

Service yang menangani semua logic untuk analog clock:

  • Perhitungan clock hand angles
  • Configuration management
  • Format utilities
getClockHandAngles(date: Date): ClockHandAngles
- Menghitung angle untuk hour, minute, second hands
- Smooth calculation dengan millisecond precision

getDesignClass(): string
- Return CSS class untuk design saat ini

getSizeClass(): string
- Return CSS class untuk size saat ini

AnalogClockComponent

Component yang menampilkan analog clock dengan input:

  • @Input() time: Date - Time untuk display
  • @Input() timezone: string - Timezone label (e.g., "UTC+7")
  • @Input() cityName: string - Nama kota

Features:

  • Real-time animation loop
  • Interactive controls (Design, Size, Seconds, Labels)
  • Responsive styling

📱 Usage

Di App

Tombol 🕐 di floating controls untuk toggle analog clock view.

Ketika aktif, aplikasi menampilkan analog clock untuk semua kota yang tersedia (berdasarkan filter/favorit) dalam responsive grid.

Manual Integration

<app-analog-clock
  [time]="currentDate"
  [timezone]="'UTC+7'"
  [cityName]="'Jakarta'"
></app-analog-clock>

🎯 Controls

Setiap analog clock memiliki 4 tombol kontrol:

  1. 🎨 Design - Cycle antara Traditional → Modern → Minimal
  2. 📏 Size - Cycle antara Small → Medium → Large
  3. Sec - Toggle second hand visibility
  4. Labels - Toggle hour labels visibility

🎨 Styling

CSS Variables

Clock menggunakan CSS variables yang responsive terhadap theme:

  • --card-bg: Background color
  • --text-color: Text color
  • --button-bg: Button background
  • --button-hover: Button hover state

Dark Mode Support

Automatic dark mode detection dengan prefers-color-scheme:

  • Dark background (#2a2a2a)
  • Lighter text (#ddd)
  • Gradient colors untuk modern design

Responsive Design

  • Desktop: Grid dengan multiple columns
  • Tablet: Reduced spacing
  • Mobile: Single column

⚡ Performance Optimization

  1. RequestAnimationFrame Loop

    • Lebih efficient daripada setInterval
    • Auto-sync dengan browser refresh rate
    • CPU-friendly

  2. Memoized Calculations

    • Clock hand angles dihitung once per frame
    • Efficient DOM updates

  3. CSS Animations

    • Hardware-accelerated dengan transform
    • No layout recalculation

🔄 Integration Points

App Component

showAnalogClock = signal(false);
toggleAnalogClock(): void { ... }

Template

@if (showAnalogClock()) {
  <div class="analog-clocks-grid">
    @for (loc of cities; track loc.name) {
      <app-analog-clock
        [time]="getTimeByOffset(loc.offset)"
        [timezone]="timezone"
        [cityName]="loc.name"
      ></app-analog-clock>
    }
  </div>
}

Styling

.analog-clocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

🧪 Testing Considerations

  1. Time Calculation

    • Verify clock hand angles untuk known times
    • Test timezone offset accuracy

  2. Animation

    • Ensure smooth animation pada berbagai devices
    • Performance test di low-end devices

  3. Responsiveness

    • Test pada berbagai screen sizes
    • Verify grid layout behavior

  4. Design Switching

    • Test semua 3 design options
    • Verify label visibility toggle
    • Test size changes

📊 Bundle Impact

  • Service: ~2KB (gzipped)
  • Component: ~3KB (gzipped)
  • Styles: ~2KB (gzipped)
  • Total: ~7KB (minimal impact)

🔮 Future Enhancements

  1. Custom Colors

    • Allow user to customize hand colors
    • Gradient customization

  2. Clock Themes

    • Retro (steampunk style)
    • Digital hybrid
    • Luxury (gold/silver)

  3. Hour Chimes

    • Optional sound pada jam (ding ding ding)
    • Customizable chimes

  4. Timezone Calculator

    • Show time diff dari timezone saat ini
    • Meeting planner integration

  5. Export/Screenshot

    • Take screenshot dari analog clock
    • Export sebagai image

🎓 Technical Insights

Clock Hand Angle Calculation

// Second: 6 degrees per second (360 / 60)
const secondAngle = (seconds + ms / 1000) * 6;

// Minute: 6 degrees per minute + adjustment dari seconds
const minuteAngle = (minutes + seconds / 60) * 6;

// Hour: 30 degrees per hour + adjustment dari minutes
const hourAngle = (hours % 12 + minutes / 60) * 30;

Transform Origin

.hand {
  transform-origin: bottom center;
  /* rotate dari bawah (center point) */
}

Smooth Animation

.second-hand {
  transition: none; /* No jarring jumps */
}

📝 Browser Support

✅ Chrome 60+ ✅ Firefox 55+ ✅ Safari 12+ ✅ Edge 79+ ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Requires: ES2020+ support untuk requestAnimationFrame

Fitur ini menambahkan dimensi visual baru untuk aplikasi Jam Dunia Baru dengan tetap menjaga performance dan aksesibilitas! 🌍⏰