Raspberry Pi – Button as a digital toggle switch

Ability to directly control the GPIO (general purpose input output) pins is one of the reasons the miniature Raspberry Pi is so famous with hobbyist and educationalists.

In this self learning exercise, I will read the status of the button, determine if it is pressed or not and then based on that, switch the LED on or off.

Very basic right? Let’s follow along.

Components

Raspberri Pi 2 Model B (40 pin) with Raspbian OS
Breadboard
Connectors
LED 5mm
Push Button
Resistors – R1 (330 ohm) & R2 (1K ohm)

Wiring It Up

My setup uses the GPIO 23 (pin #16) and GPIO 24 (pin #18), however you can use any GPIO pins for this purpose. If you are using different pins, make sure to update the pin numbers in the program below.

GPIO 23 (pin #16) – Used as input to read the status of button
GPIO 24 (pin #18) – Used as output for switching the LED on and off
+3.3V (pin #1) – Connected to power rail on the breadboard
GND (pin #9) – Connected to ground rail on the breadboard
R1 – Connected between LED and ground
R2 – Connected between 3.3V power rail and button

Program

You need a program to tie these hardware together; to read the status of the button and send the signals to light up the LED.

I used ‘C’ with WiringPi libraries. I’m quite new to these myself. If you prefer, you can also do the same with Python. Geany is my favorite editor on the Raspberry Pi, works for both C and Python.

Let me quickly explain the functions of WiringPi library used in the program:

digitalWrite() – used to send an output to the GPIO pin. The first parameter is the pin number. Second parameter determines if the pin should be set as either HIGH or LOW (it can take only 2 states).

digitalRead() – used to read the status of the GPIO pin. The only parameter passed is the pin number. The output is either HIGH or LOW and can be checked as below:

if ( digitalRead (pin) ) // this means the button is not pressed or is open
{ }

1 2	if ( digitalRead (pin) ) // this means the button is not pressed or is open { }

if ( !digitalRead (pin) ) // this means the button is pressed or is closed
{ }

1 2	if ( !digitalRead (pin) ) // this means the button is pressed or is closed { }

Once this part is understood, whipping up a code to capture the pressed state of the button and lighting up an LED is a piece of cake. Not joking, it really is!

The next part is how to toggle. This is done by remembering the previous state of the button and when it changes, determine whether to switch the LED on or off.

# include <wiringPi.h>

void ledOn(int pin)
{
	digitalWrite (pin, HIGH);
}

void ledOff(int pin)
{
	digitalWrite (pin, LOW);
}

int main (void)
{
	const int BUTTON = 23;  // GPIO 23, pin #16
	const int LED = 24; // GPIO 24, pin #18

	// initial setup
	wiringPiSetupGpio();

	// set the pin mode as either INPUT or OUTPUT
	pinMode(LED, OUTPUT);
	pinMode(BUTTON, INPUT);

	int state = 0;

	// initial state
	int press = 0;
	int prev = 0;

	int val;
	

	while (1)
	{
		if (!digitalRead(BUTTON))
			press = 1; // pressed
		else
			press = 0; // not pressed

		// at every button press, toggle the state
		if ((press == 1) && (press != prev))
			state = !state;

		// store prev value
		prev = press;
		
		if (state == 1)
			ledOn(LED);
		else
			ledOff(LED);

		// add delay to avoid the bounce
		delay (75);
		
	}
	
	
	return 0;
}

# include <wiringPi.h>

void ledOn(int pin)

{

digitalWrite (pin, HIGH);

}

void ledOff(int pin)

{

digitalWrite (pin, LOW);

}

int main (void)

{

const int BUTTON = 23; // GPIO 23, pin #16

const int LED = 24; // GPIO 24, pin #18

// initial setup

wiringPiSetupGpio();

// set the pin mode as either INPUT or OUTPUT

pinMode(LED, OUTPUT);

pinMode(BUTTON, INPUT);

int state = 0;

// initial state

int press = 0;

int prev = 0;

int val;

while (1)

{

if (!digitalRead(BUTTON))

press = 1; // pressed

else

press = 0; // not pressed

// at every button press, toggle the state

if ((press == 1) && (press != prev))

state = !state;

// store prev value

prev = press;

if (state == 1)

ledOn(LED);

else

ledOff(LED);

// add delay to avoid the bounce

delay (75);

}

return 0;

}

Since the program involves low level access to gpio pins, it will need ‘sudo’ permissions to run this program.

Summary

Here, we saw how to read input from a button and write output to light up an LED using the GPIO pins of a Raspberry Pi. Once we have these basics right, then the same knowledge can be used to drive other loads like a relay, motor etc.

References

WiringPi – GPIO interface library for the Raspberry Pi

WiringPi GPIO Pins – Pin layout for WiringPi specific and Broadcom specific pin modes

Adafruit – Tons of stuff related with Raspberry Pi and Arduino

Installing Windows 10 on Raspberry Pi

Raspberry Pi , is a wonderful tiny credit card sized computer created by people who were passionate about education. It is a little device that enables people of all ages to explore computing and to learn how to program in languages like Python and Scratch. Due to its small size and relatively low power consumption, it is also widely used by IOT (Internet of Things) enthusiasts.

The Raspberry Pi landscape has been dominated so far by Linux based operating systems like Raspbian, OpenELEC and the very recent Snappy Ubuntu.

With Microsoft rolling out a version of Windows to this platform, it provides an opportunity for many more people to be engaged with the magic of Raspberry Pi.

Step by Step

Download the Windows 10 IOT image for Raspberry Pi from here (around 500 MB).
Extract Windows_10_IoT_Core_RPi2.msi, from the ISO image that was downloaded in the previous step. I used the popular 7-zip to extract.
Install Windows_10_IoT_Core_RPi2.msi on your computer. I used a Windows 7 computer for this.
Run ‘Windows IOT Core Image Helper’ from start menu.

Select the correct SD card from the list.
Select the .ffu image file which is installed in the folder: ‘C:\Program Files (x86)\Microsoft IoT\FFU\RaspberryPi2’.
Click on ‘Flash’ button.
The ‘Deployment Image Servicing and Management Tool’ will run which will transfer the ffu image file to the SD card.

This process takes some time, so please be patient until the status at the bottom shows as below.

I checked how the partitions are divided on the SD card using the Mini Partition Tool, here’s a screenshot.

After it is successfully installed, pop the SD card into the Raspberry Pi and power up. I used the Raspberry Pi 2 Model B, the one with the 1GB RAM on it.
Again, the process takes some time, so please be patient.
Unfortunately, there is no Wifi support (yet), so I plugged mine over an ethernet cable to the router.
As I connected it as headless (without connected to a monitor), I watched my router to find out the IP address after it boots up.
The default hostname of the new Windows 10 IOT device is ‘minwinpc’
Now connect over SSH (you can also use powershell) using the default credentials (username: Administrator, password: p@ssw0rd)

After logging in over SSH a familiar DOS like interface is displayed with the familiar C:\> prompt.
Below screenshot shows the default shares setup on the device.

Congratulations! Windows 10 IOT has been successfully setup on your Raspberry Pi!

References:

Implementing Isotope with Knockout JS

Knockout is a javascript MVVM (model view view-model) library which provides an excellent data binding mechanism at the client side. Isotope is an amazing javascript layout library.

I have used Isotope library in php pages before and it was a breeze. So naturally I thought it was a cake walk to implement Isotope anywhere. However, when I tried implementing it inside the Knockout framework, that was clearly not the case and I had some good learning on the way.

The problem

Both Isotope and Knockout works by manipulating the DOM. Knockout dynamically converts the binding definitions to DOM elements when data binding is executed. Isotope adds css classes to each DOM element so that it can find those elements later and manipulate them.

However, when Isotope runs, Knockout has not yet created the elements for proper initialization. Isotope doesn’t re-evaluate the elements and hence doesn’t know about the elements it needs to manipulate. After looking for quite a while for a solution, this jsfiddle and this post came to the rescue.

Custom bindings to the rescue

In Knockout, you can create your own custom bindings apart from the standard bindings defined in the Knockout library. There are 2 hooks defined for each binding – ‘init’ and ‘update’.

Let’s see an example:

ko.bindingHandlers.customBinding = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

}

};

ko.bindingHandlers.customBinding = {

init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

}

};

Here, the ‘init’ hook is called when the binding is first applied to an element. The ‘update’ hook will be called when the binding is first applied to an element and again whenever the associated observable changes value.

For this custom binding to be called, it needs to be declared in the html or the view from where the binding takes place.

data-bind="customBinding: {key: 'value', key: 'value'}"

1	data-bind="customBinding: {key: 'value', key: 'value'}"

Here, the name of the binding is ‘customBinding’.

So, using this custom binding, the isotope can be initialized for each item in the binding list as it is added to the view.

ko.bindingHandlers.isotope = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var $el = $(element);
        var value = ko.utils.unwrapObservable(valueAccessor());

        var $container = $(value.container);

        $container.isotope({
            itemSelector: value.itemSelector
        });

        $container.isotope('appended', $el);

    }

};

ko.bindingHandlers.isotope = {

init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

var $el = $(element);

var value = ko.utils.unwrapObservable(valueAccessor());

var $container = $(value.container);

$container.isotope({

itemSelector: value.itemSelector

});

$container.isotope('appended', $el);

}

};

Then, inside the view, invoke the custom binding:

&lt;div id="container" data-bind="foreach: items"&gt;
  &lt;div class="item" data-bind="isotope: {container: '#container', itemSelector: '.item'}"&gt;&lt;/div&gt;
&lt;/div&gt;

</div>

Here, ‘isotope’ is the name of the custom binding. Parameters ‘container’ and ‘itemSelector’ are passed to the custom binding for initializing the isotope. Since it’s applied inside the ‘foreach’ loop, this will be called each time an item is inserted or removed.

Voila! Now immediately after Knockout adds each item dynamically, the custom binding will add the attributes required by Isotope to each element, thereby allowing Isotope to manipulate and resize the elements later.

DEMO

Masonry & Isotope – Amazing Javascript Layout Libraries

What is Masonry?

Masonry is a cascading grid layout library written in Javascript. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. If you have seen Tumblr, you already know what I’m talking about. Masonry was written by David DeSandro, who is a web designer at Twitter.

What is Isotope?

This another javascript layout library by the same David DeSandro who wrote Masonry. Isotope adds sorting and filtering of UI elements. It uses Masonry layouts in addition to other layouts.

I found both of them to be so amazing, I whipped up a few demos to see for myself!

Demo: Masonry with jQuery

In this demo, masonry layout is used. Go ahead and resize the browser window to see the elements in the window automatically changing the layout to fit the screen. Usage of this appropriately will make the design fluid and gracefully fit on screens of varying sizes, as is common these days.

Demo: Isotope with jQuery

