Siticone Logo
Siticone UI
DOCS
v2025.12.15
Review Videos Contact Pricing
Docs Gauge Clock

Siticone Gauge Clock

The SiticoneGaugeClock is a versatile analog-style gauge control. Unlike a simple clock, it is designed to visualize data values (e.g. 0-100) using a clock-face metaphor. It features physics-based needle animation, extensive 3D rim effects, color-coded sections, and customizable knobs.

3D & Visual Effects

Extensive support for 3D rendering, lighting, and textures to create realistic instrument clusters.

PropertyTypeDescription
Use3DEffectboolEnables bevels, shadows, and metallic rims.
RimThicknessfloatThickness of the outer 3D rim.
UseMetallicEffectboolAdds a metallic gradient sheen to the rim.
MetalBaseColorColorBase color for the metallic effect.
BevelDepthintDepth of the inner edge bevel (0-10).
UseGlassEffectboolAdds a reflective glass layer over the face.
GlossinessfloatIntensity of the glass reflection (0.0 - 1.0).
UseShadowEffectboolAdds a drop shadow behind the gauge.
ShadowColorColorColor of the shadow.
UseNeonEffectboolAdds a neon glow to the gauge arc.
NeonColorColorColor of the neon effect.

Needle & Knob

Configuration for the indicator hand and central cap.

PropertyTypeDescription
ValuefloatCurrent value. Triggers physics animation when changed.
UseValueHandboolShows/Hides the needle.
HandColorColorColor of the needle.
HandLengthfloatPercentage (0.1 - 1.0) of radius.
HandThicknessfloatWidth of the needle in pixels.
UseHandShadowboolDraws a shadow under the needle for depth.
KnobSizefloatDiameter of the central knob.
KnobColorColorColor of the knob.
UseKnobGradientboolApplies a 3D gradient to the knob.

Public Methods

Methods
// Section Management
var redSection = new GaugeSection(80, 100, Color.Red);
clockGauge.AddSection(redSection);
clockGauge.RemoveSection(redSection);
clockGauge.ClearSections();
// Animation Control
clockGauge.AnimateToValue(75); // Smooth transition
clockGauge.ResetValue();       // Instant reset to MinValue

// Export Data
clockGauge.ForceRedraw();
// Manually trigger repaint

Image & JSON Export

The control includes a built-in Context Menu (Right-Click at runtime) that allows users to:

  • Save the gauge visualization as PNG/JPG/BMP.
  • Copy the high-res image to clipboard.
  • Export settings via JSON (with optional AES encryption).
  • Import settings from JSON files.

Example: Pressure Gauge

C# Setup
public void InitPressureGauge()
{
    gauge.MinValue = 0;
    gauge.MaxValue = 100;
    
                // 3D Styling
    gauge.Use3DEffect = true;
    gauge.UseMetallicEffect = true;
    gauge.UseGlassEffect = true;
    gauge.DialColor = Color.WhiteSmoke;
    gauge.RimHighlightColor = Color.Silver;
                // Needle Physics
    gauge.AnimationSpeed = 5f;
                // Spring physics
    
                // Add Warning Zones
    gauge.AddSection(new GaugeSection(0, 60, Color.Green));
    gauge.AddSection(new GaugeSection(60, 85, Color.Orange));
    gauge.AddSection(new GaugeSection(85, 100, Color.Red));
                // Gradient Arc
    gauge.UseGradient = true;
    gauge.GaugeStartColor = Color.Green;
    gauge.GaugeEndColor = Color.Red;
}