Getting Started with PSoC 6 Wi-Fi BT Proto

This guide teaches you how to get started using the PSoC 6 Wi-Fi BT Proto with Atmosphere. This includes creating your first project, programming the project’s firmware into the PSoC 6 Wi-Fi BT Proto, registering the device to Atmosphere, and having its data displayed on a dashboard.

In the guide you’ll build a simple project that reads temperature data, displays that data on the mobile app, and then sends the readings to the cloud using Wi-Fi.

Prerequisite: You should already have an Atmosphere account.

Hardware Requirements

Prior to using the PSoC 6 Wi-Fi BT Proto, ensure it has the latest Arm Mbed DAPLink interface firmware installed. If its native firmware isn't updated, it's possible the board won't mount as a drive while plugged into your computer. Visit the Arm Mbed PSoC 6 Resources page for the latest board setup instructions.

Software Requirements

  • Atmosphere IoT Agent. The Atmosphere IoT Agent is a local application that runs in the system tray and acts as an intermediary between the computer’s connectivity protocol drivers and the browser running Atmosphere, and is used here to assist in programming the device and connecting it to Atmosphere. While the agent is running, a device with Atmosphere firmware installed on it can be registered to Atmosphere directly without the assistance from an additional connection like BLE or Wi-Fi if it’s connected to your computer. You can download the Atmosphere IoT Agent from its downloads page.
  • Atmosphere IoT app. The mobile app is used here to register your device, and display and run the project’s interface. You can download the Atmosphere IoT app from its downloads page or through the Apple App Store or Google Play Store.
  • Ensure Bluetooth is enabled on the mobile device you’ll use to interact with the PSoC 6 Wi-Fi BT Proto.

Step 1 of 8: Create a New Project

Navigate to Atmosphere Studio from the side menu. When you visit Studio for the first time in a session, you are brought to the Studio Projects screen.

  1. Click the New Project button. This displays a New Project window.
  2. Select the PSoC 6 Wi-Fi BT Proto project type and give the project a name, then click Create.

This opens a new project in Studio.

This guide walks through the step-by-step process to perform actions in Studio, but doesn't cover the in-depth aspects of Studio itself. To learn more about using Studio, its areas and features, and Studio elements, visit the Atmosphere Studio section.

Step 2 of 8: Create the Project’s Embedded Firmware

The first aspect of building this sample project is adding elements to the Embedded tab to create the project’s embedded firmware. This involves setting an interval to read embedded data, and to tell the interval to read the board’s thermistor.

  1. Add the following elements to the canvas by clicking them in the Element Toolbox:
    • Interval Element Interval element: The interval element sets the project to run at the time set in the element’s properties, which by default is set to once per second (1000 ms).
    • NTC Thermistor Element NTC thermistor element: The NTC thermistor element calculates the temperature value from the onboard thermistor.

      Both of these elements will work as intended by default, so none of their properties need to be changed.
  2. Connect the interval element to the NTC thermistor element. This creates an event between them, which can be seen in either the interval element’s properties, or by clicking the connector’s Configuration Button button. The event added is within the Interval trigger. In the NTC thermistor element’s ability field within the event, set the ability to Read Temperature (°C). This means that when the interval element is triggered (which is every second), it will read the temperature value from the thermistor.
  3. Add a BLE Characteristic Element BLE characteristic element to the canvas. This element creates a GATT characteristic to use in your project, and is a coupled element that bridges the project between the Embedded tab and Application tab, meaning it’s included on both tabs. In each BLE characteristic element’s properties, change the Read Data Type and Write Data Type fields to Floating Point (32-bit). This allows the element to read and write floating point values, which is the temperature value that will eventually be sent through it.
  4. Connect the NTC thermistor element to the BLE characteristic element, which ties the value of the temperature sensor to the Application tab. This creates an event between the two elements in the Temperature Read trigger, with the ability Set Value. This sets a value for the project’s interface after it reads the temperature data.

That wraps up the first aspect of the project within the Embedded tab. To this point, an interval has been set that will run once per second after the project opens, and when run will read the temperature value from the board’s thermistor. That data will then be sent from the BLE characteristic element to the mobile app via the Application tab.

The Embedded tab canvas should resemble the following image:

PSoC 6 Guide Embedded Tab

Step 3 of 8: Create the Project’s Interface

The second aspect of building this sample project is adding elements to the Application tab to create the project’s visual component. Here we’ll create a basic interface, pairing the temperature value sent from the Embedded tab with a label element to display the data on a label inside the mobile app.

Click the Application tab to move to the application area of the project. Notice how the Element Toolbox has changed, and that the coupled BLE characteristic element is displayed on the canvas.

  1. Click the App Builder button in the Application tab’s toolbar to display the app builder. This area creates the visual interface for your project. By default this uses the smallest display size supported for an interface (320x560), but you can add an interface size by clicking the add display button. Use the display size that fits best with your mobile device.
  2. Add an Interval Element interval element to the canvas, and connect it to both of the BLE characteristic elements. Within the interval element’s trigger properties, set each BLE characteristic’s event ability to Read under the Interval trigger, which reads the value of the BLE characteristic element sent from the Embedded tab every time the interval triggers.
  3. Add a Label Element label element to the canvas. The label element displays text on a project’s interface. Notice when the label is added to the canvas, a corresponding interface component is added to the app builder. The label component can be moved around on the interface wherever you like.
  4. Connect the BLE characteristic element to the label element. This creates an event between the two elements of Set Text under the Read trigger, which sets the text to the value of the label when the BLE characteristic is read. This correlates the set value from the BLE characteristic element in the Embedded tab to the label on the interface. Within the Set Text event, modify the Text field to "Temperature:" + readData.toFixed(2). This argument reads the temperature data and truncates the value to two decimal places.

