PROVISIO DevBlog

Starting Password Protected Applications from the Start Screen of SiteKiosk Windows

SiteKiosk Windows allows you to password protect the starting of external applications. For technical reasons this feature is not available for the Application link element of the Start Screen, which is the element you would normally use to add an application to the Start Screen. By using the HTML Widget element instead, the password protection for applications can be used with the Start Screen. Here is how.

Open the SiteKiosk configuration and go to Applications. Add the external applications you need to the list. Note that you can use the arrows on the left side of the list to move applications up and down to rearrange the order.

 

Use the settings dialog for an application to make the start of it password protected.

 

Next go to Start Page & Browser in the configuration of SiteKiosk and select the Start Screen. Click on Customize, select Start Screen Editor and use the Open Editor button. Choose the template you want to use and add an HTML Widget element. Copy the following lines:

<script type="text/javascript">
    function StartPWprotectedApp() {
        parent._siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", "SiteKiosk.ExternalApps.Item(1).Run(true);");
    }
</script>
<div style="background-color:FF235A;height:100%;padding:10px;font-family:Arial;cursor:pointer;" onclick="StartPWprotectedApp();">
    <div style="height:100%;width:100%;font-size:30px;text-align:center;margin-top:42%;">Start Password<br/>Protected App</div>
</div>

Paste the code into the HTML code box in the properties dialog of the HTML Widget.

 

You can use the div tag to style the element to your liking. The line

parent._siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", "SiteKiosk.ExternalApps.Item(1).Run(true);");

is what calls the actual application. Note the number 1 as the argument for the Item method (more information can also be found here and here). This calls the actual application based on the position in the application list of the SiteKiosk configuration. 1 calls the first application in the list, 2 calls the second application and so on. Add as many HTML Widget elements as you need.

The final result based on the example code above will look like this in SiteKiosk:

Using tags to display variants of a SiteCaster project on different machines

If you want to display variants of a SiteCaster project that differ only in a few elements, you can use the tag feature in SiteCaster as a display condition.

In the following example, a SiteCaster project is published on two machines to display two variants of a project:

Log into your SiteRemote team and select the Monitoring tab. To generate tags for your machines, right click on a machine in the tree view and select Assign Tags.

 

Then enter the name of your tags e.g. Terminal 1 and Terminal 2 press Add and select it using the checkbox. Confirm the setting with Save.In SiteCaster, generate your sample project using the empty template. Use the Add button to add a swap container to the project. Insert two different images into the swap container. In order to use the Tag display condition, you will need to enable the expert mode in SiteCaster. To do so, you need to insert &expert at the end of the URL in the URL address field of your browser and then press Enter to reload the project. 

After activation of the expert mode you see the Expert Edit button in the tool bar.  

Then select one of the images and open the properties dialog by double-clicking on the image. Go to the section Display condition and select the Display under these conditions option. Activate the check box Tag and enter the tag name Terminal 1. Close the properties dialog with pressing the Save button. Activate the same setting on the other image with the tag name Terminal 2. After publishing the project to both clients the first image is displayed on the device with the tag Terminal 1 and the second image on the device with the tag Terminal 2. The described scenario can be extended with further tags as you like.   

Unload a SiteCaster Webview when it is not displayed

Generally, SiteCaster loads webviews at the point where they first appear in a session in SiteCaster. In order to avoid reloading a webview each time again when it is displayed e.g. in container types like sequence, overflow container or swap container, it is always kept in the loaded state. This has the side effect that if the displayed webview contains audio elements these are also audible in the non-displayed state. If you want to prevent this you can use the expert setting shouldUnloadWhenHidden. Additionally you can use the setting shouldUnloadWhenHidden to bring certain webviews always in a newly loaded state when they are displayed.

To activate the expert setting shouldUnloadWhenHidden, open the project in the SiteCaster editor. In the URL address field of your browser you must add &expert at the end of the URL and then press Enter to reload the project.

After activation of the expert mode you see the Expert Edit button in the tool bar. Create a webpage element on your project page, select it and press the Expert Edit button.

At the bottom of the Expert Settings dialog box enter the property shouldUnloadWhenHidden. In the dropdown menu on the right side select Boolean and activate the checkbox. Then press the plus button and save the setting.

 

