Introduction: Smart Fitness Watch With ESP8266 [VScode]

About: Electrical Engineer and a programming hobbyist! I love to build exciting stuff!

An Esp8266 based fitness watch, completely made from scratch!

This shows the time by using NTP so the time is very accurate! and along with time this can also detect the motion of your hand on all 3 axis and warn you with haptic feedback according to the programmed motion. It can even measure BPM and display with a mini graph on the display(currently not working that great, will be fixed soon)! It can also drop an email to your friend/family according to the programmed-motion inside the watch.

So how is this watch compared to other fitness watches out there?

  • Wifi - check
  • Customizable - check
  • 180mah battery - check
  • Haptic - check
  • OLED display - check
  • IMU - check
  • BPM monitoring - uncheck (it will work soon!)

This is going to be quite a long instructable with detailed instructions, so buckle up with a cup or two filled with coffee before building this one!

Before jumping into soldering and messing around, we’ll build a prototype with node MCU which is also based on Esp12E which we’ll be using in the final build.

Supplies

These are the list of products which can help you do this project with ease

(Affiliate Link)















Step 1: OLED Interface With NodeMCU

To start with we’ll go with the OLED display, I used a 0.91 inch OLED display with 4 pins because it uses an I2C interface and we can use this display with just 2 wires apart from VCC and ground. The interface is marked in the OLED module as GND, VCC, SCL, and SDA. SCL is the serial clock and SDA is the serial data.

The other feature of the display is, it has 128pixels horizontally and 32 pixels vertically which give a total of 4096pixels, and by turning ON and turning OFF these pixels we can display different text, images, and other graphics. But doing this manual would be very hard so we'll be using some libraries later to make life much easier.

Now for the electrical connection; connect the SCL of the display to D1, and the SDA of the display to D2, because D1 and D2 are the default I2C pins of the NodeMCU and to power the display connect the VCC and ground of the module to 3.3v and ground of the nodeMCU.

Step 2: Testing the OLED

First set up the Arduino IDE for NodeMCU.

To test if the OLED display is working or not, go to your Arduino IDE and download the Adafruit SSD1306 library from the library manager.

[Go to Sketch -> include library -> ManageLibrary -> Adafruit SSD1306]

Now open the example and select the SSD1306_128X32_I2C example.

No modification to the code is necessary, Just compile and upload the code, the display should play a demo sketch with different graphics, animations, and text! If it’s not working, check the connection once and try again.

Use this link for more info on the OLED display.

Step 3: Pulse Sensor Interface With NodeMCU

The next component we have the Pulse Sensor.
Supposedly, this sensor should be easy to use, but it was a total mess and it took me a few days to just make it work properly. One of the reasons was, it cannot be used on the wrist just like other fitness watch sensors or maybe it wasn’t working well with my skin, please do let me know if you face a similar issue! With some struggles and testing it was working excellent on my fingers or else I had to place it in some weird position on my wrist to get the reading.

But anyway first let's see the Pulse Sensor. It's a 3.3V optical-based analog sensor that outputs a value between 0-3.3V (Make sure you haven't connected the VCC to 5V or the reading won't be proper). Luckily we have one 10bit analog pin in our NodeMCU board which can read this voltage range and gives an output between 0 - 1023, which we can later use to check the pulse.

Now for the electrical connection; Connect the S pin of the pulse sensor to A0 of the NodeMCU and connect the VCC to 3.3V and the ground of the sensor to the ground of the NodeMCU.

Step 4: Testing the Pulse Sensor

We'll perform a very quick and simple test using the serial plotter to see if the pulse sensor is working.

Go to your Arduino IDE and just do is simple analog read using the analogRead(A0) function and display it on the serial monitor using the serial.print() function.

void setup()
{
Serial.begin(115200);
Serial.println("Started!");
}
void loop()
{
Serial.println(analogRead(A0));
delay(10);
}

And once you have uploaded the code, Open the serial plotter [Shortcut: press Shift+Ctrl+L]. Here you can see the analog data of the sensor in a graphical format. When you place your finger on the sensor you can see the graph changes rhythmically to your heartbeat.

[To avoid false reading and noise I have tapped the sensor to my index finger]

