• [02:31] - Introduction to HTML5
• [13:13] - HTML5 markup
• [27:06] - jQuery overview
• [48:04] - Visual Studio web tools

Full course outline:

• Mod 01: What's New in ASP.NET 4.5
• Mod 02: Building and Deploying Websites with ASP.NET MVC 4
• Mod 03: Creating HTML5 Applications with jQuery
• Mod 04: Building a Service Layer with ASP.NET Web API
• Mod 05: Leveraging Your ASP.NET Development Skills to Build Office Apps
• Mod 06: Building and Leveraging Social Services in ASP.NET
• Mod 07: Building for the Mobile Web
• Mod 08: Real-time Communication with SignalR
• Mod 09: Taking Advantage of Windows Azure Services

Framework soup

Over the last months I’ve spent quite some time checking out the Kinect for Windows SDK and it’s really fun to work with this awesome little piece of hard and software.

While playing around with the Kinect for Windows SDK it soon became obvious that I’ll need some sort of framework that handles all the tough event handling stuff for me. That's were the ReactiveExtensions framework came into play. Since I’ve first read about it I wanted to use it somewhere but didn’t get the chance so far. Now that the Kinect came around the corner with its event driven API Rx fitted perfectly to my requirements.

Another framework that impressed me a lot is SignalR, an abstraction layer for persistent connections over http.

