@frangoteam/fuxa-min 1.2.0 → 1.2.2

package/README.md

@@ -9,7 +9,7 @@ FUXA is a web-based Process Visualization (SCADA/HMI/Dashboard) software. With F
 ![fuxa action](/screenshot/feature-action-move.gif)
 
 ## Features
-- Devices connectivity with Modbus RTU/TCP, OPC-UA, BACnet IP, MQTT, WebAPI, Ethernet/IP (Allen Bradley)
+- Devices connectivity with Modbus RTU/TCP, Siemens S7 Protocol, OPC-UA, BACnet IP, MQTT, WebAPI, Ethernet/IP (Allen Bradley), ODBC
 - 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)
 
@@ -21,9 +21,9 @@ FUXA is developed with NodeJS (backend) and Angular (frontend).
 
 **WARNING** You need to have installed [Node](https://nodejs.org/en/about/previous-releases) Version 14 || 16 || 18
 
-Install from [NPM](https://www.npmjs.com/package/@frangoteam/fuxa-sim)
+Install from [NPM](https://www.npmjs.com/package/@frangoteam/fuxa)
 ```
-npm install -g --unsafe-perm @frangoteam/fuxa-sim
+npm install -g --unsafe-perm @frangoteam/fuxa
 fuxa
 ```
 
@@ -34,6 +34,7 @@ Open up a browser (better Chrome) and navigate to http://localhost:1881
 - Look video from [frangoteam](https://www.youtube.com/@umbertonocelli5301)
 - Look video from [Fusion Automate - Urvish Nakum](https://youtube.com/playlist?list=PLxrSjjYyzaaK8uY3kVaFzfGnwhVXiCEAO&si=aU1OxgkUvLQ3bXHq)
 
+
 ## 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 4frango@gmail.com and do let us know if you have any questions or suggestions regarding our work.
 

package/_widgets/README.md

@@ -0,0 +1,25 @@
+**How to use**
+
+The widgets will be displayed in the editor panel and can be used from there directly, or download the SVG from here make your edits and follow the steps:
+```
+    1. Select desired SVG image
+    2. Click download Icon
+    3. Import SVG in Fuxa project using embedded Image Import
+```
+
+**How to contribute**
+```
+    1. Fork the Project
+    2. In your Fork enter FUXA/server/_widgets/(what type your SVG is, control, indicator, dynamicSVG)
+    3. Add File Arrow, Upload file
+    4. Select your SVG and name the commit
+    5. Commit the changes
+    6. Go back to FUXA main page in your Fork
+    7. Click Contribute 
+    8. Open a Pull Request
+```
+Please Include a description in the How to Use section of the SVG file, how your SVG control/indicator/dynamicSVG works and how to use it in Fuxa
+
+For more details on building SVG widgets and using them please see the Wiki
+
+https://github.com/frangoteam/FUXA/wiki/HowTo-Widgets

package/_widgets/controls/draggingIndicatorExample.svg

@@ -0,0 +1,243 @@
+<svg
+   viewBox="0 0 300 100"
+   version="1.1"
+   id="indicatorSVG"
+   xmlns="http://www.w3.org/2000/svg">
+  <g
+     id="layer1"
+     transform="translate(0,0)">
+    <rect
+       style="fill:#cccccc;fill-rule:evenodd;stroke:#4d4d4d;stroke-width:1.0413;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1"
+       id="rectBackground"
+       width="280"
+       height="40"
+       x="10"
+       y="30" />
+    <circle
+       style="fill:#ff0000;fill-rule:evenodd;stroke:#4d4d4d;stroke-width:1.0413;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1; cursor: pointer; transition: fill 0.2s ease;"
+       id="movingIndicator"
+       cx="10"
+       cy="50"
+       r="10" />
+  </g>
+  <script type="text/javascript">
+    <![CDATA[
+
+    /*
+
+    #####################################
+    #           How to Use              #
+    #####################################
+
+    Variables with the following prefix:
+
+    _pb_ = bool   parameter ( true or false )
+    _pn_ = number parameter ( Int, Float, Real etc )
+    _ps_ = string parameter ( string can be entered directly )
+    _pc_ = color parameter in hex color code ( #00ff00ff )
+
+    Indicate variable type to be used in Fuxa Properties and binding of Tags, Important! they have to be place within:
+
+    //!export-start
+    let _pn_setState = 0;
+    //!export-end
+
+
+    There are 2x Functions to handle sending and receiving data between Fuxa and the SVG
+
+    // Recieve Variables From Fuxa
+    function putValue(id, value) { } 
+    
+    // Send Variables To Fuxa
+    function postValue(id, value) {
+      console.error('Not defined!');
+    }
+
+    The ID is the name of the variable _pn_setState for example and value is the value to be sent or received from Fuxa
+    
+    The scripts etc need to be within the SVG tags
+
+    <svg>
+      SVG Content Here
+      <script>
+        JS Script Content Here
+      </script>
+    </svg>
+
+
+    The below example uses simple SVG elements as an example, but complex logig to handle everything fully dynamic
+    you can drag the indicator within if the bounds of the rectangle
+    You can change the angle of the SVG in Fuxa editor to 45 degrees for example and it will still work
+    You and resize the slider in Fuxa editor and dragging adjusts to the new size
+    This can be edited even further to suit your needs, just a good starting point
+
+    */
+
+      //!export-start
+      let _pn_currentValue  = 0; // Current value of the indicator
+      let _pn_initValue     = 0; // Initial value of the indicator
+      let _pn_minVal        = -100; // Minimum value for scaling
+      let _pn_maxVal        = 100; // Maximum value for scaling
+      let _pc_defaultColour = '#ff0000'; // Default color of the indicator
+      let _pc_clickedColour = '#00ff00'; // Color when the indicator is clicked
+      //!export-end
+
+      let isDragging      = false; // Indicates if the indicator is currently being dragged
+      let dragOffsetX     = 0; // Offset between mouse and indicator when drag starts
+      let rectLeft        = 0; // Left position of the rectangle
+      let rectWidth       = 0; // Width of the rectangle
+      let indicatorRadius = 0; // Variable to hold the radius of the indicator
+
+      // Get the bounding box of the SVG to adjust for its size and position
+      const svgElement = document.getElementById('indicatorSVG');
+
+      // Update the indicator's position based on the provided value
+      function updateIndicator(value) {
+        const rect = document.getElementById('rectBackground');
+        const indicator = document.getElementById('movingIndicator');
+
+        // Get dimensions and position
+        rectWidth = rect.width.baseVal.value;
+        rectLeft  = rect.x.baseVal.value;
+
+        const scaledValue = (value - _pn_minVal) / (_pn_maxVal - _pn_minVal); // Scale value to range
+
+        // Calculate position of the indicator
+        const indicatorX = scaledValue * (rectWidth - 2 * indicatorRadius) + rectLeft + indicatorRadius; // Adjust for radius
+
+        // Update the position of the indicator
+        indicator.setAttribute('cx', indicatorX);
+        // Update the current value
+        _pn_currentValue = value;
+      }
+
+      // Change the indicator's color when clicked
+      function changeColor() {
+        const indicator = document.getElementById('movingIndicator');
+        if (indicator) {
+          indicator.style.fill  = _pc_clickedColour; // Change the fill color
+        }
+      }
+
+      // Reset the indicator's color to default
+      function resetColor() {
+        const indicator = document.getElementById('movingIndicator');
+        if (indicator) {
+          indicator.style.fill  = _pc_defaultColour; // Change the fill color
+        }
+      }
+
+      // Start dragging the indicator
+      function startDrag(event) {
+        isDragging = true;
+
+        // Get transformation matrix for correct mouse-to-SVG coordinate mapping
+        const matrix = svgElement.getScreenCTM().inverse();
+        const point   = svgElement.createSVGPoint();
+
+        point.x = event.clientX || (event.touches ? event.touches[0].clientX : 0);
+        point.y = event.clientY || (event.touches ? event.touches[0].clientY : 0);
+        const transformedPoint = point.matrixTransform(matrix);
+
+        const indicator = document.getElementById('movingIndicator');
+        dragOffsetX = transformedPoint.x - parseFloat(indicator.getAttribute('cx')); // Offset between mouse and indicator center
+        event.preventDefault(); // Prevent default actions
+      }
+
+      // Handle dragging the indicator (corrected for rotation)
+      function dragMove(event) {
+        if (!isDragging) return;
+
+        const indicator = document.getElementById('movingIndicator');
+        if (indicator) {
+          // Get the inverse of the current transformation matrix (to map mouse coordinates correctly)
+          const matrix  = svgElement.getScreenCTM().inverse();
+          const point   = svgElement.createSVGPoint();
+
+          // Get the current mouse position in client coordinates
+          point.x = event.clientX || (event.touches ? event.touches[0].clientX : 0);
+          point.y = event.clientY || (event.touches ? event.touches[0].clientY : 0);
+
+          // Transform the point into the SVG's local coordinates
+          const transformedPoint = point.matrixTransform(matrix);
+
+          // Calculate the new position for the indicator (adjust for drag offset)
+          let newCx = transformedPoint.x - dragOffsetX;
+
+          // Constrain the new position within the rectangle bounds
+          const minX = rectLeft + indicatorRadius;
+          const maxX = rectLeft + rectWidth - indicatorRadius;
+          newCx = Math.max(minX, Math.min(maxX, newCx));
+
+          // Update the indicator's position
+          indicator.setAttribute('cx', newCx);
+
+          // Update the current value based on the new position
+          const scaledValue = (newCx - rectLeft - indicatorRadius) / (rectWidth - 2 * indicatorRadius);
+          _pn_currentValue = _pn_minVal + scaledValue * (_pn_maxVal - _pn_minVal);
+
+          // Send Value to Fuxa
+          postValue('_pn_currentValue', _pn_currentValue);
+        }
+      }
+
+      // End dragging the indicator
+      function endDrag() {
+        if (isDragging) {
+          resetColor(); // Reset color when dragging ends
+          isDragging = false;
+        }
+      }
+
+      // Initial setup and event listeners
+      function init() {
+        updateIndicator(_pn_initValue); // Set initial position based on initial value
+
+        const indicator = document.getElementById('movingIndicator');
+        if (indicator) {
+          indicatorRadius = indicator.r.baseVal.value; // Get the radius once during initialization
+          indicator.addEventListener('mousedown', function(event) {
+            changeColor();
+            startDrag(event);
+          });
+          indicator.addEventListener('mouseup', endDrag);
+          indicator.addEventListener('touchstart', function(event) {
+            changeColor();
+            startDrag(event);
+          });
+          indicator.addEventListener('touchend', endDrag);
+        }
+
+        // Add global listeners for drag
+        window.addEventListener('mousemove', dragMove);
+        window.addEventListener('mouseup', endDrag);
+
+        // Add global listeners for touch drag
+        window.addEventListener('touchmove', dragMove);
+        window.addEventListener('touchend', endDrag);
+      }
+
+      // Variables received from Fuxa
+      function putValue(id, value) {
+        if (id === '_pn_currentValue') {
+          updateIndicator(value);
+        }
+        if (id === '_pn_initValue'    ) _pn_initValue     = value;
+        if (id === '_pn_minVal'       ) _pn_minVal        = value;
+        if (id === '_pn_maxVal'       ) _pn_maxVal        = value;
+        if (id === '_pc_defaultColour') _pc_defaultColour = value;
+        if (id === '_pc_clickedColour') _pc_clickedColour = value;
+      }
+
+      // Send Variables to Fuxa
+      function postValue(id, value) {
+        console.error('Not defined!');
+      }
+
+      init(); // Start initialization
+    ]]>
+  </script>
+</svg>
+
+
+