Pages

Wednesday, December 15, 2010

Arduino Tivo Remote Extender

About a year ago I needed the ability to control my Tivo S3 from another room. Originally I purchased some cheap IR Extender from Radio Shack and tried it. After toying around with it I knew that a off-shelf product was going to be useless.

So I developed my own solution:

After doing some reading I knew the Tivo S3/HD (newer ones probably as well) have a telnet server running on the Tivo that allows 3rd party apps to control the Tivo.

To test this, all you need to do is open a Telnet client, connect to your Tivo's IP using port 31339 and then you could start sending out commands to the Tivo like the following:

IRCODE TIVO
IRCODE LIVETV
IRCODE UP

With this in mind, I knew there was the ability to control the Tivo using an ethernet device.

Previously I had played around with Arduino . This is a microcontroller which you can program to control your I/O's on the device. This device also supports an Ethernet Sheild which would allow me to communicate with the Tivo's Telnet server. Next I needed a IR receiver for this to work, after Googling I found this receiver on SparkFun.

Here is the hardware:


Now comes the fun part: the software:

#include

#include
#include
#include
#include

#include

byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = {
192, 168, 0, 213 }; // Device IP
byte server[] = {
192, 168, 0, 134 }; // Tivo

Client client(server, 31339);

int RECV_PIN = 3;
IRrecv irrecv(RECV_PIN);
decode_results results;
decode_results resultslast;
unsigned long firetime;

void setup()
{
irrecv.enableIRIn(); // Start the receiver
Ethernet.begin(mac, ip);
Serial.begin(9600);
pinMode(6, OUTPUT);
pinMode(5, OUTPUT);

}

void sndcmd(char data[]) {
resultslast = results;

if (millis() - firetime >= 150) {

if (client.connect()) {
client.println(data);
}
else
{
client.stop();
delay(50);
if (client.connect()) {
client.println(data);
}
}

firetime = millis();

}
}

void loop() {
analogWrite(5, 15);

if (irrecv.decode(&results)) {

Serial.println(results.value, HEX);
// Serial.println("-----");

if (results.value == 0xFFFFFFFF) {
results = resultslast;
}

switch (results.value) {

case 0xA10CD00F: //Tivo Button (cheapo remote)
sndcmd("IRCODE TIVO");
break;

case 0xA10C500F: //Tivo Button (nice remote)
sndcmd("IRCODE TIVO");
break;
case 0xA10C8807: //LiveTV Button
sndcmd("IRCODE LIVETV");
break;

case 0xA10CC807: //Info Button
sndcmd("IRCODE DISPLAY");
break;

case 0xA10C6C03: //Guide Button
sndcmd("IRCODE GUIDE");
break;

case 0xA10C2807: //Select Up Button
sndcmd("IRCODE UP");
break;

case 0xA10C6807: //Select Down Button
sndcmd("IRCODE DOWN");
break;

case 0xA10CE807: //Select Left Button
sndcmd("IRCODE LEFT");
break;

case 0xA10CA807: //Select Right Button
sndcmd("IRCODE RIGHT");
break;

case 0xA10C9807: //Select Button
sndcmd("IRCODE SELECT");
break;

case 0xA10C1807: //Thumbs Down
sndcmd("IRCODE THUMBSDOWN");
break;

case 0xA10C5807: //Thumbs Up
sndcmd("IRCODE THUMBSUP");
break;

case 0xA10C7807: //Channel Up
sndcmd("IRCODE CHANNELUP");
break;

case 0xA10CF807: //Channel Down
sndcmd("IRCODE CHANNELDOWN");
break;

case 0xA10C040B: //Record
sndcmd("IRCODE RECORD");
break;

case 0xA10C840B: //Play
sndcmd("IRCODE PLAY");
break;

case 0xA10CC40B: //Pause
sndcmd("IRCODE PAUSE");
break;

case 0xA10CA40B: //Slow
sndcmd("IRCODE SLOW");
break;

case 0xA10C440B: //Reverse
sndcmd("IRCODE REVERSE");
break;

case 0xA10C240B: //Forward
sndcmd("IRCODE FORWARD");
break;

case 0xA10CE40B: //Advance
sndcmd("IRCODE ADVANCE");
break;

case 0xA10C640B: //Replay
sndcmd("IRCODE REPLAY");
break;

case 0xA10C140B: //Num 1
sndcmd("IRCODE NUM1");
break;

case 0xA10C940B: //Num 2
sndcmd("IRCODE NUM2");
break;

case 0xA10C540B: //Num 3
sndcmd("IRCODE NUM3");
break;

case 0xA10CD40B: //Num 4
sndcmd("IRCODE NUM4");
break;

case 0xA10C340B: //Num 5
sndcmd("IRCODE NUM5");
break;

case 0xA10CB40B: //Num 6
sndcmd("IRCODE NUM6");
break;

case 0xA10C740B: //Num 7
sndcmd("IRCODE NUM7");
break;

case 0xA10CF40B: //Num 8
sndcmd("IRCODE NUM8");
break;

case 0xA10C0C03: //Num 9
sndcmd("IRCODE NUM9");
break;

case 0xA10C8C03: //Num 0
sndcmd("IRCODE NUM0");
break;

case 0xA10CCC03: //Enter
sndcmd("IRCODE ENTER");
break;

case 0xA10C4C03: //Clear
sndcmd("IRCODE CLEAR");
break;

default:
resultslast = results;
break;

}

irrecv.resume(); // Receive the next value
}

}

