PROVISIO DevBlog

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.

Customizing the Digital Signage Player of SiteKiosk Windows

Please note that this article refers to a legacy product. We recommend to use the SiteCaster Kiosk CMS instead.

Based on the article "Customize the SiteCaster Player in SiteKiosk" (http://devblog.provisio.com/post/2012/01/17/Control-SiteCaster-Player-in-SiteKiosk.aspx) we will examine another scenario for the customization of the Digital Signage player of SiteKiosk Windows.

The example scenario is from a specific customer project and the requirements are as follows ():
1. Digital signage is running in full screen mode.
2. The screensaver (showing the SiteKiosk Player) is allowed and while the screensaver is active, the campaign stops.
3. When the screensaver is deactivated, the campaign needs to be played from the beginning.

This can be useful when having a video playing in the campaign and you do not want any distraction from what you are showing as the screensaver. The requirements can be realized by adding some script to the Digital Signage player of SiteKiosk Windows.

Scripting preparations:
We start by first creating a backup of the file "Start.html" under
"...\SiteKiosk\Skins\Public\ Startpages\SiteCaster".
Then open the file with an editor. It will look like this:

<html>
<head><meta http-equiv="X-UA-Compatible" content="IE=10" />
	<style>
		*
		{
			margin: 0;
			padding: 0;
			border: 0;
			font-family: sans-serif;
			font-size: 1em;
			font-weight: normal;
			font-style: normal;
			text-decoration: none;
		}
	</style>
</head>
<body scroll=no>
	<object id="Player" classid="clsid:719D9061-22DA-4D25-9BB9-116404372496" style="width: 100%;
		height: 100%; position: absolute; background: transparent;">
	</object>
</body>
</html>


Below the <object> tag (and before the closing </body> tag) we now will insert the required script part.
The first entry is for enabling the SiteKiosk Object Model on that page, needed to get the events for screensaver activated and deactivated.

<script>window.external.InitScriptInterface();</script>

The second entry is for loading a script that exposes the SiteCaster player functionality using an API called RequireJS (further information you will find in the article "Customize the SiteCaster Player in SiteKiosk").

<script src="../../External/require.js"></script>


Let’s come to the decisive part of the script.
First we load the "SiteCaster.js" script for controlling the SiteCaster object and ask it to give us a Player object of SiteCaster.

//load our dependent script (in this case it is only SiteCaster.js)
        require.config({
            baseUrl: "../.."
        });
        require(['Scripts/SiteCaster'],
                function (context, siteCaster) {
 
                    //ask it to give us a Player object of SiteCaster
					var player = siteCaster.Player(); …

Before we continue, we make sure that any scheduled campaign is stopped and check that a broadcast is loaded.

//switch off the scheduled playing of the broadcast in case it is activated
player.setAutoSchedule(false);

//check that the broadcast is loaded
player.broadcastLoaded(function () { …

 

Next we ask for all campaign items of the broadcast.

//get all campaign items of the current broadcast
var campaignItems = player.getCampaignItems();


Then we create a variable containing the ID of the first campaign.

//call the first Campaign of the array in the broadcast by id
var ToPlay = campaignItems[0]['id'];


And execute the command to play:

//play the fist campaign
player.play(ToPlay);


This function using the campaignEnd event makes sure that the campaign plays from the beginning again, when it has reached the end:

//play fist campaign again when campaign ends
player.campaignEnd(function (id) {player.play(ToPlay);});


The above just makes sure that our campaign plays in a loop, just as if using a "usual" scheduled campaign. This preparation is necessary for the following part, where we stop the campaign on screensaver start and play the campaign from the beginning, when the screensaver ends.

This script part will fire when the screensaver activates and is using the "OnScreenSaverBegin Event" of the SiteKiosk Object Model (remember we initialized it above) for getting the event.
Then it just uses player.stop(ToPlay);to stop the campaign playing.

//stop playing content when the screensaver activates
SiteKiosk.ScreenSaver.OnScreenSaverBegin = OnScreenSaverBegin;
	function OnScreenSaverBegin() {
        	player.stop(ToPlay);
}


To start the campaign from the beginning, when the screensaver stops, is very similar. It is using the "OnScreenSaverEnd Event" of the SiteKiosk Object Model and starts playing the campaign from start with player.play(ToPlay);

//start playing content when the screensaver deactivates
SiteKiosk.ScreenSaver.OnScreenSaverEnd = OnScreenSaverEnd;
function OnScreenSaverEnd() {
   player.play(ToPlay);
}


When we put all of this together, our page code now looks like this (download: Start.html (2.35 kb)):

<html>
<head><meta http-equiv="X-UA-Compatible" content="IE=10" />
	<style>
		*
		{
			margin: 0;
			padding: 0;
			border: 0;
			font-family: sans-serif;
			font-size: 1em;
			font-weight: normal;
			font-style: normal;
			text-decoration: none;
		}
	</style>
</head>
<body scroll=no>
	<!--object tag to embed the SiteCasterPlayer into the html page-->
	<object id="Player" classid="clsid:719D9061-22DA-4D25-9BB9-116404372496" style="width: 100%;
		height: 100%; position: absolute; background: transparent;">
	</object>
	
	<!--activate SiteKiosk Oject Model-->
	<script>window.external.InitScriptInterface();</script> 
	
	<!-- load a script that exposes the SiteCaster player functionality using an API called RequireJS (http://requirejs.org)-->
	<script src="../../External/require.js"></script>
    
	
	<script>
	//load our dependent script for RequireJS (in this case it is only SiteCaster.js)
        require.config({
            baseUrl: "../.."
        });
        require(['Scripts/SiteCaster'],
                function (context, siteCaster) {
 
                    //ask it to give us a Player object of SiteCaster
					var player = siteCaster.Player();
					
					//switch off the scheduled playing of the broadcast in case it is activated				
					player.setAutoSchedule(false);

					
					//check that the broadcast is loaded
                    player.broadcastLoaded(function () {
					
						//get all campaign items of the current broadcast									
						var campaignItems = player.getCampaignItems();
					
						//call the first Campaign of the array in the broadcast by id
						var ToPlay = campaignItems[0]['id'];
					
						//play the fist campaign
						player.play(ToPlay);
					
						//play fist campaign again when campaign ends
						player.campaignEnd(function (id) {player.play(ToPlay);});
						
					
						//stop playing content when the screensaver activates
						SiteKiosk.ScreenSaver.OnScreenSaverBegin = OnScreenSaverBegin;
						function OnScreenSaverBegin() {
							player.stop(ToPlay);
						}
					
						//start playing content when the screensaver deactivates
						SiteKiosk.ScreenSaver.OnScreenSaverEnd = OnScreenSaverEnd;
						function OnScreenSaverEnd() {
							player.play(ToPlay);
						}
                    
					});
                });
	</script>
</body>
</html>


Configuring SiteKiosk:
In the SiteKiosk configuration you just need to choose the "Player" at Start Page & Browser-->Digital Signage and deactivate the option "Suppress screensaver while playing".


On the Screensaver page, you configure the idle time before activating the screensaver and the content for the screensaver.
In this scenario I have configured the “SiteKiosk Player” with default settings, but you can of course also add other content to the SiteKiosk Player or even choose Digital Signage to display different content than is displayed in the main Digital Signage player.


Publishing the campaign:
To keep it simple for this example, we just publish a campaign with 3 pictures in a row. Of course you can also add any content of your choice, that can be displayed with the Digital Signage feature of SiteKiosk Windows (e.g. a video that will stop playing when the screensaver is activated and plays from the beginning when the screensaver is deactivated).


In the settings of the broadcast make sure you enable the checkbox "Disabled" because the campaign should only start to play when our script from above will execute the play command.


You can also add a second campaign to that broadcast, e.g. to be played during the screensaver, if you select the Digital Signage option on the Screensaver settings page of the SiteKiosk configuration. Make sure to explicitly set this campaign to be displayed during screensaver only and do not tick the "Disabled" option:


Our broadcast schedule for this example will look like this:

Now we publish the broadcast with our campaign:


After publishing the campaign the Digital Signage content displayed in SiteKiosk will always stop when the screensaver activates and start from the beginning when the screensaver will be deactivated.

Using SiteCaster offline

Please note that this article refers to a legacy product. We recommend to use the SiteCaster Kiosk CMS instead.

One may think that everthing is connected to the internet nowadays: PCs, Tablets, Smartphones and even refrigerators. But there are still terminals that have no internet or other network connection. SiteKiosk can be used on these machines without a problem. You can show your users local HTML pages that don't require an internet connection. With SiteCaster things are a bit different. Creating campaigns, scheduling and publishing them normally requires a SiteRemote account and a license for each machine. This is without a question the preferred way to bring your content to your terminals.

But some scenarios are a bit too simple to justify the use of such a content management and distribution system. Here I will describe how you can use SiteCaster to play your content, without requiring SiteRemote. 

I am assuming here that you use SiteKiosk 8.1 and want to show a video in the SiteCaster area (either in split screen or fullscreen mode) . The first thing you have to do is switch SiteCaster to offlline mode so that it doesn't wait for a broadcast to be distributed but instead play a local broadcast. In order to do that you need to locate the SiteCaster configuration file named "SiteCaster.config". In Windows 7 and Windows Vista you can find it here: C:\ProgramData\PROVISIO\SiteCaster\. In Windows XP you have to look in this location: C:\Documents and Settings\<your account name>\Application Data\PROVISIO\SiteCaster. Notice that from now on I will mention every path as it appears under Windows 7 with default settings. The paths could be different, if for example your system drive is not c: or when using Windows XP. 

Open the file in Notepad (or your preferred text editor) and make sure the following line appears inside the section SiteCasterPlayerConfigurationData:

<UseOfflineBroadcasts>true</UseOfflineBroadcasts>

The important thing is that the value inside the tag is "true", after a fresh install of SiteKiosk it is set to "false" .

Save the file and the next time SiteCaster starts, it will look in a special location for offlline broadcast data. This location is "C:\Users\Public\Documents\SiteCaster\OfflineBroadcastData" (again for Windows 7 and Vista). You have to create the folders in this path if they are not already present. After you've done this, create another folder, inside OfflineBroadcastData, named ".SiteCasterBroadcasts". This is a bit tricky in Windows Explorer, because it normally doesn't let you create a folder with a name beginning with a dot. But naming it ".SiteCasterBroadcasts.", with an additional dot at the end (that will be automatically removed), will do the trick. Ask your local Microsoft consultant for an explanation why this is necessary ;)

In this folder you have to save the XML file that is attached to this post. It describes the structure of the broadcast that should be played when in offline mode. After you've saved it in this folder, open the XML file in a text editor. You need to find and change the file path for the video that should play:

<MediaFile>
...
<Path>/nature.wmv</Path>
...
</MediaFile>

Replace "nature.wmv" with the file name of your video. This file should then be placed (or copied) into the folder "C:\Users\Public\Documents\SiteCaster\OfflineBroadcastData". There is more to do, you have to set the duration of the video. Find the first occurence of this section:

<EndCondition>
...
<OffsetInSeconds>0</OffsetInSeconds>
...
</EndCondition>

 

 Change the "0" to the duration of your video in seconds, for example "120", if the duration is 2 minutes.

Two more changes and you should be ready to go. Find these two sections and change in each one the width and height to the dimensions of your video:

 

<Section>
	...
	<Width>800</Width>
	<Height>600</Height>
</Section>

  
<Layout>
	...
	<Width>800</Width>
	<Height>600</Height>
</Layout>

 

Save the XML file and you should be done. In the configuration tool you have to enable SiteCaster, either as a split screen setting or fullscreen. The next time you start SiteKiosk, the video should appear in the SiteCaster area.

You can do more than just play a video over and over again. If you want to show a picture, there is just one thing you have to change in comparison to the video and that is <ItemKind>Video</ItemKind> to <ItemKind>Picture</ItemKind> (just search for it, it should only appear once). You can even play files sequentially and on differents channels, but this requires a deeper understanding of the XML format used here.

In case you want to do something more complex, it might be a better idea to use the  SiteCaster online editor in SiteRemote, publish the broadcast created there to a client machine of your choice and grab all the files from there. All necessary files are normally located in the folder right beneath C:\Users\Public\Documents\SiteRemote\Sync\. The name of this folder is either "{1D3F97EE-F5E6-4E81-ABF8-F7754638833E}", if SiteCaster has already been playing the broadcast, or it is the name of the broadcast plus a short postfix starting with "_", for example "SiteCasterOfflineBroadcast_123". Anyway there should be only one folder there normally, so the decision should be easy ;) You should copy the content of this folder (not the folder itself!) to "C:\Users\Public\Documents\SiteCaster\OfflineBroadcastData". Remember to edit the file SiteCaster.config to set the SiteCaster offline mode as described above.

SiteCasterSingleVideoOfflineBroadcast.xml (5.72 kb)

Customize the SiteCaster Player in SiteKiosk

Please note that this article refers to a legacy product. We recommend to use the SiteCaster Kiosk CMS instead.

SiteKiosk (version 8.0 and higher) offers the possibilty to embed a SiteCaster player into an HTML page. You can then use this page as, for instance, a start page in SiteKiosk. If you only want to play your Digital Signage campaigns as scheduled in full screen, you can simply choose SiteCaster to play full screen in the SiteKiosk configuration tool under Start Page & Browser -> Digital Signage and you are ready to go.

If you want more control over the player, for example play certain campaigns in reaction to an event (like a button click), this is also possible, but requires a small portion of JavaScript in your page. I will describe here as an example how you can build a SiteCaster start page to play a certain campaign whenever the user clicks a button on the page.

First let's have a look at the basic HTML structure of a SiteCaster full screen start page. Please create a file named "SiteCasterCustom.html" and save it to the folder {Program Files}/SiteKiosk/Skins/public/Startpages/SiteCaster/ (the path to {Program File} depends on your installation of Windows). In the SiteKiosk configuration tool, set this file as the start page for SiteKiosk then.

<!DOCTYPE html>
<html>
<head>
</head>
<body scroll=no style="overflow:hidden; margin: 0; border: 0;">
	<object id="player" classid="clsid:719D9061-22DA-4D25-9BB9-116404372496" style="width: 100%;
		height: 100%; background: transparent;">
	</object>
</body>
</html>

This is just a standard HTML page with one object tag in the body (which has some styling to get rid of margins and border). This object tag embeds the SiteCasterPlayer into the page, so this is essential. In order to make some room for our button, we set the height of the object tag to "700px", so on a 720p screen (1280x720) we have 20 pixels left for the button. When we've added the button, the page looks like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body scroll=no style="overflow:hidden; margin: 0; border: 0;">
	<object id="player" classid="clsid:719D9061-22DA-4D25-9BB9-116404372496" style="width: 100%;
		height: 700px; background: transparent;">
	</object>
	<button id=playButton>Play it!</button>
</body>
</html>

This is our markup for this example, now we add a script to achieve the event handling. First we need to load a script that exposes the SiteCaster player functionality in a convenient way. This script in turn requires one other script that should be included before with a script tag.

<!DOCTYPE html>
<html>
...
	<button id="playButton">Play it!</button>
	<script src="../../External/require.js"></script>
	<script>
		require.config({
			baseUrl: "../.."
		});
		require(['Scripts/SiteCaster'],
				function (context, siteCaster) {

					var player = siteCaster.Player();

					player.broadcastLoaded(function () {
						
					});
				});
	</script>
</body>
</html>

At first glance this might seem a bit overly complex, but it is actually quite simple. The SiteCaster script (which has the file name SiteCaster.js) is using an API called RequireJS (http://requirejs.org) to load dependent scripts, so require.js has to be loaded first (this is the first script tag). After that the RequireJS functionality can be used.

RequireJS first needs a base URL to properly resolve the script paths, so we set it by using the require.config function. This base URL must point to the directory where the two folders "Scripts" and "External" reside. Going from the folder where the standard SiteCaster start page is located, this is two levels up (../..). 

Next we can call the require function itself to load our dependent scripts (in this case it is only SiteCaster.js). It excepts as a first argument an array of script paths that should be loaded. Going from the set base URL, the path to SiteCaster.js is "Scripts/SiteCaster". The file extension ".js" must be omitted, otherwise RequireJS will interpret the name differently.

The second argument is a function that will be called when all dependent script have been loaded. The first parameter to this function is a context object which we don't need here. The second is the siteCaster object that we will use.

Now that we have the SiteCaster object, we can ask it to give us a Player object. Since there can be more than one player on the same page, the ID of a specific object tag can be provided as an argument, but in this case we have only one and we let the SiteCaster script find it automatically. One last thing is missing before we can begin to use the player functionality: we have to make sure the player has loaded the active broadcast. So we set a function that is called when this happens with broadcastLoaded.

Inside this last function we now have full control over the SiteCaster player. In this example we want to play a different campaign, whenever the user clicks a button, so we set the onClick function of the button to a new function. Inside this onClick handler function, we need to find a certain campaign of the current broadcast and call play with it. So we call getCampaignItems() to get all campaign items of the currently playing broadcast. We assume here that the broadcast contains a campaign item with the name "ClickCampaign", which we want to play now. 

 

require.config({
			baseUrl: "../.."
		});
		require(['Scripts/SiteCaster'],
				function (context, siteCaster) {

					var player = siteCaster.Player();

					player.broadcastLoaded(function () {
						playButton.onclick = function () {
							var campaignItems = player.getCampaignItems();
							var i = 0;
							for (; i < campaignItems.length; ++i) {
								if (campaignItems[i].Name == "ClickCampaign") {
									player.play(campaignItems[i]);
								}
							}
						}
					});
				});

As you can see, we just loop through all campaign items until we find the one with the correct name and play it. The item will play once and after that the normal schedule will take over again. If you want to play the Campaign multiple times in a row, you have to play it again, when it ends. The code for that would like like this (only the onclick handler):

playButton.onclick = function () {
	var campaignItems = player.getCampaignItems(),
		i = 0,
		playCount = 0,
		clickCampaignItem;

	for (; i < campaignItems.length; ++i) {
		if (campaignItems[i].Name == "ClickCampaign") {
			clickCampaignItem = campaignItems[i];

			player.campaignEnd(function (id) {
				if (id === clickCampaignItem.Id && playCount < 4) {
					player.play(clickCampaignItem);
					playCount += 1;
				}
				else
					player.setAutoSchedule(true);
			});

			player.setAutoSchedule(false);
			player.play(clickCampaignItem);
		}
	}
};

Note that we call player.setAutoSchedule(false) to switch off the scheduled playing of the broadcast. This way we get complete control and scheduled (not disabled) campaigns won't kick in in between. After our click campaign has played four times we call player.setAutoSchedule(true) and campaigns are played according to the set schedule again (the ones that are not disabled). 

The complete HTML file containing the example script is attached to this entry, so if you have SiteKiosk 8 installed and want to try it out, just save it into the folder  {Program Files}\SiteKiosk\Skins\Public\Startpages\SiteCaster and set this as a start page in the SiteKiosk configuration tool. Make sure you create at least two campaigns in your broadcast and disable one of them (the one you want to play when the button is clicked) under "Schedule" in the SiteCaster tab in SiteRemote.

 

SiteCasterCustom.html (1.36 kb)