I’ve created a free, browser-based visual editor for designing FrontPanel GUI layouts. No more manual coordinate calculations!
GitHub Repository: palathingal/gui-xml-designer: Visual drag-and-drop GUI designer for Opal Kelly FrontPanel XML files
The Problem
If you’ve worked with FrontPanel GUIs, you know the pain:
<object class="okPushbutton">
<position>45,60</position> <!-- Calculated by hand 😫 -->
<size>50,30</size> <!-- Trial and error -->
</object>
Every time you want to move a button or add a new LED, you’re:
-
Opening the XML file in a text editor
-
Manually calculating X,Y coordinates
-
Guessing component sizes
-
Running FrontPanel to preview
-
Realizing it’s misaligned
-
Repeating the process…
There had to be a better way.
The Solution: Visual GUI Designer
I built a drag-and-drop editor that runs entirely in your browser. Zero installation required.
Key Features
Visual Design
-
Drag components to position them
-
Resize with interactive handles
-
Real-time preview
-
Zoom controls for precision
Full Component Support
-
All Wire In components (okPushbutton, okSlider, okDigitEntry, etc.)
-
All Wire Out components (okLED, okDigitDisplay, okHex, okGauge, etc.)
-
Static elements (okStaticText, okStaticBox)
-
Trigger components and File Pipes
Import/Export
-
Import your existing .xfp files
-
Edit visually
-
Export back to FrontPanel-compatible XML
-
Preserves all properties and attributes
Smart Property Management
-
Component-specific property panels
-
Only shows relevant fields for each type
-
Color picker for LEDs
-
Dropdown selectors for radix, style, alignment, etc.
-
Default values for all fields
How It Works
Quick Start
-
Download
gui-designer.htmlfrom the GitHub repo -
Open it in any modern browser (Chrome, Firefox, Edge, Safari)
-
Start designing!
Workflow Example
Creating a New GUI:
1. Click "Push Button" → Component appears on canvas
2. Drag it to position (45, 60)
3. Select component → Edit properties panel:
- Label: "RESET"
- Endpoint: 0x00
- Bit: 2
- Tooltip: "Reset the counter"
4. Click "Export XML" → Save as .xfp file
Editing Existing Files:
1. Click "Import XML"
2. Select your .xfp file
3. All components load with positions and properties
4. Make changes visually
5. Export updated file
Technical Details
Technology Stack:
-
Pure HTML/JavaScript - No build tools required
-
React 18 (via CDN)
-
Tailwind CSS for styling
-
Native DOMParser for XML handling
Browser Requirements:
-
Chrome 90+, Firefox 88+, Safari 14+, or Edge 90+
-
JavaScript enabled
-
No plugins or extensions needed
File Compatibility:
-
Reads/writes standard FrontPanel XML format
-
Fully compatible with FrontPanel API
-
Preserves all component attributes
Why I Built This
I was working on an automated test equipment project with multiple FrontPanel interfaces. After spending hours tweaking coordinates for the third GUI, I decided there had to be a better approach.
This tool has already saved me countless hours, and I wanted to share it with the community.
FAQ
Q: Does this work with existing FrontPanel projects? A: Yes! Import your .xfp files, edit them visually, and export. The XML structure is fully compatible.
Q: Is it free? A: Completely free and open source (MIT License). Use it commercially, modify it, share it.
Q: Do I need to install anything? A: No! Just download the HTML file and open it in your browser. Works offline too.
Q: Can I contribute? A: Absolutely! The code is on GitHub and contributions are welcome.
Q: What if I find a bug? A: Please report it on GitHub IssLicense
MIT License - Free for commercial and personal use.
Acknowledgments
Thanks to the Opal Kelly team for creating FrontPanel and fostering such a great developer community. This tool is built by the community, for the community.
Give it a try and let me know what you think! I’m excited to hear your feedback and suggestions.
Happy GUI designing!
Note: This is an independent, community-developed tool and is not officially affiliated with Opal Kelly Inc.