Make a web frame with Raspberry Pi in 30 minutes

Nov 23, 2018 | openfundportfolio

Build a web frame in 30 minutes for family pictures, business dashboards, or anything else with a URL

Try our simple balenaCloud starter project to set up a Raspberry Pi and LCD or monitor to display any webpage or web-based dashboard. We’re creatively calling it balenaDash! Follow along with our guide to get up and running in under 30 minutes.

Introduction

This is the perfect introductory project to try out balenaCloud and see how everything works.

At the most basic level, this project allows you to display any webpage using a lightweight web browser. This means that you can build a device dedicated to showing anything that runs in a normal web browser, it will boot up and automatically start displaying what you choose.

Some examples of what you could use this for include:

By the end of this guide you’ll hopefully have a good taste of what our platform can do to take forward into your own projects, and as a nice bonus, have a cool dashboard display too.

Hardware required

We’ve partnered with our friends at PiSupply to make it easy for you to get ahold of all the hardware you need to build this project in a single package. We’ve created two packages, one that includes everything you’ll need, and a second that includes everything apart from the display for if you’ve already got a monitor you want to use.

The list of items you’ll need is also included below:

  • Raspberry Pi 3B
  • 16GB Micro-SD Card (we recommend Sandisk Extreme Pro SD cards)
  • Display (any Raspberry Pi display will work for this project)
  • Micro-USB cable
  • Power supply
  • Case (optional)

Setup of balenaCloud

We decided to make this project super simple to get you up and running quickly. It does however form an excellent basis for you to then progress on to developing your own projects.

Step 1 – Sign up to balenaCloud

The first thing you’ll need to do sign up for an account on our platform. If you’ve already got a Github or Google account you can use that to login and bypass the signup process.

Sign up here

balenaCloud is a platform for IoT development, built by the same team that brought you balenaEtcher, to provide the infrastructure to make developing, deploying, monitoring and maintaining IoT devices as easy as pushing the latest code to Git. The platform is forever free and fully featured for anyone running 10 devices or less, so perfect for a lot of small projects and for initial prototyping ideas for future products.

If you’re interested to dive deeper and find out more, take a look at our documentation, otherwise, lets go onward to setting up the project and taking a look at how it works in practise.

Step 2 – Create an application

This will take you to the dashboard for your newly created application, where you can move on to the next step and add your first device. The balenaCloud dashboard allows for the management of an entire fleet of devices from one central point.

Step 3 – Add a device and download balenaOS

Once your application has been created, we can setup and add a device within that application. When you add a device you specify your device type, which in this case is a Raspberry Pi 3, and if you are connecting to a wireless network you can set your WiFI SSID and passphrase here too.

This process creates a customized balenaOS image, configured for your application, device type and includes your network settings if you specified them.

Note: When you’re first getting started, a Development image will be most useful, as it permits a number of testing and troubleshooting features. For production use, be sure to switch to a Production image. More details on the differences between Development and Production images can be found https://www.balena.io/docs/understanding/understanding-devices/2.0.0/#dev-vs-prod-images.

Step 4 – Flash your SD card and boot the device

Once the balenaOS image has been downloaded, it’s time to flash your SD card.

Once the flashing process has completed, insert your SD card into the Raspberry Pi and power on!

When the device boots for the first time, it connects to the dashboard, after which you’ll be able to see it listed as online and move onto the next step.

It should only take a few minutes for the new device to appear in your dashboard, If your device still hasn’t shown up on your dashboard after a few minutes, something has gone wrong. We have an extensive troubleshooting guide with lots of information on why this could be, but if you still can’t get your device online, come on over to the forums where we’ll be able to help out.

Assembling the display and case

Once you’ve got your Raspberry Pi booted and appearing in the balenaCloud dashboard, it’s time to assemble it into the case with the display. It’s difficult to access the SD card once in the case so it’s good to make sure you’re up and running and don’t need to disassemble it again before putting everything together.

