Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Circuit Gauge

Siticone Circuit Gauge

The SiticoneCircuitGauge is a high-tech, futuristic radial gauge inspired by sci-fi interfaces and modern dashboards. It features segmented rings, pulsating glow effects, and specialized needle styles like "Beam" and "Plasma", making it perfect for gaming UIs, network monitors, and performance diagnostics.

Values & Range

Properties for managing the gauge's data and limits.

Property Type Description & Usage Example
SpeedValue float circuit.SpeedValue = 120.5f; The current value of the gauge. Changing this triggers a smooth transition animation (unless disabled).
MinimumSpeed float circuit.MinimumSpeed = 0; The lower bound of the measurement scale.
MaximumSpeed float circuit.MaximumSpeed = 240; The upper bound of the measurement scale.
DecimalPlaces int circuit.DecimalPlaces = 1; Number of decimal digits displayed in the digital readout.

Themes & Styling

Apply built-in color schemes or customize individual elements.

Property Type Description & Usage Example
CircuitTheme CircuitThemeEnum circuit.CircuitTheme = CircuitThemeEnum.CyberBlue; Applies a preset color palette. Options: CyberBlue, NeonPink, ElectricGreen, PlasmaOrange, VoidPurple, ArcticWhite, CrimsonRed.
CircuitBackgroundColor Color circuit.CircuitBackgroundColor = Color.Black; Background color of the entire control.
OuterRingColor Color circuit.OuterRingColor = Color.Cyan; Color of the outermost segmented ring.
MiddleRingColor Color circuit.MiddleRingColor = Color.Blue; Color of the middle segmented ring.
InnerRingColor Color circuit.InnerRingColor = Color.DarkBlue; Color of the innermost ring.

Rings & Segments

Configure the futuristic segmented rings that frame the gauge.

Property Type Description & Usage Example
ShowCircuitRings bool circuit.ShowCircuitRings = true; Toggles visibility of the decorative circuit rings.
RingSegmentCount int circuit.RingSegmentCount = 8; Number of segments the rings are divided into.
RingGapSize float circuit.RingGapSize = 15f; Size of the gap (in degrees) between ring segments.

Needle & Hub

Customization for the value indicator.

Property Type Description & Usage Example
NeedleStyle CircuitNeedleStyle circuit.NeedleStyle = CircuitNeedleStyle.Beam; Visual style of the pointer. Options: Classic, Glow, Beam, Sharp, Plasma.
NeedleGlowColor Color circuit.NeedleGlowColor = Color.White; Color used for the needle's glow effect.
ShowNeedle bool circuit.ShowNeedle = true; Toggles visibility of the needle.
ShowCenterHub bool circuit.ShowCenterHub = true; Displays the central pivot point.

Digital Display

Settings for the numeric readout and unit labels.

Property Type Description & Usage Example
ShowDigitalDisplay bool circuit.ShowDigitalDisplay = true; Shows the numeric value in the center or offset circle.
ShowDigitalCircle bool circuit.ShowDigitalCircle = true; Draws a separate circular container for the digital value.
SpeedUnitText string circuit.SpeedUnitText = "RPM"; Label displayed below the numeric value.
GaugeLabel string circuit.GaugeLabel = "ENGINE 1"; Secondary title text for the gauge.

Effects & Animation

Control the futuristic glow and motion smoothing.

Property Type Description & Usage Example
EnableGlowPulse bool circuit.EnableGlowPulse = true; Activates a rhythmic breathing effect on the rings and needle.
GlowIntensity float circuit.GlowIntensity = 1.5f; Strength of the bloom/glow effect.
EnableSmoothAnimation bool circuit.EnableSmoothAnimation = true; Enables interpolated movement for value changes.
AnimationSpeed int circuit.AnimationSpeed = 25; Speed of the needle transition (1-100).
UltraFastPerformance bool circuit.UltraFastPerformance = true; Disables glow and gradients for maximum framerate.

Public Methods

SetSpeedValue(float, bool)
// Sets the value, optionally forcing animation regardless of the global setting.
// Parameters: Value, Animate
circuitGauge1.SetSpeedValue(150, true);
AddSpeedValue(float, bool)
// Adds to the current value. Useful for incremental updates.
circuitGauge1.AddSpeedValue(10, true);
Reset(bool)
// Resets the gauge to the MinimumSpeed value.
circuitGauge1.Reset(true);

Events

Events Wiring
// 1. SpeedValueChanged Event
// Fires whenever the SpeedValue property changes.
circuitGauge1.SpeedValueChanged += (s, e) => 
{
                Console.WriteLine($"New Speed: {e.NewSpeed}");
};

// 2. AnimationCompleted Event
// Fires when the needle finishes its movement to the target value.
circuitGauge1.AnimationCompleted += (s, e) => 
{
                // Logic after animation ends
};

Designer & Smart Tags

The Smart Tag menu offers quick access to themes and layout configurations.

Feature Description
Theme Presets Instantly apply futuristic color schemes:
  • Cyber Blue: Classic sci-fi blue/cyan.
  • Neon Pink: High contrast magenta/purple.
  • Electric Green: Matrix-style green.
  • Plasma Orange: Fiery orange/yellow.
  • Arctic White: Clean, minimal white/blue.
Layout Adjust Circuit Margin directly from the smart tag to control padding.
Settings Management Copy/Paste Settings allows duplicating the complex visual configuration of one gauge to another instantly.

Detailed Usage Examples

Example 1: Cyberpunk Speedometer

Creates a high-speed, glowing gauge suitable for racing games or automotive apps.

C# - Cyberpunk Config
private void SetupCyberGauge()
{
    circuit.CircuitTheme = CircuitThemeEnum.CyberBlue;
    circuit.SpeedUnitText = "KM/H";
    circuit.MaximumSpeed = 300;
    
                // Intense Glow
    circuit.GlowIntensity = 2.0f;
    circuit.EnableGlowPulse = true;
    
                // Needle Style
    circuit.NeedleStyle = CircuitNeedleStyle.Beam;
    circuit.NeedleGlowColor = Color.Cyan;
    
                // Layout
    circuit.ShowDigitalCircle = true;
    circuit.RingSegmentCount = 12;
}

Example 2: Network Traffic Monitor

A data-heavy visualization that disables the needle to focus on the rings and digital readout.

C# - Network Monitor
private void SetupNetworkMonitor()
{
    circuit.CircuitTheme = CircuitThemeEnum.ElectricGreen;
    circuit.SpeedUnitText = "MB/s";
    circuit.MaximumSpeed = 1000;
    
                // Hide needle, emphasize rings
    circuit.ShowNeedle = false;
    circuit.ShowCenterHub = false;
    
                // Digital Display Focus
    circuit.DigitalDisplayFont = new Font("Consolas", 28, FontStyle.Bold);
    circuit.GaugeLabel = "DOWNLOAD";
}

public void UpdateTraffic(float mbps)
{
    circuit.SpeedValue = mbps;
}

Example 3: Sci-Fi Reactor Core

Uses the "Plasma Orange" theme and pulsing effects to simulate a power core.

C# - Reactor Core
private void SetupReactor()
{
    circuit.CircuitTheme = CircuitThemeEnum.PlasmaOrange;
    circuit.GaugeLabel = "CORE TEMP";
    circuit.SpeedUnitText = "°C";
    
                // Plasma Needle
    circuit.NeedleStyle = CircuitNeedleStyle.Plasma;
    
                // Segmented Look
    circuit.RingSegmentCount = 4;
    circuit.RingGapSize = 20;
    
                // High Pulse
    circuit.EnableGlowPulse = true;
}