ROSFlow NodeWeaver: Node based editor for robotics/ROS workflows. React based Node editor app using reactflow.
git clone https://github.com/yojuna/ros_flow.git
cd ros_flow
Install dependencies via npm and start the local dev server.
npm install
npm run dev
Goto http://localhost:5173/ for live dev version. Iterate and see updated changes in the browser.
Setup Conda environment with NodeJs and cd to app directory
conda create -n ros_flow nodejs
conda activate ros_flow
cd ~/code/repos/ros_flow/ros_flow_app
Create vite react app template for reactflow
npm create vite@latest ros_flow -- --template react
npm install reactflow
ref: ReactFlow docs: Installation/setup
Now, keep adding the required ReactFlow components and plugins as needed.
Currently, started with:
- vite react template for the app
- text box custom node
- ref: custom node example
- Background, Controls, and Minimap
- Figma like viewport controls
- ref: viewport examples
- code split into components and config files
- App rendered in
src/main.jsx
; App entrypoint defined insrc/App.jsx
Looks something like this: