Controlling via web has become a norm these days. In this simple project, I will show you how to make an application that controls light bulb via web.

Surely it's not something new, but what you may see is that the web-based controlling stuff could only take a few steps to do it yourself. Anyone with some knowledge about web programming can make the web-based applications to control/monitor devices.

You can see the demo here:

Hardware component

1 x Arduino UNO

1 x PHPoC Shield 2 for Arduino

1 x PHPoC 4-port Relay Board

1 x Light bulb

First is to set up hardware. Here, I use an Arduino Uno board, a PHPoC WiFi Shield and a PHPoC Arduino Relay Board.

How it works

Next, it comes to the "Web-based" part. Combining with PHPoC Shield, Arduino board became a Web server/WebSocket server. So, basically we need:

+ Client side code: provide a Web-based User Interface to control the light bulb. The UI should allow users to send the control command to Web server (Arduino board). The UI also displays the status of the light bulb sent in the response from the server. This Web page source code needs to be uploaded to the shield. Upon receiving HTTP request from Web browser (Web client), the shield (Web server) will send the interpreted Web files to Web browser.

+ Server side code: control the light bulb based on the data sent by Web browser. The code is run on Arduino board, and the flow is nothing than looping, check if there is any request from Web client in order to set the relay to turn on/off the light bulb, and then send the light bulb status to Web browser.

n this project, I made an SVG element to display the light bulb and a button to send the control command from Web. The Web browser and Web server communicate with each other via WebSocket. WebSocket connection suits real-time applications.

The more effort you spend on making the UI, the better it may look. But don't worry, there are tons of sharing resources available on the Internet, so you may find some cool free source code for UI instead of doing all the programming stuff by yourself.


Client side code. To be uploaded to PHPoC Shield

PHP Code:

        <? echo system("uname -i"?>
    <meta content="initial-scale=0.7, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes" name="viewport">
        body {
            text-align: center;
            font-family: verdana, Helvetica, Arial, sans-serif, gulim;
            background: #C2CCD0;

        h2 {
            font-size: 16px;
            line-height: 25px;
        } {
            background: #E2ECF1;

        #on {
            opacity: 0;

        .active #on {
            opacity: 1;

        .light-bulb {
            width: 250px;
            height: 400px;
            margin-top: 100px

        .container {
            margin: auto;
            width: 250px;

        .switches {
            width: 150px;
            height: 65px;
            background-color: #38434A;
            font-size: 24px;
            margin: auto;
            border-radius: 10px;
            color: white;
            cursor: pointer;
            letter-spacing: 0.2px;
            line-height: 65px;
            text-align: center;
            user-select: none;
            transition: none;

    <div class="container">
        <div class="light-bulb">
            <svg version="1.1" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 275.3 413.3" enable-background="new 0 0 275.3 413.3" xml:space="preserve">
                    <path fill="#E2ECF1" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8  ,118.2,79.9,162.3h47.8h47.8
        c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" />
                <g id="on">
                    <path fill="#FFDB55" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8  ,118.2,79.9,162.3h47.8h47.8
        c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" />


                    <path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M168.5,375.5h-61.7c-8.9,0-16-7.2-16-16
        v-55.8h93.8v55.8C184.6,368.3,177.4,375.5,168.5,375.5  z" />
                    <path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M151.2,401.5h-27.1c-3.9,0-7-3.2-7-7v-19
        h41.1v19C158.2,398.4,155.1,401.5,151.2,401.5z" />
                    <line fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" x1="184.6" y1="339.6" x2="90.8" y2="339.6" />
                    <path fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4
        c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" />
                    <path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M207.1,89.5
        c-12.3-16.1-28.4-29.1-46.9-37.8" />
                    <path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M225,121.4
        c-0.8-2.2-1.8-4.4-2.7-6.5" />
        <div class="switches">
    <h2 id="ws_state"></h2>

    var is_on;
    var ws;
    var button = document.querySelector('.switches');
    var ws_state = document.getElementById("ws_state");

    function init() {
        button.addEventListener("click", toogleLed);
        is_on = 0;

    function connect() {
        if (ws == null) {
            var ws_host_addr = "<? echo _SERVER("HTTP_HOST"?>";
            if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
                // network resource identifier to UNC path name conversion
                ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
                ws_host_addr = ws_host_addr.replace(/:/g, "-");
                ws_host_addr += "";
            ws = new WebSocket("ws://" + ws_host_addr + "/remote_led", "text.phpoc");
            ws_state.innerHTML = "Connecting. Please wait!";
            ws.onopen = ws_onopen;
            ws.onclose = ws_onclose;
            ws.onmessage = ws_onmessage;
        } else

    function ws_onopen() { = "none";

    function ws_onclose() { = "#C2C2C2"; = "";
        ws_state.innerHTML = "<span style='color: gray'>Can not connect to Arduino Board. <br> Please check again and reload this page!</span>";
        ws.onopen = null;
        ws.onclose = null;
        ws.onmessage = null;
        ws = null;
        is_on = 0;

    function ws_onmessage(e_msg) {
        e_msg = e_msg || window.event; // MessageEvent
        is_on = parseInt(;

    function toogleLed() {
        if (is_on)

    function display_lightbulb() {
        document.body.className = (is_on) ? "active" : "";

    window.onload = init;



Server side code that handles I/O control based on WebSocket data sent from web browser

#include <Phpoc.h>
#include <PhpocExpansion.h>

#define ON '1'
#define OFF '0'

byte expansionId = 1;
ExpansionRelayOutput relay(expansionId, 0);

PhpocServer server(80);

void setup() {

  // initialize PHPoC [WiFi] Shield:
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);

  // start WebSocket server

  // print IP address of PHPoC [WiFi] Shield to serial monitor:
  Serial.print("WebSocket server address : ");

  // get name and print it to serial

void loop() {
  // wait for a new client:
  PhpocClient client = server.available();

  if (client) {
    if (client.available() > 0) {
      // read a byte incoming from the client:
      char thisChar =;

        case OFF:
          Serial.println("Turn LED OFF");
        case ON:
          Serial.println("Turn LED ON");