1. Home
  2. Docs
  3. Demos
  4. Remote TCP-IP Display for Raspberry Pi

Remote TCP-IP Display for Raspberry Pi

How to monitor temperature on the Raspberry Pi and visualize the results on a remote TCP-IP display and OKdo Cloud.

Introduction

When you’re discussing the topic of creating a new product, an unavoidable topic is the Time to Market period. Today’s consumer electronics market demands it to be the shortest possible and due to that fact, many hardware and software manufacturers are choosing “ready-made tools” which can speed up the whole process. There is no modern startup business plan in which minimum viable product (MVP) is not the one of the most important topics and represents the first step to the final and successful product – so it is important to say that ready-made tools and solutions can significantly decrease time to achieve that so important milestone. 

This article will introduce you to the Riverdi IoT Display, as representative example of the “ready-made solution”, through step by step instructions on how to make a demo application named Remote TCP-IP display for Raspberry Pi 

While we are proving the title of “representative example” through the instructions you will be also introduced to some features of the module which might give you a resolution to some questions related to design and development of this type of products or even more – an idea how they can be used inside your existing product. 

Remote TCP-IP Display system architecture

The aim of this demo project is to design and implement a system where the Riverdi IoT Display will be used as a central unit of the system which collects data from the cloud and displays it on the screen. Communication with the Cloud platform will be established using Wi-Fi connection and TPC-IP protocol. The Raspberry Pi, as another system unit, will supply the Cloud with the data – in this case we will send information about current system status including CPU temperature and CPU usage. As the Cloud platform we will use OKdo Cloud, but it is important to say that any other can be used as well. 

 We will also provide instructions on how you can visualize the data on the OKdo cloud. 

The whole system should be easily integrated into the usual living environment, so we are assuming that you already have a Wi-Fi router with Internet access. 

The implementation will start with the OKdo Cloud and the creation of the account and preparation to receive data by creating the keys. Then we will go to the Raspberry Pi where we will try to supply the Cloud with local measurements using the node.js framework. Finally, we will go to the Riverdi IoT Display where we will establish a connection with the Wi-Fi router, and then establish the communication with the Cloud platform. In the end we will visualize data that we got from the Cloud. 

Getting started with Riverdi IoT Display

The main and most important component of the demo application, from our POW and the POW of an embedded developer, is the Riverdi IoT DisplaySo, let’s just go through most important features of the display. 

The Riverdi IoT Display carries an 800×480 resolution display, 5″ diagonal, capable of presenting 16.7M colors, which is more than enough for the purpose of an IoT Display. The display is driven by Bridgetek’s BT815 graphic controllerThe customer has a choice to select between a capacitive and resistive touchscreen sensor. The board also carries additional mikroBUS expansion sockets allowing you to easily extend the functionality of the board. The heart of the board is the well known Espressif’s ESP32 SOC, popular among the embedded population of any kind – hobbyists, professionals, beginners. The board can be power supplied through USB connector, which is also used for programming of the ESP32. There is also standard 5V battery connector 

It is important is to say, that the display is ready to be mounted on a wall straight from the box. Be it with mounting holes or already placed sticky area, it proves the “ready-made” solution concept from the beginning and allowes you to mainly focus on software development. 

On another note related to software development – the developer has a wide spread of choices. When talking about programming languages – you can choose between: C, Python, Lua, JavaScript or even Ruby. The number of frameworks usable on this board is permanently increasing, the most famous ones are Espruino (Node.js) and NodeMCU (Lua), but our favorite is, for sure, Zerynth (Python). Thanks to Riverdi’s partnership with Zerynth, the display has a pre-loaded Zerynth Studio license, so that you can start working with the module right after getting it outside of the package. 

OKdo cloud platform

The first step in this section as part of prerequisites is to create account on the OKdo cloud – so go to OKdo and sing up. 

After you login go to the “Playground” what we must do is to create two devices. The first device will be used to supply data from the Raspberry Pi and second device will be used to read data using Riverdi IoT Display. 

So, let’s first create the “Raspberry Pi” device by selecting box with the same name and providing the exact “Raspberry Pi” as a name for the device. After that, the new device with the name you have provided during creation will appear in the top left corner next to the side bar. 

Each device can have more assets. For this purpose, we will provide the CPU temperature and CPU load as measurements to the Cloud. So, let’s create two assets for the Raspberry Pi device, both of sensor type where the first one will be named cpu_temperature and second cpu_load. 

Now let’s create the second device by selecting “Your own device” box from the list and providing “Riverdi IoT Display” as the device name. Compared to first case, we will create two assets of actuator type but keeping the names for assets as for the previous device. As a result, we have two devices now with the same asset names but different types of assets. 

As the final step in the setup, we should create a rule that will create mirror between these two devices 

Go back to the “Playground” dashboard and click RULES button on the side menu. Then click NEW RULE button and drag and drop “Raspberry Pi” device to TRIGGERS and select cpu_load assets checkbox. Then drag and drop the Riverdi IOT Device to the ACTIONS and select the same assets checkbox. What this means is that on each change of the cpu_load asset value on the Raspberry Pi device, the value will be copied to the cpu_load asset of the Riverdi IoT Display device. Now create a new rule for the cpu_temprature asset. 

When we have finished the setup, we can check which ID and Token is generated by the platform for both devices. Click the SETTINGS button on the top right corner, then go to the AUTHENTICATION tab and there you will find the keys which are in relation to our device and which should be provided by the Raspberry Pi and Riverdi IoT Display applications. 

