PROVISIO DevBlog

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.

Starting an External Application from a SiteCaster Project

In case you want to start an external application from your SiteCaster project, you need to switch to the SiteCaster 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 pen button in the menu bar. Now create an image (note that this will work with most other elements as well) on your project page, select the image and press the expert mode pen button. You can resize the inspector on the right via drag and drop to access the following lines easier.

Go to additionalLink and select JSON object in the dropdown menu. Then replace “image” with “script” in the text field.

Next go to linkActive to select Boolean from the dropdown menu and check the checkbox.

Finally go to scriptSource, select String and add the following line for SiteKiosk Windows with the path to the desired application
siteKiosk.system.windows.skLegacy.externalApps.run("PathToYourApplication", false);
to the scriptSource text field, e.g.
siteKiosk.system.windows.skLegacy.externalApps.run("C:\\Program Files\\Notepad++\\notepad++.exe", false);

Please note that from SiteCaster 1.5 the command is much shorter: siteKiosk.system.run("C:\\Program Files\\Notepad++\\notepad++.exe", false);
In both cases the second parameter of the run function is a boolean value that needs to be false if an existing instance of the application should be focused instead of opening a new one and true if an additional instance should be opened.

Should the scriptSource property not be available, scroll down to Add property and add it there by filling out the fields and hitting the plus button, e.g.:

It is strongly recommended to also add your external application in the SiteKiosk configuration under Applications so that SiteKiosk can close the application when the screensaver is activated.

Once the project is published to the client, a click on the element will open the application.

The above is the notation to make it work under SiteKiosk Windows. For SiteKiosk Android it is slightly different. In order to start the application you need to know its guid name, e.g. com.android.calculator2. Either you know this information for the app you would like to start or you can use the SiteKiosk logs to find this information. To do so, just add the desired app in the SiteKiosk configuration under Application -> Android App or Application -> Multiple Applications. Next start SiteKiosk and make sure the app has started at least once. Now close SiteKiosk and open the SiteKiosk log file in the ..\SiteKiosk\Logs folder. Look for an entry with the text System app launched, e.g. System app launched: com.android.calculator2. In our example the guid name we are looking for is com.android.calculator2. This information is required to start that specific app from SiteCaster.

With this information gathered we can compose the line that needs to be added as the scriptSource in SiteCaster to look like this:
siteKiosk.system.apps.getByGuid("com.android.calculator2").launch("", "systemApp");

Please note that you need to add the app in the SiteKiosk Android configuration under Security -> Allow assigned apps, if it is not addd there it will be blocked.

How to Rearrange the Layout of the SiteKiosk Chrome Browser

Here is a quick way to completely move around the main parts of the SiteKiosk Chrome browser. This for example can be used to show the tool bar not at the top but at the bottom.

Open the file C:\Users\Public\SiteKiosk\data\content\local\files\projects\d97aa96b962543fcb39625a3f8e8d8fb\000000000000000000000000\content.json with an editor, e.g. Notepad. And look for the lines

