PROVISIO DevBlog

How to Remove the Progress Bar in the SiteKiosk Chrome Browser

Today we are looking at a quick way to remove the progress bar in Chrome browser windows of SiteKiosk Windows. Please note that this feature will most likely be added to a future version of SiteKiosk for the Chrome engine skins.

To achieve the task we need to edit a file of the Chrome Browser skin. The content.json file is located in the folder C:\Users\Public\SiteKiosk\data\content\local\files\projects\d97aa96b962543fcb39625a3f8e8d8fb\000000000000000000000000. Open it with an editor.

Look for the segment that starts with this line:

"type": "content-webview-progress",

This will lead you to this:

{
	"type": "content-webview-progress",
	"name": "loadProgress",
	"borderBottom": "1px solid transparent",
	"borderBottomColor": "[[$root.colors.border]]",
	"backgroundColor": "[[$root.colors.progress.background]]",
	"height": "7px",
	"paddingTop": "2px",
	"paddingBottom": "2px",
	"width": "100%",
	"color": "[[$root.colors.progress.foreground]]",
	"webView": "{{tabPageArea.currentTab}}",
	"_editor_canBeSelected": true,
	"_editor_canBeEdited": true,
	"_editor_canBeDeleted": true,
	"_editor_canAdd": true,
	"layout": {
	},
	"_editor_propertiesToEdit": {
		"applyToAllContentGroups": true,
		"flex": true,
		"margin": true,
		"text": true
	},
	"_editor_propertiesToEditRestrictedUser": {}
},

Within the segment look for the line:

"width": "100%",

Add the following line directly after:

"visible": false,

The edited segment should look like this now:

{
	"type": "content-webview-progress",
	"name": "loadProgress",
	"borderBottom": "1px solid transparent",
	"borderBottomColor": "[[$root.colors.border]]",
	"backgroundColor": "[[$root.colors.progress.background]]",
	"height": "7px",
	"paddingTop": "2px",
	"paddingBottom": "2px",
	"width": "100%",
	"visible": false,
	"color": "[[$root.colors.progress.foreground]]",
	"webView": "{{tabPageArea.currentTab}}",
	"_editor_canBeSelected": true,
	"_editor_canBeEdited": true,
	"_editor_canBeDeleted": true,
	"_editor_canAdd": true,
	"layout": {
	},
	"_editor_propertiesToEdit": {
		"applyToAllContentGroups": true,
		"flex": true,
		"margin": true,
		"text": true
	},
	"_editor_propertiesToEditRestrictedUser": {}
},

Save the file and start SiteKiosk to see the effect.

Starting the Chrome Browser of SiteKiosk Windows with Command Line Switches

Building on a technique already demonstrated in a previous post, this is a reminder, that it is possible to start the Chrome browser of SiteKiosk Windows with command line switches.

A comprehensive list of available switches for the Chrome/Chromium browser engine can be found for example on this page: http://peter.sh/experiments/chromium-command-line-switches/. Please be aware that for security and technical reasons a lot of these switches are not allowed in a secure browser like SiteKiosk. Nonetheless the supported switches may be helpful for developers creating a page for use in SiteKiosk or for creating a workaround for a specific project.

The command line switches must be manually added to the configuration of SiteKiosk that you are using (e.g. …\SiteKiosk\Config\YourConfig.skcfg). Open the SiteKiosk configuration file you want to use with an editor like Notepad or Notepad++. Now search for this line:

"showTaskBar": true,

Add these lines right before the showTaskBar line:

"browserEngine": {
        "commandLineArguments": {
            "set": ["show-fps-counter"],
            "remove": []
        }
    },


It should look like this:

…
"system": {
    "password": {
      "enabled": false
    },
    "browserEngine": {
        "commandLineArguments": {
            "set": ["show-fps-counter"],
            "remove": []
        }
    },
    "showTaskBar": true,
    "userAgent": {
…


The above example will bring up an FPS counter in the SiteKiosk Windows Chrome browser.

You can use more than one switch. In that case, you need to use a list of comma separated strings:

"set": ["show-fps-counter","disable-web-security"],

How to Maximize New Chrome Browser Windows

Some SiteKiosk users want to open new SiteKiosk Chrome Browser Windows maximized. This can be achieved by using a small external script that is easy to add to SiteKiosk.

The script makes use of the SiteKiosk Object Model and looks like this:

SiteKiosk.WindowList.OnInsert = OnInsert; //Event that listens for new windows

//Function that is called when a new window has been added, gets the object that represents the new window as parameter
function OnInsert(skwin){
	//Check the window type, type 3 is an application window, which also applies to a new SiteKiosk Chrome window
	if(skwin.WindowType === 3)	{
		//Use the handle of the new window to maximize it
		SiteKiosk.WindowList.Maximize(skwin.Handle);
	}
}

The OnInsert event listens for new windows that are created while SiteKiosk runs. Once this happens, the OnInsert function is called and an object that represents the new window is available as a parameter. To identify a new Chrome window we need to look only for windows with type 3, which are application windows. Note that this would also match windows of other external applications you might run togehter with SiteKiosk. If you do not want those other windows to be maximized as well, you might consider using the ItemText property to refine the criteria of the if clause. Finally, we use the Maximize method, which we call using the handle of the new window as a parameter.

Copy the above script into an editor (e.g. Notepad) and save it as a Javascript file (e.g. MaximizeNewSKChromeWindows.js). Put the file in the folder ..\SiteKiosk\Html\.

Now add the file as an external script in SiteKiosk. Open the SiteKiosk configuration and go to Start Page & Browser -> Chrome Browser -> Customize -> Advanced -> On startup of SiteKiosk execute the following script file. Note that you need your Browser Toolbar settings set to an option that allows for new windows.

In case you are using the Start Screen with the Chrome Browser go to Start Page & Browser -> Chrome Browser -> Start Screen -> Customize -> Browser Skin -> Advanced -> Advanced -> On startup of SiteKiosk execute the following script file.

Please be aware that a configuration option to do the above without a script will be added to a future version of SiteKiosk.

Debugging Webpages in the SiteKiosk Android Browser

SiteKiosk Android allows you to debug webpages that are running in the SiteKiosk Android browser.

To activate this option you have to go into the settings of SiteKiosk Android, then you have to switch into the extended configuration mode. The extended configuration mode will show some options that are otherwise hidden. These are either experimental options or options useful to developers.

To enable the extended configuration mode, you need to tab seven times into the upper left corner of the configuration, right on the SiteKiosk Android logo. Please note the waring dialog, that tells you about the experimental status of the settings that are now unhidden.

In the extended configuration mode, you should go to the System page and tick the option Enable web debugging.

This is the only thing specific to SiteKiosk you need to do. The rest of the debugging process is described in detail on the Google Developers pages.

After you are done with the debugging please do not forget to disable the web debugging option of SiteKiosk again.

Using the SiteKiosk Object Model for Automated Website Logins

In case you want SiteKiosk to automatically login to a website with a specific user and you can't use cookies for that, because you need to delete them regularly for security reasons, you can use the SiteKiosk Object Model to help you with the task. The SiteKiosk Object Model enables you to edit the Document Object Model (DOM) of the page, to automatically fill in the required user data and start the login process.

The example will use PROVISIO's own remote monitoring page www.siteremote.net to demonstrate the automated login.

Unless you are already familiar with the code of the page you want to use you can utilize the developer tools of any modern browser (e.g. Chrome, Firefox or IE) to view the code of the webpage and find out about the fields for user name, password and the way how to submit that data. Using the developer tools on the SiteRemote login page (https://www.siteremote.net/pub/login.aspx) shows us that the id of the user field is UserNameEdt, the id of the password field is PasswordEdt. There are different methods the login can be coded on a webpage, here it is a div with the id LoginBtn2 that does a callback, so we just use the Javascript click method to simulate a click on that div. If your login page uses a form element, you can usually call the submit method of that form instead of using the click method, that we use in our example.

Now that we got the required information about the DOM elements of the page we want to login to, we can create our script.

//Flag used to prevent numerous login attempts, you may reset the flag using an event like OnScreenSaverBegin
var loginattempt = false;

//Message event used to detect navigation to login page
SiteKiosk.Logfile.OnMessage = OnMessage;
function OnMessage(seq, time, utcoff, awtype, awlevel, facility, text)
{
	//Check the SiteKiosk logs if the login page has been called and then call the function to attempt the automated login
    if(text.indexOf("Navigation:") !== -1 
	&& text.indexOf("www.siteremote.net") !== -1 
	&& loginattempt === false){
        //Delays the automatic login to give the page time to load
		evtid = SiteKiosk.Scheduler.AddDelayedEvent(1500, AutomaticLogin);
		loginattempt = true;
	}
}
 
function AutomaticLogin()
{
	//Go through the open windows to find the browser window with the login page
    for (var i=1;i<=SiteKiosk.WindowList.Windows.Count;i++)
    {
        try
        {
			//Make sure the window is a SiteKiosk browser window and it displays the login page
            if((SiteKiosk.WindowList.Windows(i).WindowType === 1 || SiteKiosk.WindowList.Windows(i).WindowType === 2)
			&& SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.LocationURL.indexOf("https://www.siteremote.net/pub/login.aspx") !== -1)
            {
                SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.Document.getElementById('UserNameEdt').value = "username";
                SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.Document.getElementById('PasswordEdt').value = "password";
				SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.Document.getElementById('LoginBtn2').click();
            }
        }
        catch(e)
        {
			//Debug
            SiteKiosk.Logfile.Notification("Automated login failed for window: " + SiteKiosk.WindowList.Windows(i).ItemText);
        }
    }
}

The script uses a variable (loginattempt) as a flag to prevent more than one login attempt. You may use a SiteKiosk Object Model event like OnScreenSaverBegin or OnSessionEnd to reset the flag to allow for new login attempts.

The OnMessage event helps to detect that the login page has been visited in the SiteKiosk browser. Using the AddDelayedEvent method to give the page time to load, we call the AutomaticLogin method of the script to start the login process.

Within the AutomaticLogin method we use the WindowList object's Windows collection Count property to go through all open windows to identify all open SiteKiosk browser windows (WindowType 1 or 2) to find the one, which displays the SiteRemote login page (https://www.siteremote.net/pub/login.aspx). Then we edit the DOM of the page and fill the user name and password fields with the required values and click the login button.

Save the above example as a .js file in the ..\SiteKiosk\html folder. Open the configuration, go to Start Page & Browser, select the Internet Explorer engine and use for example the Metro IE Skin. On the same configuration page click on Advanced and then add the .js file you created as an external script.

Start the SiteKiosk browser and go to www.siteremote.net. An automatic login attempt by the script will occur. If you provided valid credentials as username and password, you will login automatically to your SiteRemote team, otherwise you will recieve an error message about invalid credentials.

For obvious reasons the code to identify the URL and the code to edit the required DOM elements will vary depending on the URL and code of the login page you need to use, please change these code parts accordingly.

Starting External Applications from Web Pages

Here are two examples that show how you can start external applications from a web site in the SiteKiosk browser. One example is for the Internet Explorer engine of SiteKiosk, the other for the Chrome engine.

The first example is a simple HTML page with two buttons for the IE engine of SiteKiosk. The first button just starts the Notepad application of Windows. The second button starts Notepad with a parameter that includes the full path to a file that should be displayed in Notepad.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>App Start with the SiteKiosk Object Model (IE Engine)</title>

    <script>
        //Initializing the SiteKiosk Object Model for IE engine
        window.external.InitScriptInterface();

        //Running the external application using a universal method for optional parameter usage
        function runExtApp(extapppath, extappparameter) {
            var completepath = extapppath;

            //Check if parameter is not empty and adding parameter to path
            if (extappparameter !== "")
                completepath += " " + extappparameter;

            SiteKiosk.ExternalApps.Run(completepath, false);
        }
    </script>
</head>
<body style="margin-left:auto;margin-right:auto;margin-top:50px;text-align:center;">
    <input type="button" value="Start Notepad without parameter" onclick="runExtApp('c:/windows/notepad.exe','');"/><!--You can either use single forward slashes in the path-->
    <input type="button" value="Start Notepad with parameter" onclick="runExtApp('c:\\windows\\notepad.exe', 'C:\\Program Files (x86)\\SiteKiosk\\Html\\extapptest.txt');"/><!--Or you can use double backward slashes in the path-->
</body>
</html>

Embedded in the normal HTML and Javascript code is the SiteKiosk Object Model. The Run method of the ExternalApps object is used to start an external application.

SiteKiosk.ExternalApps.Run(completepath, false);

You can learn more about the Run method here.

For security reasons you need to specifically allow pages you are using the SiteKiosk Object Model on in the SiteKiosk configuration.

To test the above example code you can either put it on your web server but you can also save it locally as an html file in the ..\SiteKiosk\html folder of your SiteKiosk installation. The test code also assumes that there is a local text file available in ..\SiteKiosk\html named extapptest.txt for the parameter variant.

The result will look like this:

The second example is a slight variation from the first and demonstrates the same behaviour in SiteKiosk when using the Chrome engine. The SiteKiosk Object Model for the Chrome engine differs from the one for the Internet Explorer engine. The HTML and Javascript parts are identical but note the different way to initialize the Object Model.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>App Start with the SiteKiosk Object Model (Chrome Engine)</title>

    <!--Initializing the SiteKiosk Object Model for Chrome engine-->
    <script type="text/javascript" src="file://C:/Program Files (x86)/SiteKiosk/SiteKioskNG/assets/siteKiosk/sitekiosk.js"></script>

    <script>
        //Running the external application using a universal method for optional parameter usage
        function runExtApp(extapppath, extappparameter) {
            var completepath = extapppath;

            //Check if parameter is not empty and adding parameter to path
            if (extappparameter !== "")
                completepath += " " + extappparameter;

            siteKiosk.system.windows.skLegacy.externalApps.run(completepath, false);
        }
    </script>
</head>
<body style="margin-left:auto;margin-right:auto;margin-top:50px;text-align:center;">
    <input type="button" value="Start Notepad without parameter" onclick="runExtApp('c:/windows/notepad.exe', '');"/><!--You can either use single forward slashes in the path-->
    <input type="button" value="Start Notepad with parameter" onclick="runExtApp('c:\\windows\\notepad.exe', 'C:\\Program Files (x86)\\SiteKiosk\\Html\\extapptest.txt');"/><!--Or you can use double backward slashes in the path-->
</body>
</html>

The line that actually starts the external application is also specifically suited for the Chrome engine:

siteKiosk.system.windows.skLegacy.externalApps.run(completepath, false);

The functionality and accepted parameters of the run method are the same as for the IE version. Currently there is no detailed documenation available for the SiteKiosk Object Model for Chrome-based browsers in SiteKiosk Windows and SiteKiosk Android, please contact our support to receive a basic documentation.

Using the Chrome example in one of the Chrome browser versions of SiteKiosk will look like this:

When working with external applications please note the information from the SiteKiosk documentation.

Allowing Android System Dialogs to set SiteKiosk Android as Default Browser for another App

As a secure kiosk solution SiteKiosk Android blocks Android system dialogs by default. Depending on the requirements of your kiosk project you might want to allow other apps to be started from within the SiteKiosk browser, for example the Android payment solution Adyen (Note: all of what is described here applies to apps that are called through specific links in the SiteKiosk browser, not to apps you are starting as an external app in SiteKiosk Android). If you need one of these apps to use SiteKiosk Android as the browser of choice to process the response of the app this selection needs to be done trough a system dialog that is called by your app while SiteKiosk is running. The aforementioned secure default behaviour of SiteKiosk Android will block this dialog. To be able to make your choice you need to temporarily allow Android system dialogs while SiteKiosk Android is running.

In order to allow another app to use SiteKiosk Android as its browser of choice you first need to open your SiteKiosk configuration editor, go to Security -> Allow assigned apps and add your app there.

The actual change required to allow Android system dialogs must be done by manually editing the SiteKiosk Android configuration. There are two ways you can do this.

If your Android device is registered with SiteRemote, you can log in to your SiteRemote team and go to SiteKiosk -> Configuration to import the existing configuration from the device, edit the configuration and publish it to one or more terminals.

If your Android device is not using SiteRemote, you can open the SiteKiosk configuration editor, go to System and select Export configuration from SD card. Now either edit the configuration locally on the Android device or copy it to computer to make the necessary change with an editor like Notepad. Afterwards copy it back to the SiteKiosk/config folder on your Android device and use the Import configuration from SD card option to activate the changed configuration.

Before editing your configuration you should make a backup, then you can skip reverting the following change that is only temporarily needed.

When you edit your SiteKiosk Android configuration look for:

</Apps></AllowedApps>

Right before that section you need to add:

<App-android enabled="true"/>

The result should look like this:

<App-android enabled="true"/></Apps></AllowedApps>

Once you use your edited SiteKiosk configuration on your Android device, start your app from within the SiteKiosk Android browser and trigger the system dialog that lets you choose SiteKiosk Android as the default browser for that app. Select SiteKiosk Android in the dialog and make sure to use the option in the dialog to make this a permanent decision.

Now that you don't need to use the system dialog anymore you can switch to your configuration backup from before the change or remove the added XML tag from your configuration. For security reasons you should not permanently run SiteKiosk Android with system dialogs being allowed.

Using Self-signed Certificates in a SiteKiosk Chrome Browser Skin

In case your kiosk deployment is depending on self-signed certificates here are a few usesful hints in handling those for the Chrome engine version of SiteKiosk.

The certificate store for the Chrome Browser variants of SiteKiosk is generated from the Windows certificate store. This means that you can easily install self-signed certificates into your Windows certificate store, e.g. into the Trusted Root Certification Authorities. Make sure that you install the certificate into the right store, either for a user or the computer, based on your needs.

On the first start of one of the Chrome Browser skins of SiteKiosk under a user SiteKiosk will generate its own certificate list from the Windows store. The file is named SiteKioskNGCef-CA.perm and placed in the Temp folder of the user SiteKiosk is running under (%tmp%\SiteKioskNGCef-CA.pem). In case you make changes to the certificates you need to delete this file in order for SiteKiosk to regenerate the list.

Depending on your needs the file can be deleted in many different ways to force SiteKiosk to generate a new version. For example you can delete it periodically by using a batch file and the Windows Task Scheduler. You can also use the SiteRemote job system to create a two step job that deletes the file and then restarts SiteKiosk.

Distributing the SiteKiosk Windows Start Screen with SiteRemote

The SiteKiosk Windows Start Screen is a powerful and easy to use tool to create a customized kiosk terminal experience. If you want to use the same Start Screen setup, either newly created or changed, on more than one kiosk system, you can distribute the required files using different methods. In case your environment only includes a handful of PCs at the same location you may just use a USB stick, otherwise the more comfortable method is to use SiteRemote.

For our test scenario we create a very simple Start Screen using Template 3, that only includes a monochrome background and a text. Note that the complexity of the Start Screen you create does not alter the described scenario in any way. This is what our starting design will look like:

Once you are done creating or changing your Start Screen you need to save it by clicking on the corresponding icon in the Start Screen Editor. Once this is done you are presented with a dialog that tells you where all the files associated with the Start Screen are located. It will be the same location on all your SiteKiosk Windows installations (C:\Users\Public\SiteKiosk\content):

You will get this information dialog whenever you make any changes. This is a reminder that you now may need to distribute the changed files to all your PCs. You can now copy the content folder onto a USB stick and then copy the folder to the exact same location on all your machines, overwriting the previous version or use SiteRemote to achieve this. How to use SiteRemote for this purpose is what we want to look at in a little more detail.

First we create a new simple Start Screen design that will look different than the original design to symbolize the changes:

Again the changes need to be saved when leaving the Start Screen Editor. Once this has been successfully done, we open the Windows Explorer and browser to the content folder at C:\Users\Public\SiteKiosk. If you right click the content folder you can select Send to and then choose Compressed (zipped) folder. This results in a content.zip file at this very location:

Now we need a small tool that will unzip the folder once we have distributed it through SiteRemote. You can for example use the command line version of 7-Zip. The application is called 7za.exe and is available here in the 7-Zip Extra package.

Next just login to your SiteRemote team, go to the SiteKiosk tab and select Jobs from the submenu. Create a new job (you may save it as a job template if you like):

Set Job Name and Description to your liking and select SiteKiosk Windows as the Client Type. Now you need to add three job steps. The first one will be a File Upload that will place the 7za.exe file in the C:\Users\Public\ folder. Make sure to use the slash at the end of the file path. Also choose Overwrite to make sure any existing version at that location is overwritten:

The second step will again be a File Upload and upload the content.zip file with the complete Start Screen content. Use the same settings as with the first step:

The third and last step will be of the Run Executable type. If will use the following command line to run 7za.exe and unzip the content of the content.zip archive to its final destination:

"C:\Users\Public\7za.exe" x "C:\Users\Public\content.zip" -aoa -oC:\Users\Public\SiteKiosk

Leave the other options as they are, especially leave Invisible execution with administrative rights selected:

Finally assign the jobs to the desired machines and wait for it to complete. Note that the changes will only come into play once the Start Screen is refreshed, to speed things up you can send another SiteRemote job that restarts SiteKiosk.

Using Adobe Flash with Chrome Browser Skins of SiteKiosk 8.91-9.1

Please note that the description below, describing how to manually make changes to the configuration of SiteKiosk to enable Flash, will no longer be required with the release of SiteKiosk 9.2. In SiteKiosk 9.2 you can enable Flash support in the configuration under Start Page & Browser -> Chrome Browser -> Customize -> Settings.

For security reasons using Adobe Flash with the Chrome Browser skins (“Chrome Browser” skin and “Chrome Fullscreen Browser” skin) is not supported by default in SiteKiosk 8.91-9.1.

If Adobe Flash is required you will normally need to switch to an Internet Explorer skin where Adobe Flash is supported with the corresponding Adobe Flash Plug-in for IE (for historical reasons).

If you require using Adobe Flash with the Chrome Browser skins you can proceed as follows:
1. First you need to download and install the 32-bit Adobe Flash Player “for Opera and Chromium – PPAPI” on your Windows operating system:
https://get.adobe.com/flashplayer/otherversions/

2. Next step is to add the Adobe Flash PPAPI Plug-In to SiteKiosk’s Chromium Engine.
To do this you need to edit the SiteKiosk configuration file (…\SiteKiosk\Config\YourConfig.skcfg).

- Open the SiteKiosk configuration file you want to use with an editor like Notepad or Notepad++.
- Search for the line
"showTaskBar": true,
- Then add these lines right before:

"browserEngine": {
        "commandLineArguments": {
            "set": ["ppapi-flash-path=C:\\Windows\\SysWOW64\\Macromed\\Flash\\pepflashplayer32_20_0_0_267.dll","ppapi-flash-version=20.0.0.267"],
            "remove": []
        }
    },


It should look like this:

…
"system": {
    "password": {
      "enabled": false
    },
    "browserEngine": {
        "commandLineArguments": {
            "set": ["ppapi-flash-path=C:\\Windows\\SysWOW64\\Macromed\\Flash\\pepflashplayer32_20_0_0_267.dll","ppapi-flash-version=20.0.0.267"],
            "remove": []
        }
    },
    "showTaskBar": true,
    "userAgent": {
…


"ppapi-flash-path" gives the information where to find the PPAPI Flash Plug-In
"ppapi-flash-version" reports the given version for the PPAPI Flash Plug-In

In this example we have installed the Adobe Flash PPAPI version 20.0.0.267 to the default path (32 Bit) "C:\Windows\SysWOW64\Macromed\Flash\pepflashplayer32_20_0_0_267.dll".

When installing other (newer) Adobe Flash versions you need to adjust these entries.

3. Finally save the changes and start SiteKiosk.
When you start SiteKiosk and e.g. go to http://www.adobe.com/de/software/flash/about/ you will see the Adobe Plug-In is activated: