FUXA Addon: Process Visualization (SCADA/HMI/Dashboard) software

[SmartLiving.Rocks (Amon Reich)]

Add FUXA to your Home Assistant Supervised Installation. It is an easy web-based Process Visualization (SCADA/HMI/Dashboard) software

FUXA Home Assistant Add-On - Easy web-based Process Visualization (HMI)

This Addon is based on GitHub - frangoteam/FUXA: Web-based Process Visualization (SCADA/HMI/Dashboard) software. All credits go to the team of frangoteam. Thanks for this awsome product. I instantly love it! Cheers
Amon

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

Here is another live demo

Add custom Repository to Home Assistant

Add this Repository https://github.com/SmartLiving-Rocks/FUXA/ manually or click here to add it via my Home Assistant:

Here is how you do it

• Go to Add-ons
• Click on ADD-ON-STORE in the lower right corner (Blue Button)
• Click on the three dots in the upper right corner
• Select Repositories
• Paste the url https://github.com/SmartLiving-Rocks/FUXA/
• Hit Add and then close
• Refresh the page
• The new Add-on FUXA by SmartLiving.Rocks is now visible
• Click on it
• Install the Add-on

Start the Add-on and use FUXA

• Press Start
• Check the Logs
• Now FUXA is started and you can use it on port 1881
• You can use homeasssitant.local:1881 (just replace the :8123 with :1881)
• Have fun!

Implement it into Home Assistant Dashboard

You can use the Webpage card - Home Assistant Lovelace card

[Badprop (Pieter)]

I work mostly with Factory Talk View. Busy installing this for my home assistant.

[Badprop (Pieter)]

Would be nice if it could get the entities like nodered does. I never was a fan of mqtt. For this i will bite down and start using mqtt.
I assume to get sensor data here I would have to manually publish those values using something like an automation to publish every second or so.
If there is another way to get the values I’d love to hear about it.

[SmartLiving.Rocks (Amon Reich)]

Hi, thanks for your feedback! That was my first thought as well. However, I do not have the skills yet to use the Home Assistant API or similar to get the entity states directly into FUXA. Here are two examples of how I currently do it:

Just one state automation

alias: MQTT Helper Relay 2
description: ""
trigger:
  - platform: state
    entity_id:
      - switch.relay_switch_quinto_2
condition: []
action:
  - service: mqtt.publish
    metadata: {}
    data:
      qos: 0
      retain: false
      topic: demo/relay_2
      payload_template: "{{ '1' if is_state('switch.relay_switch_quinto_2', 'on') else '0' }}"
mode: single

One Automation several states

alias: MQTT Arrigation Water Level
description: ""
trigger:
  - platform: state
    entity_id:
      - input_number.waterlevel_arrigation
    id: Water Level
  - platform: state
    entity_id:
      - input_boolean.light
    id: Light
  - platform: state
    entity_id:
      - input_boolean.pump
    id: Pump
  - platform: state
    entity_id:
      - input_boolean.ventilator
    id: Ventilator
  - platform: state
    entity_id:
      - input_number.water_tank
    id: Water Tank
  - platform: state
    entity_id:
      - input_number.temperatur
    id: Temperatur
  - platform: state
    entity_id:
      - input_number.humidity
    id: Humidity
  - platform: state
    entity_id:
      - input_number.ph
    id: PH
  - platform: state
    entity_id:
      - input_boolean.php
    id: PH +
  - platform: state
    entity_id:
      - input_boolean.ph
    id: PH -
condition: []
action:
  - choose:
      - conditions:
          - condition: trigger
            id:
              - Water Level
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              topic: /demo/arrigation/water
              payload_template: "{{ states('input_number.waterlevel_arrigation') }}"
      - conditions:
          - condition: trigger
            id:
              - Light
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              topic: /demo/arrigation/light
              payload_template: "{{ '1' if is_state('input_boolean.light', 'on') else '0' }}"
      - conditions:
          - condition: trigger
            id:
              - Pump
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              payload_template: "{{ '1' if is_state('input_boolean.pump', 'on') else '0' }}"
              topic: /demo/arrigation/pump
      - conditions:
          - condition: trigger
            id:
              - Ventilator
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              payload_template: "{{ '1' if is_state('input_boolean.ventilator', 'on') else '0' }}"
              topic: /demo/arrigation/ventilator
      - conditions:
          - condition: trigger
            id:
              - Water Tank
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              topic: /demo/arrigation/watertank
              payload_template: "{{ states('input_number.water_tank') }}"
      - conditions:
          - condition: trigger
            id:
              - Temperatur
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              topic: /demo/arrigation/temperatur
              payload_template: "{{ states('input_number.temperatur') }}"
      - conditions:
          - condition: trigger
            id:
              - Humidity
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              topic: /demo/arrigation/humidity
              payload_template: "{{ states('input_number.humidity') }}"
      - conditions:
          - condition: trigger
            id:
              - PH
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              topic: /demo/arrigation/ph
              payload_template: "{{ states('input_number.ph') }}"
      - conditions:
          - condition: trigger
            id:
              - PH +
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              payload_template: "{{ '1' if is_state('input_boolean.php', 'on') else '0' }}"
              topic: /demo/arrigation/phplus
      - conditions:
          - condition: trigger
            id:
              - PH -
        sequence:
          - service: mqtt.publish
            metadata: {}
            data:
              qos: 0
              retain: false
              payload_template: "{{ '1' if is_state('input_boolean.ph', 'on') else '0' }}"
              topic: /demo/arrigation/phminus