In this demo, isotope is used with masonry layout. You can see client side filtering in action here. Go ahead and click on the various categories displayed on top. Notice when you resize the window here, it behaves different from the masonry demo above. This demo uses a fixed column masonry layout, meaning, the number of columns will remain the same, but each element gets resized to fit the screen.

Reference:
Masonry: Home | Github
Isotope: Home | Github

Implementing Singleton Pattern in Javascript

In singleton pattern, one instance of a class will be instantiated and no more. The same object is returned to all the clients that request for a new object of a singleton class. In traditional object oriented languages, this is achieved by making the constructor private and exposing a static public property which in turn returns the same instance every time.

Let’s see how this is done in javascript:

var singletonModule = (function () {

    // private property to hold the instance
    var instance;

    // private function to instantiate the object
    var init = function () {

        var random = Math.random();

        // expose publicly from funtion init()
        return {
            getRandom: function () {
                return random;
            },
            anotherPublicMethod: function () {
                //another public method
            }
        };
    };

    return {
        getInstance: function () {
            // check if the instance already exists. create if it does not
            if (!instance) {
                instance = init();
            }

            return instance;
        }

    };

})();

// Usage:
var m1 = singletonModule.getInstance();
var m2 = singletonModule.getInstance();

console.log(m1.getRandom() == m2.getRandom());

