radar_screen_react
Advanced tools
A React radar screen component for visualizing grid-based data with highlighting capabilities.
Class_Radar_Screen is a powerful React component that creates an interactive radar-like visualization. It displays a customizable grid system with radial sections and concentric circles, supporting dynamic highlighting, rotation, and distance calculations. Perfect for visualizing spatial data, sensor readings, or any grid-based information.
The component features a dual rotation system for precise control:
(rotation_steps × π) / sectionsExample with 8 sections:
rotation_steps = 0 → Default position (0°)rotation_steps = 1 → Shift by 1 section (45°)rotation_steps = 2 → Shift by 2 sections (90°)// Start with East pointing up, then rotate continuously
<Class_Radar_Screen
sections={8}
rotation_steps={2} // Initial 90° offset (East up)
rotation={currentAngle} // Continuous rotation
highlighted_points={data}
draw_pointer={true}
/>
Open the included demo file in your browser to see the component in action:
# Simply open this file in any browser
open demo.html
# or double-click the file in your file manager
# Install dependencies
npm install
# Start development server
npm start
# Or run the example specifically
npm run example
npm run build
npm install radar_screen_react
Available on GitHub: https://github.com/HefnySco/radar_screen_react
# Clone directly from GitHub
git clone https://github.com/HefnySco/radar_screen_react.git
cd radar_screen_react
npm install
import React from 'react';
import { Class_Radar_Screen } from 'radar_screen_react';
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}
/>
);
};
import React, { useState } from 'react';
import { Class_Radar_Screen } from 'radar_screen_react';
const SensorDashboard = () => {
const [sensorData, setSensorData] = useState([
[1, 3, '#ff6b6b'], // North sector - high alert
[4, 2, '#4ecdc4'], // East sector - normal
[7, 4, '#feca57'] // West sector - warning
]);
const addSensorReading = (section, depth, severity) => {
const colors = {
low: '#2ecc71',
medium: '#f39c12',
high: '#e74c3c'
};
setSensorData(prev => [...prev, [section, depth, colors[severity]]]);
};
return (
<div className="container">
<h4>Radar Sensor Dashboard</h4>
<div className="row">
<div className="col-md-8">
<div style={{ backgroundColor: '#1a1a1a', padding: '2rem' }}>
<Class_Radar_Screen
sections={8}
depth={5}
rotation_steps={0}
rotation={0}
highlighted_points={sensorData}
draw_pointer={true}
/>
</div>
</div>
<div className="col-md-4">
<div className="card">
<div className="card-header">
<h5>Sensor Controls</h5>
</div>
<div className="card-body">
<button
className="btn btn-sm btn-primary mb-2"
onClick={() => addSensorReading(2, 3, 'low')}
>
Add Low Alert
</button>
<button
className="btn btn-sm btn-warning mb-2"
onClick={() => addSensorReading(5, 2, 'medium')}
>
Add Medium Alert
</button>
<button
className="btn btn-sm btn-danger mb-2"
onClick={() => addSensorReading(8, 4, 'high')}
>
Add High Alert
</button>
<button
className="btn btn-sm btn-outline-secondary"
onClick={() => setSensorData([])}
>
Clear All
</button>
</div>
</div>
</div>
</div>
</div>
);
};
const AdvancedRadar = () => {
const [rotation, setRotation] = useState(0);
const [highlights, setHighlights] = useState([]);
// Rotate radar continuously
useEffect(() => {
const interval = setInterval(() => {
setRotation(prev => (prev + Math.PI / 180) % (Math.PI * 2));
}, 50);
return () => clearInterval(interval);
}, []);
return (
<Class_Radar_Screen
sections={12}
depth={6}
rotation_steps={3}
rotation={rotation}
highlighted_points={highlights}
draw_pointer={true}
/>
);
};
| Prop Name | Type | Default | Required | Description |
|---|---|---|---|---|
sections | number | 8 | No | Number of radial sections (rays) |
depth | number | 4 | No | Number of concentric circles |
rotation_steps | number | 0 | No | Initial grid offset in section steps (0-sections) |
rotation | number | 0 | No | Continuous rotation in radians |
highlighted_points | array | [] | No | Array of [section, depth, color] points |
draw_pointer | boolean | false | No | Draw north arrow pointer |
rotation_steps (Initial Offset)(rotation_steps × π) / sectionsrotation_steps={2} on 8 sections = 90° offsetrotation (Continuous)rotation={Math.PI / 4} = 45° continuous rotationconst highlighted_points = [
[section, depth, color], // Format: [section_number, depth_level, hex_color]
[3, 2, '#ff0000'], // Section 3, Depth 2, Red color
[5, 4, '#00ff00'] // Section 5, Depth 4, Green color
];
<div style={{
backgroundColor: '#1a1a1a', // Dark radar background
padding: '2rem', // Internal padding
borderRadius: '0.5rem', // Rounded corners
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' // Subtle shadow
}}>
<Class_Radar_Screen {...props} />
</div>
The component uses a 400x400 canvas with responsive scaling:
// The canvas automatically scales to fit its container
// while maintaining aspect ratio
<div style={{ width: '100%', maxWidth: '500px' }}>
<Class_Radar_Screen {...props} />
</div>
The component efficiently handles updates through React's lifecycle methods:
npm run build # Build component for distribution
npm run start # Start React development server
npm run example # Run the example application
npm run dev # Development mode with hot reload
radar_screen_react/
├── src/
│ └── jsc_mctrl_radar_screen.jsx # Component implementation
├── example.js # React example application
├── demo.html # Static HTML demo
├── package.json # Dependencies and scripts
└── README.md # This file
Perfect for displaying sensor data from IoT devices, radar systems, or spatial monitoring.
Create mini-maps, radar displays, or spatial indicators for games and simulations.
Visualize multi-dimensional data in a radial format for easy pattern recognition.
Display directional information, proximity alerts, or spatial relationships.
Create intuitive control interfaces for industrial or aerospace applications.
Q: Radar not displaying highlights
A: Ensure the highlighted_points array follows the format [section, depth, color] and that section/depth values are within the configured ranges.
Q: Canvas appears blank A: Check that the component has sufficient container dimensions. The canvas needs at least 100px width/height to render properly.
Q: Performance issues with frequent updates
A: The component only redraws when sections or depth props change. Highlighting updates are optimized to avoid full redraws.
Q: Rotation not working as expected A: Remember the dual rotation system:
rotation_steps = Initial grid offset (discrete steps)rotation = Continuous rotation (radians)rotation_steps={2} for 90° offset + rotation={Math.PI/4} for additional 45°Q: Highlights not rotating with radar A: This is the correct behavior! Highlights rotate WITH the grid automatically. The component uses the same rotation calculation for both grid and highlights.
Q: rotation_steps vs rotation - which to use?
A: Use rotation_steps for:
Use rotation for:
demo.html file for visual examples with interactive controlsexample.js file for React implementation with rotation controlsMIT License - see LICENSE file for details.
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)const RealTimeRadar = () => {
const [data, setData] = useState([]);
useEffect(() => {
const interval = setInterval(() => {
// Simulate real-time data
const newDataPoint = [
Math.floor(Math.random() * 8) + 1,
Math.floor(Math.random() * 4) + 1,
`#${Math.floor(Math.random()*16777215).toString(16)}`
];
setData(prev => [...prev.slice(-9), newDataPoint]);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<Class_Radar_Screen
sections={8}
depth={4}
highlighted_points={data}
draw_pointer={true}
/>
);
};
const InteractiveRadar = () => {
const [highlights, setHighlights] = useState([]);
const handleCanvasClick = (event) => {
// Calculate clicked section and depth
const rect = event.target.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// Convert to radar coordinates (implementation depends on requirements)
const section = Math.floor(Math.random() * 8) + 1;
const depth = Math.floor(Math.random() * 4) + 1;
setHighlights(prev => [...prev, [section, depth, '#ff0000']]);
};
return (
<div onClick={handleCanvasClick}>
<Class_Radar_Screen
sections={8}
depth={4}
highlighted_points={highlights}
draw_pointer={true}
/>
</div>
);
};
Transform your data visualization with the powerful and flexible Radar Screen component! 🎯
FAQs
A React radar screen component for visualizing grid-based data with highlighting capabilities.
The npm package radar_screen_react receives a total of 3 weekly downloads. As such, radar_screen_react popularity was classified as not popular.
We found that radar_screen_react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.