Coder Social home page Coder Social logo

frangoteam / fuxa Goto Github PK

View Code? Open in Web Editor NEW
2.5K 91.0 750.0 267.96 MB

Web-based Process Visualization (SCADA/HMI/Dashboard) software

Home Page: https://frangoteam.org

License: MIT License

TypeScript 44.54% JavaScript 28.91% CSS 3.21% HTML 20.48% SCSS 2.60% Dockerfile 0.06% Shell 0.20%
scada hmi nodejs angular web-hmi web-editor web-scada plc opc-ua opcua

fuxa's Introduction

fuxa logo

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.

fuxa editor

fuxa ani

fuxa action

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 example of FUXA editor.

Installing and Running

FUXA is developed with NodeJS (backend) and Angular (frontend).

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

You need to have installed Node Version 14 || 16 || 18.

WARNING In linux with nodejs Version 16 || 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

npm install -g --unsafe-perm @frangoteam/fuxa
fuxa

Install from source

Download the latest release and unpack it

You need to have installed Node Version 14 || 16 || 18.

WARNING In linux with nodejs Version 16 || 18 the installation could be a challenge. If you don't intend communicate with Siemens PLCs via S7 you can remove the node-snap7 library from the server/package.json

cd ./server
npm install
npm start

Open up a browser (better Chrome) and navigate to http://localhost:1881

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

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. But before filing a new issue, please look through already existing issues. Search open and closed issues first.

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.

Some collaborations

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.

License

MIT.

fuxa's People

Contributors

adnanebrahimi avatar alexbondor avatar alpaslanske avatar automationdummy avatar bykiev avatar concept10 avatar dependabot[bot] avatar ethergraf avatar feast107 avatar greg9504 avatar hoonoon avatar humoran avatar jee019 avatar k1nz avatar kevin100702 avatar lbeyaert avatar matthewreed303 avatar mauroalexandre avatar nikolaymurha avatar rikugun avatar rvbatista avatar sjimenez44 avatar tromgy avatar unocelli avatar w8w8w8 avatar woodlyer avatar xiaosongxiaosong avatar yuhai0 avatar zesava avatar zsdycs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fuxa's Issues

App not loading on NGINX proxy

I have trouble getting the app to load on Google Cloud (Ubuntu 18.04).

I have NGINX on port 80, which redirect to port 1881

location / {
proxy_pass http://localhost:1881;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;

The url 'example.com' is loading FUXA web server, because header is changed to FUXA and the page shows 'loading... ', which is what is found in /client/dist/index.html, but how do I get the app to load all the good stuff?

I can also see that client are connected to server and no errors are recorded in FUXA logs.

I would like to test this project, so any help is appriciated.

Save project change

We have to save only project change.
It is currently saved to the backend after leave the edited page, even when no changes have been made.
Detecting svg image change is not so simple...
A possible solution: automatic saving only to frontend and manually to backend

Gauge alarm don't work

Bind variable and active alarm with value >= 1 or boolean true
if alarm will be disabled then take the last value to redraw gauge

Chart View

In Editor the settings for the chart: signals, line property, history size ...
History in sqlite
Chart with dygraph (the best)

Extend svg editor with new shapes

how do i extend the svg editor to append new predefined shapes?

<div class="svg-tool-button" [ngClass]="{'svg-tool-active': isModeActive('custom-shape')}" (click)="setMode('custom-shape')">
              <span class="icon-tool icon-custom-shape"></span>
            </div>

HMI Navigation Menu

Define in editor the Side Navigation Menu (Angular Material Sidenav) and show it in HMI

Server run error

Error at server runed:
2019-11-21T04:25:06.106Z [ERR] deviceA working (connection || polling) overload!
2019-11-21T04:25:07.629Z [ERR] DeviceB: try to connect failed! 10061
.......

HMI Headerbar

Define in editor the Header (Angular Material Toolbar) and show it in HMI

how to change the svgeditor' language

I find some templete in client\src\app\editor\editor.component.html named svginfo_lang
<label> <span id="svginfo_lang">Language:</span> <!-- Source: http://en.wikipedia.org/wiki/Language_names --> <select id="lang_select"> <option id="lang_ar" value="ar">العربية</option> <option id="lang_cs" value="cs">Čeština</option> <option id="lang_de" value="de">Deutsch</option> <option id="lang_en" value="en" selected="selected">English</option> <option id="lang_es" value="es">Español</option> <option id="lang_fa" value="fa">فارسی</option> <option id="lang_fr" value="fr">Français</option> <option id="lang_fy" value="fy">Frysk</option> <option id="lang_hi" value="hi">&#2361;&#2367;&#2344;&#2381;&#2342;&#2368;, &#2361;&#2367;&#2306;&#2342;&#2368;</option> <option id="lang_it" value="it">Italiano</option> <option id="lang_ja" value="ja">日本語</option> <option id="lang_nl" value="nl">Nederlands</option> <option id="lang_pl" value="pl">Polski</option> <option id="lang_pt-BR" value="pt-BR">Português (BR)</option> <option id="lang_ro" value="ro">Română</option> <option id="lang_ru" value="ru">Русский</option> <option id="lang_sk" value="sk">Slovenčina</option> <option id="lang_sl" value="sl">Slovenščina</option> <option id="lang_zh-TW" value="zh-TW">繁體中文</option> </select> </label>
but it don't work,and there's only 'client\src\assets\lib\svgeditor\fuxa-editor.min.js',I can't read it,may I have the source code?

A bug when ungroup a shape

In editor page when i use a Proc.Eng shape like 'motor-simb', and after i click on ungroup option, the forecolor and backcolor of the shape automaticcaly sets to black.

Add support for InfluxDB

This project looks very good...

I would suggest that the historic data, incl. Alarms & Events are stored inInfluxDB, because this database is fast and dashboard tools are already available.

fuxa-editor.js source code?

I want to see fuxa-editor.js source code, not fuxa-editor.min.js in client. Please tell me where I can find it. Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.