Introduction: Glass IoT Touch Button
I had a piece of ITO glass laying around the shop the other day and thought about putting it to some good use. ITO, Indium Tin Oxide, glass is commonly found in liquid crystal displays, solar cells, an airplane cockpit windows, etc. The difference between ITO glass and ordinary glass is that ITO glass is conductive due to the thin matrix of ITO that is deposited on the surface of the glass. For this project, we will using the ITO glass to act as a button to trigger the IoT board to send a notification using IFTTT (If this then that) to a phone. Basically, I wanted to recreate the "That was easy" button by Staples but use glass as the push button.
- NodeMCU (ESP 8266 variant)
- Compression spring (1/4" x 13/32")
- Adafruit capacitive touch board
- PCB board(2.75" x 1.25" double sided)
- ITO glass (2" x 2")
- 4 Wires of different color (2" 22AWG solid wire)
- 1 Yellow Wire (5" 22AWG solid wire)
- Wire strippers
- Wire cutter
- 3D printer (PLA - 1.75 mm)
- Electrical tape
- Hot glue
- Soldering iron
- Solder sucker
- Solder (Lead-free)
- Solder sponge
Step 1: Prototype the Board Layout
Using the layout shown above, the SDA and SCL pins need to be connected to the NodeMCU's SDA and SCL pins (D2 and D1). Solder the yellow wire to pin 1 on the Adafruit capacitive breakout board. Remove a little bit (0.5") of the plastic sheathing from the other end of the yellow wire.
Once the boards are on the breadboard, open up your Arduino IDE. Go to >Sketch>Manage Libraries and search for Adafruit_MPR121. Install the Adafruit MPR121 by Adafruit library. For a detailed explanation on connecting your MPR 121 (capacitive breakout board), check out Adafruit's guide.
Go to >File >Examples > Adafruit_MPR121 > MPR121test.ino. The MPR121test.ino will help check if the breakout board is correctly connected to the NodeMCU. If everything is working well, when you touch the metal on the yellow wire, the Serial Monitor should show "1 has been touched and released". If you touch pads 0-11, the Serial Monitor output should look like the third image above.
Step 2: Solder the Layout
As the images show, connect the capacitive breakout board to the NodeMCU using the 4 wires. Just a rule of thumb, use red and black wires for the ViN --> 3.3V and GND --> GND connections. If the SDA/SCL pins are soldered incorrectly, they will be need to re-soldered correctly. Due to the Adafruit libraries and default SDA and SCL pins, it is near impossible to reassign the pins later on in the coding steps of this Instructable.
Step 3: Setting Up IFTTT
Take a deep breath. This will not take too long to set up.
- Go to the IFTTT website.
- Click the +This to get to the search bar of services offered.
- Type in the search bar "webhooks."
- You should see a triangle with rounded corners inside a box
- That is the Webhooks logo
- Click on the box and then the "Receive a web request" box on the subsequent page.
For event name, type "ITO_touch" as shown in the third image above. Remember this for your Arduino program as its the trigger name.
- Click the "Create Trigger" button.
- You will be taken to another window where the +This is replaced with the Webhooks logo.
- Click on the +That and type in the search bar "Notifications."
- A bell in a box should show up. Click on "Send a rich notification from the IFTTT app."
- Replace the text in message box with a positive message like "Hey, You got this! Go you!"
- For the image url, use this image of a smiley face
- Finish up by clicking the "Create Action" button and the "Finish button on the next page.
Getting the Webhooks trigger
You should be on the same screen as Image #5 (showing the Webhooks and Notification icon) with the text "If Maker Event "ITO_touch", then Send a rich notification from the IFTTT app." If not, click on home tab followed by a click on the box with the aforementioned text.
- Click on the Webhooks logo.
- The logo will take you the Webhooks page (shown in images above)
- Click the documentation button near the top right of the Webhooks page
- You will be taken to another page that will show your key for Webhooks
- Copy and paste that key somewhere safe since that is needed for the Arduino program
Alrighty! Besides your Wifi and password, the Arduino program in the next step is ready to go.
Step 4: Programming the NodeMCU
Okay just look for these four fields:
- const char* ssid
- const char* password
- char MakerIFTTT_Key
- char MakerIFTTT_Event
The Webhooks key should be assigned to the MakerIFTTT_Key and the Webhooks trigger name ("ITO_touch") should be assigned to the MakerIFTTT_Event. The SSID and Password is for Wifi router the IoT will connect to.
Connect the board to the computer and upload the code. If everything is good to go, the following messages shown in the above image should show up in the Serial Monitor.
Step 5: Get Phone Notifications
Download the IFTTT app from the iOS app or Android store. Once you are signed in, you should see the app we just made on the home screen. To test try everything software-wise, if the yellow wire is touched, a notification should show up on the phone, as shown.
Step 6: 3D Print the Case and Glass Frame
Step 7: Assemble the Case!
Put the electronics in slot and attach with some hot glue. Make sure that the yellow wire is fed through the hole before attaching the board to the case. With the protruding wire (currently shown wrapped up on the first image), remove the plastic sheathing of the yellow wire, exposing the metal. Now is a good time to place the compression in the rectangle slot of the case.
**The microUSB should be visible from the side slot hole!
- Attach the top rail to the left and right rails (top and bottom rails have outward notches on the sides of them while right and left should have inward).
- Now would be a good time to see which side of the glass is conductive. I followed this guide to check for continuity using a multimeter
- Slide the glass onto the rails.
- Put the end rail onto the frame. Use hotglue on the joints to securely fasten everything.
Step 8: Finishing the Build
While having the board connected to the computer, place the frame such that the conductive glass is in contact with the exposed wire and the half circle encompasses the spring. Glue the wall panel to the case. Now you are done! If everything assembled correctly, when you press the spring side of the level, you should get a phone notification. If not, check if the unsheathed metal is not touching the glass. The wire should normally be touching the glass unless you press down on the frame.
Step 9: What Is Going On
By pushing down on the spring side of the glass frame, the frame rotates slightly to disconnect the ITO glass from the wire. The breakout board sends this info to the IoT to figure out the logic. The IoT recognizes the glass is no longer touching the wire and makes a web request through Webhooks. The IFTTT logic then takes the request and, if sent correctly, execute the notification action. This tells the IFTTT app on the phone to create a push notification.
Step 10: All Done!
Give yourself a pat on the back, cause you made it through to the end! Comment below if you need any help with any of the steps shown
Participated in the
Glass Speed Challenge