PROVISIO DevBlog

Using HTML Tags to Customize Text Fields of the SiteKiosk Windows Start Screen

When using the Start Screen of SiteKiosk Windows, you can use HTML tags in text fields to customize the appearance. This allows you to create individual projects beyond what is already possible with the standard options of the Start Screen Editor.

To give an example of the possibilities, you can open the SiteKiosk Configuration tool, go to Start Page & Browser and select the Start Screen. From there, click on Customize, then on Start Screen Editor and open the editor. For this example select Template 3, which is empty by default.

Let's add a new element of the Web link type. Note that you can do this with any element that has text fields, this is usually the caption for the element.

After the Web link element has been added, edit it by opening the properties. Go to Caption and use the Text property at the top of the page. Note that on this page you can already edit the font, size and color of the complete text. But this example wants to show that you can override all of this with HTML tags. You can give each character of the default text, which is Web, a different look and even a function.

In this example change the default Text size to 50 and write this into the Text field:

<b>W</b><span style="color: yellow;font-family:cursive;font-size:22px;">e</span><span onclick="alert('Show this alert when clicking on the b character!');" style="color:red;font-size:34px;">b</span>

This will make the W bold while it keeps the defined general size, font type and color, it will make the e yellow while giving it a size of 22 pixels and assign the cursive font to it, the b will show in red with a size of 34 pixels and display an alert window when being clicked. This just demonstrates a few of the options you have, because the text field allows HTML tags to be used.

When you start SiteKiosk, the result will look like this, with an open alert window after clicking on the b character:

Create a new project template from an existing project

It is possible to make existing SiteCaster projects in SiteCaster permanently available again as templates. This entry describes how to create a template from an existing project if you have an own server.

First you have to export the corresponding project:

1. Open the project in the editor and copy the project ID from the URL.

for example:

https://www.siteremote.net/sitecastercms/editor/assets/index.html#app-editor?projectId=5e7b5098415fcafc08348a01&variantId=5e7b5098415fcafc08348a03

2. Insert the project ID in the following line.

3. https://www.siteremote.net/sitecastercms/api/projects/5e7b5098415fcafc08348a01/export

4. Copy the URL

5. Open a new tab and paste the created export address – press Enter

6. Press Enter to download the zip file 

In the second part you have to modify the project folder and transfer it to a template folder:

1. Unpack the zip file.

2. Rename the content.json file located in the folder to content.original.json

3. Go to the following directory on the server:

C:\Program Files (x86)\PROVISIO\SiteRemote\Web.SiteCaster\server\projects\projectTemplates

4. Copy one of the existing template folders and paste it again.

5. Rename the folder (e.g. name of the template).

6. Replace the image file in the folder with an image file of your template, whereby the name preview must be retained and the file type has to be JPG.

7. Open the projectTemplate.manifest file in the folder with a text editor (e.g. Notepad)

8. Change the name of the template "name": "${string:StartScreenTemplate.name}", e.g. to "name": "TEST-Template”

9. Change the Project ID "projectID": "311f9e4eb2427f5ec02e32f1" in the file to create a unique new ID e.g. "projectID": "777f9e4eb2427f5ec02e32f1

10. Open the folder: 00000000000000000000

11. Delete the content of the folder

12. Add the complete content of the zip folder with the content.original.json file into the 00000000000000000000000000 folder

13. Open the SiteCaster Editor in a browser and click on the Create New Project button -> The new project template is now available

If you want to offer your template on your server in a team-specific manner, you must use the following path for the procedure described above:

C:\Program Files (x86)\SiteRemote\Common\Teams\teamStorage\<TeamId>\projectTemplates

The team ID specified in the path is individual per team and can be found on the server administration page in the tab teams.

Starting the SiteKiosk File Manager from a Custom Button in SiteKiosk Windows Chrome Browser

As a default option the SiteKiosk file manager is only available with IE-based skins. There are different ways to also start the file manager when using the Chrome browser of SiteKiosk Windows. How to start the SiteKiosk file manager when using the Chrome Browser and the Start Screen has been described here. Now we want to take a look at how to start the file manager using the custom button option.

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 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".

Then create an HTML file (e.g. OpenFileManager.html) with the following content and save it in the folder "...\SiteKiosk\Html":

<html>
<head>
<script>
    (new Function(_siteKiosk.getSiteKioskObjectModelCode()))();
    _siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", "SiteKiosk.ScriptDispatch.openFileManager();");            
     window.close();
</script>
</head>       
<body>
    <!-- Body is empty as this window is only used to open the File Manager //-->
</body>
</html>

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

Now add a button in the Chrome Browser Skin under "Start Page & Browser-->Customize-->Browser Toolbar-->Individual Buttons-->Set individual weblink or program" which calls the above HTML file.

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.

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

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.