Torizon 4.0.0

Introduction

Using the Visual Studio Extension for Torizon and Visual Studio 2019 it is easy to set up a highly productive developer workflow for creating Torizon based apps. To demonstrate this, this article will:

• Demonstrate, through an example, how to use the Visual Studio Extension for Torizon:
  • Setup your source code.
  • Configure project and Torizon options.
  • Orchestrate container bring-up with docker-compose.

Note: the example-specific information is presented at the end of the article on Example: Weatherboard with InfluxDB, Grafana and OpenWeatherMap

This article complies to the Typographic Conventions for Torizon Documentation.

Prerequisites

• Using Multiple Containers with TorizonCore.
• How to do C/C++ Development on Torizon.
• Visual Studio Extension For Torizon.
• A Git client for Windows installed in your development PC.
• (optional) basic knowledge of PowerShell.
• An account on openweathermap.org - you can choose the free plan for this demonstration.
  • The API key for your account.

How to Debug C/C++ Applications on Visual Studio with Torizon Extension

To begin, see here a short video showing how easy is to debug C/C++ applications on Torizon devices using Torizon Extension with Visual Studio:

Then, let's go with our step-by-step guide with our sample application.

Set up the Source Code

Create a new project using Visual Studio 2019.

Clone the Torizon samples and the InfluxDB C++ API repositories to your PC. Open a PowerShell and run:

$ git clone https://github.com/toradex/torizon-samples.git
$ git clone https://github.com/awegrzyn/influxdb-cxx.git

Add the contents from Torizon samples to your project:

• Copy the contents from torizon-samples\weather\src\ to your project folder - you can use the Windows File Explorer to do it.
• Click Project > Add Existing Item, then add get-owm.cpp, weather.cpp and the headers from the include folder.
• Delete main.cpp from Solution Explorer (you can choose Delete, not just Remove).
• Rename weather.cpp to main.cpp.

Add the contents from the InfluxDB C++ API to your project:

• Copy the entire InfluxDB C++ API folder, influxdb-cxx inside your project folder - you can use the Windows File Explorer to do it.
• Click Project > Add Existing Item, then add the contents from the influxdb-cxx\src and influxdb-cxx\include folder.

Attention: before proceeding, you may add your OpenWeatherMap API key to the example. See how to do it on How to Use the Example - Configure OpenWeatherMap.

Set the Project Properties

With the WeatherSample project selected on Solution Explorer, click Project > Properties to edit the project level properties:

• Include the example and the InfluxDB C++ API header files:
  • Go to Configuration Properties > C/C++ > General, then edit the Additional Include Directories to include the include and the influxdb-cxx\include folders.

• 

  Additional Include Directories

• Change the C++ language to v17:
  • Expand Configuration Properties > C/C++ > Language and change the C++ Language Standard to C++17 (-std=c++17). This specific C++ version is required for libraries in this example - your own project may require a different version of C/C++.

• 

  Changing C++ Language Standard

• Include additional libraries. To do so, expand Configuration Properties > Linker > Input. In our example, add the following value on Library Dependencies:

curl;pthread;boost_system;jsoncpp

• 

  Adding libraries

Click on Apply --> Ok to close the Property Pages.

Set the Torizon Application Properties

The Torizon Visual Studio Development Tools Extension creates a new property window in any Torizon C/C++ Application project. To open that window, click Project > WeatherSample > Properties... item and select the Torizon C/C++ Aplication node. Be sure that All Configurations and All Platforms are selected at the top of the Property Pages window:

• 

  Torizon C/C++ Application Properties

Now drop down the value next to Configuration in the main panel, and click <Properties...>. This window allows you to configure the values that are ultimately passed to Docker to manage various aspects of the containers that will be built as part of the project. At the top, the Username should be set to the default (torizon) and the Configuration should be Common.

• 

  Configuring the project

Development Packages

You can install development packages in the container that runs on the development PC to cross-build the application for the Toradex board (target device):

• On Visual Studio, find the devpackages row and click on Edit....
• Add the development packages according to the architecture of your target.
  • For our example, select your architecture from the tabs below and add the packages listed to devpackages:

• arm32v7
• arm64v8

libcurl4-openssl-dev:armhf libboost1.67-dev:armhf libboost-system1.67-dev:armhf libboost-test1.67-dev:armhf libboost-program-options1.67-dev:armhf libjsoncpp-dev:armhf

