Building web GUIs for your Rasp Pi project with the Bootstrap toolkit

Interface

Scott Sumner

As the Raspberry Pi finds its way onto more and more workbenches, new opportunities arise not only to transfer data from electronic projects to a local network or the Internet but also to provide options for feedback and control.

Presenting data, controls, and tools via a web interface makes your Raspberry Pi project accessible on just about any phone, tablet, or computer without special apps or software. However, once you enter the World Wide Web, you'll find so many packages, toolkits, and frameworks that creating a user interface becomes almost a larger task than the original project. Here, Bootstrap [1] comes into the picture. Bootstrap is an easy-to-use set of widgets and position aids written and maintained by Twitter. By writing standard HTML and applying Bootstrap elements on top, your Rasp Pi project immediately gains a polished look with minimal effort.

Bootstrap is compiled CSS and JavaScript that provides the basis for a sleek and modern web GUI. Its widgets convert standard HTML controls into stylized components that easily integrate into controls, forms, menus, and customized pages. Because it's all built into the CSS, dynamic changes via Ajax or WebSockets inherit the same appearance.

Getting Bootstrap

You can download Bootstrap from its Getting Started page [2] or use the links provided there to get the latest source code. You also can clone or fork the project on GitHub or install via the Bower package manager. Once the package is downloaded, unpack it into a test directory on your Rasp Pi web server (see the "Installing a Web Server" box).

Installing a Web Server

Although installing a web server is generally outside of the scope of this article, it's rather difficult to use Bootstrap without one. In Raspbian or any other Debian-based flavor of Linux, open a terminal and enter:

sudo apt-get install apache2

After prompting for your password, the Apache web server should be installed. Place example code from this article in the web directory /var/www by default, then, open a browser of your choice. If you're on the same machine as the server, the address is http://localhost/<yourFile>.html. If you're reaching the machine over a network, then visit http://<Server_IP>/<yourFile>.html.

Listing 1 shows a Bootstrap template [3]. You'll need to modify lines 7, 11, 12, and 21 to reflect the location of Bootstrap on your particular server. All of the examples in this article assume they are running within this template (or another page with Bootstrap loaded).

Now you have a nice, big, red button, and because Bootstrap affects only the visual appearance, all of your JavaScript (or any other scripting) works just as it always has. Figure 1 shows how the button changed as the different classes were applied.

Figure 1: Buttons as rendered by Chromium: (top to bottom) unformatted button, bootstrap button, large button, and large danger button.

As its name implies, Pygame is a set of Python modules designed to write games. However, many Pygame modules are useful for any number of projects. We introduce you to a few Pygame modules that you can use to create custom graphical displays for your project.