Use this link for more info on the pulse sensor.

Step 5: MPU6050 Interface With NodeMCU

Now we’ll see how to use an IMU or inertial measurement unit. For this build, I'm using an MPU6050 which is a MEMS(Micro-electromechanical Systems) sensor with 6 degrees of freedom. Which mean it can measure the acceleration of the body where the sensor is placed on 3 axis and the orientation of the body on 3 axis. If you wondering why specifically MPU 6050? This IMU is very popular and easy to find that's the reason it was used in this build. If you are interested there are other similar IMU you could use like MPU9250, BMI270, etc...

The interface for this IMU is also similar to the OLED display which we saw earlier, just connect the SDA and SCL pin of the MPU to the D2 and D1 of the nodeMCU and connect the VCC and GND to 3.3v and GND of the NodeMCU.

But, what if we want to connect the OLED display along with it? That’s the beauty of the I2C interface, with this communication protocol with just 2 wires apart from the power supply you can connect up to 128 similar sensors or modules which supports I2C.

Step 6: Testing MPU6050 With NodeMCU

Now to test the MPU6050 with NodeMCU I will be using a library from Adafruit, Adafruit MPU6050.

Go to your Arduino IDE and download the Adafruit SSD1306 library from the library manager.

[Go to Sketch -> include library -> ManageLibrary -> Adafruit MPU6050]

Now open the examples, search, and select the Plotter example.

With this example file, we can visualize how the sensor data changes for different motions. Moving on to XY, XZ, or YZ planes we get the change in acceleration data, and if you want to get the orientation(Angular momentum) or gyroscope data just twist and turn across X, Y or Z-axis.

Use this link for more info about the MPU6050.

Since now we tested all the components and all working great! We can interface everything together and test them together in the next step.

Step 7: Complete Breadboard Prototype With NodeMCU

Since we know how to use all the components let's start the build with the easy one, Pulse Sensor. Connect the S pin of the pulse sensor to A0 of the nodeMCU and connect the + and - to 3.3V and the ground of the NodeMCU.

Now, connect the 0.91inch OLED, where SCL and SDA of the OLED display are connected to D1 and D2 of the nodeMCU, and as the final component connect the MPU6050 to NodeMCU to the I2C bus where OLED is already connected.

To make a simple test, you can power the nodeMCU. The led on the MPU6050 and the led of the pulse sensor should glow simultaneously.

Step 8: Brief Overview of Installing VScode and Platform.IO

There is a lot of information on the internet that gives a detailed explanation on how to install VScode along with Platform.io extension and also how to use it with Arduino and nodeMCU. So I will just give a brief overview of that topic in this step.

Go to “code.visualstudio.com” and download the stable version for your operating system. Once the download is complete, install the setup file just like any other regular program.

Then open the Vscode application and install the platform.io extension from the market space. After installation of the extension restart the VScode. When your window restarts again, it will have a new icon on the left side of your window (looks like a Bug). Click the Bug icon and click on open, now navigate to the project folder which you can download from this step or download/clone from my GitHub repo.

Step 9: Modification, Compilation and Uploading

To make it simpler and easy to port to the Arduino IDE, later on, I have used all the libraries which is compatible with the Arduino IDE instead of downloading a platfrom.io version inside the VScdoe. So first install all the libraries in your Arduino IDE.

  • ESP-Core - by Ivan Grokhotkov
  • TimeLib - by PaulStoffregen
  • EmailSender - by Xreef
  • Adafruit 6050 - by Adafruit
  • Wifi Manager - by Tzapu
  • OLED - by ThingPulse

Check the Fitness_Watch Github repo for all the links to these libraries.

Once your project is opened on the VScode editor, open the platform.ini file, this is where the platform.io recognizes the libraries, serial communication speed, framework, and the board that we are using. Only a minor modification to the code is required to compile, just change the path of the external library to your current existing Arduino library path.

lib_extra_dir : "Arduino Library path" 

After this change, just compile the code using the tick button on the bottom tool of the VScode window. There should be no error (it might have some warning). After successful compilation just upload the code to NodeMCU. You don’t have to worry about which port the nodeMCU is connected to in your PC, platform.io will auto-detect and upload the code without any issues.

