ESP8266 and Visuino: Control Servo Remotely over Wi-Fi with Rotary Encoder

ESP8266 modules are great low cost stand alone controllers with built in Wi-Fi. In this Instructable I will show you how you can control a Servo remotely over Wi-Fi with a Rotary Encoder. The Instructable is a similar but more advanced version of the “Arduino Nano and Visuino: Control Servo with Rotary Encoder” Instructable.

In the Instructable, I will use 2 NodeMCUmodules. One version 0.9, and the other 1.0. The NodeMCU are the easiest way to program and experiment with ESP8266controllers. This Instructable however can easily be done with other modules, and the Servo module can even use ESP-01 module as it needs only one GPIO pin to connect to the Servo.

Step 1: Components

  1. NodeMCU ESP8266 boards (I used both NodeMCU 0.9, and NodeMCU 1.0 versions, but any other combination, or even stand alone ESP-12 will work)
  2. One Rotary Encoder module I got from this cheap 37 sensors set.
  3. 1 Small Servo
  4. 8 Female-Female jumper wires
  5. 3 Male-Female jumper wires

Step 3: Connect the Servo to the second NodeMCU ESP8266 Module

Connect the Servo to the second NodeMCU ESP8266 Module
56ac0dec15be4d97d90007e9.jpeg 56ac0e234fbadef83c00027d.jpeg 56ac14164936d4a6440009e1.jpeg

To simplify this Instructable, we will connect the Power from the NodeMCU to the Servo, In real projects, you will need to have a dedicated power supply for the servo! Please look at this Instructable to see how you can connect the Servo to external power.

  1. Connect Ground(Black wire),Power(Red wire), and Control(Orange wire) to the Servo (Picture 1)
  2. Connect the other end of the Power wire(Red wire) to the 5V(Called “Vin” in NodeMCU version 1.0) Power pin of the ESP8266 NodeMCU module (Picture 2)
  3. Connect the other end of the Ground wire(Black wire) to the Ground pin of the ESP8266 NodeMCU module (Picture 2)
  4. Connect the other end of the Control wire(Orange wire) to the Digital pin 2of the ESP8266 NodeMCU module (Picture 3)
  5. Picture 4 shows where are the Ground, 5V(Vin) Power, and Digital 2 pins of the NodeMCU 0.9

Step 4: Start Visuino, and select the ESP8266 Board type

Start Visuino, and select the ESP8266 Board type
ESP8266.png

To start programming the Arduino, you will need to have the Arduino IDEinstalled from here: http://www.arduino.cc.

Make sure that you install 1.6.7 or higher, otherwise this Instructable will not work!

If you have not done follow the steps in this Instructable to setup the Arduino IDE to program ESP 8266!

The Visuinohttps://www.visuino.com also needs to be installed.

  1. Start Visuinoas shown in the first picture
  2. Click on the “Tools” button on the Arduino component (Picture 1) in Visuino
  3. When the dialog appears, select “NodeMCU ESP-12” as shown on Picture 2

Step 5: In Visuino: Setup the module as Access Point

In Visuino: Setup the module as Access Point
AccessPointConfigEnable.png AccessPointConfigIP.png
  1. In the Object Inspector, expand the “Modules” property, then the “WiFi” sub property, then the “AccessPoint: sub property (Picture 1)
  2. Set the value of the “SSID” sub property of the “AccessPoint”, to “ServoRemote” (Picture 1)

To make sure the Access Point will be on the 200.200.200.X subnet, we need to assign a fixed address.

  1. In the Object Inspector, expand the “Config” sub property of the “AccessPoint” property (Picture 2)
  2. Set the value of the “Enabled” sub property of the Config to “True” (Picture 2)
  3. Set the value of the “IP” sub property to “200.200.200.100” (Picture 3)

Step 6: In Visuino: Add an UDP Socket for the communication

In Visuino: Add an UDP Socket for the communication
SocketsAddUDP.png SocketsRemoteIP.png SocketsRemotePort.png

Next we need to add an UDP socket for the communication.

  1. In the Object Inspector, click on the “…” button next to the value of the “Sockets” sub property of the “WiFi” property (Picture 1)
  2. In the Sockets editor select “UDP Socket”, and then click on the “+” button (Picture 2)
  3. In the Object Inspector, set the value “RemoteIPAddress” property to “200.200.200.200” (Picture 3) – this is the fixed IP address that we will assign to the other module later on
  4. In the Object Inspector set the value of the “RemotePort” to “8888” (Picture 4)
  5. Close the “Sockets” editor.

Step 7: In Visuino: Add and connect Rotary Encoder component

