Create a BLE app for your mobile phone! Control an ESP32 with BLE

hello everybody after my videos on ble on the esp32 have received a lot of requests on implementing a app on the mobile phone with ble so that you can read out iot sensors esp32s whatever so in this video we're going to address that and we're going to create bi-directional communication between a mobile phone and esp32 while I provide the examples here with esp32 in principle you could use any device that just sends and receives a ble data for communication with your Mobile app all right let's get to it now the two we're going to use to program the app is MIT App Inventor this is a very intuitive and easy to understand language to develop mobile apps for your phone I realize it does have its limitations and it's really only suitable for very simple apps but in most cases it will be sufficient for you to just control whatever iot devices you have or whatever projects you're working on so just click here on create apps register and get started now I opened a new project and called it ble controller we'll go ahead and use the layout to arrange some buttons so let's start with some horizontal buttons so that would be the one over here and we want the um so this this vertical alignment we want to be the full width so we go to width and then say fill parent and now we can go ahead and throw buttons in it so we'll throw in two buttons uh where are the buttons there one and also the buttons we want full width as well and then the second one the first button we'll call start scanning and I see that my own picture is in the way let me get that out of the way for a sec so we'll say you start scanning and then we want to rename this over here as well so rename and I always like to know it's a button so I say button start scanning and then the second button will be disconnect so we'll rename this and say button this connect and here all right in disconnect that's all good now we want a list view the list view is needed to show all the Bluetooth interfaces that we find so that we can connect to the right one we'll then pick a horizontal layout and I'll go here full width as well and now we'll throw in a label we'll call the first label Bluetooth status we'll then take a second label throw it next to it and that second label we say disconnect it just initial initially when you start up the device it's not going to be connected and we rename this of course we want to write and later the status here and this is going to be label and then ble status then we'll throw in another layout and here we'll go for the table arrangement with the table arrangement you can see how many columns you want and how many rows you want so we'll start with only one row and later we'll add more rows as we need them and we'll fill the parent with it then we'll take a label throw it in in the first section and just say characters takes one and another label which is going to go into the second uh part of that table and here we say uh none so initially there's not going to be any information from the client we connect to and then after we connect we want to see the result here in the characteristics one all right well that's it for now on the layout so we're going to start with this very simple layout discover Bluetooth interfaces connect to it and then receive some characteristics data The Next Step here is to connect to with ble and for that we need a billy interface now at the time of writing there is no ble interface inside MIT App Inventor natively there is if you go to connectivity there is a Bluetooth client and a Bluetooth server but this is serial Bluetooth if you want to use serial Bluetooth I have a different series about that that you can see in the right top right now but the disadvantage of Serial Bluetooth is that you cannot use it on iPhone and that it's not very power efficient so if you want to use ble we need to add an extension to MIT App Inventor the extensions are added here on the bottom import extension but before we can actually import an extension we briefly need to download this so let's open a new browser window and download this ble Bluetooth extension so that we can use ble so here's a list of different inventor extensions that you can load into MIT App Inventor and the first one here is the one we're going to use Bluetooth LE at the time of recording the latest version is 2020 from August 28th and we can just grab it directly or grab it via GitHub so go ahead and download this extension and after you've downloaded the extension we can go back to MIT App Inventor now in a MIT App Inventor we go now to extensions and then import extension we choose the file we just downloaded and then we say import after importing you should see Bluetooth LE here in the bottom under extensions so we can go ahead and drag this into our phone and you'll see an icon appear here on the bottom Bluetooth LE now we're all set and we can start coding so we go here to blocks on the right top and we can now start with defining what needs to be done when the page is loaded so we go to screen number one and then we need to when screen one dot initialize so we now need to ask for permission if we may use Bluetooth on the phone so that you can find on the screen one as well and we now search for a function that's called ask for permission uh so we load that over here uh calls screen one ask for permission and then the permission name we need to change here we don't need this here let's throw it away uh we'll just take a text and then text value here so now you're going to write here um Bluetooth connect because we need to verify whether or not we're allowed to connect to Bluetooth and as soon as we get the permission we then want to go and do a Bluetooth scan so in the next step would be that we go to screen one and there's two functions here permission granted and permission denied we'll go in in this code assume that you always get permission and only code what needs to be done to get things working obviously in your code if you want to make something more robust you also need the function permission denied so that you can give the user an error message and maybe you can close the app right if it's really reliant on this ple but we'll go ahead and use permission Grant only right now to keep it simple and then the first thing we really want to do is check whether we got permission for Bluetooth connect so from math we take this equals let's throw it over here and we want to now verify that the permission name so you just hover over permission name and select get permission name that that equals really Bluetooth connect in this case it's still relatively simple but it's just a minor thing to throw this in and as soon as we know that this is the case we can now ask for permission to do Bluetooth scan so let's just copy paste this I go and select this call ask for permission I do Ctrl C Ctrl V and add it over here and I can now rename Bluetooth connect into Bluetooth scan okay so that should do now we can really populate a list of ble interfaces so whenever a device is found we want to populate that in our list view remember the view that we had here in the middle this black black thing that's the list view we can give it a bit of a more unique name we can say lists View ble devices so that you really know what you're working with let's go back to blocks and now on the Bluetooth ble there is going to be a function uh Billy comes device found and that's the one over here so whenever the device is found by the Bluetooth interface this function is run and and we want to then add it to the list view so we go ahead and take this list View and we say elements from string and now the only thing we want to do is add the Billy coms device list so we go to our Bluetooth interface and we set the device list to our list View now before we can go and test whether this works or not we need to be able to start scanning for Bluetooth interfaces so basically we need to code behind the button over here with start scanning that is done as follows we go to the button here on the left and start scanning and we take the function a button starts to scanning dot click then we'll go to the ble interface and there is a call please l e start scanning that's where it is and that should do so now in order to test this we'll need a phone and on your phone you'll need to install the MIT App Inventor companion let me show you what that would look like so here's my phone and you see I already have MIT App Inventor companion installed so go ahead and open that and if you do you can scan a QR code now you create that QR code in your app by going to connect and then go to AE companion so we'll go ahead and click here on my phone scan QR code we'll briefly scan this one it will load it in and then you'll see the app on the phone and you can just test it out so sure enough that's a wrap and we'll go on start scanning and now we see a list of Bluetooth interfaces that are around me I have for instance this esp32 laying around and you see that there's an esp32 on this list so so far so good by the way um as you might have seen the app now didn't ask me permission to use Bluetooth that is because I've been doing more stuff with this phone I already gave permission to use Bluetooth for MIT app companion so you will have to probably just click once can I use Bluetooth with this app and then please select yes so that it actually works all right let's put some actual functions in here and and make it useful I'll switch off the phone we can actually also Implement briefly the disconnect button then we have that also out of our way that's done by going to button disconnect and selecting button disconnect dot click and whenever that is clicked you go to the Bluetooth interface and you want it to disconnect so here Bluetooth le1 disconnect let me put the connect and the disconnect here on the side otherwise we get the super long code let's now Implement what we want to happen when you select a Bluetooth interface from the list then you want it to connect there right so um we'll go to list View and then select all the way in the top when a list view ble devices after picking and the first thing we want to do here is make sure that what is selected actually exists so we'll go and then take an if statement and from math we'll take this equals and now we want to make sure that the select index so we go here to list View and then select the list view selection index that's the one and that one should be larger or equal to zero so larger or equal to zero and if that's the case we can go ahead and stop scanning so here on the Bluetooth LE we can go to stop scanning and we want to then connect to that particular interface so there is a connect function here in the list and it already you can see it has an index and that index is then of course the list view selection index so we already have that one over here so I just go ahead and click the green one not the blue but the green one copy paste like let's do that again copy paste and then throw it over here good now we can connect to a Bluetooth interface the thing though is that we don't know when we're connected and when not in the designer though I already set here this Bluetooth status disconnected we want to update this so that whenever we're connected we can actually see that now we can of course put in the text everywhere here with whenever you're connected that you manually write it there I prefer to do that with one centralized function because we will see that if you want to hide buttons when you're connected and unhide them when you're not connected it's really nice to have one single function that takes care of all that stuff so making a function is super simple you go just go to procedures and you just take the upper one two and then procedure this procedure we're going to call set really status and we're going to add a variable to this function you do that by just clicking here on that configuration button and adding an input to the function now you can click here on the input and give it a name so you don't want to you want it to be X we want to say here ble connected so we now have a Boolean ble connected can be true or false and in from control we just take an if an else function and then we want to read this variable so you hover over this and say get really connected so whenever we are connected we want the label the label over here to say connected and that label is called label daily status so here in the function we're going to set that label so I click here in the left with blocks on this label ble status and then you just say set text and we need it twice we need it once for if and ones for else and we're going to set this to connected and disconnected so we just take some text say here now we're connected and here we are disconnected while we're added when you're connected you don't need the button start scanning because you're connected already to that Bluetooth interface when you are disconnected you don't need the button disconnect right so over here in the blocks we can hide those buttons it makes it a lot cleaner so we can go here to this button and then say set visible and we just need a Boolean here with true or false this is the button start scanning well if we're connected we really don't need to see start scanning we want to see that when we're disconnected so that we can maybe restart it and the second button is disconnect and that one we add here as well to the list now if if we're connected then we want to see the disconnect button if we're not connected then we don't want to see the disconnect button that should do for the buttons and the same holds then for the list view so I'll go ahead for the list view there's also a visible for the list View and I only want to see the list view when we are not connected so it's going to be false when we're connected and it's going to be true when we're not connected now after finishing this code we need to of course call this function and we're going to call it here with the on various places actually now calling the function we can do from procedures now because we made a function you can see it here in the bottom call be the status function and we're going to call it of course whenever we start scanning then we want to make sure that this is false then whenever we disconnect we want to also make sure that the connection status is set to false and when we're successfully connected we want the status to be true now we could of course add that over here after picking we successfully picked here a Bluetooth interface but it's better to really only change that status when the ble interface provided the feedback that this connection was successful and there is a function for that and that's called Billy comes connected so in this function we can now add be connected true the last thing we need to do is that initially when we start up the program we want to not see disconnect button the disconnect button so I click briefly on the disconnect button here in the overview and go to visible and I'm in the way again with my camera apologies we'll scroll all the way down and we go with visible we click that away so that you don't see the disconnect button when you start the program so let's open it up and briefly connect to a device okay so here's my phone again even now start scanning the list view shows up and we see our esp32 that I have laying around here so let me just go and connect to that and the list view disappears and we see now that the Bluetooth status is connected and we can disconnect again and as soon as we disconnect the scanning starts automatically might there be a problem you can just go to start scanning and it just re-scans everything on the Fly so everything is all set now of course we want to be able to receive and send data in this video we'll I'll be using an esp32 to communicate with you can definitely use this as well it's basically cheap Arduino with a Bluetooth interface but feel free to use another device that has ble on it you can even communicate with the different mobile phone if you wanted to now if you do have an esp32 then go ahead and go to my repository and in my repository you will find the esp32 ble part one that's where we're going to start off the part one code is super simple it just sends values from the esp32 through ble to the mobile phone so we'll go ahead and download this and then load it onto our esp32 and then we'll update our code so that we're able to receive the data sent by the esp32 so here the code of our tutorial part number one and just scanning through it quickly we'll have a service uuid and then a characteristic uuid and as I already mentioned in the main loop it's going here to the main Loop it waits a second and then periodically sends a value through notify to the mobile phone so go ahead and load this into the esp32 so the code is now loaded into the esp32 I already checked with the debug app on my phone that everything's working I very much recommend this uh introduction video into ble so that you yourself can also make sure that esp32 is working correctly and that you can communicate with your phone so now let's move back to our code and the first thing we want to do is add two Global variables now you can add Global variables like this you go to variables initialize Global variable and we want to send this to a string and this will be the first one will be our service uuid so I'll call this uuid service the second one we will set to our first characteristic we're going to do of course more characteristics so I will call that characteristic in number one and because it's such a long word Char one and later on we'll have a chart too now from the Arduino code we'll go ahead and copy that so we take the service uuid and put that over here then we'll take the characteristic uuid and put that over here as soon as we connect to a Bluetooth interface again you want to actually verify that you are connected to the right device that it has the uid ETC but I want to keep the code simple here so I'll just assume that you're smart enough to connect to the right device and we go straight away and register for a notify service we will get from the esp324 bytes again this is all explained in that first Bluetooth blee tutorial but here we'll go straight away register for bytes that's the function we need here it is and we'll slot it in right before our status function and then we want to provide the uuids and so we just made those global variables and if you hover over them you can just select get global uuid Service so that's the service obviously and then the character we need as well so just hover over it actually you hover over the name to get that pop out okay and then we take also the character uuid and let me scroll down set it over here now the third variable is signed and what it basically wants to know is whether you're bytes that you're receiving have are signed or not signed means that let's take one byte that your range is from minus 127 to plus 127 and unsigned would be from 0 to 255. in the code that we wrote for the esp32 it's an unsigned parameter so we need to have this set to false with this code we now registered we said yes from this character uuid we want to receive any updates but whenever the esp32 now sends a value to your phone um it will it needs a callback function to run and make sure that it knows what to do with the new value so let's go ahead and make that and that callback function is here under Bluetooth really and we now need a let me see where it is bytes received there you go and with the bytes received you can verify that you're receiving the right characteristic uuid and you could verify the byte values Etc but again we'll keep it very simple here and what we want to do is just show the number in the label so here in designer we have characteristic number one and it has a label behind it and that label is initially set to none but we want to now add in that label the right value I see that I didn't really rename it so let me rename that thing and make it label characteristic number one and now here in the list we can find label characteristic number one and then we set the text and here we want to now recompile all the bytes we received but we've receive a least significant byte and then a more significant byte and more significant byte Etc we're going to recompile that into one number we can do that with math so here we just take this Plus and initially we'll take the least significant byte and we can just throw that in as is so the bytes are received as a list and that's where we can just go with list and we can make a selection from a list select list item and here we from the bytes we can say get bytes and we throw it in the list and the least significant byte is the first one now in the first one in this particular case is going to be one not zero that is our least significant bite and if we run the code you'll see it works but when then the parameter goes up to 255 it falls back to zero because a byte is only 255. so in order to add now the second one we'll say Plus and then we need the second one but we need some more math with this actually let me just move it out briefly because we need to multiply this with 260 256 obviously it's the first 255 are covered by the least significant byte so here I'll just take a multiplication there you go and multiply this with 256. foreign this way the counter will work up to 56 535. well that's already quite a long time waiting right but if you would like to have the third byte as well we can do that um we can do that by just clicking here on the um plus and adding another number here so that we can add the third one so here we can take the whole section um with 256 times the second byte copy paste it over and now we need to multiply this with 56 536. now while making final edits to my video I discovered that I forgot to set the index here at three so this last index should of course be moved up to three so please make sure you do that and let's now go back to the video this way we get three of the four bytes recommined in just one number I also tried to add the fourth byte but unfortunately the math of MIT App Inventor cannot handle such large numbers so it gives you it throws you an error if you try to add the number that you would require to add the fourth byte but I don't think it really matters in this case because this is already quite a large number that you can use so let's go ahead and see how this works so here we're back in the app and I'll just press Start scanning and select the esp32 and we see now that it is counting as we expected ah the one thing that might be a little bit confusing is that characteristic one and that is very close to the counting in general so we might put a semicolon between that so now we can successfully send data from the esp32 to the mobile app but I think you want to go the other way as well you would like to send data from the mobile phone to the esp32 and that's what we're going to do next so we'll do that by adding another row here so I go and click on this this Frame and say rows are going to be 2. and then on the user interface let's throw some labels at it and let me rename that first label so I'll make it characteristic number one semicolon and then the second label will be characteristics number two and we'll add another label after that and that label I'll initialize as well as none then we need to have some sort of means to generate data on a mobile phone that we can send to these be 32 and I'll just use a slider for that and this slider I'll throw in the complete width I will need to set some values for it so let's say it goes from 10 to a thousand or something like that so let's go to the code in the code it all starts with the position changed of this slider so here on the left we should find the slider easily and on the slider we take the one function that it has whenever a position is changed so the first thing we want to make sure is that we're actually connected because obviously if we're not connected there's no use in sending anything over so we can take an if and then on Bluetooth we need to make sure that we are connected now this slider will give you um very accurate number 16.45678 or something like that and it doesn't look very nice and also we need to round it before we really send it over in this particular case so I just make a local variable where we're going to store the value of the slider we can modify it a little bit and then send it over this local variable is going to be a text variable because in essence that's we're going to send over and it will just be slider variable so now we're going to set that slider variable and we'll need to trim it make sure that there's no spaces or so involved and we round it because it said there's going to be a lot of numbers behind the comma otherwise and then we can read the actual position of that slider it's called the thumb position so we do get thumb position so this will give us the value of the slider rounded then the next thing is we want to show here on the characteristic number two whatever we're sending over so that we can cross check whether or not we're receiving what we think we're receiving and that's a label and I think I didn't give the proper name yet no I didn't so that's going to be label number four in this particular case we rename it and that's then label character number two we go back to blocks and we take our characteristic label and set the text and we want this to be the same as our slider variable and the final step now is that we need to send it over to ble interface so we'll go ahead and um select the ble interface and here we want to send this as a string so we do right string we already have our service uuid as the next step we need our characteristics uid and of course this will be a new one that we'll have to Define in the Arduino so we'll update the Arduino code in a little bit and then add the characteristics uuid here let's for now complete the rest of the values the utf-16 will be false and then the actual value obviously is our slider value so we'll go ahead and take a get slider value the thing though is that this call function expects us to provide a list you can provide a list of strings we only have one string to send over so we'll just make a list of one item so make a list go to the configuration throw one item out and we are all set so this is the MIT App Inventor code we need so with that we can switch back to the Arduino code and implement the code required to receive the strings that we're now sending so here we are and the first thing is that we're going to do is to add another characteristic uuid so we'll just go here and generate a new one from our euid generator so let's copy this one over and then we can Define the characteristic uid here so let's call it uuid number two so the first thing we do is that we're going to define the characteristic that we want to have so we go to create a billy characteristic that section and we add our second characteristic the best is to just copy the first one and we'll make this P characteristic number two and here uh uuid number two of course and for this one we will need the property read and in addition we also want right don't forget to put that or in between otherwise you'll get an error then we go down to the section where the P service is started and right before that we'll add the descriptor to the characteristic so we can do that by first adding its descriptor just copy paste this over but we'll just add a new Billy 2902 that should do and then we need to set some callbacks so this is going to be P characteristic number two so now we need to set the Callback so and we shouldn't forget to Define now our P characteristic number two all the way on the top so where we have this beauty descriptor or be characteristic P characteristic here we now need to define the characteristic number two as well and let's Point ourselves start with zero there or no all right so that adds the um with the second characteristic but I referred to a new callback function here characteristics callback and now of course we need to Define this this will be a class and we'll place it next to the callback for the server so let's put it right below here we'll make a new class uh characteristics callback and it will be a public class and that will be of the type ble characteristics callbacks so that will be a void we're going to overwrite this on write function so override and basically whenever data is sent now from the phone to the esp32 or Arduino then this callback function is run and we now need to read out the data that's sent over and the the way to read out binary information or just if you want to read the bytes itself you could do this with an unsigned integer t uh received data and you could go Beach or get data the problem though is that at the moment it's not possible to receive the length of how many bytes the the the packet that was sent is so you can read in the first byte that's fine but we're sending more than one byte and then this function doesn't really fly I hope that they'll fix that in the ble characteristic anyway as we're sending more data and I wanted some to show you guys something more Universal in the phone we send a string instead of just sending bytes and now you can go standard string P Car 2 value this is a standard string it's sometimes a little bit confusing pre-char and then you get the data by doing a get value so this will give you this standard string as a return now the standard string is pretty worthless in the Arduino environment so we want to convert this to a string so let's make a string P chart two value string equals string feature 2 value standards string dot C string so this way we can convert it from that standard string to a string that the Arduino can actually do something with and as we know we're sending over integers we now want to interpret that as an integer so we can say an integer P chart two value end equals speed chart to Value string to ins it's a bit of a detour to go through string but this at least gives you something Universal that you can send strings integers doubles floats you name it right this way and uh for sake of testing we'll just write this to the screen so we're converting it here back to string but anyway this really is just to show you that we can interpret it as an integer then we need to uh close off this callback function with the semicolon here and the final step will be that now we need to add the characteristics uid in the MIT App Inventor so let's copy the characteristics uid here on the top the one that we newly defined in an App Inventor we now need to create the UA ID that was missing so we just select the uuid number one copy paste it and call it chart two then we'll add the right uuid string and we'll get put a get function in the function over here and that should do so let's run it and see how it goes so here we are with the Arduino to the left and the app on the right we'll First Connect so let's start scanning select the esp32 we can see it's connected as it is counting on characteristics number one and if I now change the values here it sends over that value to the Arduino and we see p characteristics number two is 673 or 198. all right so with that we established bi-directional communication between the esp32 or Arduino and your mobile phone so with that you have the flexibility uh to create whatever you want please leave in the comments down below what project you're working on uh subscribes likes well appreciated and see you in the next video

Channel: MoThunderz

Views: 56,567

Keywords:

Id: RvbWl8rZOoQ

Length: 47min 3sec (2823 seconds)

Published: Fri Mar 31 2023