Introducing PiUi: Add a Simple Mobile Phone UI to Your RaspberryPi Project.
I’m excited to introduce you to a project I have been working on for a few weeks in my spare time: PiUi.
A lot of folks asked how to use my RPi Timelapse Controller without the LCD Plate - which is kindof expensive and not everyone is comfortable to solder one up themselves. The answer of course is that this is possible, but… without a UI you are limited to having the controller run on boot and it’s difficult to know everything’s working correctly and/or take control when you know better.
The same is true of many hardware projects and an HDMI monitor + keyboard is not a feasible method of interaction away from your desk - wouldn’t it be great if you could add a UI on a device you already have in your pocket to any Raspberry Pi project?
PiUi makes it easy to implement a rich mobile UI directly in python code and access it from your Android or iPhone. It’s powered by ratchet.js so there are lots of UI components available to create beautiful interfaces.
All you need in addition to a Raspberry Pi is a wifi adaptor (like this one from Adafruit). Your Pi will create a wifi access point to connect your phone to, then simply navigate to http://piui/ in a browser to access your app’s UI. There’s even an Android app to make connecting easy and show useful status info plus an iPhone webapp you can save to your homescreen.
Once the access point is set up (easy with pre-prepared sd card images), the full code required for a python helloworld example is:
PiUi is open source - fork it on github - and is just getting started, so please use it, let me know what you think and help improve it.
For detailed setup instructions, read on.
Here’s a little demo of the Timelapse project with a PiUi interface (source at github.com/dps/piui-timelapse)
The easy way (using a pre-prepared SD card image)
piui_plus_examples.zip file from github.com/dps/piui-sdcards. Unzip it and you’ll find a 4Gb sd card image named
piui_plus_examples.img. Write it to an SD card by following the usual Raspberry Pi instructions. At present, this image is based on Occidentalis 0.2.
Assuming you have the same wifi adapter I do, this will work out of the box. If not, read the Pi-Point docs to configure for your own hardware.
On first boot, you can sync the latest piui source with:
and start the demo app with:
Viola! PiUi nirvana.
The do-it-yourself way
Follow the Pi-Point documentation to turn your Pi into a wifi access point. Note that if you use the Adafruit wifi adapter, these instructions do not work in full as the
nl80211 driver does not support that device (which uses a Realtek chipset). This blog post explains how to make it work - thanks Paul!
Add an entry to
/etc/hosts mapping the DNS name
piui to the address you configured for the Pi in the step above. Assuming it’s
192.168.1.1, then you should add the following to
nginx - nginx is an HTTP server and reverse proxy, we use it to multiplex requests to your app and the
Configure nginx using the config file in the PiUi github repo - copy this to
/etc/nginx/nginx.conf and restart nginx.
Get the piui source code from github
Arrange for the
piui-supervisor to run on boot.
Done! Run the demo app:
Connect your phone to the wifi AP and navigate to ‘http://piui/’.
Questions, ideas? Join the discussion on Hacker News