Analog Watch Control
Overview
The Analog Watch Control is a PowerApps component designed to provide a functional and visually appealing analog watch interface. It includes features like real-time time updates, alarm functionality, a stopwatch, and theme switching.
Features
Real-time Clock: Displays the current time with animated hour, minute, and second hands.
Date Display: Shows the current date.
Theme Selection: Allows users to switch between different visual themes.
Alarm Functionality: Users can set alarms with custom notifications.
Stopwatch: Includes start, stop, and reset options.
Weather Widget (Placeholder): Displays a dummy temperature value.
Custom Alerts: Provides interactive notifications for user actions.
Implementation
1. Importing Dependencies
The component imports necessary types and styles:
import { IInputs, IOutputs } from "./generated/ManifestTypes";
import "./CSS/AnalogWatchControl.css";
2. Class Definition
The component extends ComponentFramework.StandardControl<IInputs, IOutputs>
and includes necessary properties:
export class AnalogWatchControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private container: HTMLDivElement;
private hourHand!: HTMLElement;
private minuteHand!: HTMLElement;
private secondHand!: HTMLElement;
private timeLabel!: HTMLElement;
private dateLabel!: HTMLElement;
private notifyOutputChanged: () => void;
private context: ComponentFramework.Context<IInputs>;
private intervalId?: number;
private stopwatchInterval?: number;
private stopwatchTime = 0;
private alarmTime: string | null = null;
private alarmTriggered = false;
constructor() {}
3. Initialization
The init
method sets up the component structure and event listeners:
public init(
context: ComponentFramework.Context<IInputs>,
notifyOutputChanged: () => void,
state: ComponentFramework.Dictionary,
container: HTMLDivElement
): void {
this.container = container;
this.notifyOutputChanged = notifyOutputChanged;
this.context = context;
this.container.innerHTML = this.getWatchHTML();
this.hourHand = this.getElement(".hour-hand");
this.minuteHand = this.getElement(".minute-hand");
this.secondHand = this.getElement(".second-hand");
this.timeLabel = this.getElement(".time-label");
this.dateLabel = this.getElement(".date-label");
4. Updating Time and Alarm Handling
Update Clock
private updateClock(): void {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
this.hourHand.style.transform = `rotate(${(hours + minutes / 60) * 30}deg)`;
this.minuteHand.style.transform = `rotate(${minutes * 6}deg)`;
this.secondHand.style.transform = `rotate(${seconds * 6}deg)`;
this.timeLabel.textContent = now.toLocaleTimeString();
}
Alarm Check
private checkAlarm(): void {
if (!this.alarmTime || this.alarmTriggered) return;
const now = new Date();
const currentTime = now.toTimeString().substring(0, 5);
if (currentTime === this.alarmTime) {
this.showCustomAlert("🔔 Alarm is ringing!");
this.alarmTriggered = true;
setTimeout(() => {
this.alarmTime = null;
}, 60000);
}
}
5. Stopwatch Implementation
startStopwatch(stopwatchDisplay: HTMLElement, startStopwatchBtn: HTMLButtonElement, stopStopwatchBtn: HTMLButtonElement, resetStopwatchBtn: HTMLButtonElement) {
throw new Error("Method not implemented.");
}
stopStopwatch(startStopwatchBtn: HTMLButtonElement, stopStopwatchBtn: HTMLButtonElement) {
throw new Error("Method not implemented.");
}
resetStopwatch(stopwatchDisplay: HTMLElement, resetStopwatchBtn: HTMLButtonElement) {
throw new Error("Method not implemented.");
}
6. Theming and UI
private switchTheme(theme: string): void {
document.body.className = theme;
}
7. Destroying Component
public destroy(): void {
if (this.intervalId) {
clearInterval(this.intervalId);
}
if (this.stopwatchInterval) {
clearInterval(this.stopwatchInterval);
}
}
OutPut:
Summary
This document outlines the complete implementation of the Analog Watch Control, detailing its structure, features, and core functions.
Comments
Post a Comment