So how do they all come together? In an application I called ‘KickerNotifier‘!
We have a ‘Kicker’ (that's german, in english foosball/tabletop football/tabletop soccer) to play with in the cellar of our office.

Problem is that the table stands in the cellar and you never know whether it is busy.

So the idea is the following: Set up a Kinect that is able to track the number of people in the room and push the amount to a website so that all the colleagues are able to see how many people are playing.

The technology stack

...

Project Information URL: http://passiondev.wordpress.com/2012/11/10/framework-soup/

Contact Information:

• Blog: http://passiondev.wordpress.com
• Twitter: @MarcusKohnert

• [0:34] Migrating apps from Windows Phone to Windows 8 (Rick Barraza, Brian Peek)
• [1:23] SQL Server Data Tools Updated for Visual Studio 2012 (David Ramel), Now available: SQL Server Data Tools - September 2012 update! (Janet Yeilding)
• [2:09] DirectX Graphics Development with Visual Studio 2012 (Visual C++ Team Blog)
• [3:16] Shell Context Menu, http://vsshcon.codeplex.com/
• [4:22] jQuery Code Snippets updated for VS2012, https://github.com/xxkylexx/Visual-Studio-jQuery-Code-Snippets (xxkylexx), http://jquerysnippets.codeplex.com/ (John Sheehan)
• [5:12] GameSalad announces support for Windows 8 (Lee Stott), http://gamesalad.com/creator/windows-8
• [5:55]50+ Epic Metro Style Design (Andy Sowards) [Found Via: Windows Phone Geek - 50+ Epic Metro (Windows Store) Style Designs]
• [7:02] ILPad (icemanind) [Found Via: The Morning Brew - The Morning Brew #1195]
• [8:00] Part 5 of 5: Introduction to Consuming Azure Mobile Services from iOS & Part 1, Part 2, Part 3, Part 4 (Bruno Terkaly)

Picks of the week!

• Clint's Pick of the Week:[9:04] Curing Your Event Processing Blues with Reactive Extensions (Rx)
• Dan's Pick of the Week:[10:13] Programming with the Kinect for Windows Software Development Kit (ISBN 9780735666818) or here & here.

Production Note: The audio is a little off this week. There was a technical glitch with Clint's mic so we had to bump up the audio a bit. Now while you can hear him better, you can also hear more of the surrounding ambient noise too. Sorry about that!

• [1:01] A New Look for CodePlex (Mark Groves)
• [1:58] Project Mayhem - an overview, Making Mayhem with Volume Control, Project Mayhem - Creating a module (Clint Rutkas, Eli White)
• [3:09] Fast and fluid animations in your Metro style app (Angelina Gambo and Hamid Mahmood)
• [4:52] More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile (Abu Obeida), Introducing the jQuery Mobile Metro Theme (Colin Eberhardt)
• [6:01] Develop HTML5 Windows Phone Apps with Apache Cordova (Colin Eberhardt)
• [7:06] Async Targeting Pack for Visual Studio 11 now available for .NET 4 and Silverlight 5 (Alex Turner)
• [8:33] .NET Debugging Stater Kit: for the Production Environment (Series) (Golnaz Alibeigi, Brad L, Mario Hewardt)
• [10:48] GUID Guide, part one, GUID Guide, part two (Eric Lippert)
• [12:19] Introducing Workspace Reloader - A Visual Studio AddIn to save your open files across project reloads (Scott Hanselman)

Picks of the Week!

• Brian's Pick of the Week: [13:45] Community TFS Build Manager – Build Notes Preview (Tarun Arora)
• Dan's Pick of the Week: [14:55] Android Ported to C#

Post-Production Note: Brian mentioned that the Build Notes Preview outputs to HTML. As seems to happen to all of us, later that night he woke up and suddenly realized that he had misspoke. The Build Notes Preview outputs to DocX and not HTML. BTW, the DocX is generated via the OpenXML SDK, so you don't need Office installed for this to work...

Using jQuery Mobile with MVC and Netduino for Home Automation

This article is great for anybody learning jQuery Mobile or building mobile applications with MVC3. I built a remote control for my phone to control a squirt gun for my pool, open my garage door, water the garden and control for my gas fireplace using jQuery Mobile with MVC and a Netduino

How often do you lose your remote control? I hate looking for the remote and family members always seem to hide it from me. I decided to turn my smartphone into the universal remote control for the house which is perfect for me because I'm almost always an arm's length away from it. My wife does not feel the same way about her phone so I had to build external controls as well for our home automation. So far my home automation includes remote controlling a squirt gun for my pool, opening my garage door, watering the garden and I just added control for my gas fireplace! Be sure to see my article entitled Home Automation with Netduino and Kinect for more information and code examples.

My first attempts at building mobile apps for my home automation projects involved building native apps for Windows Phone 7 and Android. The apps served their purpose, but other than the backend web services there was no reuse of the code between the apps written for the different mobile operating systems. The problem was compounded because each family member had their own favorite mobile device with different mobile operating systems. jQuery Mobile and HTML5 solved the problem of making the remote work across a wide variety of devices. Now I have one codebase that works on iOS, Android, Windows Phone, and most of the relevant mobile devices.

Talking to the Hardware

With my jQuery Mobile app, most of the code is running locally on the device. I wrote a MVC controller method that runs on the server to talk to the Netduino called SendMessageToNetduino. The method is called using Ajax from the mobile device.

public ContentResult SendMessageToNetduino(string message, string status)
{
    bool sendToNetduino = bool.Parse(WebConfigurationManager.AppSettings["SendToNetduino"]);
    if (sendToNetduino)
    {
        CommunicateWithNetduino.GetInstance().SendMessage(message);
    }

    return Content(status);
}

The method is a simple pass-through that takes a message sent from Ajax from the mobile device over the internet, and then relays the message behind the firewall over the local network to the Netduino .net microcontroller. The Netduino Plus is a microcontroller that runs C# in the .Net Micro Framework. The Netduino Plus has a built in Ethernet adapter for network communication. For more information and code examples of how to talk with the microcontroller, please read my article entitled Home Automation with Netduino and Kinect.

The above image shows the communication between the jQuery Mobile app and the Netduino microcontroller. Note that the same jQuery Mobile app runs on multiple devices with different mobile operating systems.

I wrote a MVC Razor @helper method to encapsulate the logic required to talk to the Netduino.

@helper NetduinoButton(string buttonText, string netduinoMessage, string statusMessage, string dataIcon, AjaxHelper ajax) {
    @ajax.ActionLink(buttonText, "SendMessageToNetduino", "Home",
        new {
            message = netduinoMessage,
            status = statusMessage
        },
        new AjaxOptions {
            UpdateTargetId = "serverMessage",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "Get"
        },
        new { 
            data_role = "button", 
            rel = "external", 
            data_icon = dataIcon,
            data_theme ="a"
        })
}

With my NetduinoButton @helper method, adding a button to control a device can be done in view by adding a simple line of code. The code below adds a button the open the garage door.

@Content.NetduinoButton("Garage", "C", "Garage Door.", "", Ajax)

...

With jQuery Mobile and HTML5 you can build mobile websites and applications that work on most of the relevant mobile operating systems and devices. The MVC framework works well with jQuery Mobile to keep you from writing duplicate code. The Razor view engine enables better code reuse and also facilitates more readable code. jQuery Mobile allows you to theme your mobile websites/apps to look great like native apps.

Here's the Solution;

Here's a snip of code from the project;

public class CommunicateWithNetduino
  {
      private static CommunicateWithNetduino _communicateWithNetduino;
      private Socket _clientSocket = null;
      private Thread _listeningThread;
      private int _port = 80;
      private string _netduinoAddress = null;
      private ISynchronizeInvoke _callingThreadContextToInvoke;

      //Enforce that this class is a singleton that other classes can’t instantiate 
      private CommunicateWithNetduino()
      {
      }
      public int Port
      {
          set { _port = value; }
          get { return _port; }
      }
      public string NetduinoAddress
      {
          set { _netduinoAddress = value; }
          get { return _netduinoAddress; }
      }

      public event EventHandler<MessageEventArgs> EventHandlerMessageReceived;
      public event EventHandler<MessageEventArgs> EventHandlerStatusUpdate;

      //Singleton factory method to load and get the single instance
      public static CommunicateWithNetduino GetInstance()
      {
          if (_communicateWithNetduino == null)
          {
              _communicateWithNetduino = new CommunicateWithNetduino();
              _communicateWithNetduino.Port = 8000;
              _communicateWithNetduino.NetduinoAddress = "192.168.40.100";  //IP Address Must be valid for your network

          }

          return _communicateWithNetduino;
      }

      public void StartListening(ISynchronizeInvoke CallingThreadContextToInvoke)
      {
          _listeningThread = new Thread(new ThreadStart(ReceiveSocketsInBackgroundThread));
          _listeningThread.IsBackground = true;
          _listeningThread.Start();
          _callingThreadContextToInvoke = CallingThreadContextToInvoke;
      }

      public void SendMessage(string message)
      {
          if (_netduinoAddress != null && _port > 0)
          {
              using (System.Net.Sockets.Socket socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp))
              {
                  IPAddress address = IPAddress.Parse(_netduinoAddress);
                  IPEndPoint endpoint = new IPEndPoint(address, _port);

                  try
                  {
                      socket.Connect(endpoint);
                      socket.Send(Encoding.UTF8.GetBytes(message));
                      socket.Close();
                  }
                  catch (SocketException se)
                  {
                      RaiseEvent(EventHandlerStatusUpdate, "Socket Exception! Probably bad ip or netduino not ready?");
                  }
              }
          }
      }

This is the first video in a series on Project Silk and the Mileage Stats Reference Implementation, a real-world customer facing web application that provides users with the ability to track and compare their vehicles: fuel efficiency, usage, operation costs, and the scheduling of vehicle maintenance reminders.

Project Silk code and documentation is available here: http://silk.codeplex.com/

Built using ASP.NET MVC and jQuery, founder Aaron Coleman had to migrate off of traditional hosting and onto Azure the day he discovered he had won the White House’s contest. He needed to scale quickly in anticipation of the press Food Buster was going to receive. Aaron explains how he was able to adapt his ASP.NET application to take advantage of Azure’s native features and redeploy everything in a day.

Aaron of FoodBusterGame.com talks with Aaron Stannard, Start-up Developer Evangelist.

Get Started on Windows Azure

Get started on Windows Azure.

Get Windows Azure Tools for Visual Studio to start building and debugging applications in a local, offline environment. Get Windows Azure Free Tools.

Get the Windows Azure Developer Training Kit. 

Free Help for Windows Azure

Join Microsoft Platform Ready for free assistance in developing and marketing your Windows Azure applications.

Other ISV Videos

For videos on Windows Azure Platform, see:

• Accumulus Makes Subscription Billing Easy for Windows Azure
• Azure Email-Enables Lists, Low-Cost Storage for SharePoint
• Crowd-Sourcing Public Sector App for Windows Phone, Azure
• Credit Card Processing for Windows Phone 7 on Windows Azure

For videos on developing for Windows Phone 7, see:

• State and Local Governments for Windows Phone 7 applications.
• Talking  with Karmak.com about business applications on Windows Phone 7
• BinaryDads talk about building applications for Windows Phone 7
• Game Design and Development in Silverlight for Windows Phone 7

For other videos about independent software vendors (ISVs):

• Quark Extends SharePoint for Dynamic Publishing
• ProModel Adds Simulation, Visualization to Microsoft Project
• Slingbox Maker Sling Media Describes Cross-Platform Commitment to Silverlight
• Thumb-Driven Workflow on Windows 7 Slates from Blue Dot Solutions

Up to Date News for ISVs and Software Developers

See US ISV Community blog.

In this video, Brandon Satrom continues the screencast series "Using ASP.NET MVC With Community Tools" with an overview of ie9ify, a new jQuery Plugin (created by Brandon and Clark Sell) that makes is dead simple to add new IE9 features (site pinning, overlay icons, jumplists and tasks, thumbbar buttons, etc.) to your web sites. Brandon will talk briefly about site pinning before using ie9ify to add some compelling features to an MVC3 Photo Gallery site in a matter of minutes.

To download ie9ify, check out: ie9ify.codeplex.com.

For other episodes in this series, check out: http://bit.ly/mvcscreencasts.

Also visit Brandon's blog at http://www.userinexperience.com or follow Brandon on Twitter at @BrandonSatrom

Recorded live via Live Meeting as part of mvcConf 2

Come in as jQuery zero, go out as jQuery hero by Gill Cleeren

Download PPT of this session here.

Session Abstract :

jQuery
is the web developers’ new favorite. This lightweight JavaScript library has
developers writing JavaScript code again, and loving it! What previously needed
20 lines of code can now be done in just 3 lines. Who wouldn’t be enthusiastic?
Microsoft showed its love for the library by fully integrating it in Visual
Studio. I dare to ask: should you stay behind? In this session, we’ll take a
look at jQuery and we’ll teach you what you need to know to get you on your
way. More specifically, we’ll look at selectors, attributes, working with WCF,
jQuery UI, and much more. You could easily walk out of this session wearing a
sticker: “I love jQuery”!

jQuery session resources

• jQuery
  
• ScottGu: jQuery Templates, Data Link, and Globalization Accepted as Official jQuery Plugins
  
• Gill Cleeren’s blog
  

As a finale, Rey does his infamous "jQuery dance"—DO NOT MISS THIS. It's priceless!

To learn more about jQuery and other web technologies, sign up for a free Web Camp in your area.

1. Templating
2. Data-Linking
3. Globalization

In this video, we show demos of the contributions in action and how/when they will be available for developers to use!

Find out more at www.jquery.com and be sure to sign up for a free Web Camp to learn more about the jQuery contributions.

Enjoy!
James @jsenior

My first step was buying an Energy Monitor. After looking at a few different models, I spotted one with a USB cable that would allow me to “send the readings to a home PC.” Ohh! I could do something with the data instead of just looking at it on a handheld monitor. Interesting…

Getting Started

The first thing to do is install the monitor and the next thing is to install the drivers for the USB cable—these allow the USB connection to present itself as a COM port and make it easy to interact with.

Next, test the basic functionality. To do this (and to see the data transfer in action) you will need a Terminal client. Open your terminal software, set the COM port to whatever the USB Cable driver surfaced as (typically COM 3), set the baud rate to 57600bps, 8 data bits, “none” for parity, 1 stop bit, and no handshaking. When you “open” the COM port you should now see an Xml string being received every six seconds (for example):

HTML

<msg>
   <src>CC128-v0.11</src>
   <dsb>00089</dsb>
   <time>13:02:39</time>
   <tmpr>18.7</tmpr>
   <sensor>1</sensor>
   <id>01234</id>
   <type>1</type>
   <ch1>
      <watts>00345</watts>
   </ch1>
   <ch2>
      <watts>02151</watts>
   </ch2>
   <ch3>
      <watts>00000</watts>
   </ch3>
</msg>

The format of the Xml data can be found in this document, available on the CurrentCost website.

Project Outline / Design

Thinking about the project outline and design, I knew that I wanted to be able to make the received data readings available to multiple applications and websites. I also wanted to be able to tweet my energy usage every couple of hours, upload the data to some data tracking/recording web app, and be able to store the data myself so I could chart it at a later date. I also wanted the ability to see the real-time data when I was away from home, and I wanted to be able to use my phone as a kind of remote monitor.

I sketched out some ideas and came up with a design for a core Windows service that simply grabbed the data from the device, decoded it, and then passed it on to a number of modules/plugins, each of which used the data to complete a specific action. This kind of module/plugin/extension framework is a good candidate for the Managed Extension Framework (MEF) in .NET 4.0:

In fact, we'll be targeting the .NET 4.0 framework because we need some of the newer System.Composition namespace elements for the Managed Extension Framework to work.

Step 1 – The Windows Service

The Windows Service is the core of the application and needs a serial port connection to receive the data from the monitor, making it able to alert each of the plugins of the new reading.

Coding the Service

To begin coding the service, you must first create a new “Windows Service” project type. Then, change the class name to EnergyService and the ServiceName to EnergyService, add the serial port, and wire it up. To do this, you'll need a System.IO.Ports.SerialPort member variable in the class:

C#

SerialPort comm;

Create the object in the class constructor, and wire up the ‘DataReceived' event:

C#

comm = new SerialPort(portName, baudRate, parity, dataBits, stopBits);
comm.DataReceived += new SerialDataReceivedEventHandler(SerialDataReceived);

Then, we pull the bytes from the serial port in the ‘SerialDataReceived' event handler and add them to a buffer, immediately checking the buffer to see if the bytes we have stored in there so far make up a full reading. If so, we process it. If we don't have a full reading, however, we simply wait for more bytes.

void SerialDataReceived(object sender, SerialDataReceivedEventArgs e)
{
    rxBuffer += comm.ReadExisting();
    while (IsReading(rxBuffer))
    {
        // we have a reading (or partial reading), so let's process
        EnergyReading rdg = ExtractReading(ref rxBuffer);
        if (rdg.IsValid)
        {
            NotifyPlugins(rdg);
        }
    }
}

private EnergyReading ExtractReading(ref string rxBuffer)
{
    string rdgXml;
    int pos = rxBuffer.IndexOf(Environment.NewLine);
    rdgXml = rxBuffer.Substring(0, pos);
    rxBuffer = rxBuffer.Substring(pos + 2);
    return new EnergyReading(rdgXml);
}

Debug

I also added a debug feature allowing you to inject a reading every six seconds. To enable the debug mode, simply set “debug_enabled” to “true” in the appSettings section of the app.config file.

Parsing the Readings

The xml text is passed to the constructor of the EnergyReading class and this parses the xml into the required properties, which gives us an object to pass around as needed. The EnergyReading class only extracts the timestamp, temperature and energy values, though there is scope for parsing much more, especially from the “history” readings (see the Xml definition for more info). Note: we also override the ToString() method so that we have a simple method of debugging the app/values.

C#

class EnergyReading
{
    public DateTime TimeStamp { get; private set; }
    public float Energy { get; private set; }
    public float Temperature { get; private set; }
    public bool IsValid { get; private set; }

    public EnergyReading(string readingData)
    {
        TimeStamp = DateTime.MinValue;
        Energy = float.NaN;
        Temperature = float.NaN;
        IsValid = false;

        try
        {
            // parse the xml based reading
            XmlDocument xDoc = new XmlDocument();
            xDoc.LoadXml(readingData);

            XmlNode xNode = xDoc.SelectSingleNode("/msg/time");
            TimeStamp = DateTime.Parse(xNode.InnerText);
            xNode = xDoc.SelectSingleNode("/msg/tmpr");
            Temperature = float.Parse(xNode.InnerText);
            xNode = xDoc.SelectSingleNode("/msg/ch1/watts");
            Energy = int.Parse(xNode.InnerText);
            IsValid = true;
        }
        catch (Exception ex)
        {
            // invalid reading
            Debug.WriteLine(ex.Message);
        }
    }

    public override string ToString()
    {
        StringBuilder sb = new StringBuilder(TimeStamp.ToLongTimeString());
        sb.Append(" - ");
        sb.Append(Energy.ToString("N"));
        sb.Append(" Watts - ");
        sb.Append(Temperature.ToString("N"));
        sb.Append(" Degrees");

        return sb.ToString();
    }
}

Adding the Plugin Infrastructure

Next up is adding the plumbing for the plugins. As previously mentioned, we will be using MEF, which makes it all incredibly simple.

Basically, we define an interface supported by all of the plugins, create a private variable of type IList<PluginInterface> and tag it with the [ImportMany] attribute (this holds our plugin objects), create a catalog of plugins (loaded from a specific directory), and then add that catalog to a CompositionContainer that automatically wires everything up for us. Sounds complex, but it only takes about 10 lines of code:

C#

using System.ComponentModel.Composition;
using System.ComponentModel.Composition.Hosting;

// snip....

CompositionContainer container;

// snip....

[ImportMany]
private IList<IEnergyMonitorPlugin> plugins { get; set; }

// snip....

private void LoadPlugins()
{
    string baseDir = AppDomain.CurrentDomain.BaseDirectory;
    DirectoryCatalog currDirCatalog = new DirectoryCatalog(baseDir);

    container = new CompositionContainer(currDirCatalog);
    container.ComposeParts(this);
}

Now that we have all of the plugins correctly wired up, we need to notify them. For the time being, we'll also leave a few lines of debugging messages in there:

C#

private void NotifyPlugins(EnergyReading rdg)
{
    Debug.WriteLine("Notify : " + rdg.ToString());
    if (null != plugins)
    {
        foreach (IEnergyMonitorPlugin plugin in plugins)
        {
            try
            {
                Debug.WriteLine("Notify : " + plugin.Name);
                plugin.Notify(rdg);
            }
            catch (Exception ex)
            {
                Debug.WriteLine("Plugin '" + plugin.Name + "' : " + ex.Message);
            }
        }
    }
}

Adding an Installer to the Windows Service

Now that we have completed the Windows Service, we need to test it out. To do so, we need to install it, and for that we need to add an Installer Class, as well as adding both a ServiceInstaller and a ServiceProcessInstaller to the designer (set the ServiceProcessInstaller Account property to “Local System” and run the service under this account).

Installing a service is different than installing a normal application. Luckily, we can use .NET framework's InstallUtil.exe to simplify things. I like to set InstallUtil.exe up as an External Tool in Visual Studio when I'm working on Windows Service projects, which makes the whole process as simple as highlighting the Windows Service project and clicking on the Install (or Uninstall) option under the Tools menu:

The configuration to set this up as an “external tool” is as follows:

Title	Install Service (.NET 4)
Command	C:\Windows\Microsoft.NET\Framework64\v4.0.30319\InstallUtil.exe
Arguments	/i "$(ProjectDir)\bin\debug\$(TargetName)$(TargetExt)"
Title	Uninstall Service (.NET 4)
Command	C:\Windows\Microsoft.NET\Framework64\v4.0.30319\InstallUtil.exe
Arguments	/i "$(ProjectDir)\bin\debug\$(TargetName)$(TargetExt)"

For 32-bit operating systems, change the Framework64 folder name to Framework.

Testing the Windows Service

Once you start the service, if you open the Output windows in Visual Studio and view the output from Debug, you should start seeing the readings come in:

Step 2 – The Twitter Plugin

The first plugin we'll write is a simple Twitter poster. Every 60 minutes, this plugin will send a tweet with your machine name and the average energy use over the last hour.

Next, create a new Class Library project and name it “TwitterPlugin.” Then add a reference to the “EnergyService_CSharp” project and have the class implement the IEnergyMonitorPlugin interface. We will also need to add some class variables to hold the last tweet time, energy total, and reading count.
As Twitter no longer supports Basic Auth for API calls we will need to use oAuth. For this we will use the excellent oAuth class developed by Eran Sandler and extended by Shannon Witley.

C#

[Export(typeof(IEnergyMonitorPlugin))]
public class TwitterPlugin : IEnergyMonitorPlugin
{
    double twInterval;
    double twEnergy = 0;
    int twReadings = 0;
    DateTime twLastTweet = DateTime.MinValue;
    oAuthTwitter _oAuth = new oAuthTwitter();

Next, we give the plugin values for “Name” and “Description” and set the DeInit() function to return true (this is a simple plugin so no deinitialization is needed). For the Init() function, we want to read from the app.config the twitter oAuth parameters, and the interval between tweets—remember, this plugin is loaded into the AppDomain of the service, so we need to add the entries to the app.config file of the service, not the app.config of the twitterplugin project/class.

The code looks like this:

C#

bool IEnergyMonitorPlugin.Init()
{
    _oAuth.Token = GetSetting("twitterplugin_token", "");
    _oAuth.TokenSecret = GetSetting("twitterplugin_tokensecret", "");
    _oAuth.Pin = GetSetting("twitterplugin_pin", "");

    twInterval = double.Parse(GetSetting("twitterplugin_interval", "60"));
    return true;
}

private string GetSetting(string key, string defaultValue)
{
    NameValueCollection appSettings = ConfigurationManager.AppSettings;
    string val = appSettings.Get(key);
    if (null == val)
    {
        val = defaultValue;
    }

    return val;
}

The crux of a plugin is the “Notify” function, and for this one we simply add the energy value to the total energy count and increase the reading count. We then check if more than 60 minutes have passed since the last tweet, and if so we send the tweet:

C#

bool IEnergyMonitorPlugin.Notify(EnergyReading rdg)
{
    bool retVal = false;

    twEnergy += rdg.Energy;
    twReadings++;

    if (twLastTweet.AddMinutes(twInterval) < DateTime.Now)
    {
    // it's time to tweet
        retVal= SendTweet(
            string.Format(
                "In the last {0} mins {1} has used an average of {2} watts", 
                twInterval, 
                Environment.MachineName, 
                (twEnergy/twReadings)));
        twEnergy = 0;
        twReadings = 0;
        twLastTweet = DateTime.Now;
        retVal = true;
    }

    return retVal;
}

Sending the tweet requires that we UrlEncode the message and then call the oAuthWebRequest method of the oAuth class with the post data as a parameter.

private bool SendTweet(string tweet)
{
    bool retVal = false;
    try
    {
        string encTweet = System.Web.HttpUtility.UrlEncode(tweet);
        string xml = _oAuth.oAuthWebRequest(
            oAuthTwitter.Method.POST,
            "http://twitter.com/statuses/update.xml",
            "status=" + tweet);
        retVal = true;
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("Error : " + ex.ToString());
    }

    return retVal;
}

Now we have the Notify functionality of the TwitterPlugin completed. To get it working, simply copy the plugin to the same folder as the running Windows Service, edit the setting for “twitterplugin_interval” in the service app.config files, and restart the service. The tweets will not yet be accepted by Twitter as we have not yet authorized the application – for this we need user interaction so it is not something we do in the Windows Service. Instead we build a ConfigTool that uses MEF to load in each of the plugins and calls the “Configure” method.
We add a Windows Form to the TwitterPlugin, add a button that takes the user to a Twitter application authorization page, add a textbox that the user enters the PIN displayed on the webpage into and save the resulting oAuth Token and TokenSecret we get back from calling the AccessTokenGet method of the oAuth class. When we have all the oAuth parameters back we simply save them into the app.config file:

If all is well, you should see tweets appearing every X minutes (depending on the interval you have set) along with your energy averages.

Now that we have completed our first plugin, it should be easy to see how simple it is to write further plugins. You might consider writing the energy values to a local database, sending Facebook updates, or posting to a dedicated service that uses API to store sensor or energy values, such as http://www.pachube.com or http://www.enio.co.uk.

Step 3 – The WebService and Plugin

The next stage we'll develop will give us a little more flexibility. Essentially, this stage consists of a RESTful Windows Communication Framework (WCF) Service and a corresponding WebSvcPlugin that we'll use to update the WCF Service with the latest readings. We'll also build a couple of client applications that will retrieve the reading from the WCF Service (one is a simple webpage using jQuery AJAX to get the reading from the WCF Service, and the other is a Windows Phone 7 application using a HttpWebRequest to get the reading from the WCF Service).

The plugin and clients will need the WCF Service to be in place before they can be written, so we'll tackle the WCF Service first by adding an “ASP.NET Empty Web Application” project to the solution and calling it “EnergyMonitorWs”:

Then we add a new “AJAX-enabled WCF Service” and name it EnergyMonitor.svc:

The WCF Service will expose OperationContracts that allow clients to set the current values and receive each of the values in either JSON or XML format. The current values will be stored in an HttpRuntime.Cache object, so we don't need to worry about persisting the reading data to MSSQL or the FileSystem.

The cache object is in the System.Web.Caching namespace, so we'll need a reference to that. We'll also need to make sure we are working in AspNetCompatibility mode. To do so, we'll add the following attribute to the class:

C#

[AspNetCompatibilityRequirements(
    RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

Now let's code the “SetCurrentValues” function, which exposes a “/set” endpoint and takes date, time, energy, and temperature as parameters on the HTTP GET querystring and stores them in the cache for an hour (this function should be called every 6 seconds, so caching each reading for up to an hour gives us plenty of room for failed updates).

C#

[OperationContract]
[WebInvoke(
    Method="GET",
    UriTemplate="set?energy={energy}&temp={temp}&date={date}&time={time}")]
public void SetCurrentValues(string energy, string temp, string date, string time)
{
    Cache cache = HttpRuntime.Cache;

    try
    {
        cache.Remove("energy");
        cache.Remove("temp");
        cache.Remove("date");
        cache.Remove("time");
    }
    catch { }

    cache.Add(
        "energy", 
        energy, 
        null, 
        DateTime.Now.AddHours(1), 
        Cache.NoSlidingExpiration, 
        CacheItemPriority.Default, 
        null);
    cache.Add(
        "temp", 
        temp, 
        null, 
        DateTime.Now.AddHours(1), 
        Cache.NoSlidingExpiration, 
        CacheItemPriority.Default, 
        null);
    cache.Add(
        "date", 
        date, 
        null, 
        DateTime.Now.AddHours(1), 
        Cache.NoSlidingExpiration, 
        CacheItemPriority.Default, 
        null);
    cache.Add(
        "time", 
        time, 
        null, 
        DateTime.Now.AddHours(1), 
        Cache.NoSlidingExpiration, 
        CacheItemPriority.Default, 
        null);

    return;
}

We want to make request functions available via a simple HTTP GET and we want to provide the option of JSON or XML as the response. Therefore, we add a “/json/{x}” endpoint and a “/xml/{x}” endpoint where {x} is the reading data we want (energy, temp, date or time):

C#

[OperationContract]
[WebInvoke(
    Method = "GET", 
    UriTemplate = "xml/{value}")]
public string GetValueXml(string value)
{
    WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
    return GetValue(value.ToLower());
}

[OperationContract]
[WebInvoke(
    Method = "GET", 
    UriTemplate = "json/{value}", 
    ResponseFormat = WebMessageFormat.Json)]
public string GetValueJson(string value)
{
    return GetValue(value.ToLower());
}

private string GetValue(string key)
{
    Cache cache = HttpRuntime.Cache;

    string retVal = (string)cache.Get(key);
    if (null == retVal)
    {
        retVal = "N/A";
    }

    return retVal;
}

Now that we have the WCF Service in place, we can build the plugin that updates it. This is another Class Library project that we add to the solution (this time naming it WebServicePlugin), again making sure it implements the IEnergyMonitor interface (you'll need to add a reference to the EnergyMonitor_CSharp for this).

Give the plugin a Name and Description and set the Init() and DeInit() functions to return true. Then, simply have the code in the “Notify” function create an HTTP GET request with the values in the querystring to the “/set” endpoint (the SetCurrentValues function). This can be accomplished with a System.Net.WebClient object:

C#

bool IEnergyMonitorPlugin.Notify(EnergyReading rdg)
{
    bool retVal = false;

    DateTime ts = rdg.TimeStamp;

    string getUrl = baseUrl + "/set?";
    getUrl += "energy=" + rdg.Energy.ToString() + "&";
    getUrl += "temp=" + rdg.Temperature.ToString() + "&";
    getUrl += "date=" + ts.ToString("dd/MM/yy") + "&";
    getUrl += "time=" + ts.ToShortTimeString();

    WebClient wc = new WebClient();

    try
    {
        wc.DownloadString(getUrl);
        retVal = true;
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(
            "Error (Notify) : " + ex.Message);
    }


bool IEnergyMonitorPlugin.Init()
{
    // get the base url from the (Service) app.config
    baseUrl = GetSetting(
        "websvcplugin_baseurl", 
        "http://localhost/EnergyMonWs.svc");
    return true;
}

// snip....


private string GetSetting(string key, string defaultValue)
{
    NameValueCollection appSettings = ConfigurationManager.AppSettings;
    string val = appSettings.Get(key);
    if (null == val)
    {
        val = defaultValue;
    }

    return val;
}

Now that we're done with the WCF Service and WebSvcPlugin, we need to work on the two WCF Service client applications.

Step 4 – The WebService Html Page Client

We'll first tackle the html webpage with jQuery—a simple webpage that uses the jQuery library to make AJAX calls to our WCF Service to get the current values—by adding a new ‘HTML Page' to the EnergyMonitorWs project. To begin, name the page EnergyMonitor.htm.

Next, we'll add some html to the page. This html is linked to some CSS, giving us a simple remote version of the energy monitor:

Then we use jQuery to call the WCF Service and update the actual values with real reading data. We also add a JavaScript timer to make the WCF Service calls every 15 seconds. Obviously, we need to reference the jQuery code and the CSS in the head section:

HTML

<head>
    <title>Energy Monitor - Ken Hughes</title>
    <script 
        src="scripts/jquery-1.4.1.js" 
        type="text/javascript"></script>
    <link 
        rel="Stylesheet" href="css/style.css" 
        type="text/css" />
</head>

Then, after the main page display elements, we add the javascript code so the values are updated every 15 seconds:

Javascript

function getReading(fname, elementid) {
    ajaxUrl = "EnergyMonWs.svc/json/" + fname;
    $.ajax({
        type: "GET",
        url: ajaxUrl,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            // Replace the div's content with the value returned.
            $("#" + elementid).text(msg);
        }
    });
}


function updateReadings() {
    getReading("temp", "tempval");
    getReading("energy", "energyval");
    getReading("time", "timeval");
   
}

$(document).ready(function () {

    updateReadings();
    window.setInterval(function () {
        updateReadings();
    }, 15000);
});

Step 5 – The WebService Windows Phone 7 Client

The purpose of the Windows Phone 7 client is to act as a remote monitor. The client pulls its reading from the web service and updates a monitor-style display. To complete this part of the project, you will need to have the Windows Phone 7 Development tools installed.

Begin by adding a new “Windows Phone Application” project and calling it “WinPhoneEnergyMonitor.”

First, in the constructor, add a Timer object, set the interval to 15 seconds, and have it call a function to update the screen values. This function calls the webservice for each value, receiving the latest reading data and updating the relevant TextBlock.

In Windows Phone 7, uses an asynchronous manner to call to things such as the WebClient and HttpWebRequest. Accordingly, we create a new WebClient object, assign a delegate to the “DownloadStringCompleted” event, and then call “DownloadStringAsync” with the relevant uri along with the TextBlock we want to update as the ‘userState' object. All of this allows us to update the correct item in the event handler.

The code looks like this:

C#

private void UpdateScreen(object state)
{
    UpdateValueFromWebService("energy", this.energyValue);
    UpdateValueFromWebService("temp", this.tempValue);
    UpdateValueFromWebService("time", this.timeValue);
    UpdateValueFromWebService("date", this.dateValue);
}

private string UpdateValueFromWebService(string reading, TextBlock tb)
{
    string retVal = "N/A";
    Uri uri = new Uri(baseUri + "/json/" + reading);

    try
    {
        WebClient wc = new WebClient();
        wc.DownloadStringCompleted += 
            new DownloadStringCompletedEventHandler(DownloadStringCompleted);
        wc.DownloadStringAsync(uri, tb);
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(
            "Error (UpdateValueFromWebService) : " + ex.Message);
    }

    return retVal;
}

void DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    try
    {
        string val = e.Result.Replace("\"", "").Replace("\\", "");
        System.Diagnostics.Debug.WriteLine(val);
        ((TextBlock)e.UserState).Text = val;
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(
            "Error (DownloadStringCompleted) : " + ex.Message);
    }
}

Conclusion

This was a really interesting project. Not only did it help me understand how much energy I was using (and help me reduce it), it also presented a software challenge covering a number of areas and technologies: Windows Service, WCF, Windows Phone 7, and javascript/jQuery.

I already have plans for a number of other plugins and new ways to visualize the usage data—keep an eye on the Codeplex site for updates.

If you want to try this out, the download link for the source code is at the top of the article!

About The Author

Ken Hughes is Chief Technical Officer at C2C Systems, a Microsoft Gold Partner ISV. He is passionate about technology, productivity, and automating everything. He stays up-to-date with and keeps his hand in new technologies by working on personal and open source projects such as dasBlog. Contact information may be found on both his blog and Twitter.

• Scott's Blog
• Watch Scott Guthrie's keynote at MIX10
• Web PI Download
• Visual Studio 2010 Download
• Download Silverlight 4
• Scott's previous Bytes by MSDN interview

This session is presented by Scott Allen during Microsoft DevDays 2010 in The Hague in The Netherlands.

• Introduction
• [1:59] Demo - Web Forms, ViewState, ClientIDs
• [12:47] Scripting, ASP.NET Ajax Library, and Ajax Control Toolkit
• [20:55] Demo - Javascript, ASP.NET Ajax Library, jQuery, IE8 Developer Tools
• [41:49] ASP.NET 4 Web Forms
• [49:32] Resources & Conclusion

Slides for this session, and other Northeast Roadshow sessions, can be found on the Code Gallery.

The goal for this Web Application Toolkit is to provide a reusable set of assets, like ASP.NET pages, data access code, and database schemas, for integrating Frequently Asked Questions into your own Web application. The FAQ pages of this Toolkit include the following features:

• Browse and view FAQs organized by topics
• An interactive user experience using jQuery and ASP.NET AJAX
• Search for FAQs by keywords
• Access FAQs through friendly URLs (for example /Faq/bidding-and-buying/how-do-i-buy-an-item)
• FAQs Ratings

Downloads and Links

• Download this toolkit here.
• For screencasts about other Web Application Toolkits, click here.
• To download other Web Application Toolkits, click here.

Feedback

We love to hear your feedback, ideas and comments so drop us an email to webapp@microsoft.com.  Keep up-to-date with the latest releases of Web App Toolkits by subscribing to the blog http://blogs.msdn.com/webapptoolkits or following us on Twitter here: http://www.twitter.com/microsoftweb

• Download this toolkit here.
• For screencasts about other Web Application Toolkits, click here.
• To download other Web Application Toolkits, click here.

Feedback

We love to hear your feedback, ideas and comments so drop us an email to webapp@microsoft.com.  Keep up-to-date with the latest releases of Web App Toolkits by subscribing to the blog http://blogs.msdn.com/webapptoolkits or following us on Twitter here: http://www.twitter.com/microsoftweb

To implement this, on your website you just need to replace your current jquery script link with this link:

<script 
   src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" 
   type="text/javascript">
</script>

You can get a full listing of the JavaScript libraries (and associated URLs) we already have loaded in our CDN cache here: www.asp.net/ajax/cdn

[via ScottGu]

• ASP.NET MVC Ninjas on Fire Black Belt Tips

And  for even more details you can also check out:

• Phil's Blog
• The MVC section of ASP.NET
• The MVC section of CodePlex.com
• MVC posts on Scott Guthries blog
• Patterns & Practices on MVC

The layout could use a little tweaking here and there and I haven’t updated all the pages to use jQuery UI Themes, but the technique works. We can now use ThemeRoller to build custom ScrewTurn Wiki Themes. If you use Firefox, you can use the ThemeRoller Firefox Bookmarklet to design custom themes right on your own wiki! Once you’re satisfied with the results, just download your new custom theme and deploy it to your /Themes directory.

Other videos from this article

· Improving User Interaction

· jQuery UI In ScrewTurn Wiki

· Re-Theming ScrewTurn Wiki

· jQuery UI Themes in ScrewTurn Wiki

· Applying ThemeRoller to ScrewTurn Wiki

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx