Raspberry Pi + Socket.IO + React = Pixel Art 🤖✨🎨

Adventures in trying out new hardware, code, and having fun in a personal project

By Stephanie Nemeth

Raspberry Pi + Socket.IO + React

= Pixel Art 🤖✨🎨

Adventures in trying out new hardware, code, and having fun in a personal project

stephanie.lol

Stephanie Nemeth @stephaniecodes

Hi, I'm Stephanie.

* I built a fiber optic dress once.

Overview

Stuff I like to build

"I value projects that have no value or real usefulness."

- Stephanie Nemeth

https://github.com/StupidHackathonAMS/geolize.css

What It Does

Stuff For This Project

It all started with a visit to the Stedelijk Museum...

Jean Tinguely

http://www.flickriver.com/photos/46774986@N02/17028829322/

Self-Destructing Art

I wanted something ephemeral, that would pass like a falling star and, most importantly, that would be impossible for museums to reabsorb. I didn't want it to be 'museumised'. The work had to pass by, make people dream and talk, and that would be all, the next day nothing would be left, everything would go back to the garbage bins."

- Jean Tinguely

What I dreamed of

Reality Check

Inexperienced building hardware 😕

Forgotten everything I learned in Physics about circuitry 😩

Want to focus on the software not necessarily hardware 🤔

Optimize for success rather than discouragement 🏆

Solution: Unicorn HAT!

My Main Requirement

Raspberry Pi must be accessible from the app anywhere, not just localhost!

How does it send messages?

Socket.IO makes communication a breeze

Setting Up the Server

			var server = http.createServer(app);
			var io = require('socket.io').listen(server);
			io.on('connection', function(socket){
				console.log("CLIENT CONNECTED 💃 ");
				socket.on('stateChanged', function(state){
					io.emit("updateState", state);
				});
			});

Setting Up the Pi Client

			from socketIO_client import SocketIO
			socketIO = SocketIO('https://light-art.herokuapp.com')
			 
			def main():
				# Listen
				socketIO.on('connect', connect)
			 
				# Receive a message from a react client!
				socketIO.on('updateState', updateState)

Setting Up React Client

			import React, { Component } from 'react'
			import io from 'socket.io-client'
			const socket = io('https://light-art.herokuapp.com', {})
			 
			class App extends Component {
			...
				sendMessage = (status, data) => {
					socket.emit('stateChanged',
					{message: "Light Design Submitted",
					squares: this.state.squares })
				}
			}

Let's demo this thing!! 🎉✨👾🎨💩🦄

Try it out!

Lessons Learned: Raspberry Pi

Lessons Learned: Raspberry Pi

Some of the HATs

Lessons Learned: React & React Native

Final Thoughts 🤔

Don't let what you think are your insufficiencies hold you back in tackling the stuff you really wanna build-- find a way to optimize for your own success.

Thank you!

Now go build something useless. 💩🛠💜
Slides available at stephanie.lol/pi-react-presentation

stephanie.lol

Stephanie Nemeth @stephaniecodes