Skip to main content

FUXA

Github Repo​

The repo is stored here https://github.com/frangoteam/FUXA

Tried building this in debug mode and was not able to get it running.

alt text

Grabbed an image from our old RMX alt text

React Research​

From Google​

AI Overview Learn more While there isn't a huge amount of information available about React projects specifically using FUXA, here's how you can approach integrating them: Understanding FUXA: FUXA is a web-based SCADA/HMI/Dashboard software that allows you to create visualizations for industrial processes and machines. It uses Node.js for the backend and Angular for the frontend. FUXA provides a rich set of pre-built widgets and tools for creating visualizations, data logs, alarms, and more. Integrating FUXA with React: Use FUXA as a standalone application: Develop your React application independently. Use FUXA to create your visualizations and dashboards. Embed the FUXA visualizations into your React application using iframes or other embedding techniques. Build a custom React frontend for FUXA: This approach requires more advanced knowledge of both FUXA and React. You can leverage FUXA's backend APIs and data structures to build a custom React frontend that interacts with FUXA's data and functionality. Example: Using FUXA in a React project (iframe method) JavaScript

import React from 'react';

function FuxaDashboard() {
  return (
    <div>
      <h1>My React App</h1>
      <iframe src="http://localhost:1881/editor" width="800" height="600" />
    </div>
  );
}

export default FuxaDashboard;

Considerations: Communication: Consider how your React application will communicate with FUXA. If you need to exchange data in real-time, you might need to use a messaging system like WebSockets. Authentication: If your application requires authentication, you'll need to coordinate authentication between React and FUXA. Customization: If you want to customize the look and feel of FUXA, you might need to explore its theming options or build a custom frontend. Alternatives: If you are looking for more React-centric solutions, consider libraries like: Recharts: For creating charts and graphs. D3.js: For more complex visualizations. Victory: Another charting library built specifically for React.

https://www.reddit.com/r/PLC/comments/14l863k/fuxa_scada_local_deployment/?rdt=34084

https://openplc.discussion.community/post/how-to-use-fuxa-free-scada-software-with-openplc-on-arduino-12403052

https://wiki.seeedstudio.com/reTerminal-DM_intro_FUXA/

https://support.labjack.com/docs/fuxa

Creating a HMI diagram without FUXA with react from Chat GPT.​

Creating an HMI (Human-Machine Interface) diagram in React involves combining graphical representations of a system's components with interactive features for user interaction. Here's a step-by-step guide to achieve this:

  1. Plan Your HMI Diagram Define the components of your system (e.g., tanks, pumps, pipes, valves, sensors). Decide the types of interactions (e.g., click, drag, hover, input). Choose a rendering approach: SVG, Canvas, or a library.
  2. Set Up Your React Environment Ensure you have a React app initialized:
npx create-react-app hmi-diagram
cd hmi-diagram
  1. Use a Graphical Library (Optional but Recommended) You can use libraries like:

SVG libraries: react-konva, react-svg Diagram libraries: JointJS, React Flow, GoJS Example: Install react-konva for SVG rendering:

npm install react-konva
  1. Design the HMI Layout Use SVG or Canvas to draw the components. Here's an example using react-konva:

Example Code:

import React from 'react';
import { Stage, Layer, Rect, Circle, Text } from 'react-konva';

const HmiDiagram = () => {
  const handleClick = () => {
    alert("Tank clicked!");
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {/* Tank */}
        <Rect
          x={50}
          y={50}
          width={100}
          height={200}
          fill="blue"
          shadowBlur={10}
          onClick={handleClick}
        />
        <Text text="Tank 1" x={70} y={260} fontSize={16} fill="black" />

        {/* Pipe */}
        <Rect x={150} y={125} width={200} height={20} fill="gray" />

        {/* Pump */}
        <Circle
          x={400}
          y={135}
          radius={30}
          fill="red"
          shadowBlur={5}
          onClick={() => alert("Pump clicked!")}
        />
        <Text text="Pump" x={375} y={170} fontSize={16} fill="black" />
      </Layer>
    </Stage>
  );
};

export default HmiDiagram;
  1. Add Interaction and State Management Use useState to manage dynamic properties like tank levels or valve states. Example: A tank with a dynamic fill level:
import React, { useState } from 'react';
import { Stage, Layer, Rect, Text } from 'react-konva';

const HmiDiagram = () => {
  const [fillLevel, setFillLevel] = useState(50); // Level in percentage

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {/* Tank Outline */}
        <Rect x={50} y={50} width={100} height={200} stroke="black" strokeWidth={2} />
        {/* Dynamic Fill */}
        <Rect
          x={50}
          y={50 + (200 - (fillLevel / 100) * 200)}
          width={100}
          height={(fillLevel / 100) * 200}
          fill="blue"
        />
        <Text text={`Tank Level: ${fillLevel}%`} x={50} y={270} fontSize={16} fill="black" />
        <Text
          text="Increase"
          x={50}
          y={300}
          fontSize={16}
          fill="green"
          onClick={() => setFillLevel((prev) => Math.min(prev + 10, 100))}
        />
        <Text
          text="Decrease"
          x={120}
          y={300}
          fontSize={16}
          fill="red"
          onClick={() => setFillLevel((prev) => Math.max(prev - 10, 0))}
        />
      </Layer>
    </Stage>
  );
};

export default HmiDiagram;
  1. Style and Animate Use react-spring or built-in Konva animations for smooth transitions. Example: Change color based on tank levels.
  2. Optional: Integrate Data Fetch data from an API to update the HMI in real time (e.g., tank pressure, valve status). Use useEffect to handle updates.
