Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Scan Button

Siticone Scan Button

The SiticoneScanButton is a highly customizable, animated control designed for modern, sci-fi, or security-focused user interfaces. It features complex visual layers including rotating blades, radar sweeps, pulsing glows, and data grid effects. It extends the standard visual component provider, making it ideal for "Start Scan", "Connect", or "Authenticate" actions where visual feedback is paramount.

Core Behavior & Animation

Properties controlling the primary scanning logic and outer ring animation states.

Property Type Description & Usage Example
Value int scanner.Value = 45; The current progress of the scan (0 to 100). Changing this triggers the ValueChanged event. Setting it to 100 automatically calls StopScan().
AutoAnimateOnLoad bool scanner.AutoAnimateOnLoad = true; If true, the outer ring rotation animation starts immediately when the control is loaded.
AnimationSpeed int scanner.AnimationSpeed = 30; The interval (in milliseconds) for the outer ring's rotation timer. Lower values result in faster rotation. Default is 40.
GradientAnimationSpeed float scanner.GradientAnimationSpeed = 0.05f; Controls the speed of the color transition when BladeStyle is set to AnimatedGradient. Higher values are faster. Default is 0.02f.
IsAnimating bool if (scanner.IsAnimating) { ... } Read-only. Returns true if the outer ring rotation timer is currently active.
IsScanning bool if (scanner.IsScanning) { ... } Read-only. Returns true if a scan operation (Radar/Pulse/Grid effects) is currently active.

Outer Ring & Blades

Configuration for the rotating outer ring, allowing for rainbow effects, gradients, or solid security colors.

Property Type Description & Usage Example
BladeStyle BladeAnimationStyle scanner.BladeStyle = BladeAnimationStyle.Rainbow; Determines how the blades are colored (Rainbow, AnimatedGradient, or SolidColor).
NumberOfBlades int scanner.NumberOfBlades = 12; The number of individual segments (blades) in the rotating outer ring.
OuterRingWidth int scanner.OuterRingWidth = 15; The thickness of the rotating outer ring.
BladeGap float scanner.BladeGap = 2.5f; The empty space (gap) in degrees between each blade.
BladeColors Color[] scanner.BladeColors = new[] { Color.Cyan, Color.Magenta }; Used when BladeStyle is Rainbow. Cycles linearly through these colors across the blades.
BladeGradientColors Color[] scanner.BladeGradientColors = new[] { Color.Red, Color.Orange }; Used when BladeStyle is AnimatedGradient. Creates a smooth shifting gradient between these colors.
BladeSolidColor Color scanner.BladeSolidColor = Color.DodgerBlue; Used when BladeStyle is SolidColor. Paints all blades with this single color.

Center Button & Bevel

Properties controlling the appearance of the static center button and the bevel ring separating it from the blades.

Property Type Description & Usage Example
InnerBevelWidth int scanner.InnerBevelWidth = 4; The width of the glowing ring (bevel) between the outer rotating blades and the center button.
BevelColor Color scanner.BevelColor = Color.White; The color of the inner bevel ring.
CenterButtonColor1 Color scanner.CenterButtonColor1 = Color.Black; The outer gradient color of the center button background.
CenterButtonColor2 Color scanner.CenterButtonColor2 = Color.FromArgb(20, 30, 60); The inner gradient color of the center button background.

Scan Effects

Advanced visual layers that activate when StartScan() is called.

Property Type Description & Usage Example
RadarSweepColor Color scanner.RadarSweepColor = Color.FromArgb(100, Color.Green); The color of the rotating radar pie slice effect (60-degree sweep).
PulseGlowColor Color scanner.PulseGlowColor = Color.Blue; The color of the pulsating center glow that fades in and out.
ShowGridEffect bool scanner.ShowGridEffect = true; Draws a sci-fi data grid overlay on the center button during scanning.
GridLineCount int scanner.GridLineCount = 10; Defines the number of vertical and horizontal lines drawn if ShowGridEffect is true.
ShowScanLineEffect bool scanner.ShowScanLineEffect = true; Animates a horizontal line moving up and down the center area.
ShowConcentricCirclesEffect bool scanner.ShowConcentricCirclesEffect = true; Emits expanding circular ripples from the center.
ConcentricCircleSpeed float scanner.ConcentricCircleSpeed = 1.5f; Controls how fast the concentric circles expand outwards.

Text & Glow

Property Type Description & Usage Example
TextGlow bool scanner.TextGlow = true; Enables a soft neon glow behind the text (e.g., "SCAN" or "55%").
TextGlowColor Color scanner.TextGlowColor = Color.Cyan; The color of the text glow.
TextGlowIntensity int scanner.TextGlowIntensity = 4; The thickness/blur radius of the text glow pen.

Public Methods

StartScan()
// Initiates the scanning process.
// 1. Sets IsScanning to true.
// 2. Resets Value to 0.
// 3. Starts the effects timer (Radar, Grid, ScanLine).
// 4. Fires the ScanStarted event.
public void BeginAuthentication()
{
    siticoneScanButton1.StartScan();
}
StopScan()
// Stops the current scan operation.
// 1. Sets IsScanning to false.
// 2. Stops the effects timer.
// 3. Fires the ScanCompleted event.
siticoneScanButton1.StopScan();
StartAnimation() & StopAnimation()
// Controls the idle rotation of the outer ring.
// StartAnimation: Begins rotation and fires AnimationStarted.
siticoneScanButton1.StartAnimation();

// StopAnimation: Halts rotation and fires AnimationStopped.
siticoneScanButton1.StopAnimation();
ApplyTheme()
// Applies a predefined visual theme to the control.
// This automatically configures colors, blade styles, and effects.
// Fires the ThemeApplied event.
siticoneScanButton1.CurrentTheme = SiticoneScanButtonThemePreset.CyberpunkNeon;

