Docs Image

[EUC Score Toolset Documentation Start Page] [Side-by-Side Player Sample Results]

Side-by-Side Player

The Side-by-Side Player is an HTML5 application that runs inside a browser, such as Google Chrome or Microsoft Edge. The SxS Player client area is divided into two foreground media output tiles at the top (each including a title bar), a numerical data visualization area in the center and a control and status bar at the bottom.

After the Installation of the EUC Score base installer package, the Side-by-Side Player templates, components, and libraries are located in the EUCScore\SxSPlayer subfolder. To build your own customized side-by-side visualizations, create new .html and .js files using the examples as a starting point. For the build automation of complete sets of run visualizations, please refer to the subchapter below.

The top left media tile always includes an MP4 video (= "pacemaker" video). The top right media tile includes either another video or animated text output using .ref file data. The title bar at the top of each media tile includes one line of description text. The individual media tiles are surrounded by a border, each in a different color used for color-coding the data visualization. Important: The video aspect ratio must always be maintained.

The numerical data visualization area is located below the media tiles. It shows eight graphs with timely correlated and animated telemetry data collected on the host side. Each graph shows a title, axis labels and either one or two progressive lines. One or two CSV files created by EUC Score Avatar or any other performance data collector act as the data source for the numerical data. This data can be imported and embedded into the .js file.

The control and status bar at the bottom includes video controls (play, pause and progress bar) and status information, such as elapsed time and total time. On the right side is a URL that includes the link to a help page.

SxS Player

Side-by-Side Visualization - Build Automation

Each test run visualization in the SxS Player is encoded as a pair of .html and .js files. To avoid manual editing, there is a set of build automation PowerShell scripts for an entire test sequence. To see syntax details, use the Get-Help comdlet.

  1. Create-SxSIniSingle.ps1: Create .ini file for Single View Mode
  2. Create-SxSCsv8Single.ps1: Extract .csv data with eight columns
  3. Create-SxSHtmlSingle.ps1: Create .html and .js files for Single View Mode
  4. Create-SxSIniDouble.ps1: Create .ini file for Side-by-Side View Mode (= Double)
  5. Create-SxSHtmlDouble.ps1: Create .html and .js files for Side-by-Side View Mode (= Double)

These scripts were used to create the Side-by-Side Player Sample Results

Prerequisites

EUCScore\SxSPlayer is the root folder. It must include a _libs subfolder with Java Script libraries (bootstrap, chart, jquery) and CSS files. Another prerequisite is a _templates folder with .html and .js templates used by PowerShell scripts located in the SxSPlayer root folder.

Each test sequence is represented by a dedicated data folder in the SxSPlayer root folder, with a descriptive name. The raw data of each test run must be located in a separate subfolder with a name that starts with SL1, for example SL1-DominoOpenGL. In each test run subfolder must be the following file types:

  • One (and only one) MP4 video file created by the screen recorder, for example SL1-DominoOpenGL-2022-07-20 09-46-42.mp4.
  • The activity file with the .ref extension created by the the simulated workload. The file name MUST include the test run subfolder name, for example NUC2_Benny_SL1-DominoOpenGL-2022-07-20-09-46-25.ref.
  • The CSV telemetry file created by the Avatar Telemetry Collector. The file name MUST start with "Telemetry" and it MUST include the test run subfolder name, for example Telemetry_NUC2_Benny_SL1-DominoOpenGL_2022-07-20-09-47-09.csv.

If any of the prerequisites is not met, the PowerShell scripts may fail and throw error messages.

STEP 1: Create .ini file for Single View Mode

In SXS Player Single View Mode, the top left tile contains a test run screen video and the top right tile shows animated text representing timely correlated user activities and session runtime details. The numerical data visualization area shows animated telemetry data collected on the host side.

Run the Create-SxSIniSingle script that creates the .ini file in the test sequence data folder. In the example below, the data folder is named TestRun1 und the .ini file is named TestRun1.ini.

  • .\Create-SxSIniSingle.ps1 -DataFolder .\TestRun1 -IniFile TestRun1.ini

