$ show frangoteam/FUXA
FUXA is a full-stack web-based SCADA/HMI builder and runtime for industrial automation and IoT. It provides a visual editor (Angular + SVG) to create real-time dashboards, connect to field devices via 13+ protocols (Modbus, OPC UA, BACnet, Siemens S7, MQTT, etc.), and manage alarms, data acquisition (DAQ), scripting, scheduling, and user permissions. The backend (Node.js/Express) communicates with the frontend via Socket.IO for real-time device value updates. The system supports multiple time-series databases (SQLite, InfluxDB, QuestDB, TDengine) and can be deployed as a web server, Docker container, or Electron desktop app. It also integrates with Node-RED for low-code automation flows. The architecture is modular with a device driver factory pattern, JWT-based authentication, and a plugin system for extensibility. While the codebase is large and contains some monolithic components, it demonstrates solid engineering practices and has a rich set of reusable UI components and utility patterns.
The LLM identified 8 files worth highlighting for reuse:
Angular component wrapping the uPlot chart library with support for zoom, scroll, tooltips, and reactive data binding. Can be extracted and reused in any Angular project requiring interactive time-series charts.
A generic tree table component that renders hierarchical data with expand/collapse, selection, and search. Suitable for browsing device tag trees, OPC-UA nodes, or any tree-structured data. Minimal external dependencies, easily extractable.
Virtual scroll directive that dynamically renders only visible items in a large list, improving performance for long lists. Demonstrates non-obvious Angular skill with ViewContainerRef and template manipulation. Can be used independently in any Angular project.
Directive that makes Angular Material dialogs draggable by attaching mouse/touch event handlers to the dialog header. Simple, reusable, and solves a common UX requirement without heavy dependencies.
A searchable dropdown component built on Angular Material's mat-select. Provides a text input to filter options, with keyboard navigation and custom placeholder. Easily extractable for any project needing a searchable select.
A virtual keyboard component with multiple locale layouts (en-GB, en-US, fa-IR) and types (text, numeric, email, url). Handles caret positioning, emoji input, and touch events. Can be extracted and used in any Angular application requiring an on-screen keyboard.
A date range picker component with calendar, time selection, preset ranges, and locale support. Built on Angular Material. Provides a clean API for date range selection and can be reused in any Angular project.
A set of mathematical utility functions for scaling, min/max, mean, median, linear interpolation, and deadband filtering. Isolated and dependency-free, these functions can be used in any JavaScript/TypeScript project for data processing.