This is a simple app that allows to visualize the drone assembly by connecting hardware components with one another. The nodes represent the components like flight controller, esc, motors, camera and other. The connections between those nodes represent a way to integrate and connect those components.
The target user audience are hobbyists who want to get into drone hobby and build their own drone, or just to explore the assembly and integration diagrams to learn. A specific vendor might want to define an extension package listing the components they offer for people to use. This should help to build the community and promote their hardware and help explore various possible builds.
The app offers a canvas where users can explore new build by trying to play around with various components and trying to connect them. Whenever the components don't integrate due to incompatible protocols or connectors, the app highlights those warning on the canvas but still leaves the user in control.
Another way to visualize the drone assembly is by writing a simple typescript script. The user creates an empty file, imports the vendors extension packs and starts writing simple code (using the fluent API). The output of this script is a metadata file that can be visualized on the canvas.
TODO: showcase
The following section outlines some main features supported.
Has the abstractions like component, interface, connector, protocol, and others. The component describes a logical component that can perform certain actions. An interface is the API that the component has and exposes. Each component might have one or more interfaces, where each interface has one or more protocols supported. A protocol is just a description and schema of how two components talk to each other. A connector is a definition that the component is able to connect to a certain interface via protocol. A component can have one or more connectors implemented.
- Data model
- Fluent builder
- Converter function from model to reactflow model
An application running in watch mode, monitoring the user defined typescript file. The file should be loaded and executed on changes. The changes are throttled, to not overwhelm the executing app. Given that the script is written properly and can be compiled, it is executed and produces a json metadata file with all required data for rendering the nodes on a canvas.
- Watcher mode to track changes
- Executor to build, convert, and save data as JSON
- Schema validation
The app is reading the json metadata and renders it as a set of nodes and connections. The app also allows to manually edit the nodes and connections, add new ones, and edit their properties. The manually made changes are synchronized to the json metadata file.
- Node-based rendering
- Custom node with ports
- Custom edge with colors
- Real-time updates from from the script
- Manually connect components
- Manually add component type placeholder
- Auto layout for the graph
- Collapse/expand nodes for cleaner view
- Watcher mode to track changes
- Updates via websockets
- Schema validation and serialization
- JSON schema for structured responses
- API to connect to ChatGPT platform
- Streaming JSON data to show results progressively
- Run diagrams preview in web panel
- Watch current document changes
This is a monorepo (created via turborepo) and includes the following packages and apps.
| Component | Technology |
|---|---|
| Core Package | TypeScript, ESM |
| Command Line Tool | Deno, TypeScript |
| Server Watcher API | Deno, TypeScript |
| Fluent Builder UI | React, ReactFlow |
| Visual Studio Code Extension | Visual Studio COde |
@flysonic/cli: a cli tool for executing and saving the build@flysonic/web: a fluent node-based ui builder application@flysonic/api: a server api for watching and serving updates via websockets@flysonic/core: a core package with core types and model builder@flysonic/watcher: a library with shared functions to watch and load user script@flysonic/schema: a shared library with serde schema@flysonic/ui: a shared component library@flysonic/eslint-config: sharedeslintconfigurations@flysonic/typescript-config:tsconfig.jsons used throughout the monorepo
Each package and app is 100% TypeScript.
This Turborepo has some additional tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting