Skip to content

15. Interface and application programming

This week we studied and created an application with GUI interface with different tools. Iván Sánchez Milara is an instructor who taught and guide how to make Hello world examples in different application tools, made an application with my own device.

1. Group assignment

Group work had done with Antti and Mona in Fablab Oulu, tried all application tools on the lecture. The report is here.

2. Individual work

Individual work, I decided to create the water sensing on strawberry plant using the application made by MIT APP Inventor.

The requirements are, - Water moisture level is detected by water level sensor.
- The water level on the plant soil is shown by Mobile app with changing pictures.
- When the soil moisture became lower level, the strawberry charactor becomes crying.
- When the soil moisture became sufficient, the strawberry charactor becomes happy smiling.

1. Water level sensor

This time I used the water level sensor. There are many devices to detect soil moisture and this is usually for sensing the water level but this was the only one I got this time.

The sensor is made by series of exposed parallel conductors, together acts as a variable resistor whose resistance varies according to the water level. The change in resistance corresponds to the distance from the top of the sensor to the surface of the water. The details are here.

2. ESP32 setup

As the mother board, I used the ESP32 board which made in previous week 11 Input week. The water level sensor needs analog input, has to choose Analog capable pin (Green colored ADC) from Pinout, so I chose GPIO25 as its analog input.

The value of water level utilizing Arduino libraries, can be obtained by analog input by analogRead(). And the Bluetooth connection between phone and sensor, the procedure for setting up the bluetooth with the ESP32 and my mobile phone is explained in Week14.
This time, the value of sensor is put on the Bluetooth serial as a single string.

3. MIT APP Inventor

MIT APP Inventor is the tool for GUI control interface into mobile phone. The details are reported in group work page.

This time, for the status change of water, I used pictures which I made previous project of Strawberry Moi from the event of Fablab Oulu Science hack Days.

The UI is put the widgits from left side window User Interface. In the Blocks view, you have access to the different widgets you have utilized in the Designer view. When you click in any of the widgets names, you have access to all possible functions that can be drag and drop in the Blocks view.
This time I chose Button for Bluetooth connection, Label for showing text of sensor value and Image for showing the picture of faces. All widgets width are full parent then it becomes always full width even the screen size is changed by phone type.

Also as adding functions, Bluetooth client from Connectivity and clock from Sensors are put into Components.

And the Bluetooth connection is same method I used in previous week 14 Networking and communication week’s.

What is the difference from previous week is valuable of sensor value and its judgement.

Depending on the value of water level, the status of face is varied. I set,
- Water level <1200: Crying
- Water level 1200 - 2000: Normal
- Water level >2000: Happy

And Clock1.timer is come from Clock which is set in UI designer into component, it makes a loop. When Bluetooth is connected and recieved the data, make a judgement according to the sensor value settings.
On the Bluetooth, the data is only a string format which is the value of moisture level numbers by anaglog input from moisture sensor.

Verification with phone, first need the MIT AI2 Companion APP installation to the phone. There are two ways to connect to phone,
- QR code via WiFi.
- USB cable connection.
QR code is rather easy, but sometimes unstable with WiFi condition. In case of USB, aiStarter application is needed to install to PC side and run.

Done!

Reflection

  • I had problem how to connect Bluetooth from ESP32 to App Inventor. Originally I used SerialBT.write(). But this time, the data is text so it is needed to use SerialBT.print().

Used files


Last update: June 21, 2021