Raspberry Pi Project Build #1 - Controlling the Hardware Remotely With Socket.IO

So, I started last week on my raspberry pi project. I had not received my Raspberry Pi yet, so I first started figuring out how might I be able to accomplish having a web app that sends messages to the pi from OUTSIDE my local network. My initial thought was building a front-end in React/React Native with a Ruby on Rails API backend that would control the pi. I quickly realized in some internet research that a RoR backend would not be optimal, mainly because there was already a library in Python for controlling the UnicornHat LED board. So, it was in my best interest to write the pi's software in Python, even though I have no experience in Python. I would still keep the frontend in React & React native.

With that kinda worked out, I next focused on figuring out how I was going to send messages from outside the local network to the pi. The main goal of this project was that I wanted to make a fun, interactive lightboard where friends across the world could send me so pixel art that would pop up in my living room. So much of the raspberry tutorials and info focused on controlled a LED or lights while on the local network or it only interacted through GET requests to well-known APIs like twitter or gmail. I needed to send POST requests to the pi.

I started looking and couldn't find a lot of helpful info that was applicable to my project. I had heard of websockets, but hadn't used them before in any project. I started wondering if possibly that could work for me. Luckily, I found this wonderful video where someone created a server and clients using SocketIO and javascript to turn on an LED on a raspberry pi. It was kinda a mind shift for me to think of the RPi as a client, since, for some reason, I wasn't even imagining having a separate server to handle all of the requests/messages and the Pi AND the mobile/web apps being clients. After I thought a bit about it though, it made a lot of sense. I looked into if there was a python socketIO client library... and there was! So my plan was to follow similarly what I saw in the video and implement the following:

• Create a simple Express server (javascript) that connects to clients and relays socket messages.
• Create a javascript client on the server for testing the server.
• Create a python client and make sure it receives socket messages from the server.
• Create a react-native app using ExponentJS with a button just to see if it works. Make sure it connects to server and sends messages.

Project diagram showing SocketIO communication flow.

I spent my first day working on this. Surprisingly, this went pretty smoothly even though everything I was doing was basically new to me (especially the figuring out python part). I was able to get the server going locally and relaying messages to a bare bones python client and JS client on the server!

I got the python client connected and receiving messages from server!

I also went ahead and deployed my server to heroku and updated the configuration of the clients. After getting it to work, I created another client using ExponentJS and React Native. Honestly, after setting up 1 client, the process is almost identical in the other clients, minus the differences in the languages, of course.

Using exponentJS XDE, I have a React Native client also working with the server and other client!

I was pleasantly surprised that, at the end of the first build day, I had a server and the raspberry pi and react native clients communicating with each other. I really was expecting to struggle with this for days.

As I still hadn't received my raspberry pi yet, I decided that my next step would be change the client on the server, which was just html and jQuery over to React.

CS50x & a Raspberry Pi Art Project

Since my last blog post, I decided to finally try Harvard's Intro to Computer Science course (CS50) that is available to take for free through EdX. The course consists of 12 weeks of lectures, 9 problem sets and a final independent project.  Watching the lectures and working through the problem sets is a definite time commitment, especially as the coursework progresses it gets much more challenging.

During the past month I've been going through a very stressful period so I've found this course to be a great escape for me. I have thrown myself into the coursework and have been working intensely on getting through all 9 problem sets. I've learned C by solving problems using different sorting algorithms, different types of data structures, allocating memory, recovering 'lost' jpeg images from a data file, implementing a spellchecker and a web server ...all in C. I even wrote PHP for the first time to complete the last few assignments. It was nice to see that the things I'd learned as a Ruby on Rails dev were transferable when I was working in a unfamiliar language like PHP. To me, it made me feel like a real programmer. Though the language's syntax is different, the underlining principles and problem solving strategies are pretty universal. It's just really an adjustment to the syntax of the language. So I was able to jump into a PHP project, without any background in the language and get through the tasks relatively simply.

Last week, I finished all the problem sets, I just started on my final project. For this project, you have complete freedom to choose to write any kind of software that you want. I knew I wanted to do something artistic, interactive and with language(s) outside my comfort zone. I drew inspiration from a few places-- the current exhibit of Jean Tinguely's art at the Stedelijk Museum, an interest in learning about Raspberry Pis (and maker culture), and recent attendance at a React Native meetup.

My original idea was a Tinguely-inspired wall installation with EL wire, leds, motors that were connected to a raspberry pi that could be controlled/interacted remotely by a user with a mobile app. As I researched more about hardware and RPis, I soon felt overwhelmed by the hardware side of it - wiring, circuitry, power supply, soldering.

Since my focus is mainly on the software, I didn't want to get discouraged during my project by the hardware side of things. I want to setup myself for as much success as possible. So, I opted to go simpler for now and purchased a preassembled LED board with a square grid of 64 LEDS. This way, I can focus on the writing the software and getting my feet wet with hardware/RPi. Then, if it is a blast to work with, I can dive deeper into building my own hardware on future projects.

I will be using 2 pieces of hardware for this project, a Raspberry Pi 3 and UnicornHAT:

Raspberry Pi 3 w/ an AMAZING rainbow case

UnicornHAT 64-LED board

I still haven't received the hardware I ordered yet, but I've already started on the software infrastructure that is necessary to get the Raspberry Pi communicating with a remote native app or web browser. I've already gotten the RPi's software communicating with a server and receiving data from a React Native app using websockets. I am going to post much more frequently to detail how the build process is going and document what I'm up to.

This is one of the most intensive projects I've taken on by myself, since I will be writing code in multiple languages that I am not familiar with. It'll be the first time I'll work with hardware, write a native app, work with websockets, code in Python, etc etc. I can't wait to see how it all turns out.