Skip to content

16. Interface and application programming

Group assignment:

  • Compare as many tool options as possible.

  • Document your work on the group work page and reflect on your individual page what you learned.

MIT APP Inventor

MIT App Inventor is visual programming environment used to build application for mobile devices.

Walkthrough of App creation

1.TheMIT App Inventor to create a app.

2.After select “create app” and login to a google account.

3.Terms of service document.

4.Selected “New project ” and name the project.

5.App work area where you can either view “designer” or “block”.

6.Elements can be added ,list picker by left clicking and dragging it to screen area.

NB. There are options on the right side to edit the objects you have selected

7.Customize name of element list picker.

8.Adjust layout tab added “horizontal arrangement” to screen.

NB. Select fill parent causes the element to fill the screen.

9.Then under user interface added two buttons to turn bluetooth on and off.

9.Then under “connectivity added the bluetooth client

10.After this I changed to the block view by select the word blocks in the top right corner.

11.Then under screen two list picker elements ( before and after ) by clicking on the list picker name.

NB. If you have used scratch it work similar.

12.Then under list picker I brought in the set to element and added the bluetooth client name by selecting bluetooth client.

13.Then under list picker I brought in the set selection to and added the bluetooth client connect by selecting bluetooth client.

NB. Show a list of connected bluetooth devices.

14.Then under list picker I brought in a list picker selection and list picker to text . I also included the text “The eagle has landed”

NB. This will show the text message when connected

15.Then under button I brought in a button 1 & 2. Then added the bluetooth send to text (from bluetooth ) with a unique text (from text) to each button. This will send the signal to the micro-controller to turn the LED on or off.

NB.Rather than dragging the same code to the screen you can duplicate by right clicking and element and selecting duplicate

16.Then in order to download my app I had to install the MIT AI companion app.

17.Then in order to download my app I had to install the MIT AI companion app and open it.

18.Then select the build tap and choose the apk option it will take a few minutes to complile. Then it will ask if you want to download or use a QR code.

Processign App

Processing is a app similar to Arduino IDE used to promote coding

1.The first thing was review a tutorial on creating a connection between arduino and the processing app.

Link to site

2.Then download the processing app and opened it.

NB. This app was used along with the Arduino Ide to create the interface.

3.Then followed the steps outlined in 1 above.The Arduino Code first and made a change in the print statement, delay and baud rate.

4.Then test the code with the PCB to ensure it was working properly.

5.Then placed the code in the processing app. I also changed the port name to suit my computer and the baud rate to match the arduino code.


Last update: November 28, 2023