Table of Contents

2011-12-19 ASP.NET and .NET Microframework HTTP web server together (part 2/2)

In my previous post, I've explained how create a HTTP web server on a .NET Microframework Netduino board. And the ASP.NET application will allow to display the lights on a map and allow the user to click on a light. When clicking, the application will call the Netduino which will do the work of turning on or off the led. And that's this part we will explain in this post.

The function ProcessSwitch on the Netduino board is called when a URL like http://ipaddressnetduino/switch.aspx?id=0;lg=true is called. See previous post for more details on this function.

Now the idea is to consume this in an ASP.NET page. First, we have to get the LegoLight object from the application storage. And that's what we are doing in the first line of code of the Page_Load function. We will later detail the rest of the code.

public partial class _Default : System.Web.UI.Page { 
    public System.Collections.ArrayList myLegoLight; 
    public ParamPage MyParamPage = new ParamPage(); 
    protected void Page_Load(object sender, EventArgs e) { 
        myLegoLight = (System.Collections.ArrayList)Application.Get("LegoLight"); 
        int myID = -1; 
        bool myLight = false; 
        if (Request.Params.Count > 0) { 
            //Is our paramater present?
            foreach(string mystr in Request.Params.AllKeys) { 
                if (mystr == MyParamPage.id) { 
                    myID = Convert.ToInt32(Request.Params.Get(MyParamPage.id)); 
                } 
                if (mystr == MyParamPage.lg) { 
                    myLight = Convert.ToBoolean(Request.Params.Get(MyParamPage.lg)); 
                } 
            } if ((myID >= 0) && (myID < myLegoLight.Count)) { 
                ((LegoLight)myLegoLight[myID]).Light = myLight; 
            } 
        } 
    } 
}

There is also some code needed to display the lights on an image. I have done this code directly in the page.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LegoCityWeb._Default" %> 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
<script src="/Scripts/position.js" type="text/javascript"></script> 
<p> 
    Click the lamp to switch on or off 
</p> 
<%  int i = 0; string strResp = ""; 
    for (i=0; i<myLegoLight.Count; i++) { 
        LegoCityWeb.LegoLight mLegoLight; 
        mLegoLight = (LegoCityWeb.LegoLight)myLegoLight[i]; 
        strResp += "<span style='position:absolute;margin-left:"   
            + mLegoLight.PosX + "px; margin-top:" + mLegoLight.PosY   
            + "px;width:26px;height:45px; top:findTop(document.all.MyImage);   
            left:findLeft(document.all.MyImage);'>"; 
        strResp += "<a href='/" + MyParamPage.pageDefault   
            + MyParamPage.ParamStart + MyParamPage.id + MyParamPage.ParamEqual   
            + i + MyParamPage.ParamSeparator + MyParamPage.lg + MyParamPage.ParamEqual   
            + !mLegoLight.Light + "'>"; 
        if (mLegoLight.Light) 
            strResp += "<img alt='" + mLegoLight.Name   
                + "' border=0 width=26 height=45 src='/lampon.png'>"; 
        else 
            strResp += "<img alt='" + mLegoLight.Name   
                + "' border=0 width=26 height=45 src='/lampoff.png'>"; 
        strResp += "</a></span>"; 
        Response.Write(strResp); strResp = ""; } 
%> 
<img alt="" id="MyImage" src="/ville.jpg" /> </asp:Content>

The first part of the code is the default code created by the template. It allow to have a nice menu, the logon part. Real code starts with the script section:

<script src="/Scripts/position.js" type="text/javascript"></script>

This script is the one I've developed and explain in this post to display an overlay image on an image with coordinates. There are 2 functions findLeft and findTop which returns the absolute positioning of an object from the left and top part of the page. This allow to overlay images on a page using span tags with a real positioning. Again, all this explain in the previous post.

the for loop will go thru each LegoLight object. Each object has a position on the picture in pixel. The following code is creating the necessary code to position the picture:

strResp += "<span style='position:absolute;margin-left:"   
+ mLegoLight.PosX + "px; margin-top:" + mLegoLight.PosY   
+ "px;width:26px;height:45px; top:findTop(document.all.MyImage);   
left:findLeft(document.all.MyImage);'>";

The next line create a link which look like http://nameoftheserver/default.aspx?id=0&lg=true. So the main page will take params. those params allow to command the lights. That's the second part of the code from the Page_Load function. And I'll explain it just after.

The rest of the client page display either an image of a light on or off depending of the status.

   if (mLegoLight.Light) 
       strResp += "<img alt='" + mLegoLight.Name   
           + "' border=0 width=26 height=45 src='/lampon.png'>"; 
   else 
       strResp += "<img alt='" + mLegoLight.Name   
           + "' border=0 width=26 height=45 src='/lampoff.png'>"; 
   strResp += "</a></span>"; 
   Response.Write(strResp); strResp = ""; } 
%> 
<img alt="" id="MyImage" src="/ville.jpg" />

And finally add the main image on which all light objects will be displayed by overlay.

So back to the page load code, when the main page is called, it can contains parameters. they are "id" and "lg". The "id" one represents the id of a LegoLight object and the "lg" one the status of the light. Which can be on (true) or off (false).

In order to get those params, I have done the following code:

int myID = -1;
bool myLight = false; 
if (Request.Params.Count > 0) { 
    //Is our paramater present? 
    foreach(string mystr in Request.Params.AllKeys) { 
        if (mystr == MyParamPage.id) { 
            myID = Convert.ToInt32(Request.Params.Get(MyParamPage.id)); 
        } 
        if (mystr == MyParamPage.lg) { 
            myLight = Convert.ToBoolean(Request.Params.Get(MyParamPage.lg)); 
        } 
    } 
    if ((myID >= 0) && (myID < myLegoLight.Count)) { 
        ((LegoLight)myLegoLight[myID]).Light = myLight; 
    }

The Request object contains a class called Params. This class includes all parameters that are in the URL (thru a GET call) and/or thru a POST and in what the browser tells on you (your language, your OS, your IP, etc). So a nice foreach can go thru all this up to find the "id" one. And convert it to a real number as all params are just strings. And it will also find the "lg" one and concerts it to a bool.

And if the ID is a valid number, it will switch on or off the light. If no value is present, the default value will apply and it will switch off the light. When calling the Light property of the LegoLight object, remember from my last post that it is calling the Netduino hardware thru a web page to actually physically switch the physical light on and off.

Sol here is the end of the second part. To summarize, in those 2 articles, you've seen how to call a web page including parameters from a .Net Microframework Netduino board, getting parameters from this same board, displaying overlay images on it, and many things like that Sourire I hope you've enjoy it!

Edit this page