"templates": {
	"main": {

A few lines below you will see the start of the elements segment, that by default lists the element with the name topContainer first.

"elements": [
	{
		"type": "content-container-linear",
		"name": "topContainer",
		...
		"_editor_propertiesToEditRestrictedUser": {}
	},
	{
	...

There are 6 elements that can be separated by their names. In an unedited content.json file the order is topContainer (this element represents the tool bar), tabBarContainer (this element represents the tab bar), loadProgress (this element represents the progress bar), tabPageArea (this element represents the area where web pages are rendered), surfTimeContainer (this element is for internal use only) and popupWindow (this element represents the popups used for the zoom and language selections of the tool bar).

The 4 elements topContainer, tabBarContainer, loadProgress and tabPageArea are those that can be rearranged to change the overall look of the browser. The other two elements can be left untouched.

All element definitions are in the same order in the JSON document as they appear on the screen if you start SiteKiosk. To reposition an element you simply have to move its complete definition from opening bracket ({) to closing bracket (}) to the new place you would like the element to have on the screen.

If the elements are rearranged in the order tabPageArea, loadProgress, tabBarContainer, topContainer and the content.json file is saved, you will see this user interface when you start SiteKiosk:

Note that depending on how you reposition the elements and the SiteKiosk configuration you are using, there may be minor side effects, e.g. overlapping parts. Also note that the task bar of the SiteKiosk Chrome browser is not part of the content.json file, it can be found in this folder instead C:\Program Files (x86)\SiteKiosk\Skins\Chrome_NG_Skin.

Different Methods for Showing PDF Files with SiteCaster

The default method for showing PDF files with SiteCaster is the "linked document (pop-up)" method. This is available as a basic property of standard elements, e.g. an image. Once you click the element a closable pop-up opens, that shows the PDF. Note that on Android devices a PDF file will be opened full screen and not as a pop-up.

For example you could create a new image element for a content layer.

Then you would edit the linked document (pop-up) property and assign a PDF file.

Another method is to use the webpage element to display a PDF file. The PDF file can be located on the Internet or locally on the machine.

If the file is stored locally and you are using the file:// protocol, it is recommended to put the file into the html subfolder of your SiteKiosk installation folder, e.g. C:\Program Files (x86)\SiteKiosk\Html. Otherwise make sure that the location is accessible by changing the SiteKiosk surfing area settings.

When using the webpage element you can set the size properties to show the PDF full screen (again, note that the linked element option will already have this effect on Android devices). You can also use the parameters specified by Adobe to control the display of the PDF element. Just attach them to the URL as described in the Adobe document.

If you are using the webpage element, please keep in mind, that the PDF files will not be included when the content is distributed to the clients. The files must exist at the specified location for the client to be able to show them. For local files one option is to use the file synchronization of SiteRemote. The disadvantage to that is that you have to use both SiteCaster and file synchronization. The other option for local files is to use a little 4-step trick that enables you to only use SiteCaster to distribute the PDF files, even though you are using the webpage element.

1. Create an element with a linked PDF document as usual (see above).

2. Use the preview of the SiteCaster CMS editor, to note which internal file name is used in SiteCaster for the pdf. With Firefox use the download button at the top bar to get the download dialog with the file name, with Chrome just do a right mouse click on the PDF Display and then choose "Save as…".



3. Go back to the SiteCaster CMS Editor and set the element with the linked document to "Do not display (only visible in editor)" in the "Display conditions" settings of that element. This will essentially hide the original PDF file.


4. Now create a webpage element and add the following URL with the internal file name of the PDF identified in step 2:
http://localhost:8889/files/[internalfilename].pdf (e.g. http://localhost:8889/files/5c38667034427b1417f3229f_5c38667034427b1417f322a0.pdf)

That's it, now the PDF is distributed as SiteCaster content to the client and you can use the webpage element features like making the file full screen and using parameters to control how the PDF file is displayed.

How to Encrypt SiteRemote Server to SQL Server Connections

If you want to encrypt the connection between your SiteRemote Server and the Microsoft SQL Server hosting the database for SiteRemote, especially when using a remote Microsoft SQL Server, you can just enable forced encryption in the settings of your Microsoft SQL Server. This enables basic encryption between the two servers. To learn how you can enable encryption for your Microsoft SQL Server please refer to the documentation of the SQL Server provided by Microsoft.

The above enables encryption but does not protect from man-in-the-middle attacks on the connection. If you need this additional layer of security, configure your Microsoft SQL Server to use a certificate and make sure the machine running the SiteRemote Server trusts the certificate. Please refer to the SQL Server documentation provided by Microsoft for the SQL Server version you are using to configure this setup. Once this is done, you need to change the connection string used by SiteRemote to connect to the SQL Server. Note that this change can only be done after SiteRemote has been installed.

Open the file ..\PROVISIO\SiteRemote\Config\SiteRemoteServer.config from your SiteRemote installation folder with an editor and look for lines similar to this example:

<ConnectionStrings>
	<Add Name="default" Encrypted="true">
		<ConnectionString>Data Source=sql.server;Initial Catalog=SiteRemoteBackEndServer;User ID=sa;Password=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</ConnectionString>
	</Add>
</ConnectionStrings>

You need to add encrypt=true and trustServerCertificate=false (true would not validate the certificate) to the connection string. The above example would look like this with the additional settings added:

<ConnectionStrings>
	<Add Name="default" Encrypted="true">
		<ConnectionString>Data Source=sql.server;encrypt=true;trustServerCertificate=false;Initial Catalog=SiteRemoteBackEndServer;User ID=sa;Password=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</ConnectionString>
	</Add>
</ConnectionStrings>

Limiting the Color Mode for VNC Connections

Please note that the following text is an updated version of this older post. The update applies to SiteRemote 5.1 and above (including version 6.1, which is the current version at the time of writing this post).

SiteRemote uses the auto mode to set the colors for the VNC session. This usually provides the best experience. You may like or need to limit the color mode to 256 colors only when establishing the connection, mainly because of poor connection speed.

To switch from auto mode to 256 colors you need to edit a file on the PC you are establishing the connection from. On this PC you have installed the UVNC client for SiteRemote, it is usually located in the path C:\Program Files (x86)\PROVISIO\VncViewer\. There you can find the file options.vnc. Please open the file with an editor like Notepad. You will see that there is not much in it:

[connection]
index=

These lines need to be added to the file:

[options]
autoDetect=0
QuickOption=0

The complete file should now look like this:

[connection]
index=
[options]
autoDetect=0
QuickOption=0

Save the file under its original name. Next you need to right-click the file, choose Options -> Security and give the default Windows Users group read and write access to the file.

When you now start your next VNC session it will default to just 256 colors, therefore speeding up the view on a slow Internet connection.

Note that independent from this change you can always edit the options of a running VNC connection by clicking the Options button in the upper toolbar of the VNC window. This allows you to make one-time changes to the current connection.