base on Web-based Process Visualization (SCADA/HMI/Dashboard) software  # FUXA FUXA is a web-based Process Visualization (SCADA/HMI/Dashboard) software. With FUXA you can create modern process visualizations with individual designs for your machines and real-time data display.    ## Features - Devices connectivity with Modbus RTU/TCP, Siemens S7 Protocol, OPC-UA, BACnet IP, MQTT, Ethernet/IP (Allen Bradley) - SCADA/HMI Web-Editor - Engineering and Design completely web-based - Cross-Platform Full-Stack - Backend with NodeJs and Frontend with Web technologies (HTML5, CSS, Javascript, Angular, SVG) ## Live Demo Here is a [live demo](https://frangoteam.github.io) example of FUXA editor. ## Installing and Running FUXA is developed with NodeJS (backend) and Angular (frontend). See the Wiki for more details about installing and getting started [Wiki](https://github.com/frangoteam/FUXA/wiki) [Wiki Installing/Building](https://github.com/frangoteam/FUXA/wiki/Installing-and-Running) ### Running from docker ``` docker pull frangoteam/fuxa:latest docker run -d -p 1881:1881 frangoteam/fuxa:latest // persistent storage of application data (project), daq (tags history), logs and images (resource) docker run -d -p 1881:1881 -v fuxa_appdata:/usr/src/app/FUXA/server/_appdata -v fuxa_db:/usr/src/app/FUXA/server/_db -v fuxa_logs:/usr/src/app/FUXA/server/_logs -v fuxa_images:/usr/src/app/FUXA/server/_images frangoteam/fuxa:latest // with Docker compose // persistent storage will be at ./appdata ./db ./logs and ./images wget https://raw.githubusercontent.com/frangoteam/FUXA/master/compose.yml docker compose up -d ``` ### Install from [NPM](https://www.npmjs.com/package/@frangoteam/fuxa) You need to have installed [Node](https://nodejs.org/en/about/previous-releases) Version 18. **WARNING** In linux with nodejs Version 18 the installation could be a challenge. If you don't intend communicate with Siemens PLCs via S7 (node-snap7 library) you can install from [NPM @frangoteam/fuxa-min](https://www.npmjs.com/package/@frangoteam/fuxa-min) ``` npm install -g --unsafe-perm @frangoteam/fuxa fuxa ``` ### Install from source [Download the latest release](https://github.com/frangoteam/FUXA/releases) and unpack it You need to have installed [Node](https://nodejs.org/en/about/previous-releases) Version 18. **WARNING** In linux with nodejs Version 18 the installation could be a challenge. If you don't intend to communicate with Siemens PLCs via S7, you can remove the ```node-snap7``` library from the ```server/package.json```. Similarly, if you don't intend to use ODBC to communicate with an external database, you can remove the ```odbc``` library from the ```server/package.json```. ``` cd ./server npm install npm start ``` Open up a browser (better Chrome) and navigate to http://localhost:1881 **Note** If you intend to use nodejs version 14, please remove odbc from the package.json dependencies. nodejs 14 may have compatibility issues with certain versions of odbc, which could lead to installation errors. ### Creating the Electron Application Electron is a framework for building cross-platform desktop applications using web technologies. An Electron application is standalone, meaning it can be run independently on your desktop without needing a web browser. To create the Electron application, you need to have node.js 18 installed. Follow these steps: Build Server and Client First ``` cd ./server npm install cd ../client npm install npm run build ``` Packaging ``` cd ./app npm install npm run package ``` After following these steps, you will have a standalone Electron application for FUXA. The application can be found in the ./app directory. ## Usage - Look the guide in [wiki](https://github.com/frangoteam/FUXA/wiki) pages - Look video from [frangoteam](https://www.youtube.com/@umbertonocelli5301) - Look video from [Fusion Automate - Urvish Nakum](https://youtube.com/playlist?list=PLxrSjjYyzaaK8uY3kVaFzfGnwhVXiCEAO&si=aU1OxgkUvLQ3bXHq) ## To Debug (Full Stack) Install and start to serve the frontend ``` cd ./client npm install npm start ``` Start the Server and Client (Browser) in Debug Mode ``` In vscode: Debug ‘Server & Client’ ``` ## To Build Build the frontend for production ``` cd ./client ng build --configuration=production ``` ## Contributing Any contributions you make are greatly appreciated. If you identify any errors, or have an idea for an improvement, please open an [issue](/../../issues). But before filing a new issue, please look through already existing issues. Search open and closed issues first. Non-code contributions are also highly appreciated, such as improving the documentation or promoting FUXA on social media. ### Pull-Requests If you want to raise a pull-request with a new feature, or a refactoring of existing code please first open an issue explaining the problem. ``` 1. Fork the Project 2. Create your Feature Branch (git checkout -b feature/AmazingFeature) 3. Commit your Changes (git commit -m 'Add some AmazingFeature') 4. Push to the Branch (git push origin feature/AmazingFeature) 5. Open a Pull Request ``` ### Coding standards Please ensure you follow the coding standards used through-out the existing code base. Some basic rules include: - Indent with 4-spaces, no tabs. - Opening brace on same line as if/for/function and so on, closing brace on its own line. ## Let us know! We’d be really happy if you send us your own shapes in order to collect a library to share it with others. Just send an email to [email protected] and do let us know if you have any questions or suggestions regarding our work. ## <a href="https://discord.gg/WZhxz9uHh4" target="_blank" > <img src="https://skillicons.dev/icons?i=discord" alt=""></a> ## License MIT. ", Assign "at most 3 tags" to the expected json: {"id":"5398","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"