Overview

Today we’ll go over the interface objects found in the Application Builder of the Quantum Q-Server.

Before you start, if you would like to follow along with the hardware portion of this tutorial you will need to connect an LED to one Builder Base and a button to another. If you don’t know how to do that, you can watch our Hello World tutorial first.

Reviewing the Objects

Now let’s go and create an app and go over the interface objects

Go to the Application Builder, click ‘Create New’, and create the app.

We will name our App “Button-LED” since this is the hardware we are using.

You will find yourself in the App Builder now. First use the search bar in the top left to search for a “LED” -Object or click on the Hardware-dropdown and look for a LED-object.

Open

To get an object on the dashboard, you can either click on the object or drag and drop it onto the canvas.

Do this for a “Button”-object in the Hardware-dropdown as-well.

Open

Next we want to look into the Interface-dropdown which you can find below the Hardware-dropdown on the left side. Here you can find objects like “Input-Text” to get a text displayed or the “Debug” object to test out your application if something isn't working correctly and there are many more objects which can be used for different things. The difference between a Hardware Object and an Interface Object is, that the Interface Object isn’t an actual hardware component. It is more like something in our application which we can use to control our project on a virtual dashboard.

Next, drag the “Switch”- and “Button” Interface Object onto your canvas.

Next thing we will do is connect the Hardware Button with the Hardware LED. Simply drag and drop a line from the “State” square to the “On/Off” square to connect both objects. Also connect the Interface Button and the Interface Switch with the Hardware LED.

Now we will start to label our objects. To do so, click on the Hardware LED object on the right.

A properties panel will appear on the right side of your browser, you can give the object a name. From the beginning all objects are titled as untitled. Click onto “Untitled” to change the object name. We named ours “LED”. Also make sure to click “Save Properties” on the bottom of the panel to save your new object name.

Name every object however you prefer or just name them like we did, which you can see below.

A cool feature you can use to group your Interface objects, is to use the Dash Builder. In the Dash Builder you can Add Tabs, which are simply pages where you can have your Interface Objects inside. You can access the Dash Builder by clicking on an object and selecting the ‘Dash Builder’ tab like so.

What it will look like in the end we will see later. In order to get an Interface object into a Group, just click on the Interface object you want to move and assign a Tab or Group.

Once you have named your Objects and grouped them how you wish, you can save your application and click on “Return to my Apps”.

Now click the Play button of the “Button-LED” apps. You will now have to map the application to the different clients which are attached to the hardware you use. For Button select the Client with Button, which you should have labeled in the beginning and for the LED choose the Client with the LED.

After you have finished mapping the application, hit “Save + Run”.

Once you have done this, you can click on the “Dashboard” button on the top right. A new tab in your browser should open up. You should see your application running, now click on it to open it.

As you can see now, Tab 1 has the Button. If you press the Button now in your browser your LED should light up for as long as you hold the Button. Also if you press the physical Button, your LED should Light up.

If you go to Tab 2 now, you should see the a switch. So as we mentioned before, grouping your interface objects can help you to split up your objects and to make the use more clear and less complicated to use.

If you flip the switch on, the LED should light up permanently. If you switch it off, the LED should turn off.

Dashboard Demo

Last, we will show you a dashboard demo we created to control a smart home. It will give you a better understanding on how the dashboard is laid out and how you can customize it to your own needs.

This App will “theoretically” work to control a Smart home. On the right side you can see different tabs in the Dash Builder. You can customize the names by clicking the little pencil or you can add more by clicking the “Add Tabs” on the right side. Use the trashcan icon to delete a Tab and the three bars to move a Tab and restructure your dashboard. For this tutorial, our Tabs are laid out by the different types of rooms we want to use and each tab has their own set of groups. We will now show you the Living Room tab.

For this, we wanted to display the status of certain objects in the app, to control the lighting of the room, have a thermostat for climate control, and also a possible fireplace. This is supposed to give you an idea of how a more complicated application could look like and how splitting certain interface objects into groups and tabs can help you to organize your dashboard.

If you go to run the application and open the dashboard, you will see the different tabs and groups we mentioned before. Under the Living Room Tab you can see the different groups like “Status” and “Thermostat”. You can see the data received for temperature or turn on the lighting in the living room.

These are pretty much the basics of how interface objects and applications work on the Quantum system. You can replace physical hardware components with interface objects in order to control it by your phone or laptop for instance or any device that is connected to your Q-Server or simply add them as an additional control possibility.