After pressing the expert setting there is an additional line shouldUnloadWhenHidden with activated checkbox displayed in the expert settings. Close the expert settings dialog with pressing the save button. After activation of this setting the webview will be unloaded when it is not displayed.

 

Extend the SiteKiosk Browser workspace to multiple screens (Combine several screens to one screen)

To extend the workspace of the SiteKiosk Windows browser to multiple screens that are configured as separate screens in Windows with "Extend these screens", proceed as follows:

 

A. In the SiteKiosk configuration under "-->Start Page & Browser-->Secondary Monitor", deactivate the "Restrict mouse pointer to first monitor browser area" option. (The option "Activate secondary monitor" must remain deactivated!).

B. Now you have to allow the display of new browser windows on the second monitor.
For this open the SiteKiosk configuration file you created (e.g. ...\SiteKiosk\Config\YourConfig.skcfg) with an editor (e.g. Notepad) and search for the following line:

<windowmanager>

Add the following content to the next line:

<disallow-window-clipping>true</disallow-window-clipping>

Like this:

<windowmanager> 
   <disallow-window-clipping>true</disallow-window-clipping>  
   <show-block-msg>true</show-block-msg> 
   <use-secure-user>false</use-secure-user>
</windowmanager>

For more information see "20. Remove restriction to limit windows to the SiteKiosk display area":
https://www.provisio.com/helpconsole/SiteKiosk%20Help/en-US/default.htm?manuell_editierbare_optionen.htm

C. The next step is to adjust the "workarea" of SiteKiosk to the resolution of all your monitors combined. To do this, use the setting described at "5. Restrict SiteKiosk to a Portion of the Screen":
https://www.provisio.com/helpconsole/SiteKiosk%20Help/en-US/default.htm?manuell_editierbare_optionen.htm

Example:
Two monitors side by side with a resolution of 2560x1440 px each give a workarea of 5120x1440px on both monitors.

The corresponding "workarea" adjustment looks like this:

<workarea enabled="true" absolute-coordinates="true">
      <capture-mouse>false</capture-mouse>
      <left>0</left>
      <top>0</top>
      <right>5120</right>
      <bottom>1440</bottom>
</workarea>

After saving the changes and starting SiteKiosk, the browser extends across both monitors.

 

NOTE:
Due to Windows User Account Control (UAC) restrictions, you may need to start the text editor as an administrator (right-click-->Run as administrator) to save the changes in the Programs directory.



 

 

Extend the SiteCaster workspace to multiple screens (Combine several screens to one screen)

In the case you want to extend the SiteCaster workspace to multiple screens, you have to edit the SiteKiosk configuration. In the following example the SiteCaster workspace is extended to 3840 px x 2160 px for using four HD displays (1920 px x1080 px).

 


 

If you want to combine more than two screens to one screen you need a graphics card which supports the described scenario.

Start the SiteKiosk configuration tool and create a new configuration. Activate SiteCaster under Start Page & Browser and save the configuration. Open the configuration (C:\Program Files (x86)\SiteKiosk\Config) with Notepad ++ and search for following line:      "id": "App05" 

You have to change the following lines

 

{
      "appGuid": "8EB91F5F-D1E5-48BA-ADA0-A8E54F73131A",
      "id": "App05",
      "name": "SiteCaster CMS",
      "folder": "siteCasterCMS",
      "active": true,
      "dontRestartAtScreensaver": true,
      "dontRestartAtLogout": true,
      "remoteApps": [
        {
          "name": "siteCasterCMS",
          "remoteUrl": "https://$(SiteRemoteServerName)/sitecastercms/player/assets",
          "contentFilesFolder": "C:\\Users\\Public\\SiteKiosk\\cmscontent"
        }
      ],
      "config": {
        "allowMediaStreamAccess": false,
        "enablePinch": false,
        "handlePopupWindowsAsLinks": false,
        "useFlash": false,
        "zoom": 1.0,
        "projects": []
      },
      "instances": [
        {
          "mode": "startup",
          "screen": "primary",
          "appMainWindowRect": {
            "width": null,
            "height": null,
            "top": null,
            "left": null,
            "bottom": null,
            "right": null
          },
          "useAppMainWindowRect": false,
          "section": "0"
        }
      ]
    },

 

 into 