I used this IR library I found on the net from Ken Shirriff. Basically it has the ability to capture the keys pressed from the Tivo Remote and returns a integer (ex. 0xA10C4C03). Each button fires a different integer. With this I mapped out each command, then connect to the Tivo and pass the proper Telnet command.

Below you can find a YouTube video of the device in action:







Monday, December 13, 2010

New Web Site

Just got done moving the web site from GoDaddy over to Blogger. The performance of the new site should be significantly better.

I'll be adding more content soon.

Sunday, May 2, 2010

Wireless Ipod Touch Sync Prototype 2

This is a continuation of my previous blog post.

Throughout last week I've been working on creating an application that allows you to manage your iPod's content. In the video below you can see that I am syncing my iPod through the wireless using this .NET application from a Windows 7 machine.

This application is still in its very early stage. The user interface (UI) is only a rough draft and will probably change tons before I release this.

Sunday, April 25, 2010

Wireless Ipod Touch Sync Prototype

Recently I got a new car (2010 Audi S4) which has full iPod integration. So on the Radio you can basically see everything that you can see on the iPod (Tracks/Artist/Albums/Playlist/etc).

What I want is the possibility to leave the iPod Touch in the car forever, then if I want to put new music on it, I can sync it though my wireless network at home. The iPod doesnt support this "wireless sync" out of the box; so I attempted to make my own application that can do this.

This is the prototype. I have a 1st gen iPod touch 16gb running OS 2.2.1 which is jailbroken and running vsftpd and openssh. Using the FTP server, I can transfer songs to the iPod, then also read/write the iTunesDB file (contains all the tracklist/albums/etc). Then using OpenSSH I can connect to the iPod and tell it to reload the iTunesDB file (ReSpring the ipod) when needed.

In this video I only read the itunesdb, change one of the Titles, then I manually upload the itunesdb file using FileZilla, and then I manually trigger the "ReSpring". Then you can see the updated title on Audi's MMI (The Radio).

Again, this is only a proof of concept. The intention is to have a simple to use Windows program that does all the dirty work for you.

This will only work on iPod touches running OS 2.x and must be jailbroken. Yes it is possible to downgrade an iPod touch running 3.x to 2.x (at least for the 1st gen iPod). I've done it :). I do not plan on supporting album art/video upload/etc. This is only so I can leave my ipod in the car and sync music to it.

Source Code will be made public once the project is done.

Thursday, February 11, 2010

Real Example of Google Visualization/Charts with SharePoint



Here is a real example of using SharePoint (WSS or MOSS) with Google Visualizations/Charts. The data your looking at is pool temperature that I've been collecting from a small PLC. The gauges show actual temp (real-time; updates every 2 secs), while the Annotated Timeline shows the history of the time.

