Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Spectrum Meter

Siticone Spectrum Meter

The SiticoneSpectrumMeter is a versatile, high-performance visualization component designed to display audio data, signal strength, or statistical distributions. It supports multiple rendering modes (Bars, Waves, Dots, Lines, Blocks), physics-based animations (Bounce, Elastic), peak detection, and advanced effects like reflection and glow.

Structure & Configuration

Fundamental properties that define the layout, orientation, and resolution of the meter.

PropertyTypeDescription & Usage
BarCount int meter.BarCount = 32;
The resolution of the spectrum. Defines how many individual bars or points are rendered.
BarSpacing int meter.BarSpacing = 2;
The gap in pixels between adjacent bars.
CornerRadius int meter.CornerRadius = 3;
Rounds the edges of bars. Set to 0 for sharp edges.
VisualizationMode Enum meter.VisualizationMode = SpectrumVisualizationMode.Waves;
Rendering style: Bars, Waves, Dots, Lines, Blocks.
Direction Enum meter.Direction = SpectrumDirection.Horizontal;
The orientation of the meter flow. Vertical bars grow up/down, Horizontal bars grow left/right.
MinimumValue double meter.MinimumValue = 0;
The floor value for the visualization scale.
MaximumValue double meter.MaximumValue = 100;
The ceiling value for the visualization scale.
Sensitivity double meter.Sensitivity = 1.0;
Multiplier for input values. Useful for amplifying weak signals.

Appearance & Colors

Customize the color palette, gradients, and custom color mappings.

PropertyTypeDescription & Usage
ColorMode Enum meter.ColorMode = SpectrumColorMode.Rainbow;
Strategies: Solid, Gradient, Rainbow, Heat, Ice, Neon, Custom.
PrimaryColor Color meter.PrimaryColor = Color.DodgerBlue;
Used in Solid and Gradient modes.
SecondaryColor Color meter.SecondaryColor = Color.Magenta;
The end color for Gradient mode.
BackgroundBarColor Color meter.BackgroundBarColor = Color.FromArgb(30, 30, 35);
The color of the empty "track" behind bars.
CustomColors Color[] meter.CustomColors = new Color[] { Color.Red, Color.Blue };
Array of colors used when ColorMode is set to Custom. The meter interpolates between these.

Animation Physics

Control the motion dynamics, enabling smooth interpolation or physics-based bounce effects.

PropertyTypeDescription
AnimationStyle Enum Smooth: Linear interpolation.
Bounce: Values bounce past target with gravity.
Elastic: Spring-like oscillation.
Wave: Sine-wave oscillation overlay.
Pulse: Rhythmic pulsing animation.
AnimationSpeed double meter.AnimationSpeed = 0.15;
Speed factor (0.01 - 1.0). Controls convergence rate.
Elasticity double meter.Elasticity = 0.8;
Bounciness factor for Elastic/Bounce modes.
Damping double meter.Damping = 0.92;
Friction applied to physics animations.

Peak Detection

Visual indicators that hold the highest recent value, commonly used in audio equipment.

PropertyTypeDescription
EnablePeaks bool Toggles the peak indicators on top of the bars.
PeakStyle Enum Visual style: Dot, Line, Glow, Block.
PeakColor Color Color of the peak indicator.
PeakHoldTime double meter.PeakHoldTime = 500;
Milliseconds to hold the peak before dropping.
PeakDecayRate double meter.PeakDecayRate = 0.98;
Speed at which the peak falls (0.0 - 1.0).

Visual Effects

Advanced rendering enhancements.

PropertyTypeDescription
EnableGlow bool Adds a bloom/glow effect around active bars based on GlowIntensity.
GlowIntensity double Controls brightness of the glow (0.1 to 1.0).
EnableReflection bool Renders a faded mirror reflection below the meter.
ReflectionOpacity double Alpha value for reflection (0.1 to 1.0).
EnableWaveEffect bool Adds a horizontal sine-wave distortion to the bars for a "liquid" look.
WaveSpeed double Speed of the liquid wave animation.
WaveAmplitude double Height of the liquid wave distortion.

Public Methods

APIs for controlling data flow and testing.