Events

Event Wiring
// 1. ValueChanged
// Fires whenever the 'Value' property changes (0-100).
scanner.ValueChanged += (s, e) => 
{
    lblStatus.Text = $"Scanning... {e.NewValue}%";
                // e.OldValue and e.NewValue are available in ScanValueChangedEventArgs
};

// 2. ScanStarted / ScanCompleted
// Fires when scan state changes.
scanner.ScanStarted += (s, e) => PlaySound("scan_start.wav");
scanner.ScanCompleted += (s, e) => UnlockInterface();

// 3. AnimationStarted / AnimationStopped
// Fires when the outer ring rotation is toggled.
scanner.AnimationStarted += (s, e) => Debug.WriteLine("Ring rotating");

// 4. ThemeApplied
// Fires after a theme preset has been loaded.
scanner.ThemeApplied += (s, e) => 
{
                Debug.WriteLine($"Applied Theme: {e.AppliedTheme}");
};

// 5. SettingsCopied / SettingsPasted
// Fires when settings are transferred via the Smart Tag designer context.
scanner.SettingsPasted += (s, e) => MessageBox.Show("Style updated!");

Designer & Smart Tags

The SiticoneScanButton includes a powerful custom designer action list for rapid prototyping.

Category Actions
Live Actions Start/Stop Animation: Toggles the rotation in the Visual Studio designer to preview the speed.
Start/Stop Scan: Toggles the internal effects (radar, grid) to preview colors.
Utilities Copy Settings: Copies all visual properties (Colors, Blades, Effects) to an internal dictionary.
Paste Settings: Applies copied settings to another ScanButton.
Reset to Default: Reverts the control to the 'Default' theme.
Configuration Direct access to Theme Preset, Blade Style, Outer Ring Width, Bevel Colors, Glow Effects, and Grid Settings directly from the Smart Tag menu.

Enumerations

SiticoneScanButtonThemePreset
public enum SiticoneScanButtonThemePreset
{
    Default, CyberpunkNeon, OceanicDepth, SolarFlare, EmeraldGlow, AmethystCrystal,
    RubyRed, SapphireBlue, GoldenTreasure, SilverLining, BronzeAge, ArcticIce,
    DesertMirage, JungleCamo, VolcanicAsh, NebulaGas, BlackHole, Starlight,
    ForestSpirit, CoralReef, PoisonDart, ElectricEel, PeacockFeathers, SunsetGlow,
    MidnightSky, DawnBreaker, BloodMoon, HarvestGold, WinterFrost, SpringBlossom,
    AutumnLeaves, SummerHeat, IndustrialGray
}
BladeAnimationStyle
public enum BladeAnimationStyle
{
                // Cycles linearly through the BladeColors array across the blades.
    Rainbow,
    
                // Smoothly transitions the entire ring between BladeGradientColors.
    AnimatedGradient,
    
                // Uses a single BladeSolidColor for all blades.
    SolidColor
}

Detailed Usage Examples

Example 1: Biometric Authentication Simulation

This example simulates a fingerprint scanner. It uses a Timer to increment the scan progress and updates the visual state.

C# - Fingerprint Scan
Timer _scanProgressTimer;

public void SetupBioScanner()
{
                // Configure for a green, "valid" look
    bioScanner.CurrentTheme = SiticoneScanButtonThemePreset.EmeraldGlow;
    bioScanner.TextGlow = true;
    bioScanner.Value = 0;

                // Setup a timer to simulate data processing
    _scanProgressTimer = new Timer();
    _scanProgressTimer.Interval = 50; // Update speed
    _scanProgressTimer.Tick += (s, e) => 
    {
                if (bioScanner.Value < 100)
        {
                // Increment progress
            bioScanner.Value += 2;
        }
                else
        {
            _scanProgressTimer.Stop();
                // Scan finished - ScanCompleted event handles the rest
        }
    };

                // Hook up events
    bioScanner.ScanStarted += (s, e) => _scanProgressTimer.Start();
    bioScanner.ScanCompleted += (s, e) => MessageBox.Show("Identity Verified");
}

Example 2: Custom "Warning" Style

Demonstrates how to manually configure the blades and effects to create a custom "Danger/Warning" style without using a preset.

C# - Custom Warning Style
private void StyleAsWarning(SiticoneScanButton btn)
{
                // 1. Blade Configuration
    btn.BladeStyle = BladeAnimationStyle.Rainbow;
    btn.BladeColors = new[] { Color.Yellow, Color.Black, Color.Yellow };
    btn.NumberOfBlades = 6;
    btn.BladeGap = 10f;
    btn.AnimationSpeed = 10; // Fast rotation

                // 2. Center Appearance
    btn.CenterButtonColor1 = Color.FromArgb(40, 40, 0);
    btn.CenterButtonColor2 = Color.Black;
    btn.BevelColor = Color.Gold;
    btn.InnerBevelWidth = 6;

                // 3. Effects
    btn.RadarSweepColor = Color.OrangeRed;
    btn.ShowGridEffect = true;
    btn.GridLineCount = 15;
    btn.ShowScanLineEffect = true;
    btn.TextGlowColor = Color.Red;
    btn.TextGlowIntensity = 8;
}

Layout & Resizing

Property Type Description & Usage Example
FixedSize Size? scanner.FixedSize = new Size(200, 200); Optional. If set, the drawing surface is constrained to this size and centered within the control's bounds. Useful for maintaining a perfect circle aspect ratio in a responsive layout.
ControlMargin int scanner.ControlMargin = 5; The padding between the control edges and the drawing surface.