The data for the Annotated Timeline is coming from a local MS SQL Express Server which collects the data every 5 minutes. The gauges are real-time connecting directly to the Beckhoff TwinCAT (PLC software) to grab the temp.

Wednesday, January 20, 2010

Google Visualization - Wire Protocol Data Provider System (DTS - Source and Installation Instructions)

In my previous post I talked about how to use Google Visualization API with SharePoint to create a new dashboard/reporting platform. Then I talked about a system to pulls any data and makes it available to the Google Visualization API using the Wire Protocol in this post.

This system I call "DTS" for Data Transformation System. As I wrote in the previous post, this system is nothing more than an ASP.NET page that loads DLL's (based on the DSNAME parameter in the URL). Then the DLL is responsible for providing a data-table with the content the user requested. The ASP.NET page will then convert the data-table into JSON which the Google Visualization API can use.

Currently I only have 1 plugin (DLL) provided which allows you to connect to a Microsoft SQL Server.

The zip file provided below contains instructions on how to install this system on Windows 2008 using SQL Express 2008. You will also find ALL the source included. Remember this is only a proof of concept and there is probably a great deal of work that can be done to make this system better.


Next week I will explain how to setup and configure new DLL's to allow you to connect to other data sources.

Comments/Thoughts are welcome!

Carsten

Tuesday, January 12, 2010

Connecting Google Visualization API to any Data Source

In my previous post I explained how to use the Google Visualization API with SharePoint to create a reporting dashboard/portal.

As a .NET Developer I tend to use Microsoft SQL Server a lot to store and manage my data. After reading through the Google Visualization documentation I realized there was no way to connect to a MS SQL Server out-of-the-box.

Then I discovered that I could implement my own data source using the "Wire Protocol v0.6". After reading the document it turns out that the Google Visualizations API can connect to a web server; pass commands, and then take the results and load them into the Visualization API.

For example, I can send the following request to a web server:
http://servername/example.aspx?parametername=value&parametername2=value2

Then based on the input values (parametername/parametername2), the server can make a decision on what data to display and then output the data as the API requires.

Using ASP.NET I wrote a proof-of-concept program for testing purposes. This proof-of-concept program simply connected to a SQL server, loaded the data, converted it to JSON, and returned it to the requester (Visualization API). There we had it, the Google API rendered the charts with no problem.

Now I wanted to ensure that I can load data from any data source. For example, most of my data is stored in a Microsoft SQL Server, but I also have some data that I need from other systems such as PLC's, ERP Systems, SharePoint Lists, Text Files, Web Services, etc.

To accomplish this I had to figure out a way to specify which data source the user was expecting data from, then allow the user to pass parameters to this system so it can get the proper dataset. To do this in the URL request, I required the user to pass a parameter called DSNAME (data source name). This DSNAME would tell the system which DLL to load and execute to get the proper data back.

