Radar Screen Component Demo

A React radar screen component that displays a grid-based radar visualization with customizable highlighting capabilities.

Note: This is a static HTML demo that simulates the radar component. The actual React component (Class_Radar_Screen) is available in the source code and provides the same functionality with proper rotation behavior.

Radar Screen Visualization

Interactive radar display with 8 sections and 4 depth levels

Highlighted Points

Active Highlights:

Section 3, Depth 2

Section 5, Depth 4

Rotation Controls

Rotation Angle: 0°

Rotation Steps: 0

Radar Properties

Sections: 8 rays

Depth: 4 circles

Rotation: 0°

Pointer: Enabled

Component Features

Grid System

🎯

Configurable sections and depth levels

Highlighting

🎨

Dynamic point highlighting with custom colors

Rotation

🔄

Adjustable rotation and orientation

Distance Display

📏

Automatic distance calculation and display

Usage Code

import { Class_Radar_Screen } from './jsc_mctrl_radar_screen';

const MyComponent = () => {
    const highlightedPoints = [
        [3, 2, '#ff0000'],  // section 3, depth 2, red
        [5, 4, '#00ff00']   // section 5, depth 4, green
    ];

    return (
        <Class_Radar_Screen 
            sections={8}
            depth={4}
            rotation_steps={0}
            rotation={0}
            highlighted_points={highlightedPoints}
            draw_pointer={true}
        />
    );
};

Props Reference

Prop	Type	Default	Description
`sections`	number	8	Number of radial sections (rays)
`depth`	number	4	Number of concentric circles
`rotation_steps`	number	0	Rotation steps between rays
`rotation`	number	0	Free rotation in radians
`highlighted_points`	array	[]	Array of [section, depth, color] points
`draw_pointer`	boolean	false	Draw north arrow pointer