How to Make a Portable Reaction GIF

 

A while back I had a conversation with a friend about epitaphs and we reached the conclusion than rather than a phrase we would prefer a GIF. That got me thinking on how can you create a portable GIF which evolved in this project, this is a very reasonable train of thought. Given that I have used my tech knowledge on dumb stuff before I decided why not. Our final product will be a compact LCD + raspberry pi in which clicking on a different quadrant of the screen will trigger 4 different type of reaction gifs.

What do we need:

1 x Raspberry Pi Model 2 or better (I used a 3+, model 1 might work but GIFs would be too slow)

1 x LCD for Raspberry Pi with touchscreen (I’m using this one from Adafruit)

1 x SD card (to load raspbian)

1 x 5V battery pack with a micro usb connector (to power the raspi)

And for initial setup:

1 x usb keyboard

1 x usb mouse

1 x hdmi cable

1 x 5V power supply

We are basically gonna follow the instructions from here , except that we’re gonna modify the html to be able to switch gifs with the touchscreen.

Step 1: Installing raspbian

Install raspbian on the sdcard. I downloaded this image, uncompressed it and then used etcher to flash it into the sdcard.

Step 2: booting to UI

Insert the flashed sd card into the raspberry pi, connect mouse, keyboard and hdmi and power up the board. It should boot to the raspbian UI

muo-linux-raspbian-jessie-gui
Something like this

This image should already have everything we need and by that I mean chromium (our browser). If you have an older raspberry pi 2 model, you might also want to overclock it and increase the video memory allocation

To overclock, from a terminal type:

sudo raspi-config

You should see something like this:

raspi-config

from there just select “Overclock” and choose either “Medium” or “High”. Remember to press Finish to save

To increase the video memory allocation you need to modify the boot config file, to do this do:

sudo nano /boot/config.txt

And from the text editor either modify or add this:

gpu_mem=256

Do ctrl+x to save the file.

Step 3. Getting the base html and gifs into the pi

Personally I prefer to get all the stuff from the internet into my PC and then use a usb drive to transfer it to the pi, but if you want to do everything directly thru the pi you can also do that.

To display our gifs into the screen we’re going to use this project . Download it to your pc and uncompress it. You should get a folder with 5 files:

gif_player.html

jquery-2.1.1.min.js

1.gif

2.gif

3.gif

For our purposes we will replace those gifs with what we want and do some minor modifications to the html. For the gifs we’re going to create four folders with the four categories we want, on each folder we will save the gifs naming them as 1.gif, 2.gif, 3.gif, etc

To be able to have four different quadrants to interact with we need to add the following to the html:

div id="div1" onclick="changeImage('angry')"><img src="" id="image"></div
div id="div2" onclick="changeImage('sad')"></div
div id="div3" onclick="changeImage('shock')"></div
div id="div4" onclick="changeImage('nope')"></div

<style>

#image{
    position: absolute;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }

this will create four divisions with an image displayed on top (NOTE: wordpress doesn’t really like the div tag in the code, so just add the missing <>). Each division has a on click event that triggers an image change. In this example the categories are “angry, sad, shock and nope” but those can be whatever you want. The background colors are unnecessary, those are just for debugging purposes

To use the category type we need to modify the script part of the html to this:

function changeImage(type){
    var img_array =[type+"/1.gif",type+"/2.gif",type+"/3.gif"];//this is where you add GIFs, with ,"#.gif"

This assumes only 3 gif files per folder, you can add as many as you want

Once you have the changes ready I suggest you try first on your PC with Chrome. You should see four divisions with different colors of grey and when you click on a different quadrant a different category should trigger.

Now copy everything to a usb drive, plug it to your raspberry pi and copy the GIF folder into the pi’s Desktop. You can just drag and drop from the UI

Step 4: Connect your LCD to the pi

This varies depending on what LCD you have, but basically we need to plug the LCD and make it display the UI. If you have the adafruit one, just follow these instructions. For this project, reply “no” to Would you like the console to appear on the PiTFT display? and yes to Would you like the HDMI display to mirror to the PiTFT display?

Step 5: Run your creation on fullscreen chromium

Once you copied your files and your screen is up and running, you just need to run this command from the console:

/usr/lib/chromium-browser/chromium-browser --kiosk /home/pi/Desktop/GIF/gif_player.html

You should get chromium in fullscreen, showing the gray quadrants. Now just click on any section to switch GIFs.

Something like this:

If you want to make this completely standalone we would need to autostart into chromium, I don’t suggest this as reverting it might be annoying, but if you want to you can follow the instructions from here.

And that’s that for this installment of dumb science, which might be recurring if I find other interesting dumb things to do.