Customizing a SiteKiosk Android Browser Design

Accompanying the release of SiteKiosk Android 2.0 this blog post will show you how you can customize a Browser Design. This way you can make your SiteKiosk Android stand out from the rest, e.g. by creating a browser skin in your corporate design.

The following steps can be performed directly on a tablet, but I would suggest doing it on a PC to ease the editing process. First you need to download the Android installer package for SiteKiosk Android from our website:

The installer package is basically a zipped archive, therefore the next step is to unzip the archive, using your favorite tool for that (e.g. Winzip, Winrar, 7zip, etc.).

In the unzipped archive you will find numerous files and folders. The ones we are interested in are all in the folder named assets. The folders required for our customization are apps, common (if available), external, provisio and siteKiosk. 

For our experiment we concentrate on changing the look of the browser. We therefore change a few subfolders deep in the apps folder. In ..\assets\apps\browser\skins we find all the browser designs (or skins) that are included in the SiteKiosk Android installer. To start creating our own design we make a copy of the folder named metal and rename the copy to MyBrowser (of course you can choose any name you like, but if you do, keep that in mind for the upcoming changes).

Now we step into the MyBrowser folder. In it, we will find the images subfolder. In that subfolder are a number of png files which make up the design of a browser skin. You will notice that all but the toolbar.png file are available in two sizes. This is to cater for different pixel sizes of Android devices. You are free to change the logos and icons to your liking. Just make sure to keep the original image sizes and the placement of icons, so for example do not put the refresh icon in the place that the home icon is currently using otherwise you would mix up the functions of your browser skin. The one image file that is only available in one size is the background of the browser tool bar, again you are free to change this to whatever you like, but please keep the size. The next screen shows my colorful (and possibly eye-hurting) design attempt that will be used to illustrate our little tutorial.

Next we create a logo icon for our browser to show in the configuration when we select the browser design. Go to the ..\assets\apps\config\images folder and create two png files for the icon, e.g. MyBrowser_logo.png and MyBrowser_logo2x.png. Again two version to cater for different pixel sizes. You may use the two sk_android_logo files as a base for your own creation.

Now that we are done with the actual design, we have to edit six files to make our browser design show up the way we want. In the folder ..\assets\apps\browser are two files named browserSettingsDescription.xml and browserSettingsDescriptionStrings.xml. Both have to be opened with an editor, e.g. Notepad, Notepad++, etc.

In the file browserSettingsDescription.xml add a new Option tag. Look for the Option tag with the name metal and add the new entry after that:

        <Option name="Metal" title="$Browser/BrowserSkins/Metal.Title" iconName="application-icons" iconIndex="34"></Option>
	<Option name="MyBrowser" title="$Browser/BrowserSkins/MyBrowser.Title" iconName="MyBrowser-icon" iconIndex="1"></Option>

The referenced iconName will be created later. The iconIndex can be 1 as our own logo picture is not part of a single file with more than one logo.

Next is the file browserSettingsDescriptionStrings.xml. We have to add the title for our browser design, so there is a caption next to the logo in the SiteKiosk configuration. Open the file in an editor and search for Metal.Title. You will find 5 matches. Add a new line after each of the matches with your own browser title.

<String Id='Browser/BrowserSkins/Metal.Title'>Metal</String>
<String Id='Browser/BrowserSkins/MyBrowser.Title'>MyBrowser</String>

Let's step into a new folder. This time it is ..\assets\apps\browser\skins\MyBrowser. You will see three .tmpl files in there. Open all of them with an Editor and change all occurrances of the word metal into MyBrowser.

On to the last file that has to be changed. It is the file icon.js in the folder ..\assets\apps\config\widgets. After you have opened it, a few addImageMap entries have to be added. Look for metal-fullscreen-icon and after that line we add our image maps.

addImageMap({ name: "metal-fullscreen-icon", src: "../skins/metal/images/sk_android_fullscreen_icon.png", width: 42, height: 42 });
addImageMap({ name: "MyBrowser-icon", src: "images/MyBrowser_logo.png", width: 29, height: 36 });
addImageMap({ name: "MyBrowser-browserbar-36-icons", src: "../skins/MyBrowser/images/sk_android_browserbar_36_icons.png", width: 38, height: 38, padding: 0, states: 3, icons: 8 });
addImageMap({ name: "MyBrowser-browserbar-25-icons", src: "../skins/MyBrowser/images/sk_android_browserbar_25_icons.png", width: 27, height: 27, padding: 0, states: 3, icons: 2 });
addImageMap({ name: "MyBrowser-browserbar-logo", src: "../skins/MyBrowser/images/sk_android_browserbar_logo.png", width: 119, height: 37 });
addImageMap({ name: "MyBrowser-fullscreen-icon", src: "../skins/MyBrowser/images/sk_android_fullscreen_icon.png", width: 42, height: 42 });