NOTE: Check out the syntax of the script with Get-Help .\Create-SxSIniSingle.ps1

The resulting .ini file looks like this:

[Templates]
Theme=SingleVideoRef-Single8Charts
SourceFolderTemplates=_templates
TemplateHTML1VideoRef8Charts=Template-SingleVideoRef-Single8Charts.html
TemplateHTML2Videos8Charts=Template-DoubleVideo-Double8Charts.html
TemplateJS1VideoRef8Charts=DataConfig-SingleVideoRef-Single8Charts.js
TemplateJS2Videos8Charts=DataConfig-DoubleVideo-Double8Charts.js
SourceFolderLibs=_libs

[Common]
RootFolder=C:\EUCScore\SxSPlayer
TargetFolder=TestRun1
Date=2022-07-01
CountDownInSec=3
LeftTitle=EDIT
LeftDescription=EDIT
LeftRef=true
RightTitle=EDIT
RightDescription=EDIT
RightRef=true

[Telemetry8Std]
Prefix=STD
Header0=TimeStamp|1000
Header1=CPU|%
Header2=Memory|MBytes
Header3=Network Received|KBytes/sec
Header3=Network Received|KBytes/sec
Header4=Network Sent|KBytes/sec
Header5=CPU Queue Length
Header6=Disk Reads|Bytes/sec
Header7=Disk Writes|Bytes/sec
Header8=RDP Session CPU|%

[Telemetry8GPU]
Prefix=GPU
Header0=TimeStamp|1000
Header1=CPU|%
Header2=Memory|MBytes
Header3=Network Received|KBytes/sec
Header4=Network Sent|KBytes/sec
Header5=GPU 3D|%
Header6=GPU Video Decode|%
Header7=GPU Video Processing|%
Header8=GPU Memory|MBytes

[SxS1]
Name=SL1-BSPBlendingDX11
LengthInSec=45
VideoFile=SL1-BSPBlendingDX11-2022-05-20 09-46-42.mp4
TelemetryFile=Telemetry_NUC2_Benny_SL1-BSPBlendingDX11_2022-05-20-09-47-09.csv
ActivityFile=NUC2_Benny_SL1-BSPBlendingDX11-2022-05-20-09-46-25.ref

...

 

STEP 2: Edit the Single View .ini file

Open the .ini file in Notepad and edit the keys with the "EDIT" value in the [Common] section. Add adequate title and description strings. LeftTitel and RightTitel is what you see in the title bar above the top quadrants. LeftDescription and RightDescription is what you see when you click on the icon in the title bar.

STEP 3: Extract .csv data with eight columns

The Create-SxSCsv8Single script uses the keys in one of the the [Telemetry] sections to create new .csv files in each SL1-* subfolder, adding the prefix STD or GPU to the file names. These new .csv files only include the selected eight columns.

In the [Telemetry] sections, the value of Header0 is always TimeStamp|1000. The values of Header1 through Header8 must match the EXACT string of a column header in the .csv files. Please check if the column headers configured in [Telemetry8Std] and [Telemetry8GPU] really exist, otherwise the script will break when trying to create STD and GPU .csv files.

  • .\Create-SxSCsv8Single.ps1 -IniPath .\TestRun1\TestRun1.ini -Telemetry Telemetry8Std
  • .\Create-SxSCsv8Single.ps1 -IniPath .\TestRun1\TestRun1.ini -Telemetry Telemetry8GPU

After running these scripts successfully, you'll find new STD-*.csv and GPU-*.csv files in each SL1-* subfolder.

STEP 4: Create .html and .js files for Single View Mode

The Create-SxSHtmlSingle script uses the templates, the .ref files and the new .csv files to create a pair of .html and .js files for each test run in a SL1-* subfolder.

  • .\Create-SxSHtmlSingle.ps1 -IniPath .\TestRun1\TestRun1.ini -Telemetry Telemetry8Std
  • .\Create-SxSHtmlSingle.ps1 -IniPath .\TestRun1\TestRun1.ini -Telemetry Telemetry8GPU