useEffect(() => {
  const interval = setInterval(() => {
    fetch('/api/tank-data')
      .then((response) => response.json())
      .then((data) => setFillLevel(data.level));
  }, 5000);
  return () => clearInterval(interval);
}, []);
  1. Deploy Your HMI Use platforms like Vercel, Netlify, or your server to deploy the HMI app. Would you like to expand on any of these steps, such as real-time data integration or animations?

Share

You said: 2 Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/neterror.rollup.js.map: Unsupported protocol "chrome-error:" ChatGPT said: ChatGPT This error typically occurs when the browser is trying to load a source map for debugging, but it encounters an unexpected protocol (chrome-error://). This is a browser-related issue and isn't directly related to your application code. Here are some steps to troubleshoot and resolve the issue:

  1. Clear Browser Cache Clear your browser's cache and restart the browser. Sometimes, cached data can cause conflicts.
  2. Disable Source Maps in Developer Tools Open Chrome DevTools (F12 or right-click > Inspect). Go to Settings (gear icon in the top right corner of DevTools). Under Preferences, find the "Sources" section. Disable "Enable JavaScript source maps" and "Enable CSS source maps."
  3. Check for Extensions Some browser extensions can interfere with source map loading. Disable all extensions and check if the issue persists. Re-enable extensions one by one to identify the culprit.
  4. Inspect Network Calls Go to the Network tab in DevTools. Check if there are any failed requests related to chrome-error://. This could indicate a problem with the browser or a misconfigured extension.
  5. Ensure Correct URLs in Your Application If you're developing an application, ensure that all source maps are properly referenced and accessible. Check your devtool configuration in Webpack (if you're using it). For example: javascript Copy code devtool: 'source-map' // Ensure this matches your setup.
  6. Update or Reinstall Chrome Ensure you're using the latest version of Chrome. Outdated versions might have bugs causing this issue. If the problem persists, consider reinstalling Chrome.
  7. Test in a Different Browser Try running your application in a different browser (e.g., Edge, Firefox) to see if the issue is specific to Chrome. If these steps don't resolve the issue and you're working in a development environment, it could be a quirk with the browser's error handling rather than a real problem with your code. Let me know if you're still stuck!

You said: can you give me a mermaid diagram on how fuxa works? ChatGPT said: ChatGPT FUXA is an open-source application used to design and simulate HMI (Human-Machine Interface) for industrial automation. Below is a Mermaid diagram illustrating how the components in FUXA work together. It includes the Frontend, Backend, Database, and Device Communication layers.

Standards​

There are 4 levels of displays in an HMI diagram.

  1. Process Overview
  2. Process Unit Operating Graphics
  3. Process Detail Displays
  4. Process Support and Diagnostics Displays

HMI diagram has 4 levels. The level I created is closer to a level 2 display than a level 1.

Level 1 should contain major indicators and graphs for the network. Very high-level overview with any important alarms being displayed as well. Upstream and downstream information should be noted. Level 2 is where we start to see the classic HMI diagrams. This is the primary display that is used by an operator. There can be multiple level 2 displays for both equipment and normal operating protocols like startup, normal operation... Level 3 is for a more detailed display it will show specific equipment and their components for fine tuning of a system. I think this would be like being able to control all the pumps in a pump station. Or a valve that is right off a tank or pump. Level 4 is for Support of equipment. It has diagnosis for the equipment. Individual sensors in a piece of equipment. Things like that.

The classic HMI diagrams are level 2 and 3. The Level 1 is mostly graphs and indicators which something like alt text Level 4 Looks complicated. alt text

Process Overview​

  1. High-level Key Performance Indicators (KPI)
  2. Alarms of top 2 or 3 highest priorities
  3. Important calculated parameters and conditions
  4. Important information from upstream and downstream units
  5. Advanced control mechanisms performance and status
  6. Major equipment status
  7. Appropriate trends of important parameters
  8. Indications of abnormal situations, denoting severity

Level 1 displays should be designed secondarily to Level 2 displays. Control should not be performed from this display.

Process Unit Operating Graphics​

  1. Key Performance Indicators (KPI)
  2. All alarms relevant to this display (if constrained by space, then alarms of top 2 or 3 highest priorities with indication there are additional alarms not being displayed)
  3. Controls needed to accomplish tasks (or access to controls, such as easy access to faceplates that contain controls)
  4. Indicators needed to accomplish tasks
  5. Navigation to related displays
  6. Navigation to overview display
  7. Navigation for continuation of flow lines
  8. Indications of abnormal situations, denoting severity

Process Detail Displays​

  1. Alarms of all priorities relevant to that display
  2. Controls
  3. Indicators
  4. Detail view of equipment

Process Support and Diagnostics Displays​

  1. Alarm displays with details of individual sensor status
  2. Detailed info about equipment and instrumentation
  3. Detailed status of Advanced Process Control functionality
  4. System-supplied displays such as point detail, system diagnostics, alarm summary, etc.
  5. Help displays
  6. Operating procedures
  7. Alarm documentation and response guidance

Design for Fake live mode with fuxa​

Create a run the scenario button in the side menu. Create a script in fuxa that will launch when the user clicks on the run scenario button. The script should start out with a hardcoded start time value although later on we could have an API call to get earliest and latest timestamps. It should also have how far apart the timesteps are. Then it should make an api call with the timestamp. (This is the same thing we are doing now only we are hardcoding the timestep.) sleep and in so many seconds run the next api call with timestamp this is a loop so do this until we reach the last timestep. Then fake live mode will be complete or it will start over. Also may want a pause or stop button available. We could also have a time selector but again that is 2nd cut. Then

Last updated on by jacobgqc