Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Spectrum Gauge

Siticone Spectrum Gauge

The SiticoneSpectrumGauge is a vibrant, high-fidelity radial gauge designed for performance metrics. It features a radiant scale, fluid needle animation, segmented outer rings, and a glowing pulse effect, making it perfect for speedometers, RPM counters, or system load monitors.

Appearance & Theme

Properties to control the visual style, colors, and effects of the gauge.

PropertyTypeDescription & Usage
ColorTheme Enum gauge.ColorTheme = SpectrumColorTheme.Cyan;
Sets a predefined color palette (e.g., Magenta, Cyan, NeonGreen, LavaOrange). Changing this automatically updates primary, secondary, and needle colors.
PrimarySpectrumColor Color The main color used for the active scale sections and outer segments.
SecondarySpectrumColor Color The secondary color, often used for background tracks or inner rings.
SpectrumBackgroundColor Color The overall background color of the circular gauge face.
NeedleType Enum gauge.NeedleType = SpectrumNeedleType.Blade;
Defines the needle shape. Options: Classic, Modern, Sharp, Glow, Blade.
NeedleSpectrumColor Color The color of the indicator needle.
NeedleLength int Percentage (50-95) determining how long the needle is relative to the radius.
NeedleWidth int Thickness of the needle in pixels.
GlowIntensity float gauge.GlowIntensity = 1.5f;
Controls the strength of the glow effect. Range 0.1 to 3.0.
EnableGlowPulse bool gauge.EnableGlowPulse = true;
If true, the gauge emits a rhythmic breathing glow animation.
ShowCenterHub bool Toggles the visibility of the central cap where the needle originates.
CenterHubSize int Diameter of the central hub in pixels.
CenterHubColor Color Color of the central hub.
ShowOuterRing bool Toggles the thin decorative ring around the gauge circumference.
ShowOuterSegments bool Displays the segmented blocks outside the main scale.
OuterSegmentCount int Number of segments in the outer ring.

Scale & Ticks

Configure the layout of the measuring scale, ticks, and numbers.

PropertyTypeDescription & Usage
ScaleStartAngle int The angle in degrees where the scale begins (default 135).
ScaleSweepAngle int The total arc length of the scale in degrees (default 270).
MajorTickDivisions int Number of major intervals on the scale.
MinorTicksPerMajor int Number of small ticks between major ticks.
MajorTickLength float Length of major tick marks.
MinorTickLength float Length of minor tick marks.
TickStrokeWidth int Thickness of tick marks.
ShowScaleNumbers bool Toggles the display of numeric values along the scale.
ScaleNumberColor Color Color of the numeric labels on the scale.
TickMarkColor Color Color of the tick marks.
ScaleNumberFont Font Font used for drawing the scale numbers.

Data & Digital Display

Properties for setting speed/values and formatting the central digital readout.

PropertyTypeDescription & Usage
SpeedValue float gauge.SpeedValue = 120;
The current value indicated by the needle. Changing this triggers animation if enabled.
MinimumSpeed float The lowest value on the scale (start point).
MaximumSpeed float The highest value on the scale (end point).
EnableFluidMotion bool gauge.EnableFluidMotion = true;
When true, the needle interpolates smoothly to the new value instead of jumping instantly.
MotionSpeed int The speed of the needle animation (1-100). Higher is faster.
ShowDigitalValue bool Displays the numeric value in the center of the gauge.
SpeedValueFormat string Standard .NET format string for the value (e.g., "0", "0.00").
DecimalPlaces int Number of decimal digits to show in the digital readout.
SpeedUnitText string gauge.SpeedUnitText = "KM/H";
Text suffix shown below the value.
GaugeTitle string Optional title text displayed at the top of the gauge.
ShowDataDisplays bool Enables the secondary data fields at the bottom.
DataDisplay1 / 2 string Secondary text fields shown at the bottom of the gauge (e.g., "01:249", "POWER").

Public Methods

Programmatic control over the gauge state.

SetSpeedValue(float, bool)
// Updates the speed value.
// animate: If true, needle moves smoothly. If false, it jumps instantly.
public void SetSpeedValue(float speed, bool animate)
{
    siticoneSpectrumGauge1.SetSpeedValue(80, true);
}
AddSpeedValue(float, bool)
// Increments the current speed by a delta amount.
public void AddSpeedValue(float speed, bool animate = true)
{
                // Accelerate by 5
    siticoneSpectrumGauge1.AddSpeedValue(5);
}
Reset(bool)
// Resets the gauge needle to the MinimumSpeed.
public void Reset(bool animate = true)
{
    siticoneSpectrumGauge1.Reset();
}

Events

Monitoring Changes
// 1. SpeedValueChanged
// Fired immediately when the target property changes (before animation finishes).
gauge.SpeedValueChanged += (s, e) => 
{
                Console.WriteLine($"Target changed from {e.OldSpeed} to {e.NewSpeed}");
};

// 2. AnimationCompleted
// Fired when the needle physically stops moving after reaching the target.
gauge.AnimationCompleted += (s, e) =>
{
                Console.WriteLine("Needle has settled.");
};

Comprehensive Examples

1. EV Speedometer Configuration

Setup for a modern electric vehicle dashboard.

C# - EV Dashboard
private void SetupDashboard()
{
                // Configure for electric vehicle speedometer
    spectrumGauge1.ColorTheme = SpectrumColorTheme.Cyan;
    spectrumGauge1.NeedleType = SpectrumNeedleType.Glow;
    
                // Data Range
    spectrumGauge1.MinimumSpeed = 0;
    spectrumGauge1.MaximumSpeed = 240;
    spectrumGauge1.SpeedUnitText = "KM/H";
    spectrumGauge1.GaugeTitle = "MAIN ENGINE";
    
                // Smooth animation
    spectrumGauge1.EnableFluidMotion = true;
    spectrumGauge1.MotionSpeed = 20;
    
                // Add dynamic glow
    spectrumGauge1.EnableGlowPulse = true;
    spectrumGauge1.GlowIntensity = 1.5f;
    
                // Set initial data displays
    spectrumGauge1.ShowDataDisplays = true;
    spectrumGauge1.DataDisplay1 = "SPORT";
    spectrumGauge1.DataDisplay2 = "98%";
}

private void UpdateSpeed(float currentSpeed)
{
                // The gauge handles the smoothing automatically
    spectrumGauge1.SpeedValue = currentSpeed;
}

2. RPM Gauge with Warning

Configuration for a tachometer with warning indicators.

C# - Tachometer
public void SetupTachometer()
{
    spectrumGauge1.ColorTheme = SpectrumColorTheme.Red;
    spectrumGauge1.MaximumSpeed = 8000;
    spectrumGauge1.GaugeTitle = "RPM x1000";
    spectrumGauge1.SpeedUnitText = "";
    spectrumGauge1.SpeedValueFormat = "0";
    
                // Aggressive needle
    spectrumGauge1.NeedleType = SpectrumNeedleType.Blade;
}

Designer Presets

Access these themes via the smart tag menu to instantly style the gauge.

  • MagentaSpectrumTheme: Deep purple background with pink/magenta highlights.
  • ElectricCyanTheme: High-contrast cyan on black, perfect for EV dashboards.
  • RoyalPurpleTheme: Elegant royal purple theme.
  • SkyBlueTheme: Professional aviation blue.
  • NeonGreenTheme: Matrix-style neon green.
  • LavaOrangeTheme: Intense orange/red gradient for thermal or engine monitoring.
  • BloodRedTheme: Critical warning red theme.
  • MinimalSpectrumTheme: Light background, subtle colors, no glow effects.