Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drone Flight Planner Map Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Catch a bad mission before the drone leaves the ground, with this drone flight planner map for Solid with Ark 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.

How does it look on a phone?

The three figures stay in one row, the map follows at a fixed height and the table drops the leg column so the waypoint and its height field fit. The checklist keeps a two-line slot per check so it never jumps.