libcurl4-openssl-dev:arm64 libboost1.67-dev:arm64 libboost-system1.67-dev:arm64 libboost-test1.67-dev:arm64 libboost-program-options1.67-dev:arm64 libjsoncpp-dev:arm64

Extra Packages

You can install extra packages to be included in your application container that runs on the target:

• On Visual Studio, find the extrapackages row and click on Edit....
• Add the extra packages. You don't have to worry about architecture, as long as the packages are actually available for your architecture on Debian feeds.
  • For our example, add the packages listed below to extrapackages:

libcurl4 libboost-system1.67.0 libjsoncpp1

• 

  Extra Packages

Container Networking

You can configure the container networking. To add/edit the values in the bottom section of the property window, simply click the ... button, then click New in the popup, and enter the value on the new row. For our example, add the following new value for the Networks: setting in the property window:

#%application.id%#_backend

• 

  Torizon network configuration

Multi-container: Docker Compose

To orchestrate the containers bring-up, set up a docker-compose file. Click the "..." button next to Docker-compose script: and save it with the filename: docker-compose.yml.

docker-compose.yml

• 

  Torizon Docker-compose script

In the toolbar at the top of Solution Explorer, toggle the button to Show All Files if it is not already enabled. You will now see a folder in Solution Explorer named appconfig_0. Expand that folder and open the docker-compose.yml file:

For our application, we'll need a total of 3 containers:

• One container for our application code: the Torizon Visual Studio Development Tools Extension will manage that one during development.
• One container for Grafana and another for InfluxDB: we'll set those up in our docker-compose.yml file.

We'll also declare the networks and volumes we need, link the containers, and expose Grafana on port 3000.

 docker-compose.yml
version: '2.4'
services:
    grafana:
        container_name: grafana
        depends_on:
            - influxdb
        networks:
            - backend
            - frontend
        volumes:
            - "grafana-storage:/var/lib/grafana"
        ports:
            - "3000:3000"
        links:
            - influxdb
        image: grafana/grafana:6.7.1

    influxdb:
        container_name: influxdb
        networks:
            - backend
        volumes:
            - "influxdb-grafana:/var/lib/influxdb"
        image: influxdb:1.7.10

networks:
  backend:
    internal: true
  frontend:   
    internal: false

volumes:
  grafana-storage:
  influxdb-grafana:

Build, Deploy and Debug

Follow the steps from the article Visual Studio Extension for Torizon - Deploy and Debug

This is it, now you have a broader understanding of how to develop a C++ application for Torizon using Toradex's Visual Studio extension.

Example: Weatherboard with InfluxDB, Grafana, and OpenWeatherMap

This section goes through aspects specific to the example, that are not applicable to other projects using the Visual Studio extension.

Briefing

There are many weather APIs available, our sample uses the OpenWeatherMap’s current weather and 5-day forecast APIs.

Current weather is displayed in Grafana using the singlestat widget and the forecast is displayed using graphs.

The current weather is fetched twice every minute and the forecast is fetched only once on application start. The Forecast API provides datapoints at 3hr intervals. Forecast graphs are available for Temperature, Humidity, and Pressure at the moment, although the API provides access to much more data.

Connection Error

One of the first things our sample code does is to create the InfluxDB database. However, it's possible that this line of code runs before InfluxDB is actually up and running.

By default, the sample code performs 45 retries, 1 second apart, waiting for the DB to be available. If this is not long enough, you can change the value: int retries = 45;

How to Use the Example - Configure OpenWeatherMap

The Openweather API key is referred to as appid in the requests.

You'll need to update the API key in the demo code. This value is currently hardcoded and needs to be replaced at the following functions:

• getowmforecast.setApiKey();
• getowmcurrent.setApiKey();

You can also modify the geographic coordinates you want to receive the data by modifying the functions:

• getowmforecast.setCity();
• getowmcurrent.setCity();

How to Use the Example - Configure Grafana

Follow the instructions provided on Using Multiple Containers with TorizonCore - How to Use the Example - Configure Grafana. As you follow the steps:

• Change the database name from collectd to Weather, which is the database name used in the current example.
• Instead of creating your own dashboard, you can import the Weather-<timestamp>.json from the sample directory:
  • Go to the Dashboards menu and select Manage.
  • Click Import --> Upload and browse for the Weather-<timestamp>.json file from the weather sample directory.
  • Under Options, enter Weather in the Name field and click import. The Dashboard is now ready.