Hello everyone, in today’s video, we
will establish communication between the inbuilt Wi-Fi of the ESP32 and a mobile phone
application through the RemoteXY IoT cloud. This will allow you to monitor
and control your project inputs and outputs status from anywhere in the world. First, let's see how RemoteXY works. It is made up of two parts, the Graphical User
Interface Editor (GUI), and the Android app. The GUI Editor is used to create the mobile
app interface and to generate the source code for controlling Arduino and ESP boards
and can be accessed at remotexy.com. The android app connects to
the device to monitor and control the device status with the created GUI.
The different types of connections are via USB cable for Android, Bluetooth, wired or wireless
ethernet, Wi-Fi access point, and cloud server. Now, set your browser to remotexy.com.
You can click on "Start Now" or "Editor" to immediately start creating your GUI.
But first, click on "Sign" to create an account. This will allow you to generate a
token for the IoT cloud connection. From here, you can create a new project,
open an existing project, and save a project. Let us save this project as ESP32 IoT. Under configuration properties,
click on the Bluetooth icon. Here, you can select the
connection type for your project. I will first use the Wi-Fi
access point connection. Then I will select the ESP32-based board
from here, under the Choice by Core tab. Under modules, you can select
any of these modules as required. However, I am utilizing the ESP32 Wi-Fi on-chip. Finally, I will be programming
the ESP32 with the FLProg IDE. When done, click on Apply
to accept the selections. We will only note the port number of the module
interface since the Wi-Fi access point name and port number will be set in FLProg.
You can change how the app is viewed by selecting a suitable background
color (gray) and orientation (both). A password for accessing the app
can be provided here if required. Now, drag and drop the push switch control
element from the left-hand side into the app. The push switch will turn on and off an LED. The push switch properties
can be adjusted as required. Also, drag in a slider, set the orientation
to horizontal, and adjust it as required. The slider will adjust the brightness of an LED.
Now add an LED indicator to show the state of a push-button switch connected to the ESP32.
Also, add an instrument indicator to show the analog value of a potentiometer
with its default properties. A maximum of five elements are supported
by the free version of the Android app. Click on the horizontal orientation and adjust
the control and indicator elements as required. Click on "Get Source Code,"
highlight, and copy the code. Create a project in FLProg
with the ESP32 selected. Expand the project tree to display
the controller Wi-Fi settings. Double-click to enable the access
point and type in a network name/SSID. Input a connection password here.
Set the IP address to 192.168.1.1. Expand the Ready Services block
group and drag in the RemoteXY block. Double-click on the block.
Click here to select the built-in WiFi module. Select the access point and input
the port number from RemoteXY. Go to the Inputs/Outputs tab and
click on "Download description." Paste the copied source code from RemoteXY here.
Observe that the led and instrument elements appear under input, while the push
switch and slider appear under output. Select the output connection status and click OK.
The block now has two inputs and three outputs. Now, add a digital input to pin D14 with
bounce protection and pull-up resistor enabled. Add an analog input to pin D35.
Add two digital outputs to pins D2 and D13. And then PWM analog output to pin D12. Drag in the digital input and invert its output.
Since the led input of the remoteXY block requires an integer instead of a Boolean, drag in the
byte block from the type conversion group. Drag in the analog input and a scale
block into the program and connect them to the block instrument input.
Double-click on the scale block. Set the upper limit of the input signal to 4095
and the upper limit of the output signal to 100. Connect the onboard LED at pin D2 to the CS output
of the block, pin D13 digital output to the push switch, and the analog output to the slider.
Then upload the code to the ESP32. Setup the circuit connection as shown with a push
button switch connected to pin D14 of the ESP32, a potentiometer connected to pin D35, and
two LEDs connected to pins D12 and 13. Download the remoteXY app from Google Play Store. Then turn on your mobile phone's Wi-Fi
and connect to the ESP32 access point. Open the remotexy app and add a new device.
Select the Wi-Fi point and the ESP32 access point. Observe that the created GUI on the
web editor is now shown on the app. And the onboard LED of the ESP32 is turned
on to indicate the remote connection. Touch the push switch to turn
on and off the first LED. Drag the slider to the right to
increase the intensity of the second LED and to the left to dim it.
Hold down the push button switch to turn on the LED indicator on the app.
And then, adjust the potentiometer and observe the corresponding response
of the instrument value on the app. To monitor and control your devices from
anywhere in the world, return to remotexy.com. Click on Wi-Fi access point,
select cloud server and apply. Under the module interface, click on my tokens. Create a new token with the board name.
Note the server name, port number and token. Return to the editor and select the created token.
Note the server name, port number, and token. Click on "get source code,"
highlight, and copy the code. In FLProg controller Wi-Fi
settings, enable client. Input your home Wi-Fi network SSID and
password or any other Wi-Fi network with an internet connection.
Double-click on the remotexy block and select cloud.
Input the server name, token, and port number. Then click on the Inputs/Outputs
tab, and Download description. Paste the source code from the GUI web editor
here, click OK and upload the code to the ESP32. Connect your mobile phone to your home network. Add a new device in the remotexy
app and select cloud server. Input the cloud server's
name, port number, and token. Then connect to the cloud server.
The GUI is now being displayed as before. Observe a lag in the response
time of the control action. This is because of the internet connection
through the remotexy cloud server. I hope this video is useful in your next project,
if so, click on the "like" button and share your thoughts in the comment section.
Bye for now.