SetValue(int, double)
// Updates the value for a specific bar index.
// Useful for manual equalizer controls or specific data points.
public void SetValue(int barIndex, double value)
{
    meter.SetValue(5, 80);
}
SetAllValues(double[])
// Bulk update method. This is the most efficient way to feed audio data.
public void SetAllValues(double[] values)
{
                double[] data = { 10, 45, 90, 30, 55, 100, 20, 10 };
    meter.SetAllValues(data);
}
ClearAllValues()
// Instantly resets all bars to MinimumValue.
public void ClearAllValues()
{
    meter.ClearAllValues();
}
Demo Mode Methods
// Starts an internal timer generating sine-wave data for previewing.
meter.StartDemoMode();

// Stops the demo data generation.
meter.StopDemoMode();

// Sets all bars to random values instantly.
meter.SetRandomValues();

Events

Hooks for custom rendering and logic.

Event Handling Example
// 1. ValueChanged
// Triggered when any bar's target value changes.
meter.ValueChanged += (s, e) => 
{
                Console.WriteLine($"Bar {e.BarIndex} updated to {e.NewValue}");
};

// 2. PeakDetected
// Fired when a new high point is reached. Useful for "clipping" indicators.
meter.PeakDetected += (s, e) =>
{
                if (e.PeakValue > 95) 
    {
        lblStatus.Text = "CLIPPING!";
        lblStatus.ForeColor = Color.Red;
    }
};

// 3. BeforeBarRender (Custom Drawing)
// Allows modifying graphics before the standard bar is drawn.
meter.BeforeBarRender += (s, e) =>
{
                // e.Graphics available here for drawing custom backgrounds
                if (e.BarIndex % 2 == 0)
    {
        e.Graphics.FillRectangle(Brushes.DarkGray, e.BarBounds);
    }
};

// 4. AfterBarRender (Overlays)
// Draw custom text or icons on top of specific bars.
meter.AfterBarRender += (s, e) =>
{
                if (e.Value > 90)
    {
        e.Graphics.DrawString("MAX", SystemFonts.DefaultFont, Brushes.White, e.BarBounds.Location);
    }
};

Complete Usage Examples

1. Audio Visualizer Setup

A typical configuration for a music player visualizer.

C# - Audio Visualization
public void InitializeAudioMeter()
{
    meter.BarCount = 64; // High resolution
    meter.BarSpacing = 1;
    meter.VisualizationMode = SpectrumVisualizationMode.Bars;
    
                // Cyberpunk aesthetic
    meter.ColorMode = SpectrumColorMode.Neon;
    meter.EnableGlow = true;
    meter.GlowIntensity = 0.8;
    meter.BackgroundBarColor = Color.Black;
    
                // Animation settings for snappy response
    meter.AnimationStyle = SpectrumAnimationStyle.Smooth;
    meter.AnimationSpeed = 0.25; // Fast reaction
    
                // Peaks
    meter.EnablePeaks = true;
    meter.PeakStyle = SpectrumPeakStyle.Line;
    meter.PeakColor = Color.White;
    meter.PeakHoldTime = 1000; // Hold peaks for 1 second
}

// Call this from your audio engine (NAudio/Bass.net) callback
public void OnFFTCalculated(float[] fftData)
{
                // Convert float array to double array required by control
                // Ensure fftData length matches or exceeds BarCount if mapped 1:1
                double[] data = new double[meter.BarCount];
    
                for (int i = 0; i < meter.BarCount; i++)
    {
                if (i < fftData.Length)
            data[i] = fftData[i] * 100; // Scale float (0.0-1.0) to meter range (0-100)
    }
    
    meter.SetAllValues(data);
}

2. Custom Color Gradient

Creating a brand-specific gradient meter.

C# - Custom Theme
meter.ColorMode = SpectrumColorMode.Custom;
meter.CustomColors = new Color[] 
{ 
                Color.DarkBlue, 
                Color.Blue, 
                Color.Cyan, 
                Color.White 
};
// Control interpolates between these colors from bottom to top (or left to right)

Designer Presets

Pre-configured themes available via smart tags.

  • AudioVisualizerPreset: 32 bars, rainbow colors, vertical, smooth animation.
  • EqualizerPreset: 10 bars, gradient green-to-red, bounce animation.
  • VuMeterPreset: 20 blocks, heat map colors, horizontal.
  • WaveformPreset: 50 lines, neon colors, wave animation.
  • MinimalPreset: 8 dots, solid blue, no effects.