Multiple industries rely on Supervisory Control and Data Acquisition (SCADA) systems, to monitor industrial processes, helping maintain efficiency and reduce downtime.
SCADA systems have traditionally allowed for local monitoring, either through HMIs inside an industrial facility, or through private networks that span across the monitored sites. But this is slowly changing. The remote work trend, and the emergence of Industrial IoT gateways, are driving modern web technologies to the shop floor, enabling secure Internet-enabled remote monitoring, and helping industrial operators, maintenance teams, and even the management keep an eye on their processes in real time.
Ubidots SCADA aims to bring you the best of both worlds: the modern and rapidly advancing web technologies for analytics, visualization, user interfaces, and data storage, with the traditional SCADA designs industrial users are already accustomed to.
ACKNOWLEDGEMENTS
This widget utilizes a third-party open source software called FUXA, by Umberto Nocelli, subject to the MIT license.
Requirements
Active Ubidots account with the SCADA packet enabled.
1. How does the SCADA widget work?
Unlike most Ubidots widgets, this one has two components:
Widget edition drawer: The typical widget edition interface, where you pick which Ubidots variables to include in the widget.
SCADA Editor: An independent portal to create the SCADA designs, and link them to the variables selected in the previous step, known as "tags".
2. Create a SCADA widget
The SCADA widget needs to be fed with at least one Ubidots variable in order to be created:
Step 1: Click on the top-right + button in the Dashboard.
Step 2: Select the variables by clicking on the + Add variable button.
Step 3: Save and a new window will be open with the SCADA editor.
Step 4: Create a design using the shapes available in the left panel.
Step 5: Save and go back to your Dashboard to see the widget.
3. Shapes and controls
All shapes and controls are found in the left panel of the editor, to create a new one, you only need to select one and click on the canvas, then attach the variable to be displayed or controlled.
IMPORTANT NOTES:
Remember to save your progress using the "Save" button in the upper left corner.
After saving, refresh the dashboard to see the changes made in the SCADA editor.
4. Images
To add an image to your canvas, just click on the image icon located in the General section and upload a PNG, JPG, SVG, or GIF from your local storage.
5. Animated shapes
There are three types of shapes that could be animated by configuring an action in the interactivity options.
6. Create multiples views
Step 1: Create a new view by clicking on the + icon in the top left corner.
Step 2: Select the type of view:
Canvas/SVG
Multiple views container
Step 3: Click on property to modify the size and background color of the canvas.
7. Dialog settings
Step 1: Right-click on a shape or control.
Step 2: Select interactivity.
Step 3: Go to events and select the action you want to execute when clicking the shape.
Step 4: Confirm and save the project.
8. Tips and tricks
Ctrl + Left / Right: rotate selected item
Ctrl + Shift + Left / Right: rotate the selected item
Tab / Shift + Tab: select the previous / next item
Ctrl + Up / Down: central zoom in / out
Ctrl + Z / Y: undo / redo
Shift +: Resize with mouse the selected item': lock width and height
Shift + Up / Down / Left / Right: move the selected item
Shift + Draw line: line gradient horizontal, vertical 45° diagonal
Ctrl + X: cut selected item
Ctrl + C / V: copy / paste selected item
ACKNOWLEDGEMENTS
This widget utilizes a third-party open source software called FUXA, by Umberto Nocelli, subject to the MIT license.