Interface
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.
Building web GUIs for your Rasp Pi project with the Bootstrap toolkit
Lead Image © 3quarks, 123RF.com
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).
[...]
Use Express-Checkout link below to read the full article (PDF).
Buy this article as PDF
Express-Checkout as PDF
Pages: 6
Price $2.95
(incl. VAT)
(incl. VAT)
Buy Raspberry Pi Geek
TABLET & SMARTPHONE APPS
US / Canada
UK / Australia
Related content
-
Exploring the tiny $9 C.H.I.P. computer
The C.H.I.P. is a cute little thing, but don't let appearances fool you: It is quite the beast deep down, and you can squeeze some seriously fun projects out of it.
-
Graphical displays with Python and Pygame
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.
-
Connecting a weather station to your Arduino
After losing one weather station to tropical winds, the author reboots and designs a PCB that connects to an Arduino and monitors weather instruments.
-
Touchscreen audio controller for presentation sound
At the Fort Worth Museum of Science and History's Noble Planetarium, one Raspberry Pi has replaced four CD players for various music and sound effects.
-
Control your Arduino and Pi projects with a PSP
We create a micro web server on an Arduino and a Raspberry Pi, and then use a PSP web browser to control an airboat.
