Model.

Client Side Code and Diagram

        
Client UI Javascript

// Constructs the Pi object and returns the name and pins
var Pi = function (n) {
    PiName = n;
    Pin = [];
    for (i = 0; i < 24; i++) {
        Pin.push({ Number: i + 2,
        PulseWidth: 0,
        PulseFrequency: 0 });
    };
    return {
        PiName: n,
        Pin: Pin
    }
}

// User Object
// API - User.SetPiName(ith element in the array, Pi name), sets the name 
// of the Pi in the P[i]
// API - User.SetPin(), Sets the values of the pins in each Pi
// API - User.GetJson(), returns the Rapeberry Pis' the User has in as serialized string
var User = {
    Name: '',
    Pi: [],
    SetPiName: function(i,n) {
        User.Pi[i].PiName = n;
    },
    SetPin: function (i, n, w, f) {
        User.Pi[i].Pin[n].Number = n + 2;
        User.Pi[i].Pin[n].PulseWidth = w;
        User.Pi[i].Pin[n].PulseFrequency = f;
    },
    GetJson: function() {
        return (JSON.stringify(this.Pi));
    }
}
        
    

To the left you see the client side Javascript code which models the pins of the Raspberry Pi. And below it is the Controller part of the UI code. The code for the View is not shown here, they are the part of the code that specifically manipulates the DOM.


// Client UI Controller
$(function () {

    // Reference the auto-generated proxy for the hub.
    chat = $.connection.piHubs;

    // Asp.Net server calls this client function to write to the page.
    chat.client.broadcastMessage = function (name, message) {
        // Add name and the message to the page.
    }

    // Asp.Net calls this client function to turn on the heartbeat
    chat.client.pimessage = function (name, message) {
        // Make the heart beat.
    }

    // Start the connection.
    $.connection.hub.start().done(function () {

        // if the element is clicked make a call to the server
        $('#sendmessage').click(function (e) { 
            chat.server.send("Server, here is my json string");
        });
    });
});

The UI uses the MVC design pattern.