For this system to be able to understand the DLL's I created a very simple Interface. This interface contains 1 method called "Execute" that will accept a Dictionary Object as a parameter and returned 1 DataTable. The Dictionary object will contain all the parameters that were passed by the requestor's URL parameters (see above's http URL). Once the DLL executes, it would have to return a DataTable. From this point the system would then convert the DataTable to JSON then return that back to the requestor of the URL.

Take the following URL as an example:


The DSNAME parameter tells the system that it wants to load the DLL associated with "MSSQL" (this is configured in a Database - will go into more details later). Then the QUERY parameter is sent which contains the actual query statement to be executed. From this point the system knows which DLL to execute and the DLL knows what data to read from where (based on the parameters we passed).

I know you might wonder where the connection string is to the DB. Since you don't want to pass sensitive data in the URL, I made this system be capable of loading default parameters (configured in a db) based on the DSNAME. For example "MSSQL" knows to automatically load a default Connection String.

Now to test all this follow the steps mentioned in my previous post; but add the following HTML code to the Content Form Web Part (sorry cant paste HTML code in here):


This sample HTML code basically loads Google's Annotated Time Line (my favorite), then connects to my data source (that we specified above), loads the MSSQL DLL, passes the Query parameter, then the system returns the JSON code which the Google API's can use to render the charts.

Here is a quick showing what I mean.

I intend to release the source code to all the code behind this as I am sure there are many great enhancements that can be made to it.

More to follow...

Monday, January 11, 2010

SharePoint + Google Visualization API = Presentation Dashboard



I've been looking at using Google Visualization API + SharePoint (WSS\MOSS) to create a presentation dashboard that can be an alternative to MS Reporting Services.

After digging around I found it relativity easy to embed Google Charts/etc into SharePoint using the "Form Web Part". Simply add one to the site, then modify it using the Source Editor and copy and paste the HTML code for the Google Visualization API.

You might be wondering how to generate the HTML code so that we can use the Google Visualization API. Google simplified this by creating the Google Code Playground (http://code.google.com/apis/ajax/playground/) Here you can see demos from all the charts they provide. Be sure to enable the HTML view, then copy and paste the HTML code into the Form Web Part and you'll see the Google Visualization API load.

Here is a step by step instructions on how I did it:

  1. Hit Site Actions | Create
  2. Then on the left side, you want to create a "Web Part Page"
  3. Give the Web Part Page a name (I call it "Test 1"). Now select a Layout, for this example I use the "Full Page, Vertical" layout, but anything will work. Assign to a Document Library and hit Create.
  4. Now we should automatically see the Test 1 page open in Edit Mode. Click the "Add a Web Part". Now a new window should pop up; select the "Form Web Part".
  5. Once added, hit the "Edit" button on the web part we just added and hit "Modify Shared Web Part", then hit "Source Editor".
  6. Now a new Source Editor Window should appear. Copy and Paste the HTML code that you generated at the Google Playground and paste it in. Then hit save.
  7. Now you should be back on the new site you created and the Google chart that you used should have loaded.
Here is a YouTube video I posted explaining the steps above:



For those that dont know. Windows SharePoint Services (WSS) can be downloaded and used for Free. WSS runs a Micrsoft SQL Server for its data storage. WSS works fine on MS SQL 2008 Express (also free). This is what I am running for the demonstration video.

Next post I will explain a system I wrote that will expose data from any source (MS SQL, Txt File, SharePoint List, etc) and convert it into a format that the Google Visualization API can use.

Comments are welcome!

Carsten

Wednesday, December 15, 2010

Arduino Tivo Remote Extender

About a year ago I needed the ability to control my Tivo S3 from another room. Originally I purchased some cheap IR Extender from Radio Shack and tried it. After toying around with it I knew that a off-shelf product was going to be useless.

So I developed my own solution:

After doing some reading I knew the Tivo S3/HD (newer ones probably as well) have a telnet server running on the Tivo that allows 3rd party apps to control the Tivo.

To test this, all you need to do is open a Telnet client, connect to your Tivo's IP using port 31339 and then you could start sending out commands to the Tivo like the following:

IRCODE TIVO
IRCODE LIVETV
IRCODE UP

With this in mind, I knew there was the ability to control the Tivo using an ethernet device.

Previously I had played around with Arduino . This is a microcontroller which you can program to control your I/O's on the device. This device also supports an Ethernet Sheild which would allow me to communicate with the Tivo's Telnet server. Next I needed a IR receiver for this to work, after Googling I found this receiver on SparkFun.

Here is the hardware:


Now comes the fun part: the software:

#include

#include
#include
#include
#include

#include

byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = {
192, 168, 0, 213 }; // Device IP
byte server[] = {
192, 168, 0, 134 }; // Tivo

Client client(server, 31339);

int RECV_PIN = 3;
IRrecv irrecv(RECV_PIN);
decode_results results;
decode_results resultslast;
unsigned long firetime;

void setup()
{
irrecv.enableIRIn(); // Start the receiver
Ethernet.begin(mac, ip);
Serial.begin(9600);
pinMode(6, OUTPUT);
pinMode(5, OUTPUT);

}

void sndcmd(char data[]) {
resultslast = results;

if (millis() - firetime >= 150) {

if (client.connect()) {
client.println(data);
}
else
{
client.stop();
delay(50);
if (client.connect()) {
client.println(data);
}
}

firetime = millis();

}
}

void loop() {
analogWrite(5, 15);

if (irrecv.decode(&results)) {

Serial.println(results.value, HEX);
// Serial.println("-----");

if (results.value == 0xFFFFFFFF) {
results = resultslast;
}

switch (results.value) {

case 0xA10CD00F: //Tivo Button (cheapo remote)
sndcmd("IRCODE TIVO");
break;

case 0xA10C500F: //Tivo Button (nice remote)
sndcmd("IRCODE TIVO");
break;
case 0xA10C8807: //LiveTV Button
sndcmd("IRCODE LIVETV");
break;

case 0xA10CC807: //Info Button
sndcmd("IRCODE DISPLAY");
break;

case 0xA10C6C03: //Guide Button
sndcmd("IRCODE GUIDE");
break;

case 0xA10C2807: //Select Up Button
sndcmd("IRCODE UP");
break;

case 0xA10C6807: //Select Down Button
sndcmd("IRCODE DOWN");
break;

case 0xA10CE807: //Select Left Button
sndcmd("IRCODE LEFT");
break;

case 0xA10CA807: //Select Right Button
sndcmd("IRCODE RIGHT");
break;

case 0xA10C9807: //Select Button
sndcmd("IRCODE SELECT");
break;

case 0xA10C1807: //Thumbs Down
sndcmd("IRCODE THUMBSDOWN");
break;

case 0xA10C5807: //Thumbs Up
sndcmd("IRCODE THUMBSUP");
break;

case 0xA10C7807: //Channel Up
sndcmd("IRCODE CHANNELUP");
break;

case 0xA10CF807: //Channel Down
sndcmd("IRCODE CHANNELDOWN");
break;

case 0xA10C040B: //Record
sndcmd("IRCODE RECORD");
break;

case 0xA10C840B: //Play
sndcmd("IRCODE PLAY");
break;

case 0xA10CC40B: //Pause
sndcmd("IRCODE PAUSE");
break;

case 0xA10CA40B: //Slow
sndcmd("IRCODE SLOW");
break;

case 0xA10C440B: //Reverse
sndcmd("IRCODE REVERSE");
break;

case 0xA10C240B: //Forward
sndcmd("IRCODE FORWARD");
break;

case 0xA10CE40B: //Advance
sndcmd("IRCODE ADVANCE");
break;

case 0xA10C640B: //Replay
sndcmd("IRCODE REPLAY");
break;

case 0xA10C140B: //Num 1
sndcmd("IRCODE NUM1");
break;

case 0xA10C940B: //Num 2
sndcmd("IRCODE NUM2");
break;

case 0xA10C540B: //Num 3
sndcmd("IRCODE NUM3");
break;

case 0xA10CD40B: //Num 4
sndcmd("IRCODE NUM4");
break;

case 0xA10C340B: //Num 5
sndcmd("IRCODE NUM5");
break;

case 0xA10CB40B: //Num 6
sndcmd("IRCODE NUM6");
break;

case 0xA10C740B: //Num 7
sndcmd("IRCODE NUM7");
break;

case 0xA10CF40B: //Num 8
sndcmd("IRCODE NUM8");
break;

case 0xA10C0C03: //Num 9
sndcmd("IRCODE NUM9");
break;

case 0xA10C8C03: //Num 0
sndcmd("IRCODE NUM0");
break;

case 0xA10CCC03: //Enter
sndcmd("IRCODE ENTER");
break;

case 0xA10C4C03: //Clear
sndcmd("IRCODE CLEAR");
break;

default:
resultslast = results;
break;

}

irrecv.resume(); // Receive the next value
}

}

I used this IR library I found on the net from Ken Shirriff. Basically it has the ability to capture the keys pressed from the Tivo Remote and returns a integer (ex. 0xA10C4C03). Each button fires a different integer. With this I mapped out each command, then connect to the Tivo and pass the proper Telnet command.

Below you can find a YouTube video of the device in action:







Monday, December 13, 2010

New Web Site

Just got done moving the web site from GoDaddy over to Blogger. The performance of the new site should be significantly better.

I'll be adding more content soon.

Sunday, May 2, 2010

Wireless Ipod Touch Sync Prototype 2

This is a continuation of my previous blog post.

Throughout last week I've been working on creating an application that allows you to manage your iPod's content. In the video below you can see that I am syncing my iPod through the wireless using this .NET application from a Windows 7 machine.

This application is still in its very early stage. The user interface (UI) is only a rough draft and will probably change tons before I release this.

Sunday, April 25, 2010

Wireless Ipod Touch Sync Prototype

Recently I got a new car (2010 Audi S4) which has full iPod integration. So on the Radio you can basically see everything that you can see on the iPod (Tracks/Artist/Albums/Playlist/etc).

What I want is the possibility to leave the iPod Touch in the car forever, then if I want to put new music on it, I can sync it though my wireless network at home. The iPod doesnt support this "wireless sync" out of the box; so I attempted to make my own application that can do this.

This is the prototype. I have a 1st gen iPod touch 16gb running OS 2.2.1 which is jailbroken and running vsftpd and openssh. Using the FTP server, I can transfer songs to the iPod, then also read/write the iTunesDB file (contains all the tracklist/albums/etc). Then using OpenSSH I can connect to the iPod and tell it to reload the iTunesDB file (ReSpring the ipod) when needed.

In this video I only read the itunesdb, change one of the Titles, then I manually upload the itunesdb file using FileZilla, and then I manually trigger the "ReSpring". Then you can see the updated title on Audi's MMI (The Radio).

Again, this is only a proof of concept. The intention is to have a simple to use Windows program that does all the dirty work for you.

This will only work on iPod touches running OS 2.x and must be jailbroken. Yes it is possible to downgrade an iPod touch running 3.x to 2.x (at least for the 1st gen iPod). I've done it :). I do not plan on supporting album art/video upload/etc. This is only so I can leave my ipod in the car and sync music to it.

Source Code will be made public once the project is done.

Thursday, February 11, 2010

Real Example of Google Visualization/Charts with SharePoint



Here is a real example of using SharePoint (WSS or MOSS) with Google Visualizations/Charts. The data your looking at is pool temperature that I've been collecting from a small PLC. The gauges show actual temp (real-time; updates every 2 secs), while the Annotated Timeline shows the history of the time.

The data for the Annotated Timeline is coming from a local MS SQL Express Server which collects the data every 5 minutes. The gauges are real-time connecting directly to the Beckhoff TwinCAT (PLC software) to grab the temp.

Wednesday, January 20, 2010

Google Visualization - Wire Protocol Data Provider System (DTS - Source and Installation Instructions)

In my previous post I talked about how to use Google Visualization API with SharePoint to create a new dashboard/reporting platform. Then I talked about a system to pulls any data and makes it available to the Google Visualization API using the Wire Protocol in this post.

This system I call "DTS" for Data Transformation System. As I wrote in the previous post, this system is nothing more than an ASP.NET page that loads DLL's (based on the DSNAME parameter in the URL). Then the DLL is responsible for providing a data-table with the content the user requested. The ASP.NET page will then convert the data-table into JSON which the Google Visualization API can use.

Currently I only have 1 plugin (DLL) provided which allows you to connect to a Microsoft SQL Server.

The zip file provided below contains instructions on how to install this system on Windows 2008 using SQL Express 2008. You will also find ALL the source included. Remember this is only a proof of concept and there is probably a great deal of work that can be done to make this system better.


Next week I will explain how to setup and configure new DLL's to allow you to connect to other data sources.

Comments/Thoughts are welcome!

Carsten

Tuesday, January 12, 2010

Connecting Google Visualization API to any Data Source

In my previous post I explained how to use the Google Visualization API with SharePoint to create a reporting dashboard/portal.

As a .NET Developer I tend to use Microsoft SQL Server a lot to store and manage my data. After reading through the Google Visualization documentation I realized there was no way to connect to a MS SQL Server out-of-the-box.

Then I discovered that I could implement my own data source using the "Wire Protocol v0.6". After reading the document it turns out that the Google Visualizations API can connect to a web server; pass commands, and then take the results and load them into the Visualization API.

For example, I can send the following request to a web server:
http://servername/example.aspx?parametername=value&parametername2=value2

Then based on the input values (parametername/parametername2), the server can make a decision on what data to display and then output the data as the API requires.

Using ASP.NET I wrote a proof-of-concept program for testing purposes. This proof-of-concept program simply connected to a SQL server, loaded the data, converted it to JSON, and returned it to the requester (Visualization API). There we had it, the Google API rendered the charts with no problem.

Now I wanted to ensure that I can load data from any data source. For example, most of my data is stored in a Microsoft SQL Server, but I also have some data that I need from other systems such as PLC's, ERP Systems, SharePoint Lists, Text Files, Web Services, etc.

To accomplish this I had to figure out a way to specify which data source the user was expecting data from, then allow the user to pass parameters to this system so it can get the proper dataset. To do this in the URL request, I required the user to pass a parameter called DSNAME (data source name). This DSNAME would tell the system which DLL to load and execute to get the proper data back.

For this system to be able to understand the DLL's I created a very simple Interface. This interface contains 1 method called "Execute" that will accept a Dictionary Object as a parameter and returned 1 DataTable. The Dictionary object will contain all the parameters that were passed by the requestor's URL parameters (see above's http URL). Once the DLL executes, it would have to return a DataTable. From this point the system would then convert the DataTable to JSON then return that back to the requestor of the URL.

Take the following URL as an example:


The DSNAME parameter tells the system that it wants to load the DLL associated with "MSSQL" (this is configured in a Database - will go into more details later). Then the QUERY parameter is sent which contains the actual query statement to be executed. From this point the system knows which DLL to execute and the DLL knows what data to read from where (based on the parameters we passed).

I know you might wonder where the connection string is to the DB. Since you don't want to pass sensitive data in the URL, I made this system be capable of loading default parameters (configured in a db) based on the DSNAME. For example "MSSQL" knows to automatically load a default Connection String.

Now to test all this follow the steps mentioned in my previous post; but add the following HTML code to the Content Form Web Part (sorry cant paste HTML code in here):


This sample HTML code basically loads Google's Annotated Time Line (my favorite), then connects to my data source (that we specified above), loads the MSSQL DLL, passes the Query parameter, then the system returns the JSON code which the Google API's can use to render the charts.

Here is a quick showing what I mean.

I intend to release the source code to all the code behind this as I am sure there are many great enhancements that can be made to it.

More to follow...

Monday, January 11, 2010

SharePoint + Google Visualization API = Presentation Dashboard



I've been looking at using Google Visualization API + SharePoint (WSS\MOSS) to create a presentation dashboard that can be an alternative to MS Reporting Services.

After digging around I found it relativity easy to embed Google Charts/etc into SharePoint using the "Form Web Part". Simply add one to the site, then modify it using the Source Editor and copy and paste the HTML code for the Google Visualization API.

You might be wondering how to generate the HTML code so that we can use the Google Visualization API. Google simplified this by creating the Google Code Playground (http://code.google.com/apis/ajax/playground/) Here you can see demos from all the charts they provide. Be sure to enable the HTML view, then copy and paste the HTML code into the Form Web Part and you'll see the Google Visualization API load.

Here is a step by step instructions on how I did it:

  1. Hit Site Actions | Create
  2. Then on the left side, you want to create a "Web Part Page"
  3. Give the Web Part Page a name (I call it "Test 1"). Now select a Layout, for this example I use the "Full Page, Vertical" layout, but anything will work. Assign to a Document Library and hit Create.
  4. Now we should automatically see the Test 1 page open in Edit Mode. Click the "Add a Web Part". Now a new window should pop up; select the "Form Web Part".
  5. Once added, hit the "Edit" button on the web part we just added and hit "Modify Shared Web Part", then hit "Source Editor".
  6. Now a new Source Editor Window should appear. Copy and Paste the HTML code that you generated at the Google Playground and paste it in. Then hit save.
  7. Now you should be back on the new site you created and the Google chart that you used should have loaded.
Here is a YouTube video I posted explaining the steps above:



For those that dont know. Windows SharePoint Services (WSS) can be downloaded and used for Free. WSS runs a Micrsoft SQL Server for its data storage. WSS works fine on MS SQL 2008 Express (also free). This is what I am running for the demonstration video.

Next post I will explain a system I wrote that will expose data from any source (MS SQL, Txt File, SharePoint List, etc) and convert it into a format that the Google Visualization API can use.

Comments are welcome!

Carsten