All Collections
User Guides
Create cloud-based SCADA visualizations in Ubidots
Create cloud-based SCADA visualizations in Ubidots

Replicate SCADA visualizations within Ubidots dashboards.

Written by Sergio M
Updated over a week ago

Cloud-based SCADA system

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.


This widget utilizes a third-party open source software called FUXA, by Umberto Nocelli, subject to the MIT license.


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.


  • 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


This widget utilizes a third-party open source software called FUXA, by Umberto Nocelli, subject to the MIT license.

Did this answer your question?