Player Simulator - Basic

This is an introductory guide describes how to use the Player Simulator to test and debug environment for Dise templates. More information and detail can be found in the Player Simulator Advanced 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 the ‘JavaScript Debugger’ extension from the VS Code marketplace.

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

5. Install Node 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 && npm install typescript -g

Run a Sample Project in the Dise Simulator

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

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

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