Get your first app working

Owned by Joeran Kinzel (Unlicensed)
Last updated: May 27, 2020 by Michel Wohlert (Unlicensed)
6 min read

Congratulations you are ready for writing you first app.
If you plan on writing your own apps first off make sure you enabled the Developer Mode. They are located in the Central Core Settings. Otherwise you can download an app from the App Store.

 

This article will show you how to create a basic app and make it run.

Step 1 - Creating the App

In step 1 we will create our first app, while focusing on interface objects first, while we add hardware object in step 2. So if you are already familiar with building a basic interface app skip this step

Navigate to the Apps View and press “Create New” and call it “First App”.

We will create a simple App with a Button and an LED. This app is also available in the store as the “Button and Led” App.LED

Search for “Button” in the top left hand corner of the App Builder and drag the Interface button onto the canvas. Make sure the color of that object is green, as that represents graphical objects.

Afterwards search for “Color Picker” and drag it onto the canvas.

Now create a link between the Button State and the Color Picker by clicking the square next to State on the Button and dragging it to the square next to Color on the Color Picker.
The Button is a digital signal that only switches between 0 and 1, but there are many colors in RGB. This is where the auto conversion comes in. It is built into the runtime and will convert 0 into #000000 and 1 into #FFFFFF in this case.

Your app builder should look like this:

Go ahead and save the app now and click Return to My Apps. You should now see First App, which is currently stopped in a List.

You can now press the Play button to start the app. This will open up the hardware mapping dialog, which is empty for now, since we haven't added any hardware yet, so just confirm by pressing Save + Run.

The app state should now show “Running”.

Click the Dashboard Icon in the top right corner. This will open another tab with the dashboard view. The First App should be available for selection here.

Click on First App. You should see an interface like this:

When you click on the Button, you should see the Color Picker change color from #000000 to #FFFFFF.
If you made it this far, you just created your first app. Easy right? Lets go ahead and add some actual hardware in the next step.

Step 2 - Add Hardware

Since the Quantum Platform is really about hardware, lets add some. In this step we will go ahead and connect a button and LED to a Builder Base and replicate the same behavior in the dashboard in the same way in hardware.

For this step you’ll need the following parts:

  • Breadboard

  • Button

  • LED

  • Builder Base

  • Jumper Wires

Below you see the wiring diagram used in this app. The LED will be connected to GP1, while the Button will be connected to GP0.

 

Since the hardware is assembled now, we need to create a representation of this in the app. Go ahead and edit the current First App.

Search for Button and add the Hardware variant to the canvas.

Now go ahead and do the same thing for the LED.

After both hardware objects are in the canvas we have to connect these in a way, that the hardware responds to dashboard and vise versa. In order to do so connect the State of the hardware button to the hardware led and the color of the interface color picker. Following this connect the interface button to the hardware led.

The app should look like this now:

Save the app and exit the app builder.

Step 3 - Create & Flash Firmware

We are almost there. We wrote the app and connected the hardware components to the Builder Base. Now we have to create and flash a firmware, that represents the hardware components and wiring onto the Builder Base.

Navigate to the Firmware view and create a new firmware.

Now we add a Button, which will represent the hardware button. Search for the Button and name it Button. Open up the configuration of the Button by clicking the arrow at the end of the item.
Select the following values:

  • Driver: GPIO

  • Pin: GP0

  • Debounce: Enabled

  • Pin Mode: Input Pull Down ( We pull down the 3.3V, when pressing the Button).

For the LED add a LED hardware and call it LED. Select the following values:

  • Driver: GPIO

  • Pin: GP1

  • Mode: Initially Low ( We want the LED to be initially off)

Save the firmware.

Power on the Builder Base and wait for it to be connected. From the Actions of the First Firmware select Upload and select the Builder Base you connected the button and led to. Click upload and wait for the process to finish.

 

 

Step 4 - Map hardware to app

You are almost there. There is just one last step, which involves you mapping hardware in the app to physical hardware connected to the Builder Base.

Navigate to the Apps view and attempt to start your application. Notice the two red triangles making you aware of unmapped hardware. Every item in that list represents hardware objects in your application. You are not forced to map these hardware objects, they will simply do nothing in the app, when it is running.

Map the led and button to the corresponding hardware on your Builder Base.

Hit Save + Run and test your application.

You should be able to turn on the hardware led with the button on your breadboard as well as with the button in the dashboard. When you press the hardware button the color picker on the dashboard should turn white and your hardware led should turn on.