Arduino Power Plug Web Control

Introduction: Arduino Power Plug Web Control

About: News November 2019. Welcome to the place where we have started to build useful examples. Arduino for Visual Studio provides an Arduino compatible development environment in Microsoft Visual Studio. The tools p…

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:

Visual Micro

RCSwitch Library

Project Template Software

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:

  1. Open the Library manger from Visual Micro > Add Library > Download & Install Arduino Library
  2. Enter the library "rc-switch"
  3. Select the library and install by pressing OK
  4. Then click the Rescan Button
  5. 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.

Step 7: Find Out More

Be the First to Share

    Recommendations

    • Clocks Speed Challenge

      Clocks Speed Challenge
    • Toys & Games Contest

      Toys & Games Contest
    • Big vs Small Challenge

      Big vs Small Challenge

    Comments