Skip to main content
All CollectionsUser Guides
Create cloud-based SCADA visualizations in Ubidots
Create cloud-based SCADA visualizations in Ubidots

Replicate SCADA systems within Ubidots dashboards.

Sergio M avatar
Written by Sergio M
Updated over a month ago

Cloud-based SCADA system

Introduction

Multiple industries rely on Supervisory Control and Data Acquisition (SCADA) systems to monitor industrial processes, helping maintain efficiency and reduce downtime. Cloud-based SCADA systems offer significant benefits for flexibility, automation, and real-time data accessibility, enhancing the overall functionality of a SCADA system.

SCADA systems have traditionally provided local monitoring capabilities, either through HMIs within industrial facilities or via private networks connecting multiple sites. However, this paradigm is rapidly evolving with the rise of Industrial IoT gateways and modern web technologies. These advancements are bringing secure, internet-enabled remote monitoring directly to the shop floor, allowing operators, maintenance teams, and management to oversee processes in real-time from anywhere.

Cloud infrastructure further enhances SCADA systems by offering the scalability and cost-effectiveness needed to manage increasingly complex industrial operations. By utilizing cloud services, organizations improve both data management and real-time monitoring capabilities. In particular, hybrid cloud models combine the strengths of private and public cloud functionalities, allowing companies to balance flexibility with robust security.

In Ubidots, creating SCADA visualizations leverages this cloud architecture to centralize control and streamline the monitoring of remote sites. With enhanced network security and reliable connectivity, SCADA systems can now enable predictive maintenance through actionable real-time data insights, empowering operators to make informed decisions faster. Protecting critical data and ensuring reliable access is essential for operational efficiency, and with Ubidots' cloud-based solutions, implementing SCADA visualizations has never been easier or more secure.

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

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.


Did this answer your question?