Norimasa Okamoto / Mbed 2 deprecated app-board-websocket-rpc

application board demo program

Dependencies:   C12832_lcd EthernetInterface LM75B MMA7660 WebSocketClient mbed-rpc mbed-rtos mbed

viewer

viewer.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>

var channel = "appboard-rpc";
var url = "ws://sockets.mbed.org/ws/" + channel + "/rw";

$('#top').live('pageinit', function(e, d) {
    var ws = new WebSocket("ws://sockets.mbed.org/ws/" + channel + "/rw");
    var img_str = "";
    var frame = 0;
    ws.onopen = function(evt) {
        $("#status").text("CONNECTED")
    };
    ws.onclose = function(evt) {
        $("#status").text("DISCONNECTED")
    };
    ws.onmessage = function(evt) {
        var s = evt.data;
        console.log(s);
        obj = JSON.parse(s);
        if ("pot1" in obj) {
            $("#pot1").text(obj.pot1);
        }
        if ("pot2" in obj) {
            $("#pot2").text(obj.pot2);
        }
    }

    var pre_red = 1.0;
    $("#red_per").bind("change", function(evt) {
        var red = $("#red_per").val();
        if (pre_red != red) {
            pre_red = red;
            var s = "/Red/write " + red;
            console.log(s);
            ws.send(s);
        }
    });

    var pre_green = 1.0;
    $("#green_per").bind("change", function(evt) {
        var green = $("#green_per").val();
        if (pre_green != green) {
            pre_green = green;
            var s = "/Green/write " + green;
            console.log(s);
            ws.send(s);
        }
    });

    var pre_blue = 1.0;
    $("#blue_per").bind("change", function(evt) {
        var blue = $("#blue_per").val();
        if (pre_blue != blue) {
            pre_blue = blue;
            var s = "/Blue/write " + blue;
            console.log(s);
            ws.send(s);
        }
    });

});
</script>
</head>
<body>
<div data-role="page" id="top">
  <div data-role="header" data-theme="b">
    <h1>app-board</h1>
  </div>
  <div data-role="content">
    <form>
      <div data-role="fieldcontain">
        <label for="red_per">Red:</label><br />
        <input id="red_per" name="red_per" 
            type="range" min="0.0" max="1.0" step="0.05" value="1.0" data-highlight="true" />
      </div>
      <div data-role="fieldcontain">
        <label for="green_per">Green:</label><br />
        <input id="green_per" name="green_per" 
            type="range" min="0.0" max="1.0" step="0.05" value="1.0" data-highlight="true" />
      </div>
      <div data-role="fieldcontain">
        <label for="blue_per">Blue:</label><br />
        <input id="blue_per" name="blue_per" 
            type="range" min="0.0" max="1.0" step="0.05" value="1.0" data-highlight="true" />
      </div>
    </form>
    <div>
    pot1:<span id="pot1"></span><br>
    pot2:<span id="pot2"></span><br>
    </div>
  </div>
  <div data-role="footer" data-theme="b">
    <h4 id="status"></h4>
  </div>
</div>
</body>
</html>
All wikipages