{
      "appGuid": "8EB91F5F-D1E5-48BA-ADA0-A8E54F73131A",
      "id": "App05",
      "name": "SiteCaster CMS",
      "folder": "siteCasterCMS",
      "active": false,
      "dontRestartAtScreensaver": true,
      "dontRestartAtLogout": true,
      "remoteApps": [
        {
          "name": "siteCasterCMS",
          "remoteUrl": "https://$(SiteRemoteServerName)/sitecastercms/player/assets",
          "contentFilesFolder": "C:\\Users\\Public\\SiteKiosk\\cmscontent"
        }
      ],
      "config": {
        "allowMediaStreamAccess": false,
        "enablePinch": false,
        "handlePopupWindowsAsLinks": false,
        "useFlash": false,
        "zoom": 1.0,
        "projects": []
      },
      "instances": [
        {
          "mode": "startup",
         "screen": "primary",
          "appMainWindowRect": {
            "width": "3840",
            "height": "2160",
            "top": "0",
            "left": "0",
 "bottom": null,
            "right": null          },
          "useAppMainWindowRect": true,
          "section": "0"
        }
      ]
    },

If you do not want to adjust the order of the screens horizontally or vertically in the Windows settings (Screen Resolution), you have the option to adjust the zero point of the SiteCaster desktop by setting the corresponding values for "top" and "left", whereby negative values can also be used. In the SiteCaster Editor, you must set the project resolution in the menu bar under Resolution / Zoom to the resolution used.

Please note that the described case is supported with SiteKiosk version 9.7.

Create buttons to control webviews in a SiteCaster project

In the case you want to create buttons like back, forward, reload or navigate to control a webview in SiteCaster (since version 1.5), you need to start the expert mode.

 

Open the project in the SiteCaster editor. In the URL address field of your browser you must add &expert at the end of the URL and then press Enter to reload the project.

 

After activation of the expert mode you see the Expert Edit button in the tool bar. Create a webpage element on your project page, select it and press the Expert Edit button. In the settings you need to copy the element id under name (e.g. id_13590531270_1568903718862) for the next step.

Example: Navigate button

Now add an image element (note that this will work with most other standard elements as well) on your project page, select the image and press the Expert Edit button. You can resize the inspector on the right via drag and drop to access the following lines easier.

Go to actions and select JSON object in the drop down menu. Then add following entry with the webview id behind the existing one:

{"enabled":true,"actionType":"webViewCommand","id":"id_13590531270_1568903718862","tag":"web","command":"back","url":"https://www.provisio.com"}

As a result you have following entry in the editbox:

[{"enabled":false,"actionType":"navigate"},{"enabled":true,"actionType":"webViewCommand","id":"id_13590531270_1568903718862","tag":"web","command":"navigate","url":"https://www.provisio.com"}]

 

In the same way you can use following values:

id (ID of the WebView that is to be navigated)

tag (tag of the WebViews that is to be navigated)

command: "back, "forward," "home," "reload," "navigate")

url (URL to navigate to)

Don’t edit or delete the first entry in the array, as it has to stay in there. Now close the settings dialog with pressing Save button. You can exit the expert mode with pressing the button “Leave expert mode” .

 

To target the webview you can enter the webpage id or a tag. With a tag you can also control several different webviews in the same time with one button. For using a tag you simply activate the expert mode. Double click on the webview element to open the settings dialog and enter the tag name under tags in the section Editor settings. If you want to use several tags for one webview they have to be separated with a comma.

You can use the button example images on the bottom to build your buttons. The CC0 Image source is https://pixabay.com

        

Disabling Flash Support for SiteKiosk Windows

Because of security concerns regarding the use of Flash a growing number of users wants to disable it. This can be achieved differently based on the browser engine that is being used in SiteKiosk Windows.

For the Chrome engine of SiteKiosk Flash support is already disabled by default. It can be controlled in the configuration of SiteKiosk under  Start Page & Browser -> Chrome Browser -> Customize -> Settings -> Flash support.