You can continue exploring other options on the OKdo but for us this is enough to establish a connection between Raspberry Pi and OKdo. 

Raspberry Pi application implementation

The prerequisite for this section is that you have your Raspberry Pi connected to the Internet and we will not explain that topic. We have chosen NodeJS framework for the application on this device because of the simplicity and already existing libraries for this purpose.  

So, let’s install node.js via apt-get from command line., also we will install npm package manager needed later. 

Copy to Clipboard

Now let’s install a package named allthingstalk via npm package manager. We need it because it carries libraries including mqtt which allowing us to send data to the Okdo with just few lines of code. We will also need module named systeminformation capable of reading current system status parameters. 

Copy to Clipboard

Now when we installed all the necessary packets, let’s create some simple JavaScript script which will read the current CPU load and temperature. For that purpose, we will need the keys mentioned in the previous section. The script implementation might look like this: 

Copy to Clipboard

You should replace generic device credentials provided inside this code with ones which are generated for your device and that’s it. Now let run the script using NodeJS. 

Copy to Clipboard

What you can expect after doing this is that data on the OKdo will be updated after few seconds and will be refreshed each 4 seconds as we configured in the script. 

Riverdi IoT Display application

As we said during the introduction section – for the implementation of the Riverdi IoT Display application we will use the Python programming language and Zerynth framework. We will assume that you already downloaded and installed Zerynth Studio. Inot, you can download it and follow installation guide which is straight forward, so there should be no problem during the setup. It is important to say that Zerynth is available for all the major operating systems (Windows, MacOS and Linux). 

Wi-Fi Connection Implementation

As a starting point for development, but also as validation that you have properly installed the Zerynth Studiand have all necessary libraries, we will use DisplayNetworks example project. Open it inside you project download to the ESP32 and you should see all available networks. 

While watching the source code of this example you can conclude that lot of steps is already implemented and handled by Zerynth framework. We need just few function calls from here to establish connection with the Wi-Fi router. So, let’s take only the code related to connection to the local network and place it in separated function. Also, we will create two variables for SSID and Password and remove all stuff which is not needed. 

main.py

Copy to Clipboard

Alongside with that we will create another function which prints current network parameters below this function. 

main.py

Copy to Clipboard

And finally let’s test all of this at the bottom of the main.py, we will also add a small delay just to be sure that connection is established. 

main.py

Copy to Clipboard

Once we established a connection to the Wi-Fi, we are ready for next step.

OKdo Cloud Connection Implementation

The Zerynth framework already has implemented support for this topic. The implementation will not be more complex than the previous section so let’s import Ioand mqtt modules from the OKdo. 

main.py 

Copy to Clipboard

The next thing we need are two variables to store device credentials, similar as in case of Raspberry Pi application. And we will also need two more variables to store measurements received from the Cloud – in this particular case, CPU load and temperature – so let’s add them to the “Variables section” a handler which will be executed each time data from cloud is received. We will add it to the “Functions” section. Don’t forget to replace the generic device ID and the token provided in this code. 

main.py

Copy to Clipboard

Two callback functions are needed to handle received data – one for cpu_temperature and other one for cpu_load so let’s add them to the “Functions” section. Let’s print what we are receiving just until we setup display. 

main.py

Copy to Clipboard

And finally, we should initialize and connect to the platform using two already mentioned variables which carries Device ID and Device TokenAlso, callbacks should be registered with appropriate reference string. Let’s add that code to the “Program” section inside our file. 

main.py

Copy to Clipboard

Riverdi IoT Display GUI

Finally, only the GUI remains to be made, to complete our remote display. Zerynth already have libraries capable to handle the .png images so there will be no boring conversions. Once you find images which might be appropriate as icons for the main screen, we can start adding the stuff. 

First, let’s import necessary modules to the “Modules” section. 

main.py

Copy to Clipboard

We will use the spinner function to inform the user about theongoing operations. Alongside it, we will create a function that displays the main screen too, with an additional icon. Let’s add them to the “Function” section and stuff related to the icon to the “Variables section”.

main.py 

Copy to Clipboard

And as the final step lets add all the necessary code, like initialization of the graphics controller and displaying of the spinner and main screen to the “Program” section. Inside an infinite loop we will add a condition which says – update the display only in the case when the values for the load or temperature have changed. 

main.py

Copy to Clipboard

After downloading this program to the ESP32 you will be able to read the temperature and the load of the Raspberry Pi CPU on your Riverdi IoT Display from any place covered by a Wi-Fi connection. 

Summary

With less than 100 lines of code on both sides (Raspberry Pi and Riverdy) and less than 1 hour spent, we have something which is a great start point for creating an impressive product. Visit our repository on GitHub for the complete code.  

The CPU load and temperature are not something which you want to monitor on the wall inside your living room – but you can always place a real temperature sensor to your Raspberry Pi or even better use some cheaper module with sensor capable to connect to WiFi to supply the Cloud with data. Also, you can create some fancy GUI which has configurable Wi-Fi SSID and password, use some nice icons, etc. – there is space for improvements for sure. 

We hope that we have achieved the aim of this article and gave you a fast introduction to Riverdi IoT Display but also an idea of how “ready-made” products like this can affect your development and business. 

Was this article helpful to you? Yes 1 No

How can we help?