In Visuino: Add and connect Rotary Encoder component
ComponentRotaryConnect1.png
ComponentRotaryConnect2.png
  1. Type “rotar” in the Filter box of the Component Toolbox then select the “Rotary Encoder Sensor” component (Picture 1), and drop it in the design area
  2. Connect the “Out” pin of the Digital[ 2 ] channel of the “NodeMCU ESP-12″component to the “Clock(A)” pin of the RotaryEncoderSensor1(Picture 2)
  3. Connect the “Out” pin of the Digital[ 3 ] channel of the”NodeMCU ESP-12″

    component to the “Direction(B)” pin of the RotaryEncoderSensor1(Picture 3)

Step 8: In Visuino: Add and connect Up/Down Counter component

In Visuino: Add and connect Up/Down Counter component
ComponentCounterInitialValue.png
ComponentCounterMinRollOver.png
ComponentCounterMinValue.png
ComponentCounterMaxRollOver.png
ComponentCounterMaxValue.png

We need a counter to count the Up/Down rotations from 0 to 100, and we need to set in in the middle/neutral 50:

  1. Type “count” in the Filter box of the Component Toolbox then select the “Up/Down Counter” component (Picture 1), and drop it in the design area
  2. In the Object Inspector set the value of the InitialValue property to 50(Picture 2)
  3. In the Object Inspector expand the Counter’s Min property
  4. In the Object Inspector set the value of the RollOver sub property to False(Picture 3)
  5. In the Object Inspector set the

    value of theValue sub property to 0 (Picture 3)

  6. In the Object Inspector expand the Counter’s Max property(Picture 5)
  7. In the Object Inspector set the

    value of theRollOver sub property to False(Picture 5)

  8. In the Object Inspector set the value of the Value sub property to 100(Picture 6)

Step 9: In Visuino: Connect the Up/Down Counter component

In Visuino: Connect the Up/Down Counter component
ComponentCounterConnect2.png
ComponentCounterConnect3.png
PullUp.png
  1. Connect the “Down” pin of the RotaryEncoderSensor1 component to the “Down” pin of the UpDownCounter1 component (Picture 1)
  2. Connect the “Up” pin of the RotaryEncoderSensor1 component to the “Up” pin of the UpDownCounter1 component (Picture 2)
  3. Connect the “Out” pin of the” Digital[ 4 ]” channel of the “NodeMCU ESP-12” component to the “Reset” pin of the UpDownCounter1 (Picture 3)

The Rotary encoder module switch that I have does not have pull up resistor. The ESP8266 however has built-in optional pull-up resistors for the pins. To enable the pull-up resistor for the Digital pin 4:

  1. In the Object Inspector expand the “Digital” property, then the “Digital[ 4 ]” sub property (Picture 4)
  2. In the Object Inspector set the value of the IsPullUp sub property to True(Picture 4)

Step 10: In Visuino: Add and connect Integer To Analog component

In Visuino: Add and connect Integer To Analog component
ComponentIntToAnalogScale.png
ComponentIntToAnalogConnect.png

The servo needs analog value in the range between 0 and 1.0, so we need to convert the count to Analog and multiply it by 0.01 to convert the 0 to 100 range into Analog 0 to 1.0:

  1. Type “To Analo” in the Filter box of the Component Toolbox then select the “Integer To Analog” component (Picture 1), and drop it in the design area
  2. In the Object Inspector set the Scale property to 0.01 (Picture 2) . This will convert the counter values from the integer range of 0 to 100, to the analog range of 0.0 to 1.0.
  3. Connect the “Out” pin of the UpDownCounter1 to the “In” pin of the IntegerToAnalog1 component (Picture 3)

Step 11: In Visuino: Add and Make Structure component, and add Analog channel to it

In Visuino: Add and Make Structure component, and add Analog channel to it
ComponentMakeStructTools.png
ComponentSplitAddChannel1.png
ComponentSplitAddChannel2.png

We need to send the analog value over the UDP. To do that we will make a structure with analog value and will send it over the UDP socket.

  1. Type “make” in the Filter box of the Component Toolbox then select the “Make Structure” component (Picture 1), and drop it in the design area
  2. Click on the “Tools” button (Picture 2) to open the “Elements” editor (Picture 3)
  3. In the “Elements” editor select the “Analog” element, and then clickon the “+” button (Picture 3) to add an Analog element (Picture 4)
  4. Close the “Elements” editor.

Step 12: In Visuino: Connect the Make Structure component

In Visuino: Connect the Make Structure component
ComponentMakeStructConnect2.png
ComponentMakeStructConnect3.png
  1. Connect the “Out” pin of the MakeStructure1 component to the “In” pin of the “Modules.WiFi.Sockets.UDPSocket1” of the “NodeMCU ESP-12” component (Picture 3)
  2. Connect the the “In” pin of the “Elements.Analog1” element of the MakeStructure1 component to the “Out” pin of the IntegerToAnalog1component (Picture 3)

Step 13: Generate, Compile, and Upload the ESP8266 code for the Rotary Encoder Module