The Internet Explorer engine is based on the WebBrowser Control provided by Microsoft and uses the same Flash settings as the Internet Explorer installed on the system. Since Windows 8 Flash is part of the Windows operating system and cannot be uninstalled. But it can be disabled. This is done by compatibility flags in the Windows registry.

Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\ActiveX Compatibility\{D27CDB6E-AE6D-11CF-96B8-444553540000}]
"Compatibility Flags"=dword:00000400
[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\ActiveX Compatibility\{D27CDB6E-AE6D-11CF-96B8-444553540000}]
"Compatibility Flags"=dword:00000400

You can copy the above into an editor like Notepad and save it as a .reg file, e.g. as turn_flash_off.reg. On the SiteKiosk machine you want to disable Flash just run the .reg file under an administrator account by double-clicking it and follow the on-screen instructions.

Here is a before and after comparison in SiteKiosk using the https://get.adobe.com/flashplayer/about/ information page of Adobe.

 

 

Note that you can also use SiteRemote to distribute the registry settings to your SiteKiosk Windows machines. Please have a look here (http://devblog.provisio.com/post/2014/08/14/Using-SiteRemote-to-Change-Windows-Registry-Settings.aspx) and here (http://devblog.provisio.com/post/2015/11/03/Accessing-64-Bit-System-Folders-and-Registry-from-the-SiteRemote-Job-System.aspx) for more information.

 

 

 

Starting the SiteKiosk File Manager from the Start Screen with Chrome Browser Skin

This time we are going to have a look at how to start the SiteKiosk File Manager directly from the SiteKiosk Start Screen. But in opposite to the older article here we now also make it work when using the Start Screen with Chrome Browser skin.

First we need to create a local JavaScript file that takes care of the task of opening the File Manager. The code for that file can look like this:

 

function openFileManager(){
 //Defines the available Window styles for the File Manager window
 var WS_OVERLAPPED = 0x00000000;
 var WS_MAXIMIZEBOX = 0x00010000;
 var WS_MINIMIZEBOX = 0x00020000;
 var WS_THICKFRAME = 0x00040000;
 var WS_SYSMENU = 0x00080000;
 var WS_BORDER = 0x00800000;
 var WS_CAPTION = 0x00C00000;
 var WS_MAXIMIZE = 0x01000000;
 var WS_MINIMIZE = 0x20000000;
 var WS_POPUP = 0x80000000;
 var WS_OVERLAPPEDWINDOW = WS_OVERLAPPED | WS_CAPTION | WS_SYSMENU | WS_THICKFRAME | WS_MINIMIZEBOX | WS_MAXIMIZEBOX;
 var WS_EX_TOOLWINDOW = 0x00000080;
             
  //Creates the File Manager window and assigns its settings
  var mediabox = SiteKiosk.SiteKioskUI.CreateHTMLDialog();
  mediabox.URL = SiteKiosk.SiteKioskDirectory + "skins\\public\\Media\\FileManager\\Selector.html";
  mediabox.Styles = 13565952;
  mediabox.Icon = SiteKiosk.SiteKioskDirectory + "skins\\public\\Media\\FileManager\\Img\\Icons\\fms_ico.ico";
  mediabox.Width = 1024;
  mediabox.Height = 700;
  mediabox.ExStyles = 0;//
  mediabox.Border = true;
  mediabox.Type = "FileManagerDlg";
  mediabox.TopMostWindow = false;
  mediabox.CloseOnInput = false;
  mediabox.Parent = SiteKiosk.WindowList.MainWindow.SiteKioskWindow.Window;
  mediabox.ShowDialog();
			
}

Just copy and paste the code to an editor and save it as for example as "OpenFileManager.js" at "…\SiteKiosk\Html".
Next it's time to open the SiteKiosk configuration and adding this script file at "Start Page & Browser-->Advanced-->On startup of SiteKiosk execute the following script file".

Under "Start Page & Browser" select the Start Screen. Click on "Customize" and open the Start Screen editor. Select one of the three templates and create a new HTML Widget link element. Edit the element and add the following code that calls the external script function openFileManager:

 

<script>
    (new Function(_siteKiosk.getSiteKioskObjectModelCode()))();
    function openFileManagerExt() {
		_siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", "SiteKiosk.ScriptDispatch.openFileManager();");			
    }
</script>
<div style="background-color:2DA7FF;height:100%;padding:10px;font-family:Arial;cursor:pointer;" onclick="openFileManagerExt();">
    <div style="height:100%;width:100%;font-size:30px;text-align:center;margin-top:3%;">Open<br/>File Manager</div>
</div>

 

The function OpenFileManagerExt is "Using the Classic SiteKiosk Object Model in SiteKiosk Windows Chrome Browser" in combination with the "ScriptDispatch Object" from Classic Object Model to call the external script function "openFileManager".

 

In the <div></div> part you can use HTML code of your choice to change the element to your liking (text, color, etc.).

General Note:
Which directories are displayed in the File Manager (download folder, etc.) must be specified beforehand under "-->Files & Downloads", while you have selected the Metro IE Skin under "-->Start Page & Browser".
The path for the download folder should match the download folder in the Chrome Browser skin.
Since the download folder matches with the default settings "C:\Users\Public\Documents\SiteKiosk", you normally only need to activate the File Manager and Downloads.

At the end it should look like this when the File Manager is opened:

Create a SiteCaster project that can’t be deleted by restricted users but edited freely

 

The following entry describes how to generate a SiteCaster project which cannot be deleted, but can be freely designed with standard elements by a restricted user group. This example is working with two user groups. The Admin group with full rights to the project and the Editor group which gets the right to add, edit and delete elements. After logging into SiteRemote you have to create on the Users page in the User Groups tab the two user groups Admin and Editor with the assigned role SiteCaster User. Add to the SiteRemote Administrator the both created user groups (Admin, Editor) and to an additional created user (e.g. SiteCaster Editor) only the Editor user group.

  

 

Switch to SiteCaster over the sidebar. Starting on the projects page in the SiteCaster editor you have to create a new project with the offered template Empty. In the User rights section on the bottom of the Create project page you have to select the user group Admin in the drop down menu for the user group with full access. Activate the checkbox Enable restricted editing of properties for additional users below and press create.

 

 Select the Content layer in the overview and press the Edit button.

 

  

In the properties dialog of the content layer activate in the section Editor settings (title, template, rights) the checkboxes Users in this group an insert new Elements that are based on templates for this container and Allow these users to also add standard elements, page templates and clipboard elements. Additionally select the restricted user group Editor in the dropdown menu and press save.

 

  

With the same procedure you can edit the root node of a project (top of the overview) to allow restricted users to add new pages. The created project is directly visible after saving for the restricted user group and can be further edited.

 

 

Manipulating the DOM within the SiteKiosk Windows Chrome Browser

Editing the DOM of a website displayed in the Chrome Browser of SiteKiosk Windows (please have a look here for the Internet Explorer browser of SiteKiosk) can be easily achieved by adding the DOM manipulation script to the file C:\Program Files (x86)\SiteKiosk\SiteKioskNG\assets\customScriptExtension.js.

The file is empty be default and will be executed for every webpage displayed in the Chrome Browser of SiteKiosk Windows. You should therefore make sure to add script code to identify the page you want to manipulate.

The DOM manipulation does not require SiteKiosk specific script code. Plain Javascript can be used.

The following example code edits the main search page of Google to include SiteKiosk as the search term and to change the text of the Search button to "Search for SiteKiosk". Note that the code already does a basic check, if the website is a Google website before it executes the rest of the Javascript code.

if (document.URL.indexOf("https://www.google.") !== -1) {
	document.addEventListener('DOMContentLoaded', documentLoadedFunc);
}

function documentLoadedFunc(e) {
	document.getElementsByName('q').item(0).value = "SiteKiosk";
	document.getElementsByName('btnK').item(1).value = "Search for SiteKiosk";
}

Just copy and paste the above example script to the file C:\Program Files (x86)\SiteKiosk\SiteKioskNG\assets\customScriptExtension.js and then start SiteKiosk with a basic configuration file. Open google.com. The result of the example DOM manipulation will look like this:

Note that when using the above example you should make sure to take care of local laws, ownership rights, copyright etc. Also note that the above example only works as long as Google does not change the code of their page.