Use the Player Simulator

This is an introductory guide describes how to use the Player Simulator as a test and debug environment for Dise templates. More information and detail can be found in the Player Simulator guide.

The Player Simulator is a light-weight implementation of the Dise Player API, suitable for running and debugging templates in a stand-alone environment, i.e. outside of the normal CMS/Player system. The dynamic data which would normally come from the CMS needs to be provided in local “mock” files.

Access the Player Simulator directly or use the below steps to set up a developer environment for Dise One templates:

Prerequisites

1. Install Visual Studio Code - https://code.visualstudio.com/.

2. Install the ‘Live Server’ extension from the VS Code marketplace.

3. Install git - https://git-scm.com/downloads.

4. Install Node.js or ensure the latest version is installed - https://nodejs.org/en.

Clone the Dise Repository and Submodules

1. Open a terminal.

2. Run git clone --recursive https://bitbucket.org/diseinc/sampletemplates.git

3. Navigate to the newly created ‘sampletemplates’ folder using cd sampletemplates

4. Install TypeScript:

   1. Open a terminal.

   2. Run npm install

   3. Run npm install typescript -g

Run a Sample Project in the Player Simulator

1. Select the ‘index.html’ file in the root of the ‘samplestemplates’ folder.

2. Locate const template = templates.Samples.<sampleTemplate> (usually found around line 40).

3. The <sampleTemplate> should be replaced with the sample template to be run in the Dise Simulator.

   1. The name of all available sample templates can be found just above const template = templates.Samples.<sampleTemplate> in the ‘index.html’.

4. Navigate to the sample template folder to be run in the Dise Simulator:

   1. E.g. cd .\Samples\Info\

5. Compile the template:

   1. Run tsc -p . -w

6. Start the Player Simulator by right-clicking on the ‘index.html’ and selecting ‘Open with Live Server’.