There are a few connections to make from the display controller board to the Raspberry Pi. These comprise of a flat/ribbon cable for the video signal, and additional connections to the GPIO header port for power and communication for the touchscreen.
First, release the ribbon cable connect by pulling the black latch on the connector away from the board. Insert the ribbon cable, ensuring the orientation of the cable is such that the exposed contacts on the cable will connect with those in the socket, and push the latch back, being careful to maintain even pressure on both sides as you do so. Be careful not to force anything, if the cable and latch don’t insert or close easily, remove them and try again; these connectors are delicate and easily damaged.

Next, make the connections to the header pins for the GPIO connections. We’d recommend following the colour convention used, i.e. red for +5V and black for ground, as it helps to reduce the chances of accidentally making the wrong connections and damaging your components.

Once you’ve made the required connections to the display controller board, it’s time to mount the Raspberry Pi to the 4 standoff posts and make the other end of the connections. The display comes with the 4 screws required to do this.

The ribbon cable for the display connects to the port on the Raspberry Pi marked Display. The latch on this connector operates in the same way as that on the display controller board.

Next, make the connections to the GPIO header, again being careful to ensure the connections are correct at both ends to avoid damage to either board.

LCD Pin Pi GPIO pin Colour
Power (Vcc 5V) 2 Red
Ground (GND) 6 Black
SDA 3 Green
SCL 5 Yellow

The back of the case can then be installed, mounting it to the display with the 4 screws provided. The back cover is then replaced and we can power up!

Depending on your display, you may find that initially the output is upside down. We can easily rotate the output using a custom fleet configuration variable within balenaCloud.

Configuration variables within balenaCloud can be applied at an application level, meaning that they apply to all devices in that fleet, or can be applied on a per-device basis. As we’re only running a single device in this application right now, and we don’t know if future devices will require the same configuration, it makes sense to apply this at the device level.

From the application dashboard, navigate to the device page by clicking on the device name. Then, in the left-hand menu, click device configuration:

Scrolling to the bottom of this page gives you the option to add custom device variables. In this case we are going to add BALENA_HOST_CONFIG_lcd_rotate and set the value to 2 which means rotate by 180 degrees.

Once this has been added in the dashboard, the system transmits the new configuration to the device and it will reboot so the changes take effect.

Success! If you’re at this stage we’re ready to move on to the next step; deploying some software to the device.

Deploying code

Now that you have your account, application and device setup within balenaCloud, it’s time to deploy code to that device! As it stands right now, your device is running balenaOS and connected to balenaCloud, and so is ready to receive code deployments, but other than that is just maintaining a connection and state of readiness.

There are a couple of ways to deploy code to your device now it’s up and running. The simplest of which is to use the balena CLI tools to push your code, and so we’re going to cover that method here. However, if you set up your SSH keys, you’re also able to use your application in balenaCloud as a Git endpoint and push code that way. You can read more about this method here.

Installing the balena CLI tools

If you already have (or can setup) npm, this is likely the easiest way to quickly get up and running with the CLI tools. If this isn’t possible, we also offer standalone binaries for Windows, macOS, and Linux.

To install the CLI as a standalone binary:

Once you have the CLI working, the first step is to login to balenaCloud by issuing the balena login command:

Once you’ve reached this point, and have a working CLI which has been logged in, we’re ready to move on to the next step.

Downloading the latest code from Github

The next step is to download the example code for this project from Github and push the code to your Raspberry Pi via the balenaCloud. Go to: https://github.com/balena-io-projects/balena-dash and download the project as shown in the image below:

Setting required configuration

The balenaDash application requires that we allocate a bit more memory to the GPU on the Raspberry Pi than is set by default. We do this in the same way as when we set the LCD rotation earlier in this guide.

If you don’t set any of these, balenaDash won’t work!

Key Value
RESIN_HOST_CONFIG_gpu_mem_256 128
RESIN_HOST_CONFIG_gpu_mem_512 196
RESIN_HOST_CONFIG_gpu_mem_1024 396

