This page looks best with JavaScript enabled

Week14: Interfaces

 ·  ☕ 7 min read

The Plan

I had initially planned to make a UI for last week’s networking project but I realized that I’m running out of time and haven’t made enough progress on my final project so it’s time for some feature creep. My final project doesn’t really need networking or a UI but it would make using it easier if it had a simple interface. To recap I’m making a pine wood derby style race track to race small vehicles either gravity powered or motorized. The track will have a switch on the start gate and an IR phototransistor based finish line sensor for each lane. I was going to use a simple microcontroller to run those functions but I have a few other projects in mind that I want to use an esp32 and Bluetooth Low Energy for communication. To that end, I decided to try using MIT App Inventor to create an app for my android phone to control the races. This seems like it will make running events based on this track easier in the long run.

Bluetooth

I spent a lot of time filling in the gaps of my knowledge around bluetooth. There are some examples in the esp32 Arduino library for different Bluetooth modes. Last week I was able to use the serialToSerialBT example and a Serial Bluetooth Terminal app to communicate between phone -> esp32 -> laptop and vice versa. I was not able to get the BLE examples to work. I learned because the app I was using is looking for a specifically configured BLE serial service. Instead I was pointed at an app called nRF Connect which can display generic BLE devices.

BLE

BLE devices can be servers or clients. A server has a set of services. Each service can have a set of characteristics. These are each defined by their Universal Unique Identifier UUID. There are a set of predefined UUIDs for common services but I could never find the actual list as all the links I found to them were outdated. Regardless I don’t think there is a defined service for pine wood derby race tracks so I can make up an UUID and as long as my server and client agree they will talk just fine.

ESP32 to nRF Connect

I was able to load up various BLE Arduino examples and get data from the ESP32 to my phone and write data from my phone to the ESP32 and output it over the serial port. I could also use BLE’s notify function to push updates as they happened rather than polling for updates. The nRF Connect UI is confusing. You have to connect to a device and then find the right service and characteristic and there is a set of icons next to the characteristic that represent READ, WRITE, or NOTIFY but it was hard to tell if I didn’t know what the button did or my code wasn’t working.

This is reading a single value from nRF Connect

I added some code to the esp32 to modify a value that was written to it. This shows the new value being sent by nRF.

That value was recieved by the esp32 and written to the serial monitor.

That value was then modified and could be read again by the phone.

App Inventor

MIT App Inventor has a UI design element and a block programming element based on scratch. I have used a few different block programming environments and know that they are great for quick and simple things but as soon as you want to do something complicated they tend to slow you down. However I think my task is simple enough that the speed gained by handling a lot of the back end and UI elements means this is the right choice to get something up and running quickly. I followed one of the tutorials and then dove in head first. I found this tutorial about using BLE with esp32 and App inventor and based a lot of my efforts on this. I should have spent a little more time reading the documentation on the App Inventor BLE extension and the esp32 BLE library.

I started simple with the BLE_server example on the esp32 that has a single characteristic and sets its value to a string. I built and AI app that mostly copied the video tutorial above which established a BLE connection and read the value of that single characteristic based on knowing the UUID. This was where it being easy ended.

This screen shot shows the App that connected to BLE and read the value of a characteristic and displayed it on the screen.

To see that value update I added some code into the esp32 that changed the value every 2 seconds to one of 5 different strings. I then added a clock object to the AI program and set it as a timer that would go off every 2 seconds and read the characteristic value. This is using BLE exactly wrong because it’s meant for you not to have to poll for changes, but this was easier than figuring out the NOTIFY functionality. I also added a “heartbeat” to the screen with a label that alternated between saying “tick” or “tock” so I knew the screen was updating even if the BLE part wasn’t working. The heartbeat is a good trick to know that the UI is still running even if there’s a communication failure.

Down Rabbit Hole

I then spent far too long trying to get writing values and notifications to work. Ideally I wanted a UI button that told the ESP32 that the race was ready to start. Then it would wait for the start button followed by the finish line sensors and then it would notify the phone with the winner and the race finishing order. Then it would wait for the user to push the ready to race button again before waiting for the start switch again. I hit a bit of a stumbling block realizing that the tutorial example above is using an older version of the App Inventor BLE extension. It works with its example code so I have seen esp32 to AI notifications work but the extension has changed enough that I’m not sure if I’m doing something wrong in AI or on the esp32. I just need to step back and do a more patient debugging process. I keep jumping between too many different tools and moving on when I get frustrated instead of getting to the bottom of an issue.

Building a UI

I realized with only one day left for this project that I’ve barely built a UI and spent most of my time working on networking. I used the UI designer to put all the elements I described above in an AI screen and now I at least have a minimum viable product UI. It’s not pretty and most of it doesn’t do anything yet but I have some buttons and text boxes on the screen of my phone and I have some of the back end code to connect to an esp32 and display those values. Talking back from the phone to the esp32 I haven’t figured out yet but I’ll update this page as that comes along.

esp32 Code

Once I had a skeleton of my final UI I started to write something approaching the final code for the esp32 with multiple characteristics. I got as far as defining the characteristics described out above and added them and descriptors to the service. I could even read them from nRF Connect.

However as soon as I started trying to add values to them my esp32 started boot looping.

I added some serial debug statements to see where in the process it reset and its right when BLE starts broadcasting.

I’ve got a lot of work left to do on this one but I think I have all the right building blocks in there somewhere.

Functionality Test

For my final project I came back to this project and made a simple proof of concept. This video shows a basic app that connects to the board for my final project over Bluetooth LE and has a button to turn on the onboard LED. It automatically turns off a few seconds later. This shows a demonstration of it connecting, turning on the LED. It automatically turns off and can be turned on again.

Final Project

I took this functionality test above and modified the functionality to operate the servo starting gates and read the winner of the race based on the finish line sensors. You can see the results on my final project page.

Track Controller Board

Finish Line Board

Track Controller Code

Race Control App APK

Race Control App Inventor Project


Nick Anastasia
WRITTEN BY
Nick Anastasia
(He/Him)