Interface and Application Programming

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

This week I learned how to make a Bluetooth-based colorpicker app for my glasses!

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

Individual Assignment

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

Write an application that interfaces a user with an input and/or output device that you made

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

Group Assignment

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

Compare as many tool options as possible

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

You can find the group assignment here

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

For this assignment I decided to design an app which applies to the double-sided PCB that I've made for my glasses. The PCB I created connects to a one-sided pcb that I soldered to a bluetooth module.

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

Watching tutorials

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

I referred to this video tutorial when I started making my app. Once I watched the video for a bit I referred to this article in order to get a better understanding of what to do.

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

Following the videos instructions, I went to the MIT app inventor site, logged in using my google account, and I started off with a blank slate on the project page.

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

Afterwards I continued to follow the tutorials instructions on what to add on to the app, although I changed a few things based on my own preferences (like the "color-wheel" and the phone display size since my phone is a bit bigger).

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

When adding a bluetooth function in my app I had to use BluetoothClient instead of Bluetooth LE since the module that I'm using is an HC06

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

Coding/Programming my app

This is the code behind the interface that I explained. The code finds the color of the pixel, formats it into a message that my tiny44 will understand. The message structure is "R...G...B..." and you fill in the blanks with values for the RGBs (0-255).

This is the code that runs on the PCB. The tiny44 recieves messages from the bluetooth module which contain data about the RGB values. Pushing the button will change the flashing mode of the glasses. At this point it only supports one color although before I used bluetooth it was set so that it could alternate between three colors that were hard-coded.

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

For the programming half I was confused at first since everything was block-based, but after doing some research I found out that the MIT App Inventor site uses a block-based programming language which was developed on Google Blockly. On the side of the page the block options/commands are shown. Since I've never used this programming method before I'm following this helpful article, also since the code setup is already present in the article (the main part of my code which differs from the one set in the article is the bluetooth module). But this article not only shows the process but explains in detail what is happening which is why I found it very helpful.

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

The code Once I finished coding I go back to the project section on the site and save my project app file. After saving my Colorpick app file, I generated a QR-code scan so I could download the app on my phone. In order to scan the QR code I had to first download the MIT app inventor app from the PlayStore on my phone. Once I open the app it gives me the option to scan my QR code.

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

I finished downloading my app I opened the app, clicked on "Device" and connected my glasses to my phone via bluetooth/the app. Once I connected my glasses to my phone with bluetooth I was able to change the color of my glasses directly from my phone!

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯

╭─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╮

You can download the Colorpick app file here

Bluetooth glasses code here

And you can find the PCB here

╰─━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━─╯