[EUC Score Toolset Documentation Start Page] [Sample Results]
The Sync Player is an HTML5 application that runs inside a browser, such as Google Chrome or Microsoft Edge. The Sync 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 Sync Player installer package, the Sync Player templates, components, and libraries are located in the EUCScore\SyncPlayer 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.
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.
These scripts were used to create the Sample Results
Prerequisites
EUCScore\SyncPlayer 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 SyncPlayer 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:
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 Sync 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.
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.
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.
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.
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.
In addition, the script creates a LinkList-STD-SxS-Foldername.html or LinkList-GPU-SxS-Foldername.html file in the SxSPlayer root folder.