In addition, the script creates a LinkList-STD-Foldername.html or LinkList-GPU-Foldername.html file in the SxSPlayer root folder.

STEP 5: Create .ini file for Side-by-Side View Mode (= Double)

In Side-by-Side View Mode, both top tiles include test run screen videos with a yellow border on the left side and a red border on the right side. The numerical data visualization area shows animated telemetry data collected on the host side and color-codeed according to the video border colors.

Prerequisite is TWO data folders with their respective single view .ini files. The Create-SxSIniDouble script creates a new data folder with its side-by-side .ini file.

  • .\Create-SxSIniDouble.ps1 -SourceIniPath1 .\TestRun1\TestRun1.ini -SourceIniPath2 .\TestRun2\TestRun2.ini -TargetName Test1-vs-Test2

Please review the resulting .ini file.

[Templates]
Theme=DoubleVideoRef-Double8Charts
SourceFolderTemplates=_templates
TemplateHTML1VideoRef8Charts=Template-SingleVideoRef-Single8Charts.html
TemplateHTML2Videos8Charts=Template-DoubleVideo-Double8Charts.html
TemplateJS1VideoRef8Charts=DataConfig-SingleVideoRef-Single8Charts.js
TemplateJS2Videos8Charts=DataConfig-DoubleVideo-Double8Charts.js
SourceFolderLibs=_libs

[Common]
RootFolder=C:\EUCScore\SxSPlayer
Date=2022-07-10
TargetFolder=SxS-Test1-vs-Test2
TargetName=Test1-vs-Test2
LeftSourceFolder=TestRun1
LeftTitle=Test 1 Left Title
LeftDescription=Test 1 Left Description
LeftRef=false
LeftCountDownInSec=3
RightSourceFolder=TestRun2
RightTitle=Test 2 Left Title
RightDescription=Test 2 Right Description
RightRef=false
RightCountDownInSec=3

[Telemetry8Std]
Prefix=STD
Header0=TimeStamp|1000
Header1=CPU|%
Header2=Memory|MBytes
Header3=Network Received|KBytes/sec
Header3=Network Received|KBytes/sec
Header4=Network Sent|KBytes/sec
Header5=CPU Queue Length
Header6=Disk Reads|Bytes/sec
Header7=Disk Writes|Bytes/sec
Header8=RDP Session CPU|%

[Telemetry8GPU]
Prefix=GPU
Header0=TimeStamp|1000
Header1=CPU|%
Header2=Memory|MBytes
Header3=Network Received|KBytes/sec
Header4=Network Sent|KBytes/sec
Header5=GPU 3D|%
Header6=GPU Video Decode|%
Header7=GPU Video Processing|%
Header8=GPU Memory|MBytes

[SxS1]
Name=SL1-BSPBlendingDX11
LengthInSec=45
LeftVideoFile=SL1-BSPBlendingDX11-2022-05-20 09-46-42.mp4
LeftTelemetryFile=Telemetry_NUC2_Benny_SL1-BSPBlendingDX11_2022-05-20-09-47-09.csv
RightVideoFile=SL1-BSPBlendingDX11-2022-05-22 13-09-26.mp4
RightTelemetryFile=Telemetry_DUNGEON3_Benny_SL1-BSPBlendingDX11_2022-05-22-13-09-53.csv

...

 

STEP 6: Create .html and .js files for Side-by-Side View Mode (= Double)

The Create-SxSHtmlDouble script uses the templates and the .csv files to create a pair of .html and .js files for each side-by-side comparison.

  • .\Create-SxSHtmlDouble.ps1 -IniPath .\SxS-Test1-vs-Test2\Test1-vs-Test2.ini -Telemetry Telemetry8Std
  • .\Create-SxSHtmlDouble.ps1 -IniPath .\SxS-Test1-vs-Test2\Test1-vs-Test2.ini -Telemetry Telemetry8GPU

In addition, the script creates a LinkList-STD-SxS-Foldername.html or LinkList-GPU-SxS-Foldername.html file in the SxSPlayer root folder.