loader
Controlling Windows PC with Smart Phone using ESP

In this Controlling Windows PC with Smartphone using ESP8266 tutorial, I we’ll walkthrough on an exciting journey to control your Windows PC using a smartphone. We’ll leverage the power of ESP8266, a versatile microcontroller, to create a web server that allows you to perform actions like shutdown, restart, and even retrieve system information e.g. Ram Usage, System Info, etc. – all from the smartphone.

Prerequisites

Before we dive in, make sure you have the following:

  1. ESP8266 Module: You can use popular variants like Node MCU.
  2. Arduino IDE: Download and install the Arduino IDE from the official website.
  3. Visual Studio Code (Optional): A code editor for a more feature-rich experience.
  4. Basic Understanding of Arduino Programming.
  5. WinOpsService App: App built using dotnet core, which needs to runs in the on PC for listening the commands triggered from smartphone. You can download the source code from here. I have explained this dotnet core application in depth here.

Setting Up the Hardware

  1. Acquire an ESP8266 Module: Select a suitable ESP8266 variant, such as Node MCU.
  2. USB Cable Connection: Connect your ESP8266 module to your computer using a USB cable.
  3. Ensure Device Recognition: Confirm that your computer recognizes the connected ESP8266 device. You can check this in the device manager (Windows).

You can alternatively check this Getting Started with ESP8266 Node MCU: A Comprehensive Guide if you face any issue or you are you are setting up first time.

Installing Necessary Libraries

Open the Arduino IDE and install the required libraries:

  • ESP8266WiFi: This library allows the ESP8266 to connect to the local Wi-Fi network.
  • ESP8266WebServer: Enables the creation of a web server on the ESP8266.
  • FS: This library provides file system support for the ESP8266.

With these prerequisites in place, we can now delve into the exciting process of coding.

Installing and Running WinOpsService App

Controlling Windows PC with Smartphone using ESP8266 - Download

  • Download and extract zip
  • Double click on setup file to start installation

Controlling Windows PC with Smartphone using ESP8266 - Download and Extract

  • After open setup file you need to click Install in order to finish one click installation.

Controlling Windows PC with Smartphone using ESP8266

  • Installation will be completed and you will see the App is running and listening for commands.

Controlling Windows PC with Smartphone using ESP8266 - app running

If you see the above means you are good to go, in case you closed this application and want to start again then on your desktop look for “WinOpsService” and double click to start.

Controlling Windows PC with Smartphone using ESP8266

This project has 3 parts:

  1. WinOpsService
  2. HTML UI
  3. ESP8266 Sketch

We just completed the first one, now let’s see the other two.

Before going ahead you need to follow below steps:

  • Open Command Prompt as Administrator
  • type netsh http add urlacl url=http://+:8080/ user=”DOMAIN\username” username will be your system username if found difficulty try below
  • netsh http add urlacl url=http://+:8080/ user=Everyone – Not recommended for production
  • We need to know the system IP address in order to communicate with ESP8266 so type ipconfig in the command prompt and look for ipv4 address

    Controlling Windows PC with Smartphone using ESP8266 - ipv4 address

