Build your own Widget

[Bronx]

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!

[rudedawg]

Thanks for the tutorial.  I built this, but I wanted to add it to a view (I have 2x monitors that display health charts outside our server room, (temp, bandwidth, etc.) and I wanted to add "financial" health to the mix).  How does one do that?  I've done the hard part, thanks to you, but I guess I need some additional hand-holding.

[Bronx]

If you want to add your health charts to this view, find out the IP addresses of your other views and add them to this tool, just like the Ticker was added. Let me know if I understand your problem correctly. HTH.

It may be more complex if you're not just simply pointing a browser to a URL or IP address. Also, check out the other tutorials above for...assistance.

[rudedawg]

I read your VB 101 parts 1 -4 about how to create the bandwidth calc...but what I really wanted to add the stock ticker to the View for the server room...did I miss where that is explained or is there no way to get there from here?

[rudedawg]

Is it "Custom HTML" under view?

[Bronx]

I think I see what you're doing. It looks like you're using NPM. I'm not familiar with NPM; however, I think you're right - just put the URL to the ticker you want in a CUSTOM HTML resource. Might wanna post this in the NPM forum to be sure though.

[jkump]

Bookmarking this one for later review.