mode: single

[Badprop (Pieter)]

That’s exactly what I did. I have some sensors with Open/Close and On/Off states. Had to convert in template to 1/0.
I’ve been looking for something like this for a long time. I already have a couple of stuff running. The one thing I am missing is the Gauge background. The background setting changes the bar background, but square card itself is always white.
What I want to do, is use a dark grey background for the main page, so that color stands out more and the tablet is less bright at night.
Do yo perhaps have advise on that?

[SmartLiving.Rocks (Amon Reich)]

@Badprop

use a dark grey background for the main page, so that color stands out more and the tablet is less bright at night

I think that is a question for frangoteam:

@SmartLiving.Rocks

This Addon is based on GitHub - frangoteam/FUXA: Web-based Process Visualization (SCADA/HMI/Dashboard) software . All credits go to the team of frangoteam. Thanks for this awsome product. I instantly love it! Cheers
Amon

[Uffen]

Is there a way to connect FUXA to HA WebAPI without token?

[SmartLiving.Rocks (Amon Reich)]

Unfortunately not. I do not have the skills yet.

[monty_burns_007]

Is there a possibility that you can embed the FUXA HMI SCADA webpage (http) onto a HA which can be reached externally on a https site ?
Now I have the following setup:

• HA which runs only http (so no https & certificates setup)
• HA addon : NGINX reverse proxy manager installed which maps http://homeassitant:8123 to my external https://myhome.duckdns.org

if you embed Fuxa http page in an iframe, it’s only visible locally on http, not remotely on https.
I don’t want to use external port forwarding or add another duckdns https reverse proxy site.

What I did see is there is an option to use “Ingress”, this gives an extra “Open WEB UI” and “Show in sidebar” in a HA Addon.
Ingress also takes care of authentication tokens etc… internally HA.

There are several HA Addons using Ingress and allowing to reach an Addon’s webpage also externally.
You can specifiy the WEB UI url in a Addon config.yaml, but I could not get it to redirect to my local http webserver for a Addon I made myself.
Does the docker addon has to be adapted somehow to allow Ingress to work ? The webserver I tried it on is a .NET compiled webserver application (so no nginx webserver).

Can the Ingress option be added to the FUXA HA Addon ?

[th9cb]

Hi all!

I see lot of great opportunities to have FUXA add-on fully developed and integrated in HA! This project needs a boost!

Unfortunately the install process fails with recent HA release (Core2024.9.3 / Supervisor2024.09.1 / Operating System13.1). Error is “The command ‘/bin/sh -c npm install’ returned a non-zero code: 1”

In addition the native integration of entities as suggested from @Badprop instead of MQTT would significantly improve this tool!

@SmartLiving.Rocks How about rise up the project and get help from the community?

[monty_burns_007]

I’m trying to get Ingress working so you can use FUXA native from inside HA anywhere (internal or external).
Struggling now to get nginx proxy working into Fuxa container.
Map sharing is already working so you can have a persistant config for ex. inside Home Assistant Addon folder.

[SmartLiving.Rocks (Amon Reich)]

@th9cb

How about rise up the project and get help from the community?

Fantastic idea! It’s Hacktober - so everybody feel free to boost that great project!
A few months ago I have had a talk with Umberto the founder of the original FUXA project.

unocelli - Overview

As I am not so familiar with Docker and Home Assistant, I was hoping that he can take over and I introduced him to the Home Assistant project.

So everybody, feel free to get this thing working!

[monty_burns_007]

I finally managed to get the FUXA addon working with HA-Ingress HACS addon. (GitHub - lovelylain/hass_ingress: Home Assistant ingress feature, add additional ingress panels to your Home Assistant frontend.)
This way you can add a FUXA shortcut for example in the HA side bar, but most important it is also visible externally (both on http or https) because the Ingress addon reverse proxies all Fuxa webserver traffic internally on the HA host.
Since the Fuxa docker does not contain a NGINX webserver which you can natively enable Ingress, I had to use some search & replace rewriting on FUXA’s relative URL paths.
This is my first rewrite attempt of a custom HA addon Ingress, I learned a lot from it.
I hope it’s usefull for other Fuxa’s enthousiasts.

Addon config below:

ingress:
  fuxa:
    title: FUXA
    work_mode: ingress
    url: http://localhost:1881
    index: /
    icon: mdi:monitor-dashboard
    disable_stream: True
    rewrite:
      # 1. Rewrite the <base> tag in the body section
      - mode: body
        match: >-
          <base href="\/">
        replace: >-
          <base href="$http_x_ingress_path/">
      # 2. Rewrite for API calls (e.g., /api/project)
      - mode: body
        match: >-
          (/api/projectData|/api/project|/api/screen|/api/settings|/api/screen|/api/resources|/api/heartbeat)
        replace: >-
          $http_x_ingress_path\1
      # 3. Rewrite for socket.io requests
      - mode: body
        match: >-
          /socket\.io
        replace: >-
          $http_x_ingress_path/socket\.io