Remote Control ZOOM:BIT using Grove 8266 WiFi and Blynk

Do you want to remotely control your ZOOM:BIT just like a toy car? This tutorial shows the step-by-step guide on how to build a remote control ZOOM:BIT using Grove 8266 WiFi module and Blynk.

Free roam your ZOOM:BIT at home or you can even make your own obstacle course and use your ZOOM:BIT to take the challenge!

Hardware and Software Preparation

Hardware:

  1. Zoom:bit (with micro:bit) x1
  2. Grove WiFi 8266 x1

Software:

  1. Makecode editor for micro:bit
  2. Blynk

 

Before You Start

Hardware Setup

ZOOM:BIT + Grove 8266 WiFi

1. Follow the step-by-step building guide in the guide book.

Note: If you are new to ZOOM:BIT, you are encouraged to finish the lessons in the guide book before proceeding to this tutorial. For more information, kindly visit our product page here.

2. Unplug the Maker Line Sensor (P1:P9) from your REKA:BIT.

3. Use double-sided tape or tape to stick the Grove 8266 WiFi module in the ZOOM:BIT box.

4. Let the Grove cable pass through the hole and connect the Grove 8266 WiFi module to P0:P1 port.

5. Connect the USB cable to your computer and REKA:BIT board of your ZOOM:BIT.

6. Switch on the REKA:BIT.

Software Setup

micro:bit MakeCode

1. Go to Microsoft MakeCode Editor at https://makecode.microbit.org/

2. Create a new project and give it a special name.

