Announcement

Collapse
No announcement yet.

How to Control Devices via WebSocket

Collapse
X
Collapse
  •  

  • How to Control Devices via WebSocket

    Advantage of controlling sensors/devices via WebSocket
    • Convenient to create Graphic User Interface
    • Useful to control continuous states of devices (e.g. turn on/off LED)

    How to control sensors/devices via WebSocket

    This kind of method requires two kind of code:
    • Web App code: this code contains:
      • HTML and CSS code to form webpage,
      • JavaScript code, which is run on Web browser:
        • Acts WebSocket Client,
        • Handles action from user.
        • Sends the controlling command/value to PHPoC devices via WebSocket,
    • Code run in system loop :
      • Acts as WebSocket server,
      • Receives controlling command/value from WebSocket,
      • Controls the actuators/devices according to the received command/value)

    Let's learn through an example of controlling an built-in LED on PHPoC. Web App has one button. When button is pressed by user, LED is turned ON and background image is changed. When button is released, LED is turned ON and background image is changed.

    Web App code
    • HTML button
    HTML Code:
    <button id="button" style="height:95px; width:95px; background-color: transparent;border: none; padding: 0;"></button>
    • Handling action from user
    To handle "press" and "release" action from, we need to handle "mousedown" and "mouseup" event (for Web Browser on PC), and "touchstart" and ("touchend") (for Web Browser on smart phone)
    Code:
    var button = document.getElementById("button");
    
    button.addEventListener("touchstart", press);
    button.addEventListener("touchend", release);
    button.addEventListener("touchcancel", release);
    button.addEventListener("mousedown", press);
    button.addEventListener("mouseup", release);
    button.addEventListener("mouseout", release);
    • Sending data and update view
    When button is pressed: Send command to turn ON LED and Change the background image of button
    Code:
    function press()
    {
        if(ws.readyState == 1)
            ws.send("on\r\n");
    
        button.style.backgroundImage = "url('/on.png')";
    
        event.preventDefault();
    }
    When button is released: Send command to turn OFF LED and Change the background image of button
    Code:
    function release()
    {
        if(ws.readyState == 1)
            ws.send("off\r\n");
    
        button.style.backgroundImage = "url('/off.png')";
    }




    Full source code of Web app
    PHP Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>PHPoC Tutorial></title>
    <meta name="viewport" content="width=device-width, initial-scale=0.7">
    <style> body { text-align: center; } </style>
    <script>
    var ws;
    function init()
    {
        var button = document.getElementById("button");

        button.addEventListener("touchstart", press);
        button.addEventListener("touchend", release);
        button.addEventListener("touchcancel", release);
        button.addEventListener("mousedown", press);
        button.addEventListener("mouseup", release);
        button.addEventListener("mouseout", release);

        button.style.backgroundImage = "url('/off.png')";

        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 press()
    {
        if(ws.readyState == 1)
            ws.send("on\r\n");

        button.style.backgroundImage = "url('/on.png')";

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

        button.style.backgroundImage = "url('/off.png')";
    }
    window.onload = init;
    </script>
    </head>

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

            <button id="button" style="height:95px; width:95px; background-color: transparent;border: none; padding: 0;"></button>

            <p>WebSocket : <span id="ws_state">CLOSED</span></p>
        </h2>
    </body>
    </html>




    Code run in system loop
    • Receiving data from Web Browser
    PHP Code:
    $rlen ws_read_line(0$rwbuf); 
    • Controlling sensors/devices according to the receiving data
    PHP Code:
    if($rwbuf == "on\r\n")
        
    uio_out(0OUT_PINLOW); // Turn LED on
    else
    if(
    $rwbuf == "on\r\n")
        
    uio_out(0OUT_PINHIGH); // Turn LED off 




    Full source code

    PHP Code:
    <?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(0OUT_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(
    $rwbuf == "on\r\n")
                
    uio_out(0OUT_PINLOW); // Turn LED on
            
    else
            if(
    $rwbuf == "on\r\n")
                
    uio_out(0OUT_PINHIGH); // Turn LED off
        
    }
    }

    ?>




    See Also
    Last edited by support; 02-09-2018, 10:48 AM.

    • Äaren Lee
      #1
      Äaren Lee commented
      Editing a comment
      PHP Code:
      if($rwbuf == "on\r\n")
      uio_out(0, OUT_PIN, LOW); // Turn LED on
      else
      if($rwbuf == "on\r\n") // off not on !
      uio_out(0, OUT_PIN, HIGH); // Turn LED off

    • support
      #2
      support commented
      Editing a comment
      Dear Äaren Lee,
      Did you find anything wrong here?
    Posting comments is disabled.

Categories

Collapse

Latest Articles

Collapse

  • Arduino - RS-485 Expansion Board
    by support
    PES-2607 is an easy-to-use RS422/RS485 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS422 or RS485.
    Especially, Arduino does NOT use UART pins to communicate with RS422/RS485 expansion board. Therefore, users can use Arduino UART pins for other purposes.
    Moreover, A single Arduino Uno/Mega can communicate with multiple RS422/RS485 expansion boards (up to 14) without using Arduino UART pins.

    Library and examples for...
    11-13-2018, 03:45 PM
  • Arduino - RS-422 Expansion Board
    by support
    PES-2607 is an easy-to-use RS422/RS485 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS422 or RS485.
    Especially, Arduino does NOT use UART pins to communicate with RS422/RS485 expansion board. Therefore, users can use Arduino UART pins for other purposes.
    Moreover, A single Arduino Uno/Mega can communicate with multiple RS422/RS485 expansion boards (up to 14) without using Arduino UART pins.

    Library and examples for...
    11-13-2018, 03:44 PM
  • Arduino - RS-232 Expansion Board
    by support
    PES-2606 is an easy-to-use RS-232 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS-232.
    Especially, Arduino does NOT use UART pins to communicate with RS-232 expansion board. Therefore, users can use Arduino UART pins for other purposes.
    Moreover, A single Arduino Uno/Mega can communicate with multiple RS-232 expansion boards (up to 14) without using Arduino UART pins.

    Library and example for the RS-232 expansion board...
    11-13-2018, 03:43 PM
  • Arduino - Stepper Motor Controller
    by support
    PES-2605 is an easy-to-use stepper motor controller for Arduino Uno and Mega, which uses micro-stepping method to precisely control stepper motor.
    Library and example for the stepper motor controller are part of of PhpocExpansion library for Arduino. The library reference is available here.

    This tutorial shows how to use the step motor controller with an example of PhpocExpansion library for Arduino.


    Hardware Required...
    11-13-2018, 03:41 PM
  • Arduino - DC Motor Controller
    by support
    PES-2604 is an easy-to-use DC motor controller for Arduino Uno and Mega.
    Library and example for the DC motor controller are part of of PhpocExpansion library for Arduino. The library reference is available here.

    This tutorial shows how to use the DC motor controller with an example of PhpocExpansion library for Arduino.


    Hardware Required...
    11-13-2018, 03:40 PM
  • Arduino - Digital Input Board
    by support
    PES-2602 is an easy-to-use 4-port Input Expansion Board for Arduino Uno and Mega, which allows Arduino to monitor state of DC electric device. In addition, it can monitor NPN, PNP and dry contact(relay).
    Library and example for the 4-port input expansion board are part of of PhpocExpansion library for Arduino. The library reference is available here.

    This tutorial shows how to use 4-port input expansion board with an example of PhpocExpansion library for Arduino.

    ...
    11-13-2018, 03:39 PM
Working...
X