Skip to content

15. Interface and Application Programming

This week’s assignment requires to design an application for an user interact with an input and/or output device done before, or a new one. I have decided to design a mobile application using MIT App Inventor that moves a servo (Micro Servo MG90S) connected to a microcontroller (Wemos with an ESP8266EX board). In my final project, I am gonna use servo to move the robotic arm, so in part this assignment will help me in the final project.

Micro Servo MG90S

Wemos microcontroller with ESP8266EX

Mobile Application

It is very easy to create a mobile application using MIT App Inventor. The web site provides two mains features for developing the application: Designer and Blocks. The Designer is a drag and drop interface to design the screens of your application. In the center you see a screenshot of the screen you are designing. On your left side you see the list of components you can add in your screen and in the right side you see the properties of the components added. The Blocks enable to add logic code in the application that will perform the required actions. On the left side you can see the possible logic code that can be added, and in the center you see the resulted code you are creating. When a component is added, it will appear in the left side too, and you can add different events to them or change their properties. It is recommended to add meaningful names for each component added, for making easy later to add events to them.

To design the application I did the following steps.

  1. Create a new project for you mobile application. I named as fabacademy_interface_app.

  2. In the Designer page, I added the following list of components and also change their name to have a better indication in the Blocks:

    1. Label and input text for entering the IP address of the microcontroller.
    2. Start and stop button.
    3. Two buttons, left and right, and a label to indicate the meaning of these buttons.
    4. A label message to indicate the app can communicate with the microcontroller.
    5. A label to show the response of the microcontroller.
    6. I added also a WiFi connection (left menu: Connectivity > Web)
  3. Switched to Blocks page, and added three procedures:

    1. updateInvalidIP: set a message and color to label message to indicate that needs to enter the IP address of the microcontroller; disable buttons left and right; and enable button start and disable button stop.
    2. updateValidIP: set a message and color to label message that app is ready to communicate with microcontroller; enable buttons left and right; and disable button start and enable button stop.
    3. checkValidIPAddress: procedure to check if the user enter the IP Address of the microcontroller to them enable the controller buttons. I could add many other validations here, but I tried to be simple and expect the user will type the correct IP address of the microcontroller. A wrong IP will lead to erro when trying to send commands to the microcontroller.
  4. Used the menu Connect > AI Companion to connect a mobile phone to App Inventor and load the app I just designed. It is necessary to install first [MIT AI2 Companion]5 app in the phone, open it and then scan the QR code generated by App Inventor.

  5. Here is the phone with the application loaded and ready to be used to communicate with the microcontroller.

Download the ZIP file generated from MIT App Inventor (you can upload it in the web site)

Servo Controller

The mobile application communicate with the microcontroller via HTTP request. The microcontroller need to create a server to listen the request from the application. The library ESP8266WiFi that was installed in the last week’s assignment also provides a way to create a server in the microcontroller. If both, mobile application and microcontroller, are connected in the same network, they can communicate with each other. Below the steps to create the server and configurate the microcontroller to receive HTTP request. Also, how it was implemented the movement of the servo receiving the request from the application.

  1. List of libraries and variables used for this assignment:

    1. Libraries Servo.h (to manage the servo from the microcontroller) and ESP8266WiFi.h (to manage the WiFi connection and to create the server that will receive the requests).
    2. Declare variables for SSID of the network, its password, and the IP Address the microcontroller got from the DHCP provider.
    3. Declare variables to create the server. It was used the port 80 for this server.
    4. Variable to communicate with the servo, some controller variables, and which pin from the microcontroller will be used to send the commands to the servo (D1).
  2. Define functions to support the operations of the microcontroller.

    1. setup_servo(): function to configurate the servo and move it to its initial position.
    2. move_servo(): function to execute the movement of the servo, depending of the direction (LEFT or RIGHT), move at the speed speed_move.
    3. setup_wifi(): connect the microcontroller in the WiFi network and save the IP address assigned to it.
    4. setup_httpServer(): Initialize the server at port 80.
  3. Main functions from microcontroller.

    1. setup(): configure the Serial port, initialize WiFi, server and servo.
    2. loop(): create a client instance to receive the request; wait until client send data; read the URL request; check if the request was to move the servo LEFT or RIGHT; move the servo according to the request received; and return a counter of the amount of request received by the microcontroller and the last movement done by the servo.

Download the INO file from the microcontroller code

Group Assignment

Ingegno - Interface and Application Programming

Last update: June 29, 2021