var singletonModule = (function () {

// private property to hold the instance

var instance;

// private function to instantiate the object

var init = function () {

var random = Math.random();

// expose publicly from funtion init()

return {

getRandom: function () {

return random;

anotherPublicMethod: function () {

//another public method

}

};

return {

getInstance: function () {

// check if the instance already exists. create if it does not

if (!instance) {

instance = init();

}

return instance;

}

};

})();

// Usage:

var m1 = singletonModule.getInstance();

var m2 = singletonModule.getInstance();

console.log(m1.getRandom() == m2.getRandom());

The public method getInstance() exposes the object instance. A check is done to see if an instance was created earlier. If it was created before, that same instance is used; otherwise a new instance is created and returned.

The init() function exposes the public and private methods of the instance. Private methods and properties are protected from outside access. Public methods and properties are accessible from outside, just like any other modules.

The singleton pattern is not very useful in the context of javascript in traditional webpages, as the application scope gets reset every time the page is refreshed.

However, the singleton implementations come particularly handy in Singe Page Applications commonly referred as SPA. In a SPA, the entire lifetime of the application is managed in a single page and there are no page refreshes that reset the application life cycle.

Module Pattern In Javascript

Module pattern allows to emulate the concept of classes in Javascript. It allows to create private methods and variables along with their public counterparts inside the same class, thus shielding particular parts of the class from the global scope.

Let’s look at an example:

        var module = function () {

            var random = Math.random();

            return {

                showRandom: function () {
                    console.log(random);
                }
            };

        };

        // Usage:
        var m1 = new module();
        m1.showRandom();

        var m2 = new module();
        m2.showRandom();

        //error - can't access the private variable 'random' from outside
        console.log(m2.random);

var module = function () {

var random = Math.random();

return {

showRandom: function () {

console.log(random);

}

};

// Usage:

var m1 = new module();

m1.showRandom();

var m2 = new module();

m2.showRandom();

//error - can't access the private variable 'random' from outside

console.log(m2.random);

Here, the private variable ‘random’ is encapsulated and any code outside of the module can’t access this variable. The functions and properties inside the ‘return{ }’ are exposed publicly and anything outside of ‘return{ }’ are considered private.

This is can also be written as a self-contained module:

        var module = function () {

            var random = Math.random();

            return {

                showRandom: function () {
                    console.log(random);
                }
            };

        }();

        // Usage:
        module.showRandom();

var module = function () {

var random = Math.random();

return {

showRandom: function () {

console.log(random);

}

};

}();

// Usage:

module.showRandom();

Notice the () at the end of the module definition? This will create an instance and return it in the global variable ‘module’.

Passing arguments

A variation of this pattern allows to import modules and alias them locally by passing it as arguments to the anonymous function.

Let’s look at another example:

        var module = function (jq) {

            var getValue = function (elem) {
                console.log(jq(elem).html());
            }

            return {

                getHeader: function () {
                    getValue("#header");
                },

                getFooter: function () {
                    getValue("#footer");
                }
            }
        } (jQuery);

        // Usage:
        module.getHeader();
        module.getFooter();

var module = function (jq) {

var getValue = function (elem) {

console.log(jq(elem).html());

}

return {

getHeader: function () {

getValue("#header");

getFooter: function () {

getValue("#footer");

}

} (jQuery);

// Usage:

module.getHeader();

module.getFooter();

Here, the global variable jQuery is passed as ‘jq’ into the module making it local inside the scope of the module.

Reference:
From the excellent online book by Addy Osmani:
Learning Javascript Design Patterns

The Curious Case Of 64-bit MSI

Over the past couple of years, more and more companies have rolled out the 64-bit version of their respective products, including Office and Oracle. Office has both 32-bit and 64-bit versions of their new Office 2010 platform. Similarly, Oracle has also released the 64-bit version of their client drivers in addition to the already existing 32-bit versions.

For these 64-bit versions to work seamlessly, all the components that they depend on also has to be 64-bit. For example, Office 2010 64-bit version cannot access any add-ins or legacy COM components that are 32-bit. Similarly if there is a database connectivity to be made from Office 2010 64-bit, it requires the 64-bit version of the oracle drivers.

Recently I encountered a situation where I had to convert a 32-bit .net COM component to 64-bit to be accessed from 64-bit Office. The COM component was packaged as an MSI file which will be installed on the user machines. To me, converting this to 64-bit was a no-brainer.

Take the setup program used to create the MSI package
Change the Target Platform to 64-bit
Build the MSI
Deploy

And that is exactly what I did, job done in 20 minutes! But to my surprise, the Office 64-bit refused to recognize the installed COM component. What’s going on?

Digging deeper, I found that the component is getting registered in the SYSWOW64 section in the registry instead of the SYSTEM32 section. Now, if you are not familiar with the SYSWOW64, this is where Microsoft decided to put all 32-bit programs on a 64-bit machine (like Win 7) and SYSTEM32 is where all the 64-bit programs will reside (I know the naming is just confusing!).

I went on to reason that if the component is getting registered in the SYSWOW64, then somehow the installation process should be running as a 32-bit process. But I did change the Target Platform to 64-bit, didn’t I? I did!

Browsing through a number of MSDN blogs and knowledge base articles with my new friend, BING, I found a blog post where it was explained that there is a small glitch with the setup program bundled with Visual Studio 2010 and there is an additional step that needs to be done to make the MSI truly 64-bit.

Visual Studio 2010 Setup Program

If the installation program includes custom actions, Visual Studio 2010, when creating the MSI, includes an additional DLL called InstallUtilLib.dll. When this DLL is included, the setup program includes this from the 32-bit area of the .net framework instead of the 64-bit Framework64 folder. When the MSI runs, it detects that there is a dependency that is not supported on 64-bit and runs the entire process as 32-bit.

Currently, nothing can be done directly from Visual Studio to correct this situation. The suggestion is to modify the MSI after it has been created.

Orca to the rescue

Orca is a program that is used to create or modify an MSI installable file. It is bundled along with the .net framework SDK, so if you have Visual Studio, it is likely that you already have it. I searched the term ‘orca’ in my program files and it threw up the Orca.msi, which then I installed.

What are we modifying? We are going to open the MSI that was created by Visual Studio in Orca, replace the InstallUtilLib.dll (32-bit) that was added by default with the 64-bit version of the same DLL.

First open the MSI in Orca.

The left hand side displays all the tables that are present in this MSI. Choose the ‘Binary’ table. On the right hand side, you will see the entry for ‘InstallUtil’.

Double click on the area where it says ‘[Binary Data]’. It will open a ‘Edit Binary Stream’ dialog as shown below. Make sure the ‘Read binary from filename’ option is selected.

Click on Browse.

Browse to %WINDIR%Microsoft.NETFramework64v2.0.50727

Select ‘InstallUtilLib.dll’.

Click on OK button.

Notice that the folder name says ‘Framework64’ (with a suffix ‘64’). The Framework folder (without the suffix ‘64’) is its 32-bit counterpart.

Save the MSI file.

Voila! With the 32-bit dependency removed from the MSI, the MSI now runs as a 64-bit process, registering the COM in the SYSTEM32 section and correctly so.

Problem solved!

Setting Up A Git Repository

All the version control systems I have worked with so far like CVS, VSS and Team Foundation Server are centralized version control systems. Git, however, is a distributed version control system. Clients don’t just checkout the latest snapshot from the server, but they mirror the entire repository.

So, when I decided to setup my own version control system for personal use, I decided to give Git a try.

Git can be installed on any computer and you have a version control system right away. However, I also wanted a remote repository on my main file server (maybe bias from working with centralized version control systems for many years!)

To achieve this, Git has to be installed on the main file server (remote repository) as well as on the local computer (local repository). The good part about this setup is that the local computer does not require to be connected to the server all the time (which is usually the case with centralized version control systems). It needs to be connected only when the changes has to be pushed back to the main server (remote repository). This is different from other centralized version control systems where the clients has to be connected to do any operation like compare previous versions / branch / check-in / check-out etc.

Installing Git on the remote server

Let’s first install Git on the remote server. I use a Synology disk station that runs BusyBee Linux as my main file server.

DiskStation> ipkg update

DiskStation> ipkg install git

DiskStation> ipkg update

DiskStation> ipkg install git

Instead of ipkg, use whatever package manager is available on your distribution. If you are using Synology and do not have ipkg package manager, you can install ipkg by following my earlier post Bootstrapping Synology DiskStation – Unleash The Power.

Initiate a bare repository on the remote server

Now that Git is installed, initiate a bare repository. There are 2 types of repositories in Git – bare and working. Bare repository is one without a working directory. For the remote, initiate a bare repository.

DiskStation> cd /volume1/git/projects

DiskStation> mkdir WeatherWatch.git

DiskStation> cd WeatherWatch.git

DiskStation> git --bare init

DiskStation> cd /volume1/git/projects

DiskStation> mkdir WeatherWatch.git

DiskStation> cd WeatherWatch.git

DiskStation> git --bare init

Install Git on the local computer

I use a Windows 7 machine as my local. Installed the Git core for Windows from msysgit. You can also find the download for Windows from here.

This installs the core, a bash and a minimal GUI.

Even though this is enough for most of the Git operations, I prefer to use the Git Extensions locally. Git Extensions has windows explorer integration and also integrates with Visual Studio.

Initiate a new repository from Git Extensions. If you already have a source code folder, you can choose that to create a new repository and convert the existing folder as a working folder. Choose ‘Personal repository’ as we want a working folder on the local.

After a few commits and branching and merging, the local repository looks like the below. It gives a good visual interpretation of what’s going on.

Connecting the local repository with the remote

Being distributed, one local repository can be linked to one or many remote repositories. In Git Extensions, go to Menu > Remote > Manage remote repositories > New

The recommended method of connecting to a remote is to use a SSH connection with public / private key authentication, without getting prompted for the password.

However, I chose to use another method. My remote is on a file server that I have access to and can be accessed from Windows machines on the local network. I created a samba share to the remote repository folder, and created a network drive mapping from my windows machine. (P: as shown in the below screenshot, points to the remote repository created above in /volume1/git ). This is not a recommended method if there are many users, but works fine in my case.

Push changes to the remote

When the changes are ready to be pushed to the remote, click on the Push button. There is a also Pull button to pull any changes other users might have done.

When the changes are pushed to the remote, all the commits, branches, merges and other operations done locally are pushed to the remote repository.

If another user has committed to the remote during the time you were making changes locally, Git will not let you push to the remote directly. You will need to pull the changes from the remote, merge those changes into your own repository, resolve any conflicts and then push the changes to the remote. This built-in mechanism protects one user’s changes to be overwritten by another user accidentally.

GitList – A beautiful web interface for the repositories

I tried a few web interfaces for viewing my remote repositories, but GitList stood out from the rest by it’s minimalistic approach.

It was a pretty easy installation on a PHP / Apache The below installation instructions are from the GitList author.

Download GitList from gitlist.org and decompress to your /var/www/gitlistfolder, or anywhere else you want to place GitList.
Rename the config.ini-example file to config.ini.
Open up the config.iniand configure your installation. You’ll have to provide where your repositories are located and the base GitList URL (in our case, http://localhost/gitlist).
Create the cache folder and give read/write permissions to your web server user:

The options in the config.ini are simple at best.

[git]
client = '/usr/bin/git' ; Your git executable path
repositories = '/var/www/projects/' ; Path to your repositories

; You can hide repositories from GitList, just copy this for each repository you want to hide
; hidden[] = '/var/www/projects/BetaTest'

[app]
debug = false

; If you need to specify custom filetypes for certain extensions, do this here
[filetypes]
; extension = type
; dist = xml

[git]

client = '/usr/bin/git' ; Your git executable path

repositories = '/var/www/projects/' ; Path to your repositories

; You can hide repositories from GitList, just copy this for each repository you want to hide

; hidden[] = '/var/www/projects/BetaTest'

[app]

debug = false

; If you need to specify custom filetypes for certain extensions, do this here

[filetypes]

; extension = type

; dist = xml

See few screenshots below:

References

An excellent book on all things Git:
http://git-scm.com/book

Git downloads:
http://git-scm.com/downloads

List of GUI clients:
http://git-scm.com/downloads/guis

GitList – web interface:
https://github.com/klaussilveira/gitlist
http://gitlist.org/

WP7: Checking Weather Forecast Using YQL

I touched upon yahoo query language (YQL) interface in my last post. Today, I will show some quick practical uses of YQL and demonstrate how easy it is for the programmers to tap into this information.

For today’s example, we will examine the table named ‘weather.forecast’, which is available in the YQL interface.

Head over to the YQL Console to examine the parameters to be used for ‘weather.forecast’.

As shown in the screenshot, there is one parameter named ‘location’ that is required for querying data from this table.

SELECT * FROM weather.forecast WHERE location="63126"

1	SELECT * FROM weather.forecast WHERE location="63126"

The complete URL would look like below:

http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%2263126%22%20%20&diagnostics=true

Windows Phone Application

Create a new ‘Windows Phone Application’ project in Visual Studio.

Preparing the User Interface

The user will provide the location for which the weather forecast is to be displayed as input.

For this, I added a horizontal StackPanel with a TextBox and a Button into the MainPage.xaml.

<TextBlock Text="Enter the zip code:" />
<StackPanel Orientation="Horizontal" Margin="0,0,0,50">
    <TextBox Name="locationTextBox" Text="" Width="300"></TextBox>
    <Button Name="goButton" Content="GO" Width="100" Click="goButton_Click"></Button>
</StackPanel>

</StackPanel>

For displaying the results, I used a WebBrowser control, as some of the data for ‘weather.forecast’ is returned as HTML.

<phone:WebBrowser Name="browserControl" Height="300" Visibility="Collapsed" />

1	<phone:WebBrowser Name="browserControl" Height="300" Visibility="Collapsed" />

The XAML listing for the UI is here:

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="WEATHER WATCH" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Vertical" Margin="12, 0, 12, 0">
                <TextBlock Text="Enter the zip code:" />
                <StackPanel Orientation="Horizontal" Margin="0,0,0,50">
                    <TextBox Name="locationTextBox" Text="" Width="300"></TextBox>
                    <Button Name="goButton" Content="GO" Width="100" Click="goButton_Click"></Button>
                </StackPanel>

                <TextBlock Name="titleTextBlock" Text=""></TextBlock>

                <phone:WebBrowser Name="browserControl" Height="300" Visibility="Collapsed" />
            </StackPanel>

        </Grid>
    </Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</StackPanel>

<phone:WebBrowser Name="browserControl" Height="300" Visibility="Collapsed" />

</StackPanel>

</Grid>

Getting data from YQL

The user enters the zip code for which weather forecast has to be displayed and press on ‘GO’ button.

The program takes this location, construct the correct URL and make a web request to retrieve the data from the internet.

Windows Phone SDK provides two options to make a web request and get data from the internet, WebClient and HTTPWebRequest. See here for more information.

For this example, I used the WebClient API for it’s inherent simplicity as this is a post more to demonstrate the YQL than about performance.

public void PopulateCurrentConditions(string location)
{
    const string locVariable = "$$LOCATION$$";
    string query = "http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%22" + locVariable + "%22%20%20&diagnostics=true";

    string url = query.Replace(locVariable, location);

    // get the currrent conditions from YQL
    WebClient web = new WebClient();
    web.DownloadStringCompleted += new DownloadStringCompletedEventHandler(web_DownloadStringCompleted);
    web.DownloadStringAsync(new Uri(url));

}

public void PopulateCurrentConditions(string location)

{

const string locVariable = "$$LOCATION$$";

string query = "http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%22" + locVariable + "%22%20%20&diagnostics=true";

string url = query.Replace(locVariable, location);

// get the currrent conditions from YQL

WebClient web = new WebClient();

web.DownloadStringCompleted += new DownloadStringCompletedEventHandler(web_DownloadStringCompleted);

web.DownloadStringAsync(new Uri(url));

}

Since the program did not specify a output format, JQL returns XML by default. The output format can be specified as JSON by adding parameter to the original URL.

http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%2263126%22%20%20&format=json&diagnostics=true

Parsing the XML is made simpler by the XDocument class provided in the System.Xml.Linq namespace.

XDocument doc = XDocument.Parse(e.Result);
XElement result = doc.Root.Element("results").Element("channel").Element("item");

if (result == null) return;

string title = result.Element("title").Value;
string currentConditions = result.Element("description").Value;

XDocument doc = XDocument.Parse(e.Result);

XElement result = doc.Root.Element("results").Element("channel").Element("item");

if (result == null) return;

string title = result.Element("title").Value;

string currentConditions = result.Element("description").Value;

Displaying the results

WebClient returns data on the same thread, so it can directly access the UI elements. On the other hand, HTTPWebRequest returns data on a different thread and the result has to be marshaled back to the UI thread. Since data is returned on a different thread, HTTPWebRequest has the advantage of not locking up the UI thread when it is processing.

// Update the UI elements
// Since the WebClient returns on the same thread, it can access the UI elements directly
titleTextBlock.Text = title;
browserControl.NavigateToString(currentConditions);

// Update the UI elements

// Since the WebClient returns on the same thread, it can access the UI elements directly

titleTextBlock.Text = title;

browserControl.NavigateToString(currentConditions);

The complete MainPage.xaml.cs code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml;
using System.Xml.Linq;

namespace WeatherWatch
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void goButton_Click(object sender, RoutedEventArgs e)
        {
            if (locationTextBox.Text.Length == 0) return;

            browserControl.Visibility = System.Windows.Visibility.Visible;
            browserControl.NavigateToString("Loading...");

            PopulateCurrentConditions(locationTextBox.Text);
        }

        public void PopulateCurrentConditions(string location)
        {
            const string locVariable = "$$LOCATION$$";
            string query = "http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%22" + locVariable + "%22%20%20&diagnostics=true";

            string url = query.Replace(locVariable, location);

            // get the currrent conditions from YQL
            WebClient web = new WebClient();
            web.DownloadStringCompleted += new DownloadStringCompletedEventHandler(web_DownloadStringCompleted);
            web.DownloadStringAsync(new Uri(url));

        }

        void web_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            XDocument doc = XDocument.Parse(e.Result);
            XElement result = doc.Root.Element("results").Element("channel").Element("item");

            if (result == null) return;

            string title = result.Element("title").Value;
            string currentConditions = result.Element("description").Value;

            // Update the UI elements
            // Since the WebClient returns on the same thread, it can access the UI elements directly
            titleTextBlock.Text = title;
            browserControl.NavigateToString(currentConditions);

        }

    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.Xml;

using System.Xml.Linq;

namespace WeatherWatch

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

}

private void goButton_Click(object sender, RoutedEventArgs e)

{

if (locationTextBox.Text.Length == 0) return;

browserControl.Visibility = System.Windows.Visibility.Visible;

browserControl.NavigateToString("Loading...");

PopulateCurrentConditions(locationTextBox.Text);

}

public void PopulateCurrentConditions(string location)

{

const string locVariable = "$$LOCATION$$";

string query = "http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%22" + locVariable + "%22%20%20&diagnostics=true";

string url = query.Replace(locVariable, location);

// get the currrent conditions from YQL

WebClient web = new WebClient();

web.DownloadStringCompleted += new DownloadStringCompletedEventHandler(web_DownloadStringCompleted);

web.DownloadStringAsync(new Uri(url));

}

void web_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

{

XDocument doc = XDocument.Parse(e.Result);

XElement result = doc.Root.Element("results").Element("channel").Element("item");

if (result == null) return;

string title = result.Element("title").Value;

string currentConditions = result.Element("description").Value;

// Update the UI elements

// Since the WebClient returns on the same thread, it can access the UI elements directly

titleTextBlock.Text = title;

browserControl.NavigateToString(currentConditions);

}

YQL

YQL or Yahoo Query Language allows developers to query, join and filter data from multiple data sources on the web who have made their data available through the YQL interface. Since YQL is an expressive SQL like language, developers familiar with the SQL interface should feel comfortable with the interface.

YQL provides the developers a consistent way to access online services which are otherwise dispersed across a range of formats. It hides the implementation of the various data sources on the web and make it easier to query the data.

YQL is both a service and a language. The service is through which external web services can make their data available for developers to consume through the yahoo query ‘language’.

Understanding the language of YQL

If you are familiar with the SQL, you will feel at home with YQL. This language allows developers to use SQL syntax to extract data from the service. It can return the results in either XML format or in JSON format.

Yahoo has provided a YQL Console for developers to test their queries.

For example, if the application wants to search from YouTube and display a list of results, the developer can use a simple query like below and get the information from the web service.

 SELECT * FROM youtube.search WHERE query="soccer ronaldo"

1	SELECT * FROM youtube.search WHERE query="soccer ronaldo"

The output of the above query in XML format is below. Adding ‘limit 1’ will limit the output to the top 1 result.

<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
    yahoo:count="1" yahoo:created="2012-04-26T03:29:10Z" yahoo:lang="en-US">
    <diagnostics>
        <publiclyCallable>true</publiclyCallable>
        <url execution-start-time="21" execution-stop-time="25"
            execution-time="4" proxy="DEFAULT"><![CDATA[http://www.datatables.org/youtube/youtube.search.xml]]></url>
        <url execution-start-time="179" execution-stop-time="238"
            execution-time="59" proxy="DEFAULT"><![CDATA[http://gdata.youtube.com/feeds/api/videos?q=soccer%20ronaldo]]></url>
        <javascript execution-time="376" instructions-used="972223" table-name="youtube.search"/>
        <user-time>406</user-time>
        <service-time>63</service-time>
        <build-version>26856</build-version>
    </diagnostics> 
    <results>
        <video>
            <id>tlYDcv6l95c</id>
            <url>http://www.youtube.com/watch?v=tlYDcv6l95c&amp;feature=youtube_gdata_player</url>
            <title>Ronaldo Penalty Miss || Real Madrid vs Bayern Munich (1-3) CL Semi Final ||26.04.12||</title>
            <content>Real Madrid vs Bayern Munich Penalties 1-3 Bayern Wins</content>
            <author>elly produxion</author>
            <duration>18</duration>
            <comment_count>4</comment_count>
            <categories>
                <category>Sports</category>
            </categories>
            <tags>
                <tag>penalty</tag>
                <tag>miss</tag>
                <tag>ronaldo</tag>
                <tag>real</tag>
                <tag>madrid</tag>
                <tag>vs</tag>
                <tag>bayern</tag>
                <tag>munich</tag>
                <tag>munchen</tag>
                <tag>all</tag>
                <tag>goals</tag>
                <tag>highlights</tag>
                <tag>Goal</tag>
                <tag>football</tag>
                <tag>Soccer</tag>
            </tags>
            <thumbnails>
                <thumbnail height="90" time="00:00:09" width="120">http://i.ytimg.com/vi/tlYDcv6l95c/default.jpg</thumbnail>
                <thumbnail height="180" time="" width="320">http://i.ytimg.com/vi/tlYDcv6l95c/mqdefault.jpg</thumbnail>
                <thumbnail height="360" time="" width="480">http://i.ytimg.com/vi/tlYDcv6l95c/hqdefault.jpg</thumbnail>
                <thumbnail height="90" time="00:00:04.500" width="120">http://i.ytimg.com/vi/tlYDcv6l95c/1.jpg</thumbnail>
                <thumbnail height="90" time="00:00:09" width="120">http://i.ytimg.com/vi/tlYDcv6l95c/2.jpg</thumbnail>
                <thumbnail height="90" time="00:00:13.500" width="120">http://i.ytimg.com/vi/tlYDcv6l95c/3.jpg</thumbnail>
            </thumbnails>
            <files>
                <file type="application/x-shockwave-flash">http://www.youtube.com/v/tlYDcv6l95c?version=3&amp;f=videos&amp;app=youtube_gdata</file>
                <file type="video/3gpp">rtsp://v3.cache6.c.youtube.com/CiILENy73wIaGQmX96X-cgNWthMYDSANFEgGUgZ2aWRlb3MM/0/0/0/video.3gp</file>
                <file type="video/3gpp">rtsp://v3.cache4.c.youtube.com/CiILENy73wIaGQmX96X-cgNWthMYESARFEgGUgZ2aWRlb3MM/0/0/0/video.3gp</file>
            </files>
        </video>
    </results>
</query>

<?xml version="1.0" encoding="UTF-8"?>

<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"

yahoo:count="1" yahoo:created="2012-04-26T03:29:10Z" yahoo:lang="en-US">

<url execution-start-time="21" execution-stop-time="25"

execution-time="4" proxy="DEFAULT"><![CDATA[http://www.datatables.org/youtube/youtube.search.xml]]></url>

<url execution-start-time="179" execution-stop-time="238"

execution-time="59" proxy="DEFAULT"><![CDATA[http://gdata.youtube.com/feeds/api/videos?q=soccer%20ronaldo]]></url>

<user-time>406</user-time>

<service-time>63</service-time>

<build-version>26856</build-version>

</diagnostics>

<video>

<id>tlYDcv6l95c</id>

<url>http://www.youtube.com/watch?v=tlYDcv6l95c&feature=youtube_gdata_player</url>

<title>Ronaldo Penalty Miss || Real Madrid vs Bayern Munich (1-3) CL Semi Final ||26.04.12||</title>

<content>Real Madrid vs Bayern Munich Penalties 1-3 Bayern Wins</content>

<author>elly produxion</author>

<comment_count>4</comment_count>

<category>Sports</category>

</categories>

<tags>

<tag>penalty</tag>

<tag>ronaldo</tag>

<tag>madrid</tag>

<tag>bayern</tag>

<tag>munich</tag>

<tag>munchen</tag>

<tag>goals</tag>

<tag>highlights</tag>

<tag>football</tag>

<tag>Soccer</tag>

</tags>

<thumbnail height="90" time="00:00:09" width="120">http://i.ytimg.com/vi/tlYDcv6l95c/default.jpg</thumbnail>

<thumbnail height="180" time="" width="320">http://i.ytimg.com/vi/tlYDcv6l95c/mqdefault.jpg</thumbnail>

<thumbnail height="360" time="" width="480">http://i.ytimg.com/vi/tlYDcv6l95c/hqdefault.jpg</thumbnail>

<thumbnail height="90" time="00:00:04.500" width="120">http://i.ytimg.com/vi/tlYDcv6l95c/1.jpg</thumbnail>

<thumbnail height="90" time="00:00:09" width="120">http://i.ytimg.com/vi/tlYDcv6l95c/2.jpg</thumbnail>

<thumbnail height="90" time="00:00:13.500" width="120">http://i.ytimg.com/vi/tlYDcv6l95c/3.jpg</thumbnail>

</thumbnails>

<files>

<file type="application/x-shockwave-flash">http://www.youtube.com/v/tlYDcv6l95c?version=3&f=videos&app=youtube_gdata</file>

<file type="video/3gpp">rtsp://v3.cache6.c.youtube.com/CiILENy73wIaGQmX96X-cgNWthMYDSANFEgGUgZ2aWRlb3MM/0/0/0/video.3gp</file>

<file type="video/3gpp">rtsp://v3.cache4.c.youtube.com/CiILENy73wIaGQmX96X-cgNWthMYESARFEgGUgZ2aWRlb3MM/0/0/0/video.3gp</file>

</files>

</video>

</results>

</query>

Similar to SQL, YQL also let the developer query for individual columns. The developer can limit what is returned from the service by specifying the data that should be returned as in the below example.

 SELECT id, url, title, content FROM youtube.search WHERE query="soccer ronaldo"  limit 1

1	SELECT id, url, title, content FROM youtube.search WHERE query="soccer ronaldo" limit 1

Which returns just those 4 columns that are requested.

<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
    yahoo:count="1" yahoo:created="2012-04-26T03:36:52Z" yahoo:lang="en-US">
    <diagnostics>
        <publiclyCallable>true</publiclyCallable>
        <url execution-start-time="22" execution-stop-time="26"
            execution-time="4" proxy="DEFAULT"><![CDATA[http://www.datatables.org/youtube/youtube.search.xml]]></url>
        <url execution-start-time="139" execution-stop-time="188"
            execution-time="49" proxy="DEFAULT"><![CDATA[http://gdata.youtube.com/feeds/api/videos?q=soccer%20ronaldo]]></url>
        <javascript execution-time="341" instructions-used="972223" table-name="youtube.search"/>
        <user-time>371</user-time>
        <service-time>53</service-time>
        <build-version>26856</build-version>
    </diagnostics> 
    <results>
        <video>
            <id>tlYDcv6l95c</id>
            <url>http://www.youtube.com/watch?v=tlYDcv6l95c&amp;feature=youtube_gdata_player</url>
            <title>Ronaldo Penalty Miss || Real Madrid vs Bayern Munich (1-3) CL Semi Final ||26.04.12||</title>
            <content>Real Madrid vs Bayern Munich Penalties 1-3 Bayern Wins</content>
        </video>
    </results>
</query>

<?xml version="1.0" encoding="UTF-8"?>

<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"

yahoo:count="1" yahoo:created="2012-04-26T03:36:52Z" yahoo:lang="en-US">

<url execution-start-time="22" execution-stop-time="26"

execution-time="4" proxy="DEFAULT"><![CDATA[http://www.datatables.org/youtube/youtube.search.xml]]></url>

<url execution-start-time="139" execution-stop-time="188"

execution-time="49" proxy="DEFAULT"><![CDATA[http://gdata.youtube.com/feeds/api/videos?q=soccer%20ronaldo]]></url>

<user-time>371</user-time>

<service-time>53</service-time>

<build-version>26856</build-version>

</diagnostics>

<video>

<id>tlYDcv6l95c</id>

<url>http://www.youtube.com/watch?v=tlYDcv6l95c&feature=youtube_gdata_player</url>

<title>Ronaldo Penalty Miss || Real Madrid vs Bayern Munich (1-3) CL Semi Final ||26.04.12||</title>

<content>Real Madrid vs Bayern Munich Penalties 1-3 Bayern Wins</content>

</video>

</results>

</query>

Using the YQL Service

Let’s look at the usage of these services. Let us say, for example, an application wants to list out the current popular music charts.

Head over to the YQL Console and put your query as below:

SELECT * FROM music.artist.popular limit 5

1	SELECT * FROM music.artist.popular limit 5

Click on TEST button. The console will show the output in the format that you selected, either XML or in JSON format.

Once you are satisfied with the results, head to the bottom area of the console to grab the complete URL.

The resulting query:

http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20music.artist.popular%20limit%205&diagnostics=true

The application can post this query to get the response and the response being in XML or JSON consistently across the web services makes this interface very luring to use.

Other Useful Links

Complete YQL Documentation
http://developer.yahoo.com/yql/docs/

YQL Screencast from the Yahoo! Developer Network
http://developer.yahoo.com/yos/screencasts/yql_screencast.html