Bluetooth LED Control App with MIT App Inventor - STEP By STEP

hey everyone and welcome back to my channel in this new tutorial I'm gonna show you how to use the MIT App Inventor to create a bluetooth app that controls the built-in LED of the esp32 microcontroller of course you could apply the same process for an Arduino Uno this comes with Bluetooth built-in I can turn on and off the built-in LED of course we're going to create more apps later on and without any further Ado let's dive right into it so this is going to be a beginner tutorial on how to use this MIT App Inventor tool you could go to their website the link is under the description of this video and let's start by creating our first app using Create apps for the first time you have to create an account using an email and password and the steps are really simple we have this welcome screen we can hit continue you could check out one of these tutorials to learn more about this app but I'm going to show you how to create it from scratch using the start new project button or you could go to projects and start new project let's give it a name like LED Bluetooth control then let's hit OK as you can see we have a smartphone that we can use for testing so this tool allows you to create apps very easily by dragging and dropping some elements we have the designer that allows you to design your app by adding buttons or any kind of UI elements and the second part is called the blocks and it's the logic of our app for example when we press the on button we are going to send the value 1 to turn the LED on we have to implement this logic under this section by dragging and dropping some blocks normally we start by designing the app and to arrange the buttons horizontally we have to add in a layout like horizontal Arrangement by dragging and dropping this element to the screen and on the right hand we have the components that we add under the screen like this horizontal Arrangement when you select it you will find some properties that we can change to customize the app like the background color you can pick up any of these colors let's use gray the width it is set to automatic but I'm going to use fill parent for the height I will use 60 pixels and hit OK or maybe 70 is better next I will add a second Arrangement so that we can put the on and the off buttons by dragging the horizontal Arrangement under the screen then under properties I will use 70 as the height and fill pattern for the width next I'm going to add two buttons using the user interface and I think you'll guess it by dragging this button object and let's add another one the same thing we can select the button and customize it from the properties window like the background color I'm going to use green color for the on button let's set the text on and hit enter let's use 70 pixels for the height and 150 pixels for the width or we can make it fill parent let's make the text bigger I highly recommend you to play around with these properties to customize your app now we want to apply the same changes to the second one for the width I have used it fill parent and I'm going to stick with that I think it feels better but the most important part of our app is the connection part we need to take in a list picker that allows you to pick up one of the Bluetooth devices and gets connected to it from the user interface we have this list picker we can drag it last but not least I will add a simple text that allows you to check whether we are connected to the Bluetooth module or not and the component is called label let's drag it under this Arrangement and change the text to not connected by default now we can move on to the logic of our app like setting the Bluetooth devices list when we press this button and to be able to use the Bluetooth functionalities like connecting to a Bluetooth device we need to add another component which is listed under connectivity and it is the Bluetooth client you simply have to drag it under the screen which is an invisible component that allows you to use the Bluetooth functionalities on our phone then we can move to the blocks section and to get the list of paired devices we can go to the left side and select the Bluetooth client that's responsible for that we have different blocks that we can use let's scroll down and the block that we need is Bluetooth client addresses and names let's drag it like this we need to display these under the list Picker by selecting list picker and we're gonna do that before picking so let's drag it and this is called an event that raises when the list picker is clicked in such case we have to display the addresses and names so this is related to our list picker and the block that we're going to use is set list speaker elements to to the Bluetooth client addresses and names and once we pick up one of these elements using list picker and after picking we use the Bluetooth client component and the block that we're going to need is connect address from the list picker selection using the list picker selection you see that we can put it inside the after picking event basically it returns true or false if the connection is done successfully it returns true otherwise it returns Falls that's why we have to add some kind of logic under the control section I'm going to use the if else statement and put it inside this so if the Bluetooth client gets connected to the list picker in such case we can change the text or the label that we have added to the text connected the same thing we have to select the element label and drag in the set label text to to detect connected successfully or Simply Connected and if for some reasons it doesn't connect successfully we can change the text not connected or failed to do that we have to select this label again and drag in the text or you could easily duplicate this block using right click and duplicate then we can use it under the else this time Wii U is not connected now that we have done the most difficult part which is the connection part we can move on to the logic of our buttons whenever we click on the on button I'm gonna send this string 1 to turn the LED on the same thing we have to select the component that we're going to work on and it is the on button and use the event button one click in such case we will use the Bluetooth client to send a message like sending a text let's use it and drag in the text block and here you could pass in anything you want I will simply send the character one the only problem with this is that whenever we click the button and we are not connected to a Bluetooth device our app will call this block that will send the text we need to check whether we are connected or not using the control block if if the Bluetooth client is connected in such case we can call the Bluetooth client to send the message 1 and all of this is done whenever we activate the event click to save some time I'm not going to drag and drop these blocks again for our second button I will simply right click and duplicate it then change the button to button 2 and the text to zero each time we press the off button and that's pretty much it we have created this bluetooth app by simply dragging and dropping these blocks to be able to install this app we need to extract the APK file using build then Android app APK once it's done we can download the APK file using this button then I'm going to plug in my smartphone using the USB cable so that we can copy and paste the APK file and let's right click copy and paste outside I will go to the files and here is the app we have the same name Led Bluetooth control and hit install we have this little warning because we haven't installed this app from Google Play I know it is safe so let's hit install anyway then open it up and there you go we have our app we can select the Bluetooth device from this list before that make sure to open up Bluetooth and that allows you to see the padded devices from this list before we do that we need to program the esp32 board to control its built-in LED that is connected to the pin number two on top I have included the library that we use with an esp32 microcontroller then I have created this Bluetooth serial object for an Arduino board the built-in LED is connected to the pen 13. and the reset a function I have used the serial bt.pikain which takes in the name of the Bluetooth device that we're gonna see from the list then we have to set our LED pin to be an output pin so that we can turn it on and off under the loop function which is called over and over again we can check if we have received a character or a string from the Bluetooth app in such case we can read it using serial bt.read and finally we can check if it's one we turn the LED on and if it's zero we turn it off I'm gonna upload this to my esp32 microcontroller using the upload button if you don't know for any sp32 microcontroller you have to hold down the boot key and once it's done we can open up the app again make sure to open up Bluetooth and pair your device with the esp32 Bluetooth module so that we can pick it up from this list and here it is let's select it and there you go we have the message connected now we can turn on and off the built-in LED which is blue so I think that's pretty much it guys for this video I hope you like it if you have any question or comment about this project make sure to write it under the comment section down below and they will see you in the next one

Channel: Enjoy Mechatronics

Views: 90,668

Keywords: tutorial, microcontroller, getting started, esp32 beginners, esp32, introduction, beginner, learn, basic tutorial, wireless, education, esp32 arduino, MIT App Inventor, Bluetooth, IoT, LED, Maker, Smart LED System, esp32 bluetooth, classic bluetooth, guide, project, bluetooth, control, ide, Wireless LED Control, IoT Project, Smart Home, App Development, Mobile App, Control Circuit, App Inventor 2, App Inventor for Beginners, App Inventor Bluetooth, App Inventor LED Control, App Inventor ESP32

Id: w5LgLsCumFI

Length: 11min 1sec (661 seconds)

Published: Mon Feb 06 2023