shadcn.io is not affiliated with official shadcn/ui
Drone Flight Planner Map Block for Radix UI
A drone mission on a drawn plan: five waypoints with height fields, two hatched no-fly zones and a 120 m ceiling, with distance, time and battery and a checklist that fails in words and clears when you fix a number.
Installation
Overview
Catch a bad mission before the drone leaves the ground, with this drone flight planner map for React with Radix UI. Quadwren, a drone mission app, draws a plan with a hairline grid and a 100 m scale bar: five numbered waypoints joined by four legs, two hatched circles that are no-fly zones, each closing the air below a stated height, and a 120 m ceiling. Each waypoint has a height field in a table. Three cells give the distance, the time at 12 m/s and the battery used, and a checklist of four checks fails in words and clears as you fix a number: "Waypoint 4 is 135 m, 15 m over the ceiling", "Leg 3 crosses Zone B at 95 m, below its 100 m top". A failing leg or waypoint is drawn dashed, so the picture and the words agree. A leg crosses a zone when a point sampled along it is inside the circle, and the height there is the blend of its two ends. Simplified, not an engineering model or flight advice. It's built from Number Input, Button and Guides, with a CSS entrance only. For drone operators, surveyors and inspection teams.
FAQ
What does the checker test?
Four things. Every waypoint must be between 10 and 120 m; each no-fly zone must not be entered below its top height (the lowest sampled height inside the circle is compared with it); and the battery used, at a typed rate per kilometre plus one for climbing, must leave a 30 percent reserve. The first problem of each kind is named, with how many more there are.
How do I use my own mission?
Edit WAYPOINTS (a name and a position in the drawing's 480 by 360 units), ZONES (a name, a centre, a radius and a top height), SAMPLE_HEIGHTS, and the constants METRES_PER_UNIT, CEILING, SPEED, PER_KM and RESERVE. The map, table, summary and checklist all read them.
Can I use it without a mouse?
Yes. Each height is a number field with its own steppers; type a number and press Tab or Enter to settle it, since some bases commit on leaving the field. The checklist is a list in words, and a polite message speaks the result once you stop typing.
Can I fly with it?
No. It is a sketch of how a checker can read a plan: the site is invented, the zones are circles and the battery is a typed rate. Real missions need the aviation authority's airspace data, wind, terrain and the aircraft's own limits.
What stays local in the demo, and how do I wire it up?
All of it. Nothing is uploaded to a drone or a planner and no airspace is looked up. In your app load the zones from your airspace provider, check on the server too, and send the mission only when every check passes. Reset sample puts the five heights back.