We need to turn on/off a PC which is located far away in the industrial field as well as a normal life. The PC can be turned on by using router's WOL(Wake-up On LAN) function and turned off by using the menu when user logged in. However it might be very hard to turn on/off when PC is working abnormally.
This article is about a PCIe board with a PHPoC module (P4M-400) so that control and monitor personal computers remotely by using a web browser.

Click image for larger version  Name:	image_512.png Views:	1 Size:	203.5 KB ID:	842

Let's watch a demonstration movie in advance.


The websocket technology is used to control the power and reset buttons and monitor the power or HDD LED. It is a communication method making a TCP connection between the web server (PHPoC) and the web browser. So it is very useful to monitor the PC power LED in realtime.

Click image for larger version  Name:	software.png Views:	1 Size:	138.7 KB ID:	843

I added a security function which is a web-based pattern locking mechanism from the
When a web browser connect to the web page(index.php) it checks if the connection has been auhorized by using pattern locking web page. If not, it redirects to the pattern locking web page.

Source Codes

The following is the index.php source code. You can download the full codes from the github.
PHP Code:
$buf != "abcde")
header("HTTP/1.1 302 FOUND");
header("Location: http://$host/web_access_control.php");

"Redirecting to http://$host/web_access_control.php";
<!DOCTYPE html>
<title>PC Control</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style> body { text-align: center; } </style>

var ws;
function init()
    var pwr_btn = document.getElementById("pwr_btn");
    var rst_btn = document.getElementById("rst_btn");
    var led = document.getElementById("led");

    pwr_btn.width = 95;
    pwr_btn.height = 95;

    rst_btn.width = 95;
    rst_btn.height = 95;

    pwr_btn.addEventListener("touchstart", pwr_mouse_down);
    pwr_btn.addEventListener("touchend", pwr_mouse_up);
    pwr_btn.addEventListener("mousedown", pwr_mouse_down);
    pwr_btn.addEventListener("mouseup", pwr_mouse_up);
    pwr_btn.addEventListener("mouseout", pwr_mouse_up);

    rst_btn.addEventListener("touchstart", rst_mouse_down);
    rst_btn.addEventListener("touchend", rst_mouse_up);
    rst_btn.addEventListener("mousedown", rst_mouse_down);
    rst_btn.addEventListener("mouseup", rst_mouse_up);
    rst_btn.addEventListener("mouseout", rst_mouse_up);


    ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/sample", "text");
    document.getElementById("ws_state").innerHTML = "CONNECTING";

    ws.onopen  = function(){ document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTED</font>" };
    ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>"};
    ws.onerror = function(){ alert("websocket error " + this.url) };

    ws.onmessage = ws_onmessage;
function ws_onmessage(e_msg)
    e_msg = e_msg || window.event; // MessageEvent

    if( == "1") update_led(1);
    else if( == "0") update_led(0);
function update_pwr_btn(state)
    var pwr_btn = document.getElementById("pwr_btn");

    if(state) = "url('/pwr_on.png')";
    else = "url('/pwr_off.png')";
function update_rst_btn(state)
    var rst_btn = document.getElementById("rst_btn");

    if(state) = "url('/pwr_on.png')";
    else = "url('/pwr_off.png')";
function pwr_mouse_down()
    if(ws.readyState == 1)
        ws.send("pwr 1\r\n");


function pwr_mouse_up()
    if(ws.readyState == 1)
        ws.send("pwr 0\r\n");

function rst_mouse_down()
    if(ws.readyState == 1)
        ws.send("rst 1\r\n");


function rst_mouse_up()
    if(ws.readyState == 1)
        ws.send("rst 0\r\n");

function update_led(state)
    var led = document.getElementById("led");

        led.src = "led_on.png";
        led.src = "led_off.png";

window.onload = init;

PC Control<br>


<canvas id="pwr_btn"></canvas>
<canvas id="rst_btn"></canvas>
<img id="led" src="led_on.png" width="50" height="50">

<span id="ws_state"><font color='gray'>CLOSED</font></span><br>




The board in this project is in the shape of PCI-e which is inserted into a slot of PC's mother board in order to be firmly equipped.
The PHPoC (which is a programmable IoT solution) modular type product (P4M-400) is embedded in this board. And this board includes an ethernet port, a USB port for a USB WIFI dongle, and a USB device port for programming and configuration. It can be powered from the PCI-e slot's 12V and a port for 5V to be connected to mother board's USB port. And there are 4 LEDs to show its status.

The Connection

The general PCs can be turned on/off or reset by using buttons on the case. And there are some LEDs for the power or the HDD in order to output its status. These buttons and LEDs on the case are connected to the front panel connector on the mother board.
The following picture is an example of the front panel connector specification.

Click image for larger version  Name:	20180329_171459.jpg Views:	1 Size:	112.0 KB ID:	844

There are two Solid State Relays(SSR) to emulates the power and reset buttons in the board, these makes the two terminal short as same as the buttons work.

Click image for larger version  Name:	button_diagram.png Views:	1 Size:	82.2 KB ID:	845

The board has an digital input interface to detect LED status by using an SSR. When the mother board turns on the LED it outputs DC voltage then the input interface circuit detects the voltage difference.

Click image for larger version  Name:	led_diagram.png Views:	1 Size:	63.5 KB ID:	846
3D printing - PCI-e bracket

I designed a 3D object for the PCI-e card bracket by using the sketchup program. I referred a pdf document from the internet ( It was a kind of a challenge because of its durability and precision.

Click image for larger version  Name:	sketchup_modeling.png Views:	1 Size:	181.6 KB ID:	847

The following is a output object but its looking is not so good.

Click image for larger version  Name:	20180330_160717.jpg Views:	1 Size:	176.3 KB ID:	848.
Installing inside PC

The following photo is the front panel connector before installing the board.

Click image for larger version  Name:	20180330_154628.jpg Views:	1 Size:	163.9 KB ID:	849

The following photos show the board after installation.

Click image for larger version  Name:	20180330_160536.jpg Views:	1 Size:	207.6 KB ID:	850

When you connect the wires to the front panel connector you should pay attention to the position polarity - especially the LED polarity.

Click image for larger version  Name:	20180330_153502.jpg Views:	1 Size:	155.7 KB ID:	851
Click image for larger version  Name:	20180330_153656.jpg Views:	1 Size:	111.9 KB ID:	852

Click image for larger version  Name:	20180330_153541.jpg Views:	1 Size:	149.2 KB ID:	853
Click image for larger version  Name:	20180330_153808.jpg Views:	1 Size:	196.5 KB ID:	854

This project is implementing a system which monitors and controls PC power through the web page and websocket by using PHPoC modular product(P4M-400). I implemented it relatively easily because the PHPoC a IoT solution suitable for web application. And I made it as a PCI-e type card thanks to the modular type.
I think that user can develop a product in various fields very easily by using the P4M-400 which are small and modular type product.
Attached Files