In this example, we are configuring the GPU to use 1024MB of memory, therefore we set the variable RESIN_HOST_CONFIG_gpu_mem_1024 with the value of 396.

Pushing the code to your device with the CLI

Now that you have the CLI setup and the latest code downloaded, we execute a single simple command to push that code and balenaCloud takes care of the rest.

From within the project directory, execute balena push <appName>, where appName is the application name you set back at the beginning of the guide. For example: balena push balenaDash.

Once this command has been executed and you have seen the balena unicorn mascot.

Go back to the dashboard and you’ll be able to see the status of your device. It should be downloading the application that’s just been built:

If it is the first time you are pushing code to the balenaCloud, it can take a few minutes, while the next times it should be much faster.

Once everything is ready, you can check your LCD Screen and you should be able to see it booting and the dashboard shows up.

Making use of the screen

Right now we have the display as a blank canvas and in this tutorial, we will build three different possible uses of the display, build a smart dashboard, photo carousel or display a youtube video.

After pushing the code to balenaCloud the system will initiate and it will load youtube on the screen.

You can choose any URL to be displayed on the screen. The easiest way to change the URL is by adding a variable into the device variables inside balenaCloud.

Click on Add variable and set the NAME as WPE_URL and VALUE as the URL you want to point to, for example, http://mozaik.herokuapp.com

Dashboard

What are displays without a good dashboard? Below we will go through the process of setting up a few dashboard projects so that you can get started and then create a better and more customizable experience.

The first one we will setup is freeboard, let’s go!

Freeboard

After creating your new account, set a name for your new dashboard and click on Create New.

Freeboard works by adding a new panel and then connecting a data source to it. Let’s go ahead and add the two basic examples, clock and weather.

Now that we have two data sources configured, it’s time to add them to the panel. In this example, I will add the current weather and time in New York.


And voilà, we can now track the current data.

Now in order to have this dashboard showing in your Raspberry Pi, you need to click in Share and copy the sharing URL and set as your WPE_URL variable. For the dashboard we just created, the link is: https://freeboard.io/board/tGeZ0t.

This is a simple example showing how to get started with freeboard. Now you can go ahead and add more panels and datasets.

Other dashboard examples you can try:
Google Photos Slideshow

One fun thing you can do with your display is to have a slideshow of photos, from your last trip to Europe, Thanksgiving with the family or simply some inspirational pictures.

For this, we will use Google Slides, so go ahead and create a new slide project, adding one picture per slide.

For this example, we are selecting some nice trekking photos from Unsplash.

Now that we have a few nice slides, we can enable them to be displayed inside out screen. Go to File > Publish to the web, select Link, select how many seconds you want between each picture and make sure you also select Start slideshow as soon as the player loads and Restart the slideshow after the last slide.

You will use the URL in the WPE_URL variable, and the slideshow should start showing up on the screen. For this example, we have the URL:

https://docs.google.com/presentation/d/e/2PACX-1vQSvhAd1S7ZlQJv_H4C7h2Om5mFEzlfvYRVLYudIQQ0sjQyvmfaR7lulQwygx-xQbSHHUoNauvsDEYA/pub?start=true&loop=true&delayms=10000

Youtube video

Besides using youtube as in the initial example, you can also set a video to automatically open in full-screen and run on repeat. In the url, set to WPE_URL variable as https://www.youtube.com/tv#/watch?v=<video-id>&modestbranding=1&autoplay=1&controls=0&fs=0&loop=1&rel=0&showinfo=0&disablekb=1 and change <video-id> to the id of the video you want to display.

Conclusion

In this post, you could see how easy is to deploy a dashboard (or any other url) to a display using balenaCloud and a Raspberry Pi. Remember, these are just a few examples of things you can do, if you have any other ideas to share, please write in the comments below or in our forums.

Happy hacking!