{"id":3950,"date":"2021-02-24T12:46:59","date_gmt":"2021-02-24T11:46:59","guid":{"rendered":"https:\/\/home.et.utwente.nl\/slootenvanf\/?p=3950"},"modified":"2021-12-01T11:52:10","modified_gmt":"2021-12-01T10:52:10","slug":"bluetooth-comm-app-inventor-ble-nano","status":"publish","type":"post","link":"https:\/\/home.et.utwente.nl\/slootenvanf\/2021\/02\/24\/bluetooth-comm-app-inventor-ble-nano\/","title":{"rendered":"Bluetooth communication between an App built with App Inventor and the BLE-Nano board"},"content":{"rendered":"\n

This tutorial describes how to build an electronic circuit with an RGB LED (a LED that can change color), and change its color using an App. It also demonstrates two-way communication over Bluetooth LE between an App built with App Inventor<\/a> and the BLE-Nano board. The BLE-Nano board is basically an Arduino Nano with an added onboard Bluetooth LE module. App Inventor is a very user-friendly and easy way to build Android apps, using a designer and blocks-like programming.<\/p>\n\n\n\n

This tutorial is very similar to this tutorial<\/a>, which describes setting up (one way) communication over Bluetooth LE between an App built with App Inventor and a regular Arduino Nano using an external HM10 Bluetooth module.<\/p>\n\n\n\n

Please check out the Troubleshooting section at the end of this tutorial if you run into trouble.<\/p>\n\n\n\n

The BLE-Nano board we use in this tutorial (sold here<\/a>) is a combination of a traditional Nano with a Bluetooth BLE module, based on the CC2540 BLE Bluetooth chip.<\/p>\n\n\n\n

This is the pinout of the board:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The pinout is the same as the regular Nano.<\/p>\n\n\n\n

Build the circuit: add an RGB LED to the BLE-Nano board and test it<\/h2>\n\n\n\n

First, build the circuit according to the example given below:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Resistors are 220 ohm (180 or 330 will work also). RGB LED is of type common-cathode.<\/p>\n\n\n\n

If using a Common-Anode RGB LED: replace the black<\/strong> wire with a red<\/strong> one and connect that to 5V:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Next, download this example sketch: BT_rgb_led.ino<\/code><\/a> and open it in the Arduino IDE.<\/p>\n\n\n\n

Please note: if using a Common-Anode RGB LED: In the code, find the comment \u201c\/\/ if you're using a common-anode ...<\/code>\u201d and use that piece of code instead of the code for the common-cathode LED (comment that out).<\/p>\n\n\n\n

Connect the Arduino to your computer with the USB cable. In the Tools menu, select Board<\/em>, Processor <\/em>and Port<\/em> (the number of your port might differ):<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Click the upload button \"Upload to compile the code and upload it to the Arduino. After you uploaded the sketch, the LED should blink red-green-blue once, as you can see in the code in the setup()<\/em>. You can use this to verify whether you connected it properly. If it did not blink, check your wiring.<\/p>\n\n\n\n

Start the Serial Monitor (Tools > Serial Monitor<\/em>) and check if its speed is set to \u201c9600 baud\u201d and line ending set to “Both NL & CR”.<\/p>\n\n\n\n

Now type 255,255,255<\/code><\/strong> and press Enter, then check if the LED turns on (white). Try other color values, eg. 255,0,0<\/code><\/strong> for red.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Get started with App Inventor and install the demo App<\/h2>\n\n\n\n

If you are new to App Inventor, you might want to do a ‘getting started’ tutorial first<\/a>. But this tutorial will take you through the basics of opening and using a ready-build app (but it will not learn you how to create the app).<\/p>\n\n\n\n

Take these steps to open the App:<\/p>\n\n\n\n

  1. Download the file Control_RGB_LED_v4.aia<\/code><\/a> to your computer. This contains the App Inventor project for the App.<\/li>
  2. Login to App Inventor<\/a> by clicking the “Create Apps!” icon in the top bar.<\/li>
  3. Select Projects<\/em>, Import project (.aia) from my computer …<\/em> then click the Choose File<\/em> button to select the .aia file you downloaded. Click Ok<\/em>.<\/li>
  4. The project will be loaded and you see something like:<\/li><\/ol>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n

    How this environment works will be explained below. But first we will show how to install the App on your phone:<\/p>\n\n\n\n

    1. Install the App Inventor Companion App on your phone (Google Play store<\/a>\/Apple App Store<\/a>) and start it. (explore these alternative options<\/a> to run the App)<\/li>
    2. In App Inventor, select Connect, AI Companion<\/em> from the menu. Then on your phone, click “scan QR code” and scan the code on your screen. The App should then launch on your phone (screen 1 below).<\/li><\/ol>\n\n\n\n

      You will have to do the last step again if you resume the App at a later time (eg. if you do something else for a while).<\/p>\n\n\n\n

      The first time you launch the App, you might have to enable Bluetooth and give the App Location permissions. In the App, select the line with “Ble-Nano” to make a Bluetooth connection with the Arduino. This should switch the App to its mode in which you can change the color of the LED (screen 2 below).<\/p>\n\n\n\n

      If you drag one of the sliders, the LED should change color, and you should get the HEX value of the color back in the text box at the bottom of the App (screen 3):<\/p>\n\n\n\n