Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Clock (Digital Arc)

Siticone Digital Arc Clock

The SiticoneDigitalArcClock is a hybrid timekeeping control that blends a clear digital display with a graphical progress arc. The arc visualizes the passing of seconds (or minutes in performance mode), creating a "fitness ring" style aesthetic perfect for modern dashboards.

Visual Styling

Customize the arc, colors, and fonts to match your application's theme.

Property Type Description & Usage Example
ArcColor Color clock.ArcColor = Color.DodgerBlue; The color of the sweeping progress bar.
ArcWidth float clock.ArcWidth = 10f; The thickness of the progress arc in pixels.
ArcCapStyle LineCap clock.ArcCapStyle = LineCap.Round; Defines the shape of the arc ends (Round, Flat, Triangle, etc.).
TickColor Color clock.TickColor = Color.LightGray; The color of the background ticks representing minutes.
DigitalTimeColor Color clock.DigitalTimeColor = Color.Black; The text color for the digital time display.

Display & Formatting

Control how time and date are presented in the center of the arc.

Property Type Description & Usage Example
DisplayFormat Enum clock.DisplayFormat = ClockDisplayFormat.Format24Hour; Selects the time format (12h/24h, with or without seconds).
ShowDate bool clock.ShowDate = true; Displays the current date below the time.
DateFormat string clock.DateFormat = "MMM dd, yyyy"; The standard .NET date format string.
ShowTicks bool clock.ShowTicks = false; Hides the background tick marks for a cleaner "ring only" look.

Performance & Effects

Manage visual effects and resource usage.

Property Type Description & Usage Example
EnableGlow bool clock.EnableGlow = true; Adds a neon-like glow effect to the progress arc.
UltraPerformanceMode bool clock.UltraPerformanceMode = true; Disables glow, anti-aliasing, and smooth second-hand animation. Updates the arc once per minute instead of every second/millisecond.

Events

Events triggered by the passage of time.

Event Descriptions & Wiring
// 1. SecondChanged Event
// Fires every second. Useful for updating other UI elements synchronously.
clock.SecondChanged += (s, e) => 
{
    progressBar1.Value = e.NewSecond; 
};

// 2. HourChanged Event
// Fires on the hour mark.
clock.HourChanged += (s, e) => 
{
                CheckScheduledTasks();
};

// 3. TimeChanged Event
// Fires on every visual update tick (approx 20ms).
clock.TimeChanged += (s, e) => 
{
                // e.CurrentTime holds the precise time
};

Detailed Usage Examples

Example 1: Fitness Tracker Style

A vibrant, ring-based design often seen in health apps.

C# - Fitness Style
private void ApplyFitnessTheme()
{
                // Bright, energetic colors
    clock.FaceColor = Color.Black;
    clock.ArcColor = Color.LimeGreen;
    clock.TickColor = Color.FromArgb(40, 40, 40); // Dark gray ticks
    clock.DigitalTimeColor = Color.White;
    
                // Thick arc, no caps
    clock.ArcWidth = 12f;
    clock.ArcCapStyle = LineCap.Flat;
    
                // Date settings
    clock.ShowDate = true;
    clock.DateColor = Color.Gray;
    clock.DateFormat = "ddd, MMM dd";
}

Example 2: Retro Terminal

A monochromatic green-on-black phosphor screen look.

C# - Retro Theme
private void ApplyRetroTheme()
{
                Color phosphorGreen = Color.FromArgb(0, 255, 65);
    
    clock.FaceColor = Color.FromArgb(10, 10, 10);
    clock.DigitalTimeColor = phosphorGreen;
    clock.ArcColor = phosphorGreen;
    clock.TickColor = Color.FromArgb(0, 50, 0);
    
    clock.EnableGlow = true; // Enhances the CRT look
    clock.DigitalTimeFont = new Font("Consolas", 32f, FontStyle.Bold);
    
    clock.DisplayFormat = ClockDisplayFormat.Format24HourWithSeconds;
}

Example 3: Minimalist Timer

A clean, distraction-free look suitable for productivity tools.

C# - Minimalist
private void ApplyMinimalistTheme()
{
    clock.FaceColor = Color.White;
    clock.ArcColor = Color.SlateBlue;
    
                // Hide ticks for a solid ring effect
    clock.ShowTicks = false;
    
    clock.DigitalTimeColor = Color.DarkSlateGray;
    clock.EnableGlow = false; // Flat design
    
    clock.ArcWidth = 4f;
    clock.ClockPadding = 10;
}

Example 4: Shift Change Alert

Using the `HourChanged` event to visually signal a specific time of day.

C# - Event Logic
public void InitializeShiftClock()
{
    clock.HourChanged += CheckShift;
}

private void CheckShift(object sender, SiticoneDigitalArcHourChangedEventArgs e)
{
                // Change arc color based on shift (9 AM to 5 PM)
                if (e.NewHour >= 9 && e.NewHour < 17)
    {
        clock.ArcColor = Color.DodgerBlue; // Work hours
    }
                else
    {
        clock.ArcColor = Color.OrangeRed; // After hours
    }
}

Example 5: Low Power Mode

Dynamically enabling `UltraPerformanceMode` to save resources on laptops/batteries.

C# - Performance
private void ToggleBatterySaver(bool isLowBattery)
{
    clock.UltraPerformanceMode = isLowBattery;
    
                if (isLowBattery)
    {
                // In Ultra mode, the arc updates once per minute
                // and anti-aliasing is disabled to save CPU.
        clock.EnableGlow = false;
    }
                else
    {
                // Restore smooth second-by-second animation
        clock.EnableGlow = true;
    }
}