This is all that needs to be done for the project’s interface, simply using a label to display a text value. To this point, an interval has been set that will read the BLE characteristic value once per second, which will display the read temperature value on the interface label.

The Application tab’s canvas should resemble the following image:

PSoC 6 Guide Application Canvas

Step 4 of 8: Enable the Project’s Cloud Connectivity

The last aspect of building this sample project is enabling it for cloud connectivity. This is done on both the Embedded and Cloud tabs.

  1. Return to the Embedded tab, and add a Cloud Event Element cloud event element to the canvas. The cloud event element is a coupled element between the Embedded and Cloud tabs that enables a project’s data to be sent to Atmosphere.
  2. Connect the NTC thermistor element to the cloud event element. This adds the Send Event event to the Temperature Read trigger, which sends the temperature data to Atmosphere when the temperature is read.
  3. Click the Cloud tab to move to the cloud area of the project. Notice how the Element Toolbox has changed, and that the coupled cloud event elements are displayed on the canvas.
  4. Add a Cloud Storage Element cloud storage element to the canvas, and connect the cloud event element to it. By default, this creates an event using the Add Data ability within the cloud event’s Event Received trigger, which allows Atmosphere to add (and store) data sent to it from the connected cloud event element.

That’s all for creating the project! With the added cloud connectivity, the project will send the temperature value from the Embedded tab to the Application tab to have the data displayed on the mobile app through a label, and also uses a cloud event to send the data from the Embedded tab to the Cloud tab, where it’s connected to a cloud storage element to store the data on Atmosphere.

The final canvas for each tab should resemble the following images:

Embedded Application Cloud
PSoC 6 Guide Embedded Tab PSoC 6 Guide Application Tab PSoC 6 Guide Cloud Tab

Step 5 of 8: Compile the Project

Once the project is finished, it needs to be compiled. Compiling readies the entire project’s source code for deployment.

  1. From any tab, click the Compile button in the project options menu on the top-right of the screen. You’ll see a loading message on the screen indicating compiling has started, and will receive a notification when the project is compiled.

Step 6 of 8: Program Firmware into the Device

With the project compiled, your PSoC 6 Wi-Fi BT Proto can be programmed with the project’s embedded firmware.

Prior to programming a PSoC 6 Wi-Fi BT Proto, ensure you have the following setup configuration:

  • The PSoC 6 Wi-Fi BT Proto is powered on and connected to the computer via its program/debug USB connector (J8).
  • The Atmosphere IoT Agent is installed on the computer and running.
  • An Internet connection is maintained.
  • The project to be programmed has been compiled.

With setup complete, you can program your board:

  1. While the Embedded tab is active, click the Program Firmware button from the tab’s toolbar. This displays the Program Firmware window.
  2. Click Program to start programming. You’ll receive a notification once the device is successfully programmed.

When complete, the PSoC 6 Wi-Fi BT Proto is programmed with the project’s embedded firmware. Then press the board’s reset button to start your application.

Step 7 of 8: Register the Device

With firmware installed, the device can now be recognized and connected to Atmosphere. From here, open the Atmosphere IoT app on your mobile device. We’ll use the mobile app to both register the device, and eventually view the label data on the project’s interface.

To register the PSoC 6 Wi-Fi BT Proto:

  1. Navigate to the Devices area, and click the Register Device button in the top-right of the screen to display the Add Device window. When the window opens it automatically starts scanning for available devices within range.
    • Ensure your PSoC 6 Wi-Fi BT Proto is within range from the mobile device you are attempting to register from, otherwise it may not appear.
  2. The list of available devices appears. Select your PSoC 6 Wi-Fi BT Proto you just programmed and it will connect to Atmosphere. This brings you to the Wi-Fi settings screen.
  3. Configure your Wi-Fi network settings to connect the device. When Wi-Fi settings are entered, the PSoC 6 Wi-Fi BT Proto will connect to Atmosphere over Wi-Fi and remain connected as long as the Wi-Fi connection is maintained.

The device is now registered to Atmosphere and added to the Devices area. The app interface you created is displayed on the screen, with the temperature data immediately shown on it.

Step 8 of 8: View Device Data

Now that the device’s data is sent to Atmosphere, let’s view it through one of the many dashboard widgets available. In this guide we’ll use a data graph widget to chart the temperature data.

We’ll do this back on the platform on your computer directly on the device’s console page, so click on the newly-added PSoC 6 Wi-Fi BT Proto to enter its console.

  1. To add a widget to the device’s dashboard, click the Configuration button on the right side of the screen. This displays the menu of available widgets. Select the Data Graph data graph widget to add a data graph to the dashboard.
  2. Once on the dashboard, click the widget’s Menu menu icon to display its menu, then click Settings.
  3. Give the data graph a name (such as “Temperature Data”), then in its Data Source field click Select and choose the following configuration options for the widget:
    • Cloud Storage: Select the cloud storage (TemperatureStorage, or whatever you named your cloud storage) that is storing the temperature data.
    • X-axis Value: Select the timestamp to go along the graph’s x-axis.
    • Y-axis Value: Select the temperature’s dataset to go up the graph’s y-axis (Value, unless you provided a custom label for the cloud event data).
  4. When finished click Save. This populates the data graph plotting the temperature value as time progresses. If you’d like to adjust the graph’s timeline,bounds, or colors, you can edit those properties from the data graph’s menu as well.

PSoC 6 Wi-Fi BT Proto Demo Dashboard

Congratulations, you just finished a complete PSoC 6 Wi-Fi BT Proto project with Atmosphere!