Sandstar Web Editor
Visual Building Automation Programming
Design, wire, and deploy building automation logic -- right from your browser.
Sandstar Web Editor is a visual programming environment for Sedona Framework. Drag components onto a canvas, wire them together, and deploy to live controllers -- all without leaving SkySpark. It's the modern replacement for desktop-only Sedona tools, bringing the full development workflow into the browser.
Think of it as a visual IDE for building automation: you see your control logic as a flow diagram, make changes with drag-and-drop, and push updates to real hardware in seconds.
Why It Matters
Building automation programming has been stuck in the desktop era. Engineers download thick client tools, manage local project files, and manually transfer compiled code to devices. Sandstar Web Editor moves the entire workflow online -- accessible from any machine, integrated with your SkySpark project, and connected to devices in real time.
Who It's For
- Controls engineers programming Sedona-based building automation systems
- System integrators who need to commission and tune controllers on-site from any laptop
- Facility teams making quick adjustments without installing specialized software
Visual Programming
Drag, Drop, Wire
Design building automation logic the way you think about it -- as a flow diagram. Drag Sedona components from the kit palette onto a full-screen canvas, then wire inputs to outputs with a click. Each node shows its property slots with live values, socket types, and editable badges.
The editor is built on Rete.js 2.0 with a 5100 x 5100 working area, minimap navigation, level-of-detail rendering that simplifies nodes when you zoom out, and snap-to-grid alignment for clean layouts.
- I min 0.0 F
- I max 100.0 F
- out 72.4 F
- F in1 72.4 F
- F in2 1.5 F
- out 73.9 F
- B in true B
- out true B
Workspace
Everything in View
The three-panel layout puts your entire workflow at your fingertips. On the left, the Connection Tree shows every device, app, and component in a navigable hierarchy. Below it, the Kits palette lists every installed Sedona kit with searchable component types you can drag straight onto the canvas.
Select any component and the right-side Property Inspector opens with three tabs: Properties for editing slot values inline, Links showing incoming and outgoing connections, and Slots for the full schema view. Click any editable value badge to change it on the live device instantly.
Live Monitoring
Real-Time Values, Real Hardware
Every slot value on the canvas updates in real time via WebSocket subscription. Connection wires turn solid green when the link is live on the device, so you can see data flowing through your logic at a glance. Cached or offline links render as dashed gray lines.
Change a setpoint in the editor and it takes effect on the controller immediately -- no compile or deploy step needed for simple parameter adjustments. The status bar shows connection health, pending mutations, and subscribed component counts.
- out 72.4 °F F
- out 74.0 F
- F in1 72.4 F
- F in2 74.0 F
- out false B
Build Pipeline
Compile Without Installing Anything
The Sedona compiler runs server-side through SkySpark. Click compile and the editor automatically verifies kit dependencies, uploads any missing kits, posts your application XML to sedonac, and receives the compiled SAB binary -- all in one step.
Deploy the compiled binary straight to the target controller over the same WebSocket connection. No USB cables, no SD cards, no separate file transfer tools. The entire build-deploy cycle happens inside the browser.
Device Management
Connect, Manage, Transfer
The Device Manager shows every controller at a glance -- connection status, installed kits, pending mutations, and last-connected timestamps. Save device credentials for one-click reconnection, or set auto-connect so your controllers are ready when you open the editor.
Drag and drop SAX files onto the editor to import application definitions. Upload and download kit files, manifests, and compiled SAB binaries directly to devices. File transfers use chunked streaming with progress reporting.
Device Manager
Add ConnectionPlatform Integration
Lives Inside SkySpark
No separate URL, no extra login. Sandstar Web Editor installs as a native SkySpark extension and appears in the project sidebar alongside your other views. Authentication, project context, and device access are all inherited automatically.
The editor runs as a Fantom pod serving the Vue 3 frontend through a SkySpark weblet. WebSocket connections to controllers are brokered through Sandstar Web Socket, sharing the same session pool and device registry used by the rest of your SkySpark project.
Tech Stack
Architecture
Capabilities
- Visual Node Editor built on Rete.js 2.0 with drag-and-drop wiring, minimap, and zoom
- Real-Time Device I/O -- read and write component values on live Sedona controllers
- Integrated Compiler -- compile Sedona applications (sedonac) directly from the browser
- File Management -- upload/download SAX and SAB files to/from controllers
- SkySpark View -- runs as a native SkySpark application view in the sidebar
Build Pipeline
- Vue Build: TypeScript + Vue 3 compiled to
dist/ - Pod Build:
dist/bundled into Fantom pod resources and compiled
Requirements
- SkySpark 3.0.24+ with Sedona extension
- Sandstar Web Socket for device communication
- Modern browser (Chrome, Firefox, Safari, Edge)
Interested in this project?
Explore the source code, contribute, or get in touch.