This content originally appeared on Twilio Blog and was authored by Julia Makivic
In a previous tutorial, I described how to build a text-based messaging game using Twilio Autopilot, Facebook Messenger, and Airtable.
Now, it’s time to bring that data into the real world, with a creative display of all the data from Twilio Autopilot that is being stored in the Airtable database.
In this tutorial you’ll learn how you can make a small internet-connected sculpture that displays how players respond to each question stored in the Autopilot task. You’ll use a wifi-enabled microcontroller to read data from Airtable and to display the data on a small LCD screen that would be embedded in the sculpture.
Seeing live results from the game displayed on the sculpture makes me feel more connected to the anonymous players playing the game during a time where most of us are communicating through digital means.
I made the sculpture out of polymer clay with an embedded circuit consisting of an Adafruit Feather Huzzah, a 2.8 inch ILI9341 LCD screen, a 500mAh LiPo battery, and an On/Off switch. I chose the Adafruit Feather Huzzah due to its ability to connect to wifi, its small size, selection of pins, and compatibility with Arduino. In addition to being connected to the internet, I wanted to make my sculpture portable and to be able to control when it is “on” or “off,” so I made sure to add a rechargeable battery and a switch as well.
Prerequisites
This tutorial builds off of the previous tutorial, which covers how to send data from Twilio Autopilot to an Airtable database. You should familiarize yourself with the previous tutorial before reading this one.
Additionally, here is a recommended list of components that you will need to get started with this tutorial:
- Polymer clay: I used these pastel colors to create the enclosure.
- Sculpture wire
- Masking tape
- Perfboards
- Wires
- LiPo battery
- On/Off Switch
- 2.2” TFT LCD screen
- Adafruit Feather Huzzah ESP8266
- Spray Paint: I used Montana spray paint.
Set up the Adafruit Feather Huzzah
The Adafruit Feather Huzzah serves as the inner brain of your sculpture. Before you start building the rest of the circuit and the sculpture, you will need to set up your Feather board so that you can program it using the Arduino language.
Install the Arduino IDE and Setting up the Adafruit Feather Huzzah Board
In order to be able to program the Adafruit Feather Huzzah, you will need to install the Arduino IDE. Download the appropriate version of the IDE for your operating system.
Once you have installed the Arduino IDE, you will need to install libraries which will allow you to send your program to the Adafruit Feather Huzzah board, connect to the internet, and display visuals on the TFT LCD screen.
Install libraries for the board
Follow these instructions to set up your Adafruit Feather Huzzah and to program it using the Arduino language: https://learn.adafruit.com/adafruit-feather-huzzah-esp8266/using-arduino-ide
Install libraries for WiFi capability and programming the LCD screen
You will need to install several libraries in order to securely connect to the internet and to parse the data from the Airtable database. In the Arduino IDE go to Tools in the navigation bar, and in the drop down menu, select Manage Libraries.
A window with a search bar will pop up. You will enter the names of the libraries that you would like to install in this search bar. The libraries I use are:
ArduinoJson: Airtable will send its data in JSON format, therefore you will need to parse it using Arduino JSONAdafruit_GFXandAdafruit_ILI9341: These libraries will allow you to display graphics and program the ILI9341 TFT LCD screenWiFiClientSecure: This library will help you connect to the internet over WiFi
Type in the name of each library in the search bar. Select the latest version, and then press install.
Select the latest version of the library and press Install.
Note: I use version 5 instead of 6, the latest version, for the ArduinoJson library. Using version 6 instead of 5 might cause some of the code to break.
Circuit diagram
Before soldering the circuit, it’s best to build it on a breadboard. This is how the screen looks when connected to the Adafruit Huzzah and an on and off switch on the breadboard. It is quite messy with a lot of connections.
Here is a fritzing diagram which shows a cleaner depictions of the circuit:
I modified this image based off of a fritzing diagram available from this Adafruit page to include the switch.
These are the pin connections for the Adafruit Feather Huzzah, TFT screen, and on/off switch:
- Board SCK/SPI connects to the TFT CLK/SPI clock
- Board MO connects to TFT MOSI
- Board GPIO 0 (you can change this to another GPIO pin) to TFT CS
- Board GPIO 15 to TFT DC
- Board 3.3V to TFT VIN
- Board GND to TFT GND
- Board GND to SWITCH Off
- Board EN to SWITCH On
Write the Arduino code
Send the code to Arduino
Now that you have wired the board to the various components, it is time to send code to the Arduino. First, you will need to include all of the libraries you installed during setup. The SPI library is already included and ESP8266 library is already installed on the board, therefore you did not need to install them during setup.
I have included the entire Arduino code below with explanations on how it works. If you would like to access the Arduino file and upload it right away, you can access it here. I would recommend you take a look at the explanations below because you will need to make your own changes in order for the code to work.
#include <ArduinoJson.h>
#include <ESP8266WiFi.h>
#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_ILI9341.h"
#include <WiFiClientSecure.h>
In order to connect this board to the internet, you will need to include your WiFi SSID and the password.
char* ssid = "MySSID"
char* password = "yourwifipassword"
Now let’s declare some instances of the WiFi client and the LCD screen. You will also declare some variables that will be used throughout the Arduino sketch.
//These variables store the number of the pins on the board that connect to the DC and CS pins //on the TFT LCD screen
#define TFT_DC 15
#define TFT_CS 0
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
WiFiClientSecure client;
//These variables will be used to measure how long it takes to reach Airtable.
long checkDueTime;
Int checkDelay= 60000;
String title;
//color names
#define LIGHT_PINK 0xFEBC
#define LIGHT_PURPLE 0xEE9F
#define LIGHT_GREEN 0xDFDA
#define LIGHT_YELLOW 0xFFBA
#define CORAL 0xF9EB
#define NEON_PINK 0xF973
#define NEON_BLUE 0x2F3F
#define NEON_GREEN 0x2FEE
The setup() function runs only once and contains code that is only used at the start of each program. In this case, the setup() function is used to establish a WiFi connection.
void setup() {
Serial.begin(115200);
tft.begin();
WiFi.mode(WIFI_STA);
WiFi.disconnect();
delay(100);
Serial.print("Connecting Wifi: ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while(WiFi.status() != WL_CONNECTED){
Serial.print(".");
delay(500);
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
IPAddress ip = WiFi.localIP();
Serial.println(ip);
client.setInsecure();
}
The showResponses() function responds to the data from the Airtable database and displays it on the TFT LCD screen.
void showResponses(){
String title ="";
String headers = "";
String body = "";
bool finishedHeaders = false;
bool currentLineIsBlank = true;
bool gotResponse = false;
long now;
int a_counter =0;
int b_counter =0;
int c_counter =0;
int a_amount =0;
int b_amount=0;
int c_amount =0;
//The airtable API is the host
char host[] = "api.airtable.com";
The following code connects to the host and will require you to use information from your own Airtable account. The URL string variable is the address of your own Airtable base. You can find it by going to the Airtable API (https://airtable.com/api) and clicking on the workspace which contains the database that you are using for this project. Then go to the “Retrieve a record” tab to the left. Your URL will appear in the “Example Request” on the right.
Next, you will need to authorize access to the database using your Bearer key. This key is the same as your Airtable API key. Add the following code underneath the char host[]=”api.airtable.com” line.
Serial.println("accessing this function");
if(client.connect(host, 443)){
Serial.println("connected");
String URL = "/v0/appOmfamXLJabgtEH/CamParkData";
Serial.println(URL);
client.println("GET " + URL + " HTTP/1.1");
client.print("Host: ");
client.println(host);
client.println("Authorization: Bearer keydUirPfIGbgC80E");
client.println("User-Agent: arduino/1.0");
client.println("");
Parse the Airtable data
Once you have accessed the Airtable database, it’s time to parse the data and then display it on the TFT LCD screen. I decided to program some geometric graphics on the screen and make it display cryptic messages based on the retrieved values.
The next section of code will access the records available in the Airtable database and display the results on the screen. This bit of code is quite long, and you can access it in this gist link. It goes underneath the client.print(“”) line in the above section.
The code section from the above gist link utilizes some functions which draw designs on the screen. These functions are defined below. Define these functions at the very end of the document, after the last bracket from the above gist code, which closes out the loop function.
Next, add the following neon_grid() and diagonal_lines() functions to create patterns using the ILI9341 and GFX libraries for the TFT LCD screen.
The neon_grid() function creates a grid using a color that is defined in the parameters. The diagonal_lines() function draws a series of diagonal lines with a customizable starting position and spacing between the lines.
void neon_grid(uint16_t color){
int width = 280;
int height = 320;
int w = 0;
int h= 0;
while(w < width){
tft.drawLine(w,0,w+=20,height,color);
w+=20;
delay(100);
while(h<height){
tft.drawLine(0,h,width,h+=20,color);
h+=20;
delay(100);
}
}
}
void diagonal_lines(uint16_t color,int spacing, int xpos){
for(int i=0; i<10; i++){
tft.drawLine(xpos,0,xpos+(spacing*i), 320, color);
delay(100);
}
}
The loop() function runs continuously. It continuously runs the showResponses() function after a predetermined time interval in order to account for delays when attempting to reach the Airtable database.
void loop() {
long now = millis();
if(now >= checkDueTime){
Serial.println("--------");
showResponses();
//Serial.println(title);
Serial.println("--------");
checkDueTime = now +checkDelay;
}
}
Now that you have written the code, it is time to upload it to the Adafruit Feather Huzzah. In order to upload the code, press the arrow in the top left corner of the Arduino IDE.
Craft the enclosure
I crafted the enclosure out of wire, masking tape, aluminum foil, and polymer clay. Here are some progress images of my crafting process:
I soldered the Adafruit board along with the components onto a perfboard before placing it into the sculpture. The below image shows the two halves of the sculpture with the lipo battery cemented to one half of the sculpture while the circuit on the perboard is glued onto the section with the opening for the screen.
This is another view of the two halves of the sculpture. This view shows the epoxy cement connecting the upper corners of the screen to the clay sculpture.
These are some clay ornaments which will be attached to sculpture once the circuit has been inserted and the two halves of the have been cemented together:
Final result
I wanted the aesthetics of my sculpture to match the retro feel of the graphics on the screen. I used pastel colors and bold shapes to match the feeling of toys from the nineties and early 2000’s. Oftentimes when audiences think of computers or technology, they think of smooth lines, symmetry, logic, and a lack of emotion. I wanted to subvert this notion by making an uneven, imperfect sculpture out of clay.
See a video of the sculpture on Instagram.
Conclusion
Thank you for following along with this tutorial! I hope you have a lot of fun making a sculpted physical display for your own text-based game. For more ideas on how to build with Twilio IoT, check out this blog post or the strange and wonderful Internet of Things videos on the TwilioDevs channel. You can also read an official overview of Twilio IoT here.
Julia Makivic is an artist who combines art and technology to create amazing experiences. Follow her on Twitter and Instagram for more fun projects, and check out the Camaraderie Park Facebook page for more updates on the game.
This content originally appeared on Twilio Blog and was authored by Julia Makivic
Julia Makivic | Sciencx (2021-04-26T22:38:16+00:00) Make an Interactive Sculpture with Twilio Autopilot and Airtable. Retrieved from https://www.scien.cx/2021/04/26/make-an-interactive-sculpture-with-twilio-autopilot-and-airtable/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.