[HTML5/WS/CANVAS] Controlling user-definable onboard LED

[HTML5/WS/CANVAS] Controlling user-definable onboard LED

Postby admin » Wed Nov 04, 2015 3:30 pm

We will go through an example to control user-definable onboard LED with HTML5 Canvas by using a PHPoC Blue.

Image


Source Codes
1. task0.php

Code: Select all

<?php 

if(_SERVER("REQUEST_METHOD"))
    exit; // avoid php execution via http request

include "/lib/sd_340.php";
include "/lib/sn_tcp_ws.php";

define("OUT_PIN", 30);

uio_setup(0, OUT_PIN, "out high");
ws_setup(0, "ob_led", "csv.phpoc");

$rwbuf = "";

while(
1)
{
    if(ws_state(0) == TCP_CONNECTED)
    {
        $rlen = ws_read_line(0, $rwbuf);

        if($rlen)
            uio_out(0, OUT_PIN, (int)$rwbuf);
    }
}

?>


2. index.php

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style> body { text-align: center; } </style>
<script>
var canvas_width = 95;
var canvas_height = 95;
var ws;
function init()
{
    var button = document.getElementById("button");

    button.width = canvas_width;
    button.height = canvas_height;

    button.addEventListener("touchstart", mouse_down);
    button.addEventListener("touchend", mouse_up);
    button.addEventListener("touchcancel", mouse_up);
    button.addEventListener("mousedown", mouse_down);
    button.addEventListener("mouseup", mouse_up);
    button.addEventListener("mouseout", mouse_up);

    update_button(1);

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

    ws.onopen  = function(){ document.getElementById("ws_state").innerHTML = "OPEN" };
    ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
    ws.onerror = function(){ alert("websocket error " + this.url) };

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

    alert("msg : " + e_msg.data);
}
function update_button(state)
{
    var button = document.getElementById("button");

    if(state)
        button.style.backgroundImage = "url('/button_pop.png')";
    else
        button.style.backgroundImage = "url('/button_push.png')";
}
function mouse_down()
{
    if(ws.readyState == 1)
        ws.send("0\r\n");

    update_button(0);

    event.preventDefault();
}
function mouse_up()
{
    if(ws.readyState == 1)
        ws.send("1\r\n");

    update_button(1);
}
window.onload = init;
</script>
</head>
<body>

<h2>
UIO / On-Board User LED<br>

<br>

<canvas id="button"></canvas>

<p>
WebSocket : <span id="ws_state">CLOSED</span><br>
<!--
ADC : <span id="debug"></span><br>
-->
</p>

</h2>

</body>
</html>


Please download a PSP (PHPoC Support Package) of libraries and examples from PHPoC, and upload it in the PHPoC Blue.




Video

phpBB [video]
admin
Site Admin
 
Posts: 167
Joined: Mon Jan 20, 2014 4:40 pm

Return to Example

Who is online

Users browsing this forum: No registered users and 1 guest

cron