Build your own Widget

For those of you who have read my posts, you'll know that I love to tinker and share my "tinkerings" with you. To date, we have the following toys:

• The Thwack Remote
• An Interactive Overview of SAM
• The QuadNoc Browser
• The Prime Number gagdet
• The Bandwidth Calculator

Today's lesson will be simple: "Build a Generic Widget" To do this, you will need to have VB.net installed. If you have not installed it already (shame on you) then follow lessons 1 and 2, found here. Once you have that set up, come back here and we will build a simple widget...in this case a real-time stock ticker.

This is simple to create because I cheated (cheating is allowed if it's for yourself). I could have (and have done so before) had the ticker read and parse RSS feeds to produce the same result, but why? My cheat is simple. The above ticker is comprised of two elements, a web browser, and a picture. That's it! Here's how I did it:

First, I added a web browser from the toolbox. Next, I re-sized it and offset it off of the form (essentially cropping everything except the stock price on that web page). I've highlighted the web browser going beyond the bounds of the form.

Below the web browser control is a Picture box control. At this point, I set the URL property of the web browser to "https://www.google.com/finance?client=ig&q=NYSE:SWI" which is SolarWinds real-time stock price. I then set the picture box control to a chart of SolarWinds' stock price. So the code looks like this (Note the code for both subs is the same. We're putting the same code in the Form_Load event so we don't have to wait ten seconds to retrieve the data as dictated by the timer):

Public Class Form1

Dim market$

    Private Sub Form1_Load(sender As Object, e As System.EventArgs) Handles Me.Load

        On Error Resume Next

        market$ = "http://chart.finance.yahoo.com/t?s=SWI&lang=en-US&region=US&width=300&height=180"

        dow.Image = New System.Drawing.Bitmap(New IO.MemoryStream(New System.Net.WebClient().DownloadData(market$)))

        dow.SizeMode = PictureBoxSizeMode.StretchImage

End Sub

Private Sub timDow_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles timDow.Tick

        On Error Resume Next

        market$ = "http://chart.finance.yahoo.com/t?s=SWI&lang=en-US&region=US&width=300&height=180"

        dow.Image = New System.Drawing.Bitmap(New IO.MemoryStream(New System.Net.WebClient().DownloadData(market$)))

        dow.SizeMode = PictureBoxSizeMode.StretchImage

    End Sub

End Class

Steps to create this:

1. Add a web browser to the Form
2. Set the SuppressScriptErrors property to True and the ShowScrollbars property to False.for the web browser.
3. Set the web browser URL property to "https://www.google.com/finance?client=ig&q=NYSE:SWI"
4. Add a picture box to the form positioned below the web browser and name it, "Dow"
5. Add a timer to the form and call it, "timdow"
6. Set the timer to be Enabled
7. Set the timer's interval property to 10000 (10 seconds)
8. Tighten the form to make it small
9. Set the form property, Topmost to True.
10. Set the Text property of the form to what you want the caption to read.
    
11. Paste the code above in your project and you're done! Just run and/or build it.

You will have to play around with the positioning and sizing to get everything just right. Now imagine what you can build if you change the web addresses to something else, or if you added more picture boxes. You can do anything!