Getting started
This section outlines what you can achieve with the different plugin types
Widget plugin
Let's create a widget that uses HighCharts javascript library to plot time series data. It will look like:
Download the zip file containing the source code for this widget from here. Then, head to Ubidots => Devices => Plugins. Once there, click on the Developer console icon:
Click the + icon to create a new plugin, set a name for it and a description, then hit the done button. After that your new plugin will be created:
Click the newly created plugin's name. While in the General information tab, click on Add Plugin Icon to add the icon that will be displayed on the plugins drawer and then hit the Save button within the Display information section. You can download the icon from here.
Scroll down to the Plugin description section and there paste the following readme and hit the save button within that section.
Navigate to the Version tab in the sidebar menu. Click the "+" icon and upload the zip file. The plugin is now in your Ubidots account, but it still needs to be deployed.
While in the Versions tab, scroll down to the Version history section and click on the icon that resembles a paper-clip airplane:
A confirmation will be displayed, click the Release button:
After that, your plugin's status will change from Draft to Released:
Go to Devices -> Plugins and click the create new plugin button. Then, in the plugins drawer, search for the plugin that you just created (HighCharts custom widget), fill in the required Ubidots token field and click the Done button. After that, you'll be able to see a new plugin has just been created:
Go to the dashboard that you want to place the widget in and click the Add new widget button. A drawer will be pop-up displaying all the widget, within it search the Widget that you just created and click on it. An instance of said plugin will be placed on the dashboard:
Fill the Widget's fields according to the variable that you want the data visualized in the widget. The following screenshot shows an example:
Finally, the widget will be created on the dashboard. This is how the widget looks like in the dashboard:
Last updated