We are done with our browser design. The next step is to copy the files over to the right location on the Android tablet. Attach the tablet to the PC, usually using a USB cable. Locate the SiteKiosk folder on the tablet. You can find it under [externalStorageDir]/SiteKiosk which usually translates into /mnt/sdcard/SiteKiosk. Using the USB connection from the PC the path is something like ..\Internal Storage\SiteKiosk. Copy all the four subfolders from the assets folder described above into the SiteKiosk folder on the tablet.

/mnt/sdcard/SiteKiosk/common (if available)

Start SiteKiosk and open the configuration. If you are using SiteKiosk 2.6 or higher, go to Security and select the option to allow custom SiteKiosk applications. Go to Application > Browser > Design. You should see the newly added MyBrowser design there. Select it.

Go to Application > Browser > Advanced Settings > Logo and select your logo design there. The path usually would be something like mnt/sdcard/SiteKiosk/apps/browser/skins/MyBrowser/images/sk_android_browserbar_logo.png.

Finally select Start SiteKiosk from the treeview on the left and have a look at your design in the SiteKiosk Android browser.

Please remember we kept things pretty basic for this small tutorial, as this was about showing you the places that need to be edited to have your own SiteKiosk Android browser design and not giving lessons in design. Using your own icon, background and color design you can have a completely unique look.

Display TV content in SiteKiosk (using a Hauppauge TV device)

If necessary you can also display content from a TV device in the SiteKiosk Browser using an ActiveX control.

Some manufacturers already provide an ActiveX control for their TV device (if it works in the Internet Explorer 32 Bit it should also work in the SiteKiosk Browser).

Otherwise you will find the description about how to develop an ActiveX and a basic example about how to use it with SiteKiosk in this article.
Provisio developed a simple ActiveX Control Based on a SDK from Hauppauge that can be used with Hauppauge TV Cards to display TV content in the SiteKiosk Browser.

In the following you will find the description how to install and use it in SiteKiosk.
At the end of this article you will also find the download link to a ZIP that contains the ActiveX source which developers can use to make additional customizations to the ActiveX.
The provided ActiveX can be used with Hauppauge devices that are supported with the actual WinTV 7 software from Hauppauge. It was created with the SDK that Hauppauge provides at request.

A. An actual Windows system (Windows XP / Windows 7 / Windows 8)
B. The WinTV 7 Redistributable SDK software from here:
C. The Microsoft .NET Framework v4.0.30319 has to be installed on the PC too.
D. The ZIP containing the ActiveX and 2 demo HTML files from here:
E. SiteKiosk (for using the ActiveX in the SiteKiosk Browser):

1. The WinTV 7 Redistributable SDK software from Hauppauge has to be installed on the computer where you want to use the ActiveX (the WinTV 7 Software is also included)

2. Start the WinTV 7 Software and configure the WinTV device. The TV channels have to be configured with the WinTV Tool before, so that the ActiveX will find the channels.

3. Unzip the file "" and copy the folder "WinTVCtrl" to "...\SiteKiosk\Html\"

4. Register the ActiveX dll as follows:
- Open the command line (cmd.exe) with "Run as administrator" and enter this command (on x64 Systems use "C:\Program Files (x86)\..."):
"C:\Windows\Microsoft.NET\Framework\v4.0.30319\regasm.exe" "C:\Program Files\SiteKiosk\Html\WinTVCtrl\WinTVCtrl.dll" /codebase

For testing/using the ActiveX choose the "test_WinTVCtrl.html" or the "test_WinTVCtrl2.html" at "C:\Program Files\SiteKiosk\Html" (on x64 Systems use "C:\Program Files (x86)\...") in SiteKiosk configured as start page (-->Start Page & Browser).
Then start SiteKiosk in "Run once" mode first for testing.
When opening the web page it may take some seconds until you can watch the TV content because the ActiveX will be initialized.

The "test_WinTVCtrl.html" provides some buttons to control the displayed content (choose a channel and use the watch button to display the TV channel that is chosen)

The "test_WinTVCtrl2.html" will just display the TV content and switch the channels automatically every 30 seconds.

Feel free to customize the HTML files to fit your needs or even create your own HTML file and implement the ActiveX.

In case you want to customize the ActiveX or develop it further you can download the (Visual Studio) source files for the ActiveX Control from here:

Furthermore you would need the full WinTV SDK that Hauppauge provides at request.