Note: If an offline version is needed, you may download it here [link: https://makecode.microbit.org/offline].

3. In your project, select “Extensions” under the Settings icon. You will need to add 2 extensions for this tutorial, both “ZOOM:BIT” and “ESP8266”.

4. Search and add  “ESP8266” extension for Grove WiFi module, and “zoombit” extension for ZOOM:BIT.

Blynk

1. Create a Blynk project in the Blynk app on your smartphone and get the Auth token for the project.

Follow the guide here if you are new to Blynk.

 

What Does the Code Do?

  1. Able to connect to WiFi.
  2. Able to connect to your Blynk project on your smartphone.
  3. Able to control the movement of ZOOM:BIT from Blynk including: moves forward, moves backward, turns left and turns right.
  4. Able to switch on or off the headlights of ZOOM:BIT from Blynk.

 

Let’s Start Coding

Step 1: Blynk Widget Setup

1. Select your Blynk app and select your Blynk Project

2. On the Blynk project, select (+) icon to add a widget. Select “Button” and place it into the project space.

3. Select the Widget that you have placed, named it “Forward Button”, change the pin type to virtual and set it to “V1”. Make sure that the button is in “PUSH” mode.

4. Repeat (2.) to (4.) to add 3 more buttons and name them “Backward Button” (V2), “Left Button” (V3) and “Right Button” (V4).

5. Hold and drag the widgets. Arrange it nicely, in your project space to make buttons facing 4 different directions.

You may change the size of the button by holding and releasing the widget. When you see there are 2 dots on the side of the widget, drag it to your preferred size.

6. Select (+) icon to add a widget again. Select “Button” and place it into the project space.

7. Select the Widget that you have placed, named it “Headlights”, change the pin type to virtual and set it to “V0”. Change the mode of  the button to “SWITCH” mode. 

You may change the size of the button by holding and releasing the widget. When you see there are 2 dots on the side of the widget, drag it to your preferred size.

Step 2: WiFi Module Initialization and Connection

First, initialize the WiFi Module and connect your micro:bit device to the WiFi. 

Follow the steps here to initialize the WiFi Module and connect to your WiFi.

Change the Tx and Rx port number to Tx:P1 and Rx:P0.

Step 3: Create Variables

There are several variables that we will use in this tutorial, including:

  • Blynk Token
  • Forward Button
  • Backward Button
  • Left Button
  • Right Button
  • Headlights
  • Max Speed
  • Min Speed

1. Go to “Variables” and select “Make a variable…”, and create all 8 variables mentioned above.

Step 4: Set Blynk Token

1. Select [set “” to “” ] block from “Variables” category and snap it to [on start] block. Change the variable to “Blynk Token”.

2. Select [ “” ] block from “Text” category and snap it into [ set “Blynk Token” to “” ] block.

Tips: the [set “” to “” ] block stores data in the form of integer. When we use [ “” ] block, it changes the format to string type so we can store our Blynk Token in this variable.

3. Copy and paste your Blynk project’s Auth Token into the block.

Follow this guide to obtain the Auth Token of your Blynk Project.

Step 5: Set Maximum and Minimum Speed

1. Select [set “” to “” ] block from “Variables” category and snap it to [on start] block. Change the variable to “Max Speed”.

2. Insert any value ranging from 0 to 255, for example “200”.

3. Select [set “” to “” ] block from “Variables” category again and snap it to [on start] block. Change the variable to “Min Speed”.

4. Select [ “” ÷ “” ] block from “Math” and snap it to [set “Min Speed” to “” ] block.

5. Select [Max Speed] block from “Variables” and snap it to [set “Min Speed” to [ “” ÷ “” ] ] block and insert “2” to make it [“Max Speed” ÷ “2”]. This let the Min Speed to be half of Max Speed.

Step 6: Set the Conditions for Headlights

1. Select [set “” to “” ] block from “Variables” category and snap it to [forever] block. Change the variable to “Headlights”.

2. Select [parse to number “” ] block from “Text” and snap it to [set “Headlights” to “” ] block.

3. Select [read Blynk: Token “” Pin “” ] block from “ESP8266 WiFi” >> “Blynk” category and snap it to [set “Headlights” to [parse to number “” ] ] block.

Tips: The [read Blynk: Token “” Pin “” ] block reads the data received from Blynk in the form of string. So, [parse to number “” ] block is used to convert it into integer before proceeding to our codes.

4. Select the variable [Blynk Token] from “Variables” and snap it into the [read Blynk: Token “” Pin “” ] block.

5. Fill in the pin number with “V0”.

6. Select [if-else] block from “Logic” and snap it to [forever] block.

7. Select [ “” = “” ] block from “Logic” and snap it into the [if-else] block.

8. Select the variable [Headlights] from “Variables” and snap it into [ “” = “” ] block and insert “1”.

9. Select [set “” headlight to “” ] from “ZOOM:BIT” and snap it under the “if-then” of the [ if-else ] block. Set “all” headlights to “on” (if “Headlights” = “1”).

10. Select [set “” headlight to “” ] from “ZOOM:BIT” again and snap it under the “else” of the [ if-else ] block. Set “all” headlights to “off” (if “Headlights” = “0”).

Tips: The button in Blynk sends a value of “1” when it is pressed or turned on, “0” when it is turned off.

Step 7: Set the Conditions for the Movement of ZOOM:BIT

1. Select [set “” to “” ] block from “Variables” category and snap it to [forever] block. Change the variable to “Forward Button”.

2. Select [parse to number “” ] block from “Text” and snap it to [set “Forward Button” to “” ] block.

3. Select [read Blynk: Token “” Pin “” ] block from “ESP8266 WiFi” >> “Blynk” category and snap it to [set “Forward Button” to [parse to number “” ] ] block.

4. Select the variable [Blynk Token] from “Variables” and snap it into the [read Blynk: Token “” Pin “” ] block.

5. Fill in the pin number with “V1”.

6. Repeat (1.) to (5.) by changing the variable to “Backward Button” (V2), “Left Button” (V3) and “Right Button” (V4).You may right click the [set “Forward Button” to [parse to number [read Blynk: Token “Blynk Token” Pin “V1” ] ] ] block and duplicate it and change the variable and the pin number.

Now, we want to make several conditions when each of the buttons is pressed.

Button(s) pressedZOOM:BIT’s movement
Forward ButtonMoves forward
Backward ButtonMoves backward
Left ButtonRotates left
Right ButtonRotates right
Forward Button & Left Button/ Right ButtonTurns left/right in forward direction
Backward Button & Left Button/ Right ButtonTurns left/right in backward direction
No Button is pressedbrake/stationary

Tips: The button in Blynk sends a value of “1” when it is pressed or turned on, “0” when it is turned off.

7. Select [if-else] block from “Logic” and snap it to [forever] block.

8. Select [ “” = “” ] block from “Logic” and snap it into the [if-else] block.

9. Select the variable [Forward Button] from “Variables” and snap it into [ “” = “” ] block and insert “1”.

10. Repeat (8.) and (9.) by changing the conditions to [[Backward Button] = “1”], [[Left Button] = “1”] and [[Right Button] = “1”] on the same [if-else] block.

Tips: Click the (+) icon on the [if-else] block to add conditions “else if”, (-) to remove.

IF [Forward Button] = “1”

11. Select [ move “” at speed “” ] block from “ZOOM:BIT” and snap it under the conditions of [[Forward Button] = “1”].

12. Select the variable [Max Speed] from “Variables” and snap it into the block and set it to [ move “forward” at speed [Max Speed]].

13. Select another [if-else] block and snap it under [[Forward Button] = “1”].

14. Select [ “” and “” ] block from “Logic” and snap it to the [if-else] block.

15. Select 2 [ “” = “” ] block from “Logic” and snap it to the [ “” and “” ] block.

16. Select the variable [Forward Button] and [Left Button] from “Variables” and snap it to the [ “” = “” ] block. Fill in “1” for both [ “” = “” ] block, so the condition is [ [ [Forward Button] = “1” ] and [ [Left Button] = “1” ] ].

17. Select [set motor speed: left “” right “” ] block from “ZOOM:BIT” and snap it to the [if-else] block.

18. Select [Min Speed] from “Variables” and snap it to the left motor’s speed, [Max Speed] to the right motor’s speed.

19. Repeat (14.) to (18.) to get another condition: else if [ [ [Forward Button] = “1” ] and [ [Right Button] = “1” ] ] and set the motor speed: [set motor speed: left [Max Speed] right [Min Speed] ].

Tips: Click the (+) icon on the [if-else] block to add conditions “else if”, (-) to remove.

IF [Backward Button] = “1”

20. Repeat (11.) to (19.) by changing the direction from “forward” to “backward” blocks, to get:

  • Else if [[Backward Button] = “1”] then >> [ move “backward” at speed [Max Speed]]
  • IF[ [ [Backward Button] = “1” ] and [ [Left Button] = “1” ] ] then >> [set motor speed: left [“0” – [Min Speed]] right [“0” – [Max Speed]] ]
  • Else if[ [ [Backward Button] = “1” ] and [ [Right Button] = “1” ] ] then >> [set motor speed: left [“0” – [Max Speed]] right [“0” – [Min Speed]] ]

Tips: [ “” – “” ] is obtained from the “Math” category to change the motor’s speed to a negative value >> motor moves in the reversed direction.

Tips: You may right click on the similar or repeating blocks and select “duplicate”.

IF [Left Button] = “1”

21. Select [set motor speed: left “” right “” ] block from “ZOOM:BIT” and snap it under the conditions of [[Left Button] = “1”].

22. Select [ “” – “” ] block from “Math” and snap it to the left motor’s speed.

23. Select [Max Speed] from “Variables” and snap it to the left motor’s speed and another [Max Speed] block to the right motor’s speed, to get [set motor speed: left [“0” – [Max Speed]] right [Max Speed]].

24. Repeat (13.) to (19.) to get the following conditions:

  • If[ [ [Forward Button] = “1” ] and [ [Left Button] = “1” ] ] then >> [ set motor speed: left [Min Speed] right [Max Speed] ]
  • Else if[ [ [Backward Button] = “1” ] and [ [Left Button] = “1” ] ] then >> [ set motor speed: left [“0” – [Min Speed]] right [“0” – [Max Speed]] ]

IF [Right Button] = “1”

25. Repeat (21.) to (24.) by changing the direction from “left” to “right”, to get:

  • Else if [[Right Button] = “1”] then >> [ set motor speed: left [Max Speed] right [“0” – [Max Speed]]]
  • IF [ [ [Forward Button] = “1” ] and [ [Right Button] = “1” ] ] then >> [ set motor speed: left [Max Speed] right [Min Speed] ]
  • Else if[ [ [Backward Button] = “1” ] and [ [Right Button] = “1” ] ] then >> [ set motor speed: left [“0” – [Max Speed]] right [“0” – [Min Speed]] ]

ELSE

When no button is pressed, we will let the ZOOM:BIT to stop moving.

26. Select [set motor speed: left “” right “” ] block from “ZOOM:BIT” and snap it under “else”.

27. Set the left motor speed to “0” and the right motor speed to “0”.

Full Code:

Step 8: Download the Codes and Hit the Road!

1. Download the codes to your ZOOM:BIT.

2. Unplug the USB cable from your ZOOM:BIT.

3. Connect the power cable to your ZOOM:BIT, make sure the batteries are inserted correctly to the battery holder.

4. Select your Blynk project in your smartphone and hit the play button. If the wifi connection is successful, press the buttons and enjoy!

GENTLE REMINDER

Please DON”T do this to your ZOOM:BIT:

  • Crash your ZOOM:BIT into anything.
  • Run down the staircase.
  • Fall from an elevated platform, for example a table.
  • Anything that would spoil the parts in your ZOOM:BIT.

Hope you learned how to use Grove WiFi 8266 module with the micro:bit and MakeCode. Thank you.

You are encouraged to further improve the code for higher efficiency and more advanced applications.

Leave a Comment

Your email address will not be published.

Share this Tutorial

Share on facebook
Share on whatsapp
Share on email
Share on print
Share on twitter
Share on pinterest
Share on facebook
Share on whatsapp
Share on email
Share on print
Share on twitter
Share on pinterest

Latest Tutorial

Remote Control ZOOM:BIT using Grove 8266 WiFi and Blynk
Icon Case with Heatsinks & Fan Stressberry Test
Low Profile Aluminum Case Stressberry Test
Stressberry Test on Raspberry Pi 4
K-Type Thermocouple With Maker UnoX And Blynk
Tutorials of Cytron Technologies Scroll to Top