Generate, Compile, and Upload the ESP8266 code for the Rotary Encoder Module
Arduino IDE.png
  1. In Visuino, Press F9 or click on the button shown on Picture 1 to generate the Arduino code, and open the Arduino IDE
  2. Connect the first NodeMCU module (The one with the Rotary Encoder) with USB cable to the computer
  3. Select the board type and serial port as I have shown you in this Inctructable
  4. Make sure you have installed the latest staging version of the ESP support! The stable release does not have some of the latest features, and you will have errors when you try to compile!
  5. In the Arduino IDE, click on the Upload button, to compile and upload the code (Picture 2)

Step 14: In Visuino: Select the ESP8266 Board type, and configure it to connect to the Access Point

 In Visuino: Select the ESP8266 Board type, and configure it to connect to the Access Point
AccessPointsAdd.png
AccessPointsSSID.png
AccessPointsConfigEnable.png
AccessPointsConfigIP.png

Now lets program the Servo module.

  1. Start new project.
  2. Click on the “Tools” button on the Arduino component, and when the dialog appears, select “NodeMCU ESP-12” as you did in Step 4 for the Rotary Encoder module

Next we need to configure the module to connect to the Access Point of the Thermometer module, and use a fixed IP Address of 200.200.200.200

  1. In the Object Inspector, expand the “Modules” property, then the “WiFi” sub property, then the “AccessPoints” sub property, and click on the “…” button next to its value (Picture 1)
  2. In the “AccessPoins” editor, select “WiFi Access Point”, and then click on the “+” button to add the access point (Picture 2)
  3. In the Object Inspector, set the value of the “SSID” property to “ServoRemote” (Picture 3)
  4. In the Object Inspector, expand the “Config” property, and set the value of the “Enabled” sub property to “True” (Picture 4)
  5. In the Object Inspector, set the value of the “IP” sub property to “200.200.200.200” (Picture 5)

Step 15: In Visuino: Add an UDP Socket for the communication

In Visuino: Add an UDP Socket for the communication
SocketsAddUDP.png
SocketsAddUDPPort.png

Next we need to add an UDP socket for the communication.

  1. In the Object Inspector, click on the “…” button next to the value of the Sockets sub property of the WiFi (Picture 1)
  2. In the Sockets editor select “UDP Socket”, and then click on the “+” button (Picture 2)
  3. In the Object Inspector, set the value “RemoteIPAddress” property to “200.200.200.200” (Picture 3)
  4. In the Object Inspector set the value of the “Port” to “8888” (Picture 4)

Step 16: In Visuino: Add Split Structure component, and add Analog channel to it

In Visuino: Add Split Structure component, and add Analog channel to it
ComponentSplitAddChannel.png
ComponentSplitAddChannel1.png
ComponentSplitAddChannel2.png

The Remote Control module sends the servo position in binary floating point form as a packet. We need to decode it properly. For this we need a “Split Structure” component with “Analog” element in it.

  1. Type “struct” in the Filter box of the Component Toolbox then select the “Split Structure” component (Picture 1), and drop it in the design area
  2. Click on the “Tools” button (Picture 2) to open the Elements editor (Picture 3)
  3. In the “Elements” editor select the “Analog” element, and then click on the “+” button (Picture 3) to add an Analog element (Picture 4)
  4. Close the Elements editor.

Step 17: In Visuino: Add and connect Servo component

In Visuino: Add and connect Servo component
Connect1.png
Connect2.png
Connect3.png
  1. Type “servo” in the Filter box of the Component Toolbox then select the “Servo” component (Picture 1), and drop it in the design area
  2. Connect the “Out” pin of the Servo1 component to the “Digital” input pin of Digital[ 2 ] channel of the Arduino component (Picture 2)
  3. Connect the “In” pin of the Servo1 component (Picture 3) to the “Out” pin of the “Elements.Analog1” of the SplitStructure1 component (Picture 4)

Step 18: Generate, Compile, and Upload the ESP8266 code for the Servo

Generate, Compile, and Upload the ESP8266 code for the Servo
Arduino IDE.png
  1. In Visuino, Press F9 or click on the button shown on Picture 1 to generate the Arduino code, and open the Arduino IDE
  2. Connect the second NodeMCU module (The one with the Servo) with USB cable to the computer
  3. Select the board type and serial port as I have shown you in this Inctructable
  4. In the Arduino IDE, click on the Upload button, to compile and upload the code (Picture 2)

Step 19: And play…

And play...
VisuinoDiagramCrop.png
VisuinoDiagramCrop.png

Congratulations! You have completed the project.

Picture 1 shows the connected and powered up project.

If you rotate the Rotary Encoder back and forth, the Servo will move in the same direction, as you can see in the video. If you press the Rotary Encoder shaft down, the Servo will move to neutral center position.

On Picture 2 you can see the complete Visuino diagram for the Rotary Encoder Remote Control module.

On Picture 3 you can see the complete Visuino diagram for the Servo module.

Also attached are the Visuino projects, that I created for this Instructable. You can download and open them in Visuinohttps://www.visuino.com