Designing the User Interface

We shall start with a simple button and use it to get the status of the device and check whether it is online or offline.

Let us begin with an overview of how to use the Bubble editor.

Design section

In this section, we create UI elements like buttons, shapes, slide bars etc.

Workflow section

In this section, we decide how our UI elements should behave and what actions they should perform. The Bolt plugin provides actions related to the device which can be accessed in this section.

📘

Working on Development mode

We are currently in the development mode of the App, you can verify the same on the top right corner of this view.
Once we have made the UI changes, set workflows, tested the App and checked if everything works fine, we will then deploy it and our App will go live. After which we will be able to access it from any device using the browser.

Creating a button and getting the device status

We shall now create a button in the design section and set its action to get device status in the workflow section

• Go to the Design section, and click on "Button". This activates the pointer to create a button in the design area.
• Click top right part of the design area which would create a button.
• Name the button. Preferably "Check device status" since it will show device status.
• Click on start/edit workflow to set an action for this button. This will take you to the workflow section

📘

Event creation

As you must have noticed, an event "when Check device status is clicked" is automatically created when we clicked "Start/edit workflow".
This event will get triggered whenever we click the "Check device status" button. We will define what action is to be performed when this action is triggered.

Once you are in the workflow section, set an action for this button.

• Click on add an action
• Select Plugins
• Chose deviceStatus

Go back to the Design section and select preview from the top right corner.
This will open a preview of our app and we can test the behaviour of the button that we just created.

Click the button once you are in the preview mode. It will show you the status of your device.

🚧

Offline status check

Please note that it takes around 20-30 seconds for our systems to update the status as Offline after powering down the device.

Creating more elements to control the device

We shall now create a few more elements which will control the pins of the Bolt device.

Create a rectangular shape inside which, we will place all elements which will control a single pin in the next sections.

Here is a step by step video for this section.

In the next section, we shall learn how to control the LED connected to pin 0 to switch it ON and OFF.