Time Clock PCF Control

 

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.