Step 10: WiFi Settings for NodeMCU

As soon as I power on the OLED display the display will be blank on the first boot, that's because you need to tell the NodeMCU, which wifi network it has to connect to fetch the time.

When the display isn't showing anything on the first boot, an access point will be created by the NodeMCU called Enter Credentials. Just Connect to this access point using your phone/PC/laptop. Once you have connected to the access point, a login page will pull up automatically asking to enter the wifi SSID and password where you would like to connect. Just enter your access point credential where you want the watch to connect. In my case INTERNET (SSID or Name of the access point) and I entered the password.

Once you save, the device will automatically reboot and show the current time perfectly! This is just a one-time setup, your access point credential will be saved in the flash memory of the NodeMCU which we'll be fetched from the next boot.

Step 11: Testing the Breadboard Prototype

Now, we'll see how well these different components work together. After powering the nodeMCU, you can see shows the perfect time, with seconds changing regularly. So the time part is working great!

Now to test the Pulse Sensor first you have to navigate to the BPM screen, for that just click the flash button on the nodeMCU. This method also confirms that navigation and button press is working fine. Once you're on the BPM screen, just place the pulse sensor on your finger, in my case I just tapped it to my finger to stop it from moving around so it doesn't have any false reading. When you take a look into the OLED display the pulse sensor data is drawn as a graph in the display, as well as beats per minute or BPM is shown. So with this, we know, the pulse sensor is working without any problem.

Finally to test the MPU, just let the device rest for a while, after about 15 seconds the display will turn off. Now just flick or shake the breadboard and the display should be back on again and time should be running!

From all these tests, we know all the hardware parts are working just fine! so we can build everything in a perfboard.

Step 12: Setting Up the PCB

