ESP32 Step Tracker Tutorial React Native & Bluetooth

in this video we will make a step tracker using an esp32 and an mpu-6050 it will connect through Bluetooth to a custom react native app that we will also build so in this video I'm using the Xiao seed esp32 you don't need to use that one it's a fairly new board and you can get them off Amazon for like ten dollars you can also use like a dev kit so long as you have your PIN outs for these it'll be exactly the same so what we're going to use to track the movement is the mpu 6050 and this is a really popular integrated circuit sensor that combines a accelerometer a three axis accelerometer and a 3-axis gyroscope into one little chip it's perfect for motion tracking or gesture recognition and orientation sensing so let's go ahead and put that into our board here and then I have a button as well that I'm going to be using to reset the esp32 we're going to use a library called eprom to save the data of the steps to the esp32 in the case of this gets unplugged so first things first make sure you have your pin out ready and we will go ahead and get started let's put our VCC into our 3.3 volt and then we'll put ground to ground let's now connect to the I squared C we're only going to use the scl and SDA we won't be using any of these other pins so SEL is a Serial clock line that's responsible for synchronizing the timing of the data transmission between the esp32 and the I squared C devices so plug that in next we will do the SDA and SDA is a Serial data line that's used for transmitting data between the sp-32 and other devices so let's plug that one in next let's get the button ready so I will connect one side to ground and then the other one I'm going to use gpio2 so that's the setup for the board right now let's jump back to the computer and we'll Flash the board and test it out now we will open our Arduino IDE and we'll get started so here in the setup this will only run once on the startup of the device and here and here this Loop will always be running so we will put some code in here to always check for the updates on the steps because we're working with esp32s we will need to put in the Json URL to pull the boards but we'll get to that more in a minute so right here in the boards manager type in esp32 and let's install the latest update for the expressive systems okay so let's get started right up here we're going to include the wire.h so we need to add the I Square C address so we'll go ahead and put that here we'll we'll set it as mpu addr next we're going to have some variables I'm just going to copy and paste these so here we have the accelerated x y and z then we have an integer step count we're just going to set it to zero at the beginning then we then we have a float and we're going to store the previous acceleration for comparison so right now we're going to set that as zero in here we will do wire dot begin next serial dot begin at 9600. this will allow data to be sent from the computer to the esp32 through the serial Port after that we will add the wire dot begin transmission and then we're going to pass in this mpu address this will initiate the transmission of the I squared address of the mpu accelerometer which is defined right up here then we'll put wire dot right and inside here we'll put 0x6b and then wire dot right zero so this is essentially going to wake up the device and put it into the right operating mode next we'll do wire.n transmission true so this is going to send this data to the device and then we'll delay for two seconds so in the loop we're going to add a few functions that we're going to go ahead and build out the first one is the read accelerometer data and this is what it looks like this essentially initializes the I squared C transmission writes the starting register address for the accelerometer data then it requests six bytes of data from the mpu 6050 and reads and combines the high and low bytes of that data and then stores them inside of these variables the next function we need is the detect step so these values right here calculate the acceleration value of the different axises by dividing the raw axis for in this case what we stored up here by a sixteen thousand three hundred eighty four this division is performed to convert the raw acceleration data into the actual acceleration data so the mpu accelerometer provides a 16-bit signaled integer values so by dividing it by this number scales the data to obtain the actual acceleration in G or gravity units so there's there's definitely some interesting math for this so I'm actually going to go ahead and put a comment in here if you would like to read that from the GitHub repo I don't actually understand all of it so so I don't want to butcher trying to explain it so this piece of code is related to counting the steps and if these conditions are met this and this then it will be counted as a step so this first little part is checking if the previous accelerometer reading is a bit bigger by a margin of 0.1 this can indicate a peak or the highest point of a wave like imagine going up a hill increasing accelerometer reading then starting to go down on the other side then decreasing the accelerometer reading this would be the top of that Peak this is checking if the previous accelerometer reading is bigger than a set number of 1.5 in this case this is like saying the hill should be bigger than a certain height to be counted as a step so in simpler terms this piece of code is trying to count every time you take a step by looking for Peaks or Hills in the accelerometer data that that are big enough to be considered a step once you upload this to your board depending on how you take step you may need to refine these numbers this will be perfect to test out right now so then this piece of code right here we are assigning the accelerometer magnitude to the previous accelerometer magnitude variable this allows the algorithm to compare a new current reading to the previous one to identify when a step occurred essentially it's like saying let's remember the current accelerometer reading so we can use it to compare for next time so then the next function in here is the display step count this will just print it to our serial Port that we can watch so plug in your board and let's get this thing uploaded make sure you have your right Port selected and then make sure you select the right board in my case I'm using the Xiao seed esp32 now that that's uploaded let's check out our serial so right now we have zero steps if I shake my device we have one two three four five six look at that and you can go ahead and change the sensitivity based on these numbers right here but for right now I think that's good for this tutorial so right now if I were to unplug this device and plug it back in you're gonna see now my steps went back to zero so reset and if I actually click the reset button as well it resets back to zero So to avoid this getting erased every time we're going to use a really cool Library called eprom or electrically erasable programmable read-only memory this will allow us to store small amounts of data to the esp32 just as a sight for this flash memory there is a life cycle for how many rights can be written in this case we won't be doing all that much and honestly it's great to learn these things so it's probably not that big of a deal but just know if you were to do this on a device that you were using for a really really long time there's better ways to do it than storing it on your flash memory so back here in the code we're going to include the eprom which actually comes standard with the Arduino IDE in Center inside of our setup we're going to do eprom.begin and then eprom.get and right here this is the address so we're going to save it to address 0 and we're going to pass in the step count so in this case it's zero so to save this we're going to make a little function called save step count and that will actually be called inside of here so where we have step step count plus plus we're going to do save step count and then let's go ahead and make that so here we have our save step count function we're saying eprom we're going to put at address 0 our step count so this is the newest value that is being updated right here and then we're going to commit it so we're going to save it to the flash memory now upload that to your device and we'll test it out if we look at our serial monitor you see these numbers are going up so that's good if I hit the reset button so I just hit reset select my port again and I keep shaking it there we go so that's Saving right now so if I unplug it let's plug it back in it continues perfect so next thing we want to do is we want to make a way a button to be able to reset that anytime we want so first we're going to Define button in my case button pin I'm going to use pin 2. next we're going to make a function called void reset so here this Loop goes through every address of eprom from 0 to the length of the eeprom and writes everything back to zero and then commit is going to reset it all it's going to reset our step count back to zero and we will see that it was reset so inside of our setup we'll put pin mode button pin input pull up instead of our loop we're going to say if the button is a low then reset so if it's being pushed then reset the eprompt so it's going to call it up there it's going to reset everything back to zero let's go ahead and upload that and we'll test that out now oh my added oh I just realized I do not need that there so let's try that again so here shaking my device one two three four five six seven let's go ahead and hit the reset button we'll make sure that's still working select my board again 10 11 it's all perfect so now I'm going to hit the button to reset there we go that reset it perfect that's working great let's uh let's work on the Bluetooth side of the esp32 and then we can jump into react native and build the app for it for the Bluetooth we're going to add a few libraries here and we're going to need some uu IDs these two uuids are used to identify the Bluetooth service and characteristic the service uu ID is for the main service and this right here is used for the step data characteristic and this characteristic will be watched for by our react native app right here this is just a pointer to the step data characteristic so inside of our setup we will add a few lines of code here the first one we will add a ble device in its step tracker now this is the name any you can put any name here so I'll actually call it step sense and our react native app will be watching for this step sense so I'll go ahead and add the rest of this code here so right here we have a ble server and a service creation the service is identified by this unique ID which is up here and then right down in here we're going to create the characteristic so if you were to send more things like heartbeat sensor or something you would create a characteristic you can create a different characteristic for each thing you want to send over so this is the advertising setup and advertising is configured to make the device discoverable then the device is set to respond to scan requests from other devices there's one more piece of code we need to add and it's in the detect step right under the save step count we will add this we will save a step count to step data and then right here with our Bluetooth we are going to send over the step data and then it'll send it to our phone so now we're done with the esp32 code hopefully it wasn't too much and too complicated I think a lot of the Bluetooth stuff will make sense as we build a react native side for this next section of the video we will be building this react native app you will need a device to use the Bluetooth this doesn't work on a simulator in my case I'll be using my iPhone so we'll be using Expo in this video it's a great tool to help build mobile apps a little bit easier the problem with Expo is you cannot use Bluetooth so we're actually going to set up an expo project and then we will run Expo pre-build which will allow us to connect to our Bluetooth device on our phone so first thing we're going to do is we're going to I'm just going to create a new folder I will call this depth sense and then I will open up vs code and drag it in here okay so next we'll open Terminal and I will run npx create Expo app and I will do dot slash so it creates it right here in this folder and why this is going if you haven't already you will need to have xcode on your computer to run the simulator I am using iOS you can also use Android studio and there's a little bit of a process to get the to get the Android simulator running I won't show that in this tutorial but there are plenty of tutorials out there on how to get that installed now that that's installed let's see if it runs we'll do npx Expo start okay that looks like it's connecting let's just type in test and save all right good so that's connected so the next thing we're going to do is we're actually going to run Expo pre-build and right here it says what would you like your Android package to be named I'm just going to be hit enter there I enter there and this will take a minute or two to get installed so now that that's installed I'm going to run npx Expo run iOS and if you have an Android you'll say run Android we'll hit open and there we have test there so let's do test two perfect so that's now updating and again the reason why we did Expo pre-build is we will now have access to our Bluetooth Hardware whereas before we're not able to do that in just expo at least not currently you'll also notice right here we have this IOS and Android folder that we didn't have before so in the iOS I'm going to right click and click reveal in finder and here I'm going to click right here on this folder or this file and this will open up my xcode so inside of my app there's a thing right here signing and capabilities and it has team and right here I'm going to have click on my name if you haven't set this up there is like a weird setup through Apple you might have to click add an account but this is something you'll you'll want to do so then with this I can actually come up here I can click on my iPhone make sure your iPhone's unlocked and your computer has permission to have access to it and then I will click this play button right here now if you don't have your project running in this terminal right here it will pop open another terminal to run it which is totally fine but I prefer to just keep it inside of here so I can refresh it easier and this might take at least on the first build it might take a minute or two and then it'll pop up on my iPhone so now I can see the same thing on my iPhone if you're having any issues with this make sure that you're connected to the same Wi-Fi you'll be connected through Metro on your uh your terminal so I'm just going to do one more update I'll say test three yep so I'm seeing that on my iPhone as well as in here so another big thing we need to do is Android and iOS need permissions to allow Bluetooth so if we open this folder right here we will see we will see our stepsense folder and inside here we'll have info.plist so right here we need to add a few things so under here I'm going to add these two of these four I guess so under here I'll add these four um and this will have a pop-up on my my phone to ask if I allow Bluetooth so we're actually going to stop our server real quick we're going to CD into our iOS folder and then in here we're going to type pod install all right so now that that's installed we'll go back CD dot dot and then we can run our npx Expo run iOS again and then back in xcode I'm going to hit the play button again and this is going to rebuild and install back on my phone and we'll see this time if the Bluetooth pops up so for Android I'm going to add a permissions for Android and then I'm going to add this so this will allow the Android devices to have that same pop-up as we saw on the iOS and there's one more thing we need to do we go to the Android folder if we go to app and then we go to our source Main and this Android manifest we will add these lines of code to allow permission to use our Bluetooth also with Android you'll need the Android SDK so if you have the Android Studio then you should have that installed I've had some issues with running on my Android with react native so you may need to look up some documentation on how to get it set up correctly and working on your device before you move on with this video also you won't see the Android Bluetooth permissions in my code for the rest of this project because I am running iOS so now that we're here let's go ahead and start with the Bluetooth and then we will work on the design which again will look something similar to this so let's go open up a new terminal why are other ones running and we're going to install we're going to install a library called react native ble plx and this will allow us to connect to our Bluetooth and then we'll do a react native circular progress so we're this is one of the ones we're going to download and then react native quick base64 and this will allow us to communicate and send data and read data from our esp32 so let's hit enter all right now that that's finished we're going to import our ble manager and we're going to set a new instance of it we will write const I'm going to call it ble manager oops say equals new ble manager then let's also import some use State and use effects from react one of the states we want to save is the device ID so I'm going to do device ID and then set device ID and we will set that to null for this for right now another thing we want to do is a step count so we'll do step count and then set that count we'll do zero we're going to start at zero then we're going to have a connection status so we'll know whether it's searching or disconnected connected anything like that so we're going to say so we'll say connection status and set connection status and right now it'll say searching also we're going to import a use ref so I just got this little error here I just going to stop my server and start it up again all right so that's now working you'll find quite often where uh everything your code seems to be working fine and you're not sure what's going on if you ever just shut your server down and restart it a lot of times you'll you can get over those issues next we'll add a use ref and we'll set that to device ref okay so now up here we're going to add the service uuid and the step data uuid the same ones that we had over here we need to make sure that we copy and paste these same things over here because this is basically what our Bluetooth is going to be searching for and what we're going to do is we're going to actually write two functions the first one will be a search and connect to the device function so this is what that'll look like so this search and connect to device function uses the ble manager to start scanning for devices if it sees a device name step sense right here and this is the same name that we had in our esp32 code right here if it sees that then it will attempt to connect to it and it stops stop scanning so right here we have set connection status and it will say it'll change it to connecting so all we can actually take this and let me add it right here so right here we can see it saying searching now on a simulator again we won't be able to connect to the device but you'll see this on your phone and if it runs into any errors it will say there's an error searching for the device and that's that'll be updated right here and then right here we have a function that we're going to make called connect to device and we're going to pass in the device but first we're going to add a use effect here and this is triggered after the initial render and since the dependency array is empty this will start the process of searching and connecting to the device so next we're going to add this connected device function so on a high level how this will work is it's a function that handles the entire process of connecting to the device it will discover the characteristics for example we are looking for the um well we'll have the service at uouid as well as the step data so it's going to look for those characteristics and then it'll set up monitoring to watch for any changes from those characteristics if there's any problem we'll have an error then we're going to use this library from the react native quick base we do not need this right now um and this will allow us to decode the information coming from the esp32 and this other one that I just had here if we were sending data to the esp32 we would use this one but in this tutorial we will just stick with this one okay so where are we right here so we'll take the data coming from the esp32 and we're going to set it to Raw step data and then what we're going to do is take the raw step data and we're going to set that to the set step count so right here we have steps that count as zero so if I put 30 and let's actually use this we're not calling it yet we'll come down here and we will add it here let's put oops okay so now we see that saying 30 and again however you update that will be updated there but we'll put this back to zero for right now but basically we're going to save whatever data is coming from the esp32 and we'll save it in a step count um see if there's anything else if there's any errors we will set the connection status of airing connection so that looks good so right here we have air searching for devices so that's good that means it's coming from right here so that's perfect all right so one of the other things that we want to be sure of is if a device were to disconnect so now we want to have one more use effect that will allow us to reconnect to the device in the case that we lose connection and to continue updating so right here I have another use effect and right here it's saying hey if the device ID State ever changes let's um try to rerun this use effect so right here we are saying on when the device is disconnected so on the ble manager when it's disconnected we're going to set the connection status is disconnected and we're going to set the count set the step count back to zero which is fine we could lock it off at whatever number it is you could just comment this out but I think it's fine to put it back to zero and then it's going to attempt to reconnect to the device and if it does connect to the device we're going to see connected and if not it'll say connection failed but if you remember in our esp32 code we are saving the data to the eprom so we actually will still once it reconnects it will reload whatever numbers were there so that's actually fine so as far as the general JavaScript goes we're basically finished this should work now so I'm going to connect this to my phone right now and show you what that what it currently does one more thing we need to add I can't find the variable the step data chart so let's add that right here okay and we actually may not end up using that but but we'll have it there for a minute okay so now you can see on my phone it's connected and if I hit the eprom button that resets it and if I click the reset button on the esp32 it says reconnecting now it says connected and here it goes it's working again cool and again I'll hit the eprom to reset it and that's working okay cool so now we got the basic functionality of this working let's go ahead and finish this up by building the cool uh a cool interface for it so if you want to have the same backgrounds I have you'll see in my GitHub repo some of these assets and right here this is a screenshot of what we're going to be building and I have some different backgrounds here you can choose from and go ahead and play around with obviously you can add anything you want and then we'll try something kind of fun um towards the end to see if we if we like it or not so I'll use the background too for right now and so the first thing we'll do is we will import an image from our assets and this is our background2.png okay and then we'll also have to import image background from react native so let's import that so then down here so inside of our return let's you let's replace this with our image background and I will do our source equal to our image that we just put in okay that's looking really cool and then Styles container What's um we don't really need a background color in this case but the rest of that looks pretty good all right cool so I'm going to go ahead and delete all of that right now and I'm going to add so I'm going to add a view and we'll say Style equals Styles dot content wrapper and inside of this content wrapper I'm going to have another view and inside of this view I will have another view inside of here I'm going to have some text that says step sense all right so I'm going to reference um this quite often so right here we're basically going to we have a view that's going to be a bigger container up here and then we'll have another view that wraps this top part and then one that'll be this orange background with the text inside of it so this one this is first View we'll do style styles dot we will call this um content wrapper and then this view right here this will be our style equals styles Dot step step title oops we'll do wrapper this will be like that orange that orange okay so that's looking good and then below just realized I did this one already so we'll do top title underneath the top title we're going to add this circular progress bar let's import that here at the top and the one we're going to import specifically is the anime animated circular progress and so we're going to put that down um right under here so here we'll put in animated circular progress and we'll do size of 280 and then with of 20 we'll do 15 oops 15. and then fill will be um keep that empty for a minute I'm going to show you what we're going to do with actually with that and then right here we'll have a line cap so the line cap is um this little part is rounded I kind of like the rounded so here we will put line cap equals round so next we will do our tint color I'm just going to go with we're actually going to change this here in a minute and I'll show you what we'll do but we'll go ahead and put that for right now and then we'll do our then we'll do our background colors this so with our fill basically what I want to do is set a range of how many steps to be able to hit a hundred percent so that could be 10 000 steps that could be 100 steps whatever you want but in my case I want to do a thousand steps will equal a hundred percent of this circle so right here again it's 500 steps equals 50 so in order to do that right up here at the top we're going to set a progress and we're going to say progress equals our step count so right here divided by a thousand times 100 and this will give us a percent so then what we can do is we can put pass down our progress here and then that will give us our percent based on our steps so again if you wanted to change this you could you could change this to however many steps your your goal is if you want to think of it that way so I'll just put that for right now and then let's go ahead and build this out so here I will say fill and what we want to render we want to render a view and I'm going to say style equals Styles dot step wrapper and then inside of here I'm going to do a text and yep we'll have a steps I'm going to call this actually steps steps and that will be our step count and then there's one more piece of code that I want to throw in here to give us that percent so again this this first one will give us this 500 and then this one right here is a percent so we're saying math.round whatever the fill is which is our progress again up here our percent um we want to say hey give us the percent of where we're at and then we can go ahead and close this off so now let's install the react native SVG and that should take care of this problem cool now that that's installed you may need to shut down your server and reload it so I have mine here and right here it says zero percent I'm going to change this let's change this to 100. okay perfect so if you can see right there it's really small but you can see a 100 and that's ten percent if I change this to 500 there's 50 and then 1000 is our goal is complete all right cool it's looking really good so outside of our circular Circle progress we're going to go underneath this view we're going to add one more view so we'll style equals Style equals Styles Dot called bottom wrapper so this will give us the what we're doing here is we're going to give it the current status of our device and inside of this we will just have one text that is our connection status that should be all inside of our return let's go ahead and do our styling all right first for our content wrapper we'll have this moved up as well as our status below next we will add our top title and this will push this down a little bit and give us a little more space here so next we will add our step title wrapper okay that's looking really good okay that's looking good next we will do oh right here let's do our Styles equals styles dot title so let's add that here all right that's looking good let's add our step wrapper here step wrapper and then next we have our steps and our percent let's add those in and that's what I have here okay those are looking really good and then next let's see here we have our bottom wrapper let's add that in and now let's just add our connection status here okay all right that's looking really good now there's another little thing that we could do here in our tint color we we have it set to only be one color the whole time for example if I go here a thousand if I had to just do 500 we're stuck with this color so in our tint color we can actually run some nested ternary operators that say if the progress is a hundred then what we're going to do is we're gonna have 100 so in this case it'd be a thousand we're gonna have this orange color and then next what did I say here if it's 50 I want this color and anything else is going to be this color so let's try 500 here so there's a different color and then I'll do 400 it'll be yellow so here it's yellow if it gets halfway it's this orange color burnt orange and if it's full it's this brighter orange anyways you can play with that um just kind of a fun color change as the progress goes there's one more thing that we could just try and this is obviously up to you I just threw this in last second is I do have some of these little gifts gifs whatever you want to call them um that I threw in so up here if I switch this from the PNG to gif you can actually see some movement in the app now which I kind of thought was cool and I have a few of them here I have one for background four as well as background three anyways you can play around with those and if not you can just stick with the images which are going to be sharper okay so now let's jump on the phone and let's see if this works all right so I actually have it set to a thousand here I'm going to reset that back to zero in my U state for my step count that's better okay so right now it has searching I'm going to hit the reset button on my esp32 and we're going to see if it connects connecting connected perfect so now I'm going to shake my esp32 there it's going it looks really really really good now I'm going to hit the e the eprom erase button the reset button I'll hit that keep shaking it and it resets perfectly all right so now that we're at 12 steps I'm 13. I'm going to hit the reset button on the device that has reconnecting connected and we're off to a good start again one of the things I'm realizing is I don't have the rounded corners on the charts so right here oh I put line here it's actually line cap let me try that all right so now yeah that's looking much much better in my opinion all right there you have it we built a react native app that connects through Bluetooth to our esp32 to measure steps please like And subscribe and leave a comment down below if you would like to build a custom PCB based on this design

Channel: Taylor Galbraith

Views: 13,868

Keywords: esp32, esp32 projects, bluetooth low energy, react native, bluetooth low energy in iot, esp32 bluetooth, react native esp32, react native bluetooth, mpu6050, arduino, arduino tutorial, arduino tutorial for beginners, tutorials, react native tutorial, android, ios, iphone, xiao seed, seeeduino xiao, arduino esp32, mpu6050 esp32, steps tracker, DIY, esp32 projects iot, react native bluetooth connection, esp32 projects tutorial, react native bluetooth app, esp32 tutorial

Id: ssokvToiYU0

Length: 38min 17sec (2297 seconds)

Published: Mon Jul 03 2023