HTML Code for Controlling PC using Phone

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remote PC Manager</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.12.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background: url('https://cdn.pixabay.com/photo/2023/04/10/19/49/ai-generated-7914562_1280.jpg') no-repeat center center fixed;
            background-size: cover;
            color: #fff;
            text-align: center;

        }

        header {
            background: url('https://cdn.pixabay.com/photo/2023/04/10/19/49/ai-generated-7914562_1280.jpg') repeat center center fixed;
            padding: 10px;
            border-bottom: solid 0.1px white;
        }

        footer {
            background: url('https://cdn.pixabay.com/photo/2023/04/10/19/49/ai-generated-7914562_1280.jpg') repeat center center fixed;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
            border-top: solid 0.5px white;
        }

        h1 {
            margin: 20px 0;
            font-size: 25px;
        }

        button {
            padding: 10px;
            margin: 10px;
            font-size: 16px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        @media only screen and (max-width: 600px) {
            button {
                width: 80%;
                margin: 10px auto;
            }
        }
    </style>
</head>

<body>

    <header>
        <h1>Remote PC Manager</h1>
    </header>
    <div class="mt-5">
        <div style="height: 50px; "></div>

        <button class="btn  btn-danger" onclick="sendRequest('turn-off')">Turn Off</button>
        <button class="btn btn-warning" onclick="sendRequest('restart')">Restart</button>
        <button class="btn btn-info" onclick="sendRequest('sleep')">Sleep</button>
        <button class="btn btn-success" onclick="sendRequest('ram-usage')">RAM Usage</button>
        <button class="btn btn-primary" onclick="sendRequest('system-info')">System Info</button>

    </div>
    <footer>
        <p>IoTBoys &copy; 2024 Remote PC Manager</p>
    </footer>

    <script>
        async function sendRequest(command) {
            try {
                const hostAddress = "https://192.168.1.5:8080/"; // Change as per your ipv4 address
                const endpoint = hostAddress + command;
                const response = await fetch(endpoint);

                if (response.ok) {
                    const data = await response.text();
                    alert(data);
                } else {
                    const errorMessage = await response.text();
                    alert(`Request failed with status ${response.status}: ${errorMessage}`);
                }
            } catch (error) {
                console.error('An error occurred:', error);
                alert('Something went wrong, please try again later!');
            }
        }
    </script>

</body>

</html>

Update the above noted IP address with port 8080 in the format of http://your_Ip_address:8080/ for the hostAddress variable.

For example: const hostAddress = “http://192.168.1.5:8080/”;

ESP8266 Code for Controlling PC using Phone

Here some steps if your are beginner and this is your first project.

  1. Open Arduino IDE
  2. Go to File -> New
  3. Paste the below code
  4. Click on Verify and Upload the sketch to ESP8266 board
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>

const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASSWORD";

IPAddress staticIP(192, 168, 1, 100);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200);

  WiFi.begin(ssid, password);
  WiFi.config(staticIP, gateway, subnet); 
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");

  // Initialize SPIFFS
  if (!SPIFFS.begin()) {
    Serial.println("Failed to mount file system");
    return;
  }
  
  server.sendHeader("Access-Control-Allow-Origin", "*");
  server.sendHeader("Access-Control-Allow-Methods", "GET");
  
  server.serveStatic("/", SPIFFS, "/index.html");

  // Start the web server
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();
}

Once you uploaded the sketch to your board, need to follow the below steps:

  • Go to Sketch and click on “Show Sketch Folder”

Controlling Windows PC with Smartphone

  • Create a folder name as “Data”
  • Create a file name as “index.html” as paste the below HTML code into that and save
  • Go to Arduino IDE Tools and click on “ESP8266 Sketch Data Upload”

    Controlling Windows PC with Smartphone using ESP8266

    Once data uploaded you are good to go,

    Go to your smartphone browser and type 192.168.1.100 (Make sure your ESP8266, PC and your phone connected with same network).

    You will see like below screenshot.

    Controlling Windows PC with Smartphone using ESP8266 - demo

Troubleshooting Common Issues:

  1. ESP8266 Not Detected:
    • Ensure the USB cable is firmly connected to both the ESP8266 module and your computer.
    • Try using a different USB cable or port on your computer.
    • Install the necessary USB drivers if your ESP8266 variant requires them.
  2. Arduino IDE Connection Issues:
    • Check if the correct board and port are selected in the Arduino IDE under the “Tools” menu.
    • Restart the Arduino IDE and reconnect the ESP8266 module.
    • Update the USB drivers or try using a different USB port on your computer.
  3. Compilation Errors:
    • Double-check your code for syntax errors or missing libraries.
    • Ensure that you have selected the correct ESP8266 board and settings in the Arduino IDE.
    • Check for any conflicting libraries or outdated dependencies.
  4. Upload Failures:
    • Verify that the ESP8266 module is in programming mode (bootloader mode) during upload.
    • Try pressing the reset button on the ESP8266 just before initiating the upload process.
    • Disable any antivirus or firewall software that may interfere with the upload process.
  5. Serial Communication Issues:
    • Ensure that the baud rate in your Arduino sketch matches the baud rate in the Serial Monitor.
    • Check for loose connections or faulty jumper wires between the ESP8266 and any peripherals.
  6. ESP8266 Overheating:
    • Avoid overloading the ESP8266 with excessive power consumption or complex tasks that may cause overheating.
    • Ensure proper ventilation and cooling for the ESP8266 module, especially if using it in enclosed spaces or for extended periods.
  7. Unresponsive Web Server:
    • Verify that the ESP8266 is connected to the Wi-Fi network and has a stable internet connection.
    • Check for errors in your web server code and ensure that it properly handles client requests.
  8. Mobile Device Connectivity Issues:
    • Ensure that your smartphone or mobile device is connected to the same Wi-Fi network as the ESP8266.
    • Check for any firewall or security settings on your mobile device that may block communication with the ESP8266.
  9. System not responding on given commands from UI:
    • Ensure that WinOpsService running.
    • Ensure that the IP address are same which you provided into HTML
    • Turn off the firewall if it’s blocking for incoming request.

By following these troubleshooting steps, you can effectively diagnose and resolve common issues encountered when working with ESP8266 modules for controlling Windows PCs using a smartphone.

Leave a Reply

Your email address will not be published. Required fields are marked *