https://www.twilio.com/blog/interactive-sculpture-twilio-autopilot-airtable-adafruit-feather-huzzah [fog_owl] Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now Log InSign UpClose Products * Voice & Video * Programmable Voice * Programmable Video * Elastic SIP Trunking * TaskRouter * Network Traversal * Messaging * Programmable SMS * Programmable Chat * Notify * Authentication * Authy * Connectivity * Lookup * Phone Numbers * Programmable Wireless * Sync * Marketplace * Add-ons * Platform * Enterprise Plan * Interconnect Use Cases * Access Security * Call & Text Marketing * Collaboration * Commerce Communications * Contact Center --------------------------------------------------------------------- * Customer Stories * Partner Showcase * Why Twilio? * Support Plans * Status * API & Docs * Blog * Help * Jobs at Twilio Talk to Sales BLOG * Docs * Log In * Sign Up * Console * Twilio Build the future of communications. Start building for free [ ] Build the future of communications. Start today with Twilio's APIs and services. Start Building for Free Posts by Stack * Java * PHP * Ruby * Python * .NET * Swift * Arduino * JavaScript Posts By Product * Email * SMS * Authy * Voice * Twilio Client * MMS * Video * task router * Flex * SIP * IoT * Programmable Chat * Studio Categories * Code, Tutorials and Hacks * Customer Highlights * Developers Drawing The Owl * News * Stories From The Road * The Owl's Nest: Inside Twilio Languages * portuguese * german * spanish * Japanese Twitter Facebook Developer stories to your inbox. Subscribe to the Developer Digest, a monthly dose of all things code. [ ] [ ] Please enter a valid email address. All set! Check your email. You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information. New! Tutorials Sample applications that cover common use cases in a variety of languages. Download, test drive, and tweak them yourself. Get started [d41d8cd98f] By Julia Makivic 2021-04-26 Twitter Facebook LinkedIn Make an Interactive Sculpture with Twilio Autopilot and Airtable sculpture.png 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. Photo of finished 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. Manage Libraries in the Arduino IDE 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 JSON + Adafruit_GFX and Adafruit_ILI9341: These libraries will allow you to display graphics and program the ILI9341 TFT LCD screen + WiFiClientSecure: 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. Arduino Library Manager 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. In Progress Photo of Circuit Here is a fritzing diagram which shows a cleaner depictions of the circuit: Fritzing Diagram of Adafruit HHuzzah, On/Off Switch and TFT LCD Screen 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 #include #include "SPI.h" #include "Adafruit_GFX.h" #include "Adafruit_ILI9341.h" #include 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= 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. Image of sculpture in progress 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. Image of sculpture in progress 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: Image of sculpture in progress 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. Image showing completed sculptureImage showing completed sculpture 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. Rate this post Authors + [d41d8cd98f] Julia Makivic Reviewers + [35368a0571] Christine Sunu + [64ea59d482] Ashley Boucher ----------------------------------------------------------------- Related Posts Abordagem Omnichannel da Twilio: Self-service de contact center benefico para clientes e negocios Abordagem Omnichannel da Twilio: Self-service de contact center benefico para clientes e negocios Mar 19, 2021 Sempre foi complicado desenvolver sistemas de atendimento via URA que permitissem uma experiencia interessante para seus usuarios e para negocios, veja como a Twilio permitiu conquistar esse tipo de solucao atraves dos seus produtos. Experiencia de usuarios em chatbots: URA x NLU Experiencia de usuarios em chatbots: URA x NLU Feb 15, 2021 Voce quer desenvolver um chatbot, mas nao sabe qual a ferramenta ideal para comecar? game-autopilot.png Build a Text-Based Messaging Game with Twilio Autopilot, Facebook Messenger, and Airtable Jan 29, 2021 Learn how to build a text-based messaging game with Twilio Autopilot, Facebook Messenger, and Airtable. Build a Netflix Bot with Python and Autopilot Building a Netflix Recommendation SMS Bot with Python and Twilio Autopilot for #GiftofCode Dec 16, 2020 Help your friends and family find something fun to watch by building them a Netflix recommendation bot using Twilio Autopilot and Python. Sharing Data Between Services Using Python and Twilio Sync Sharing Data Between Services Using Python and Twilio Sync Dec 11, 2020 Learn how to share data across different Twilio services using Sync in Python. Create an Appointment Booking Bot for WhatsApp using Python, Google Calendar and Twilio Autopilot Create an Appointment Booking Bot for WhatsApp using Python, Google Calendar and Twilio Autopilot Oct 19, 2020 Create a WhatsApp bot that allows your customers to book appointments with your business. Sign up and start building Not ready yet? Talk to an expert. * About * Legal * Copyright (c) 2021 Twilio Inc. * All Rights Reserved. * Protected by reCAPTCHA - Privacy - Terms Thanks for rating this post! We are always striving to improve our blog quality, and your feedback is valuable to us. How could this post serve you better? If applicable fill in the countries where you are using Twilio [ ] [ ] Send your suggestions Protected by reCAPTCHA - Privacy - Terms Sending your feedback... Thank you for your feedback! Something went wrong. Please try again.