For the physical structure of the watch we’ll be using the PCB itself, so take a perf board which is 3.6 cm by 5 cm. In this, we have to make a slot on 2 sides (parallel to the shorter edge of the PCB). This is where we will be using the straps so, this would be much comfortable to wear. To make the slot, start with drilling small holes consecutively and sanded it with the same drill bit (the slot width and length may vary on the type of velcro which you're using).

If you don’t like sharp edges like me, you can use a sander or high-grade sandpaper to sand off the edges to give some rounded corners.

Step 13: Soldering the Components to the PCB

Once the PCB is ready we can place the components on it and solder them together.

Refer to the pinout of NodeMCU and esp12E for comparison, to see how the ESP12E pin is mapped to the nodeMCU before putting everything together or it won't work as expected.

Just follow the soldering steps to know which components should be placed and soldered first, so you can complete this device without messing with a lot of wires all around the watch!

Start with the esp12E, solder the VCC, and enable(EN) the pin together, without this connection the IC won’t work! Then place some insulation on the back of the 12E to prevent short circuits when it is placed on the perf board. After soldering the 12E in place follow with a momentary switch. This will act as both a programming button as well as a button to navigate on the screen. You also need to have a pull-up resistor connected to the button or the 12E will go to flash mode on boot.

Download the circuit diagram for more detailed information about the connection.

Step 14: More Soldering!

Now we’ll add a new feature apart from what we have tested with the breadboard. Adding the haptic feedback. A small vibrating(haptic) motor is used to give physical feedback when a user-programmed motion is detected. Just place it next to the 12E and solder one pin of the haptic it to GPIO14 of the 12E and the other pin to the ground (it doesn't matter which pin is connected where, as the vibrating motor doesn't have any polarity).

Now add the AMS1117 3.3V regulator and solder the pins according to the connection in the circuit diagram. This might be a little fiddly because of it's SMD package, but it's still doable! After the regulator place a 180 mah lipo battery with 3M tape along with a 2 pin male header for charging the battery later. TP4056 will be used to charge this battery externally.

Step 15: Ughh.. More Solderinnng!!

A power switch is added to turn on and turn off the device completely, it’s not recommended to have this, but the power optimization for this project isn't great yet! so we'll go with using the switch. Place the switch right next to the haptic, and solder the switch between the lipo battery and the voltage regulator.

Once the soldering of the switch is done, place the MPU6050 on top of the power switch, and solder the SCL and SDA pin of the IMU to the GPIO5 and GPIO4 of the ESP12E respectively. Now for the OLED screen follow the same process as the IMU. Solder the OLED display on top of the lipo battery and connect to the same I2C bus of the ESP12E where the IMU is connected. Even before soldering the OLED display, I have taken out the A0 pin behind the board so I can solder the pulse sensor later on.

Step 16: Need to Develop This Project Into a PCB?

Getting a electronics project into production would be nightmare. To ease you into the production world we have developed a platform (PCB CUPID) for PCB enthusiasts and hobbyists to ask and answer questions related to PCB design, fabrication, and assembly.

In addition to the Q&A feature, this website also has a wealth of blog posts and useful resources to help you learn about developing and manufacturing printed circuit boards. Whether you're a beginner looking for a crash course on PCB basics, or an experienced designer looking for tips and tricks, you'll find something of value on the site

So head on over and check it out, and don't forget to participate in the Q&A community to get help and share your own knowledge. Thanks!

Step 17: Programming the Esp12E

ESP-12E doesn't come with an inbuilt programmer, so we need to use an external programmer like the FDTI module. So I made an adapter with a few wires and female header pins, With this, we can temporarily solder the esp12E and program it using the FTDI module.

  • Connect the GND[esp12E] to GND
  • Rx[esp12E] to Tx,
  • Tx[esp12E] to Rx
  • GPIO15[esp12E] to GND
  • GPIO0 [esp12E] to GND
  • VCC[esp12E] to VCC of FDTI module.

Just make sure while you connect this to your PC, the programming button is pressed constantly. This will put the 12E on flash mode where we can upload the program. Just compile and upload the code as we did for the prototype [step - 9]. Once uploading the code is done! We should be good to go.

Step 18: Finishing the Project

To make it completely functional like a real watch, I'm adding a velcro which will act as the strap for this watch.

Along with that add the pulse sensor within the strap, connect the S pin to A0 using a voltage divider circuit(Because ESP12E reads value between 0-1V). Then connect the + and - pin to VCC and ground the 3.3V regulator. As we saw before this pulse sensor isn't that accurate and not that great to be used if you are making a fitness watch. The reading from this sensor will have a great variation on where you place the sensor on your body and also toward the end this sensor didn't work out that great but still I placed it within the strap so I can fix it later or can be easily replaced without damaging the rest of the circuit. To fix all the straps I just used superglue, which wasn't a great idea but it gets the job done.

To increase the level of comfort, I have added a small removable foam sheet with 3M tape behind the watch, with this, finally, we have completed the fitness watch!

Step 19: Printing a PCB!

Incase if you want to make this into a more professional looking device, you can print a PCB, I have made the complete design in KiCAD and the Gerber file is attached in this step. [Note: for some reason am not able to upload a .zip file, so you need to convert the 'Fitness Watch Gerber.rar' file to 'Fitness Watch Gerber.zip' before sending for a PCB manufacturer]

Since it is a printed circuit board I had little more space to cramp in few more features!

  • A more efficient voltage regulator support is added
  • Micro USB support
  • Inbuilt TP4056 charger circuit is added
  • Charging indicator LED
  • Long press power on and power off
  • Programming slot for FDTI

This comes with a disadvantage too, most components become SMD based and soldering this might need little more experience than handling the THT components in a perfboard.

Edit : This PCB design has some mistakes on charging circuit and long press power on, check out this instructable for updates

Step 20: Final Thoughts

Watch the end of the video for the testing and how it works.

Everything works so well! but...I have totally screwed up the heart rate sensor and the location of the sensor is terrible, so my suggestion is, use one of the sensors from spark fun which uses I2C communication, so you can hook it up to the same line as the OLED and the MPU6050 and with few modifications to the code, it would work great with accurate readings!

Even though the watch has this many features, we haven't used it's full potential yet. In the next instructable, I will try to fix the heart rate sensor with a better one and use the wifi functionality and the motion detection functionality of the watch to make a hand gesture controlled home automation system.

If you guys have faced any trouble building this or have a better suggestion? you can leave a comment down below. It will also be great if you share this and subscribe to the youtube channel for more interesting projects!

Battery Powered Contest

Participated in the
Battery Powered Contest