PROVISIO DevBlog

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.

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

        

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.

 

 

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.

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.

Using the Expert Mode of the SiteCaster Editor

The SiteCaster Editor comes with an expert mode, that allows you to edit settings beyond their default value range. This gives you the opportunity to customize your projects to match very specific requirements. Feel free to experiment with this mode, but be aware that changing values beyond their default range is outside of the scope of our free support.

To enter the expert mode open a project to view the project page. Now click the address bar of your browser and append &expert to the URL. Make sure you place it at the very end of the URL and then press enter to open the expert mode.

Next select the element you want to customize. In our example we want to adjust the font size and the font family of the Time/Date element. To do that, click on the new advanced edit button you will see in the toolbar after entering the expert mode.

After clicking the button you will see a list of all properties of the selected element in the inspector. In the list you will find the dateFontFamily and dateFontSize properties. Use the drop-down of the dateFontFamily property to select String and type in the font family of your liking into the text field. For the dateFontSize property select Number from the dropdown and then type in the pixel value you want to choose. Click on the Save button after you are done to apply the changed values.

To give you an idea of the advanced possibilities you get from choosing the expert mode here is a view of the default options you have for the Time/Date element.

 As you can see the default element will cover the needs of most users but when using the expert mode you can change the properties to whatever you like.

Using the SiteKiosk Object Model in SiteCaster

The PROVISIO Developer Blog has many examples of how to use the SiteKiosk Object Model in the browsers of SiteKiosk Windows and SiteKiosk Android or as an external script in SiteKiosk Windows. This time we will look at a short example that shows you how to use the Object Model in SiteCaster as well.

Because SiteCaster is Chrome-based, it uses the new SiteKiosk Object Model for Chrome. This Object Model is still in the making, the most current state of the preliminary documentation can be obtained through our support department. Interested developers can just send us a short email.

The example code is for SiteKiosk Windows and will show you how you can start an external application from a SiteCaster element.

The first step is to create an html page that will open an application by using the SiteKiosk Object Model. The code for the simple test web page looks like this:

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<script>
    //method to initialize the SK Object Model for SiteKiosk Windows (Chrome) and SiteKiosk Android
    (new Function(_siteKiosk.getSiteKioskObjectModelCode()))();
</script>
</head>
    <body style="margin:0px;text-align:center;background-color:#FFD932;">
        <input id="id_test" type="button" value="Test" style="margin-top:50px;" />
    </body>
    <script type="text/javascript">
        siteKiosk.ready(function (){
             document.getElementById("id_test").onclick = function () {dotest();};
             
            function dotest(){
                //will only work in SiteKiosk Windows and open the specified application
				siteKiosk.system.windows.skLegacy.externalApps.run("C:\\Program Files (x86)\\Notepad++\\notepad++.exe", false); 
            }
        }());
    </script>
</html>

You need to initialize the SiteKiosk Object Model by running _siteKiosk.getSiteKioskObjectModelCode(). The method siteKiosk.system.windows.skLegacy.externalApps.run(path,checkifalreadyrunning) will start the specified application. The first parameter is a string containing the path (and optional start parameters) to the local application on the machine SiteCaster is running on. The second parameter is a boolean value that specifies whether SiteKiosk should check if the application is alreay running or start additional instances. The page can either be stored locally on the machine where SiteCaster is running or on a web server. Either way, you need to make sure that the URL or path of the file has been added in the SiteCaster configuration of SiteKiosk as an URL with script permission.

The second step is to add the page to SiteCaster. Go to your SiteCaster team and either edit an existing project or create a new one. In this example I use the Start Screen template and add a new Webpage element to the left of the existing center elements.

Step three is publishing the project to the assigned machines where you can then push a button to start a local Windows application from SiteCaster.

Note that depending on the nature of the started application you might want to consider making additional configuration and/or script changes to handle closing the application or allowing/blocking certain dialogs of the application.