Introduction: Arduino Power Plug Web Control
A simple Arduino web based power plug controller, using an ESP32 board
Tip - the same example works for ESP8266/8285 models as well
Using Visual Micro we can create and deploy the whole application within the same IDE, from our Arduino code to the HTML,CSS and Javascript required to run the web interface.
Supplies
ESP32 / ESP8266 / ESP8285 Board
RF Mains Socket (433Mhz)
RF Transmitter (433Mhz)
Jumper Wires
Step 1: Hardware Setup
In this example we only need to add the RF transmitter to our ESP board, as all WiFi capabilities are built in to the ESP module.
Wire it to the ESP as shown in the images.
NOTE - depending on the transmitter model and range desired, you may need to increase the power beyond what the board can supply. Check your transmitters datasheet to confirm the tolerances.
Step 2: Example Project Setup
First we can un-zip the project template to your sketch book folder.
Now we can open this using Visual Studio so we can begin using Visual Micro.
First select your Board and COM port, and check you have set the correct Flash Size for your board.
Step 3: Library Setup
We need to install the Library, which can be done from the Library Manager in the Visual Micro Explorer:
- Open the Library manger from Visual Micro > Add Library > Download & Install Arduino Library
- Enter the library "rc-switch"
- Select the library and install by pressing OK
- Then click the Rescan Button
- Now close the Visual Micro Explorer
For more information about adding Libraries to your project - see this video
Step 4: Easy Multi Language Development
Now we can edit the Arduino code, as well as the HTML and CSS files which are packaged with the project with ease in Visual Micro.
All of the development features you expect are present (syntax highlighting, intellisense etc...) for the HTML and CSS code, and will work for any other Web technologies you wish to deploy as well.
With thousands of additional Visual Studio extensions available on the marketplace you can change how you assemble your pages, and still have Visual Micro handle the build and upload processes for you to your board, including SPIFFS file transfers.
Step 5: Upload SPIFFS Files
Now we are ready to upload our files to the filesystem on the ESP chip.
Ensure the USB Lead is connected and the correct COM port is set in Visual Micro
Click Visual Micro > Publish Server Data Files (SPIFFS) to upload the files in the "data\" folder to the ESP Chip
Step 6: Try It Out
Load a web browser on your PC and navigate to http://esp32/, the page above should appear in the browser.
The page request from the browser causes the ESP32 to load the relevant file from the SPIFFS filesystem, and send it back to the browser.
When you press the ON / OFF buttons:
- Browser sends the HTTP Request from the page to the ESP32
- ESP32 will process this and transmit the RF message to the socket
- ESP32 then replies back to HTTP request with the Response similar to above.
From here you can easily edit the program and files and repeat this process to build a project with an in built web interface easily.
