Windows Phone/PhoneGap and MicroFramework

How use a windows phone device as remote control of a Fez Panda II/MicroFramework board

In this example will be used jquery mobile and the knockout.js MVVM library to create a mobile application which communicates with a microframework board (Fez Panda II). Using PhoneGap you can create a cross-platform application ( Windows Phone , Android, iOS, etc ). At base level will be used html5 and javascript; so it is supported from every platform.


A windows phone device can be connected to a wifi network (for example a wifi router). If you have also a .Net Micro Framework board connected to the wifi network; you can send some http rest commands from the windows phone device to the .Net Micro Framework board. The Micro Framework board must support the tcp/ip protocol through a connect shield; in this way you can implement a small http web server (PhoneGap version).

<!DOCTYPE html>

<html>
<head>
<title>Pagina1</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=4">
<link href="master.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="scripts/knockout-2.0.0.js"></script>
<script type="text/javascript" src="scripts/knockout.mapping.js"></script> 
<script type="text/javascript" src="scripts/zApplication1.js"></script>
<script type="text/javascript" src="scripts/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>

<!-- page -->
<div id="page1" data-role="page">
	<div data-role="header">
	  <h1>My remote control</h1>
	</div>
	<div data-role="content">	
    <br />
    <a href="#page2" data-role="button">Go</a>
    <br />
	</div>
	<div data-role="footer">
	  <h4>Page Footer</h4>     
	</div>
</div>
<!-- /page -->

<!-- page -->
<div id="page2" data-role="page">
	<div data-role="header">
	  <a data-rel="back" data-role="button" data-jbackcurrpage="true">Back</a>
	  <h1>My rooms</h1> 
	</div>
	<div data-role="content">			
           <ul id="rooms" data-role="listview" data-bind="template: {name: 'temp1', foreach: $data}"></ul>
	</div>
	<div data-role="footer">
	  <h4>Page Footer</h4>     
	</div>
</div>
<!-- /page -->

<script id="temp1" type="text/html">
  <li>
    <div><br><span data-bind="text: roomname" /></span><br></div>
    <ul data-role="listview">          
      <li>
        <p><br><b><span data-bind="text: status"></span></b><br>
          <a data-role="button" data-bind="click: cmdon" ><br>Turn-on <br></a>
          <a data-role="button" data-bind="click: cmdoff"><br>Turn-off<br></a>
          <a data-role="button" data-bind="click: cmdstatus"><br>Get-Status<br></a>
          <br /><a data-rel="back" data-role="button">Back</a><br />
        <br></p>
      </li>
    </ul>
  </li>
</script>

</body>
</html>


//
// Application
//
var Application = (function () {

    var pub = {};

    //$(document).ready(function () {
    //    $("#page2").bind("pagecreate", function (event, data) {
    //        pub.pageCreate(event, data);
    //    });
    //});

    window.addEventListener('load', function () {
        document.addEventListener('deviceready', function () {
            //console.log("PhoneGap is now loaded!");
            $("#page2").bind("pagecreate", function (event, data) {
                pub.pageCreate(event, data);
            });
        }, false);
    }, false);

    pub.pageCreate = function (event, data) {
        var data = new roomlist();
        var vm = mapknock(data);
        var elem = $("#rooms").get(0);
        ko.cleanNode(elem);
        $(elem).empty();
        ko.applyBindings(vm, elem);
    }

    return pub;
} ());
//
// Map knockout.js
// 
function mapknock(data) {
    var viewmodel = ko.utils.arrayMap(data, function (item) {
        return new dataItem(item);
    });
    return ko.observableArray(viewmodel);
}
//
// View model
// 
function dataItem(item) {
    var that = this;
    this.roomname = ko.observable(item.roomname);
    this.roomcode = ko.observable(item.roomcode);
    this.status = ko.observable("");

    this.cmdon = function () {
        var roomcode = that.roomcode();
        $.mobile.showPageLoadingMsg();
        var uribase = "http://192.168.1.200:13000/";
        //var uribase = "http://127.0.0.1:13000/";
        var surl = uribase + "turnOn?number=" + roomcode;
        $.ajax(
        {
            jsonpCallback: 'jsonpCallback',
            url: surl, type: "GET", dataType: "jsonp",
            error: function (xhr, status, error) {
                $.mobile.hidePageLoadingMsg();
                alert("error");
            },
            success: function (jsonp) {
                $.mobile.hidePageLoadingMsg();
                that.status(jsonp.result);
            }
        });
    } .bind(this);

    this.cmdoff = function () {
        var roomcode = that.roomcode();
        $.mobile.showPageLoadingMsg();
        var uribase = "http://192.168.1.200:13000/";
        //var uribase = "http://127.0.0.1:13000/";
        var surl = uribase + "turnOff?number=" + roomcode;
        $.ajax(
        {
            jsonpCallback: 'jsonpCallback',
            url: surl, type: "GET", dataType: "jsonp",
            error: function (xhr, status, error) {
                $.mobile.hidePageLoadingMsg();
                alert("error");
            },
            success: function (jsonp) {
                $.mobile.hidePageLoadingMsg();
                that.status(jsonp.result); 
            }
        });
    } .bind(this);

    this.cmdstatus = function () {
        var roomcode = that.roomcode();
        $.mobile.showPageLoadingMsg();
        var uribase = "http://192.168.1.200:13000/";
        //var uribase = "http://127.0.0.1:13000/";
        var surl = uribase + "status?number=" + roomcode;
        $.ajax(
        {
            jsonpCallback: 'jsonpCallback',
            url: surl, type: "GET", dataType: "jsonp",
            error: function (xhr, status, error) {
                $.mobile.hidePageLoadingMsg();
                alert("error");
            },
            success: function (jsonp) {
                $.mobile.hidePageLoadingMsg();
                that.status(jsonp.result);
            }
        });
    } .bind(this);
}
//
// Rooms list
// 
function roomlist() {
    list = [
        { roomname: "Room-1", roomcode: 1 },
        { roomname: "Room-2", roomcode: 2 },
        { roomname: "Room-3", roomcode: 3 }
    ]
    return list;
}


I have used the FEZ Ultimate Kit. This kit provides internet connectivity to FEZ Panda II. It also include eblocks for simple plug-and-play capabilities, giving you access to input/output and sensor data. Alternatively if you have not logic on the micro framework board; if you just want to control some relays; you can use a dedicated ethernet rele board. In this way; the ethernet rele board internally implement a small webserver so you only send the command to set on/off the rele.

Windows Phone/Silverlight and MicroFramework (How create a remote control)
Windows Phone/PhoneGap and MicroFramework (How create a remote control)
MicroFramework server side (How create a remote control)
Windows Phone + Micro Framework (using tile push notification)


Last edited Sep 1, 2012 at 11:19 PM by mastefano64, version 26

Comments

No comments yet.