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.
| Property | Type | Description & 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.
| Property | Type | Description & 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.
| Property | Type | Description |
|---|---|---|
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.
| Property | Type | Description |
|---|---|---|
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.
| Property | Type | Description |
|---|---|---|
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.
// 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);
}
// 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);
}
// Instantly resets all bars to MinimumValue.
public void ClearAllValues()
{
meter.ClearAllValues();
}
// 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.
// 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.
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.
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.