Creating a Custom Web Browser

As per corporate requirements, I had to create a Kiosk that would allow visitors in the front lobby access to a specific careers and job application web site. Obviously, the computer had to be locked down and “frozen”, which was accomplished with Windows SteadyState (see my article), I also had to make sure that the users could always reach the careers and job application web site without any distractions. Lastly, I had to make a custom screensaver that would fade the screen 50% during a certain time period and 100% the remainder. This was all accomplished by creating a simple .NET Windows application with a web browser object, a few timers and a couple of forms.

And yes, the “screensaver” fade was included in the custom web browser as well. See my article on SteadyState and Screensavers for more information on why I decided to do it that way.

Although the custom web browser was written in Visual Studio .NET 2005 Professional, anyone with a Windows XP + computer could download the free Microsoft Visual Studio 2008 Express  products, such as VB.NET and create the .NET application described below.

New .NET Windows Application

Start out by creating a new .NET Windows Application in the language of your choice. For this example, I will use Visual Basic.

~

frmMain :: the Main Form

1. First we will modify the form, setting FormBorderStyle to None and setting WindowState to Maximized to fill the entire screen with no border.

2. Next lets drag a ToolStrip on the form, this will be used for navigation.

ToolStrip

3. While you are dragging the ToolStrip object, drag two (2) Timer objects – we will use these later on.

4. Modify Timer1 to tick at 1000 millisecond intervals and Timer2 to tick at 180000 (3 minutes) intervals. Timer1 should be enabled and Timer2 disabled.

5. Now lets drag a WebBrowser component on to the form, this will be used for … well web browsing?

6. For minimal control, add just three buttons to the ToolStrip for controlling the WebBrowser: (1) Back; (2) Refresh; and (3) Back to devtrends.com. To make the buttons better looking than just text or the standard image, I’ve created custom bitmaps.

Modify the buttons, DisplayStyle to ImageAndText and Text to the text of the button.

buttons

On to the code…

1. Lets start by modifying the button actions, so double click on the Back button. Use the following code:

'tell the web browser to go back.
If WebBrowser1.CanGoBack = True Then
  WebBrowser1.GoBack()
End If

2. Refresh button:

'tell the web browser to refresh the page
WebBrowser1.Refresh()

3. back to devtrends.com button:

'tell the web browser to go to devtrends.com
WebBrowser1.Navigate("http://www.devtrends.com/")

4. Now lets modify the Load statement to contain the same code as the back to devtrends.com button. This way our web page loads first everytime.

5. Lets make sure the user cannot close the form/application by adding the following code to the FormClosing event for the form:

'prevent user from closing the application
If e.CloseReason = CloseReason.UserClosing Then
  e.Cancel = True
End If

6. Back at the top of the code, add the following variable statements:

Public mousex As Integer
Public mousey As Integer

7. In the Form Load statement, add the following statements:

mousex = MousePosition.X
mousey = MousePosition.Y

8. In Timer1 tick (double click on the Timer1 object in design view), add the following statements:

If mousex <> MousePosition.X Or mousey <> MousePosition.Y Then
  Timer2.Enabled = False
Else
  'the mouse has not moved... start Timer2
  Timer2.Enabled = True
End If

'set current mouse position.
mousex = MousePosition.X
mousey = MousePosition.Y

9. In Timer2 tick, add the following statements:

Dim fadeform As New frmFader
fadeform.Show()

~

subMain :: “sub main” Module

This may be an old school method, however, we’ll create a module that contains a Sub main. Sub main will be the starting point for your application, which we will modify as the last step in this section.

Right click on your project and choose Add > Module, and name the module subMain.

1. Add the following code to your newly created module:

'instantiate public form object of frmMain, which we will use to reference later on from frmFader
 Public mainfrm As New frmMain

 Sub Main()
   'display the main form.
   mainfrm.Show()

   'keep the application running...
   Application.Run()
 End Sub

2. Modify the Visual Studio Project Properties, uncheck “Use Application Framework” and choose Startup object, “Sub Main”.

prop

~

frmFader :: “Screensaver” Fader Form

Lets create the next form, frmFader. Right click on your project and choose Add > Windows Form, and name the form frmFader. Immediate make the following design modifications to your new form:

1. Change WindowState to Maximized.

2. TopMost to True.

3. ShowInTaskbar to False.

4. FormBorderStyle to None.

5. BackColor to Black.

Next we’ll modify the code behind the frmFader form that will make the form 50% transparent or 0% transparent, depending on the time of day. Remember, I needed an application that would black the screen out during a certain time window.

1. At the top of the code, add the following statements, which will be used to watch if the mouse is moved:

Public mousex As Integer
Public mousey As Integer

2. In the Form Load sub, add the following code:

'stop Timer1 and Timer2 on frmMain
mainfrm.Timer1.Enabled = False
mainfrm.Timer2.Enabled = False

'set current mouse positions
mousex = MousePosition.X
mousey = MousePosition.Y

'hide the mouse cursor
Cursor.Hide()

'get the current hour
Dim curHour As Integer
curHour = Hour(Now())

'if the time is between 8am and 5pm then use 50% otherwise 100%
If curHour >= 8 And curHour <= 17 Then
  Me.Opacity = 0.5
Else
  Me.Opacity = 1
End If

The comment lines explain most of what the code is doing. However, in the beginning of the code, I have it stop the Timers on the calling form (frmMain). This is required otherwise you would get multiple “screensavers” appear every 3 minutes.

3. In the Form Closing sub, we must add the following code to ensure the screensaver will reappear (we did stop the timers and hid the mouse cursor, remember?):

mainfrm.Timer1.Enabled = True
Cursor.Show()

4. Finally, lets watch for mouse movement on the form as we want to close the form when the mouse is moved. In the Form Mousemove sub, add the following code:

If mousex <> MousePosition.X Or mousey <> MousePosition.Y Then
  'the mouse moved... lets close this overlayed form
  Me.Close()
End If

That’s it…I’m out. If you want to cheat, just download the source code below. And as always, use this stuff at your own risk.

Download the kiosk source code

About aaron

IT is not just a job but also a passion. Everything I have accomplished, both personally and professionally, has been generally entertaining, bordering on fun. Some of my projects, such as working with SharePoint Services workflow actions in Visual Studio or building a custom iSCSI SAN using the OpenSolaris, ZFS and COMSTAR, has been quite rewarding. You may think nerd...I think developing a new trend!