Merge branch 'testPG' into master

Playground/css/img/logoJS.svg

@@ -1,16 +1,16 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 630 630" style="enable-background:new 0 0 630 630;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<path class="st0" d="M615,15v600H15V15H615 M630,0H0v630h630V0L630,0z"/>
-</g>
-<path class="st0" d="M423.2,492.2c12.7,20.7,29.2,36,58.4,36c24.5,0,40.2-12.3,40.2-29.2c0-20.3-16.1-27.5-43.1-39.3l-14.8-6.4
-	c-42.7-18.2-71.1-41-71.1-89.2c0-44.4,33.8-78.2,86.7-78.2c37.6,0,64.7,13.1,84.2,47.4l-46.1,29.6c-10.1-18.2-21.1-25.4-38.1-25.4
-	c-17.3,0-28.3,11-28.3,25.4c0,17.8,11,25,36.4,36l14.8,6.3c50.3,21.6,78.7,43.6,78.7,93c0,53.3-41.9,82.5-98.1,82.5
-	c-55,0-90.5-26.2-107.9-60.5L423.2,492.2z M214.1,497.3c9.3,16.5,17.8,30.5,38.1,30.5c19.5,0,31.7-7.6,31.7-37.2V289.3h59.2v202.1
-	c0,61.3-35.9,89.2-88.4,89.2c-47.4,0-74.9-24.5-88.8-54.1L214.1,497.3z"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 630 630" style="enable-background:new 0 0 630 630;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M615,15v600H15V15H615 M630,0H0v630h630V0L630,0z"/>
+</g>
+<path class="st0" d="M423.2,492.2c12.7,20.7,29.2,36,58.4,36c24.5,0,40.2-12.3,40.2-29.2c0-20.3-16.1-27.5-43.1-39.3l-14.8-6.4
+	c-42.7-18.2-71.1-41-71.1-89.2c0-44.4,33.8-78.2,86.7-78.2c37.6,0,64.7,13.1,84.2,47.4l-46.1,29.6c-10.1-18.2-21.1-25.4-38.1-25.4
+	c-17.3,0-28.3,11-28.3,25.4c0,17.8,11,25,36.4,36l14.8,6.3c50.3,21.6,78.7,43.6,78.7,93c0,53.3-41.9,82.5-98.1,82.5
+	c-55,0-90.5-26.2-107.9-60.5L423.2,492.2z M214.1,497.3c9.3,16.5,17.8,30.5,38.1,30.5c19.5,0,31.7-7.6,31.7-37.2V289.3h59.2v202.1
+	c0,61.3-35.9,89.2-88.4,89.2c-47.4,0-74.9-24.5-88.8-54.1L214.1,497.3z"/>
+</svg>

Playground/css/img/logoTS.svg

@@ -1,22 +1,22 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 630 630" style="enable-background:new 0 0 630 630;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<path class="st0" d="M491,400c-24.5-10.6-32.3-15.8-36.5-24.5c-2-4-2.7-6.9-2.7-11.8c-0.1-16.7,12.2-26.7,31.3-25.4
-		c13,0.9,21.5,6,29.6,17.8c2.7,4,5.1,6.6,5.7,6.2c16.6-10.3,44-28.7,43.8-29.5c-0.7-2.7-9.3-14-15.1-20.2
-		c-11.2-11.6-23.4-18.7-39.4-22.7c-10.9-2.7-36.7-3.5-47.8-1.4c-34.2,6.5-57.9,28.4-64.6,59.8c-1.9,9-1.3,31.3,1.1,40.2
-		c2.9,10.7,9.9,23.5,17.3,31.5c12.8,13.8,26.8,22.5,59.3,36.5c28.4,12.3,38.4,18.2,43.3,25.2c3.8,5.5,4.7,8.7,4.7,16
-		c0,8.1-2.4,13.6-8.2,18.9c-13.6,12.2-41.2,13.7-61.3,3.1c-7-3.7-18.6-14.8-23.9-22.9l-3.8-5.6l-18.1,10.5
-		c-10,5.8-20.6,11.9-23.4,13.5c-2.9,1.7-5.5,3.3-5.8,3.7c-0.7,1.2,10.6,17.9,16.4,24.3c14.8,16.4,38.8,28.9,64.1,33.4
-		c11.6,2.1,37.2,2.4,48,0.5c34.9-5.9,59.7-23.7,69.7-49.9c9.1-24.1,6.1-56.5-7.3-76.8C555.4,432.2,536.1,419.4,491,400z"/>
-	<path class="st0" d="M360,342l-0.2-25.8l-0.3-25.7l-110.1-0.3c-60.5-0.1-110.4,0.1-110.7,0.5c-0.4,0.3-0.7,12-0.7,26V342h41h41
-		v116.5V575h29h29V458.5V342h41H360z"/>
-</g>
-<g>
-	<path class="st0" d="M615,15v600H15V15H615 M630,0H0v630h630V0L630,0z"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 630 630" style="enable-background:new 0 0 630 630;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M491,400c-24.5-10.6-32.3-15.8-36.5-24.5c-2-4-2.7-6.9-2.7-11.8c-0.1-16.7,12.2-26.7,31.3-25.4
+		c13,0.9,21.5,6,29.6,17.8c2.7,4,5.1,6.6,5.7,6.2c16.6-10.3,44-28.7,43.8-29.5c-0.7-2.7-9.3-14-15.1-20.2
+		c-11.2-11.6-23.4-18.7-39.4-22.7c-10.9-2.7-36.7-3.5-47.8-1.4c-34.2,6.5-57.9,28.4-64.6,59.8c-1.9,9-1.3,31.3,1.1,40.2
+		c2.9,10.7,9.9,23.5,17.3,31.5c12.8,13.8,26.8,22.5,59.3,36.5c28.4,12.3,38.4,18.2,43.3,25.2c3.8,5.5,4.7,8.7,4.7,16
+		c0,8.1-2.4,13.6-8.2,18.9c-13.6,12.2-41.2,13.7-61.3,3.1c-7-3.7-18.6-14.8-23.9-22.9l-3.8-5.6l-18.1,10.5
+		c-10,5.8-20.6,11.9-23.4,13.5c-2.9,1.7-5.5,3.3-5.8,3.7c-0.7,1.2,10.6,17.9,16.4,24.3c14.8,16.4,38.8,28.9,64.1,33.4
+		c11.6,2.1,37.2,2.4,48,0.5c34.9-5.9,59.7-23.7,69.7-49.9c9.1-24.1,6.1-56.5-7.3-76.8C555.4,432.2,536.1,419.4,491,400z"/>
+	<path class="st0" d="M360,342l-0.2-25.8l-0.3-25.7l-110.1-0.3c-60.5-0.1-110.4,0.1-110.7,0.5c-0.4,0.3-0.7,12-0.7,26V342h41h41
+		v116.5V575h29h29V458.5V342h41H360z"/>
+</g>
+<g>
+	<path class="st0" d="M615,15v600H15V15H615 M630,0H0v630h630V0L630,0z"/>
+</g>
+</svg>

Playground/css/index550.css

@@ -0,0 +1,185 @@
+@media (max-width: 550px) {
+    .navBar1280 { display: none; }
+    .navBar920 { display: none; }
+    .navBar710 { display: none; }
+    .navBar550 { display: block; }
+
+    #exampleList {
+        height: calc(100% - 40px);
+        top: 40px;
+        bottom: 0;
+    }
+    .navbarBottom {
+        display: none;
+    }
+    .wrapper {
+        height: calc(100% - 40px);
+    }
+    .wrapper #canvasZone {
+        width: 0;
+    }
+    #fpsLabel {
+        position: fixed;
+        top: 40px;
+        right: 0;
+        line-height: 32px;
+        height: 35px;
+        padding: 0;
+        padding-right: 5px;
+        box-shadow: none;
+    }
+    .wrapper #jsEditor {
+        width: 100%;
+    }
+
+    #switchWrapper {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        width: 40px;
+        height: 40px;
+    }
+    #switchWrapper img {
+        width: 40px;
+        height: 40px;
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+
+
+    #JStoTSbar .buttonJStoTS {
+        border-top-left-radius: 12px;
+    }
+
+    .navbar, .navbar .category, #JStoTSbar {
+        height: 40px;
+        line-height: 40px;
+        padding: 0;
+        width: 100%;
+    }
+    .navbar .category.right {
+        display: none;
+    }
+    .navbar .categoryTitle {
+        height: 40px;
+        line-height: 40px;
+        padding: 0;
+        width: calc(100% - 40px);
+        margin-left: -5px;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .version {
+        vertical-align: top;
+        height: 100%;
+        margin-right: 10px;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .logo {
+        float: left;
+    }
+    .navbar .categoryTitle .version {
+        float: right;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .version .versionSub {
+        vertical-align: top;
+    }
+
+    .navbar.languageJS .select {
+        background-color: #3f3461;
+    }
+    .navbar.languageTS .select {
+        background-color: #bb464b;
+    }
+    .navbar .select, .navbar .select img {
+        width: 40px;
+        height: 40px;
+    }
+    .navbar .select img {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select img:hover {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select img:hover {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select .toDisplay {
+        position: fixed;
+        left: 0;
+        top: 40px;
+        width: 180px;
+        height: auto;
+        min-height: 100px;
+        max-height: calc(100% - 40px);
+        text-align: left;
+        overflow-y: auto;
+    }
+    .navbar .select .toDisplay.languageJS .option {
+        background-color: #3f3461;
+    }
+    .navbar .select .toDisplay.languageTS .option {
+        background-color: #bb464b;
+    }
+    .navbar .select .toDisplay .option {
+        padding: 1px;
+        font-size: 15px;
+        height: 33px;
+        line-height: 33px;
+    }
+    .navbar .select .toDisplay .option  img {
+        float: left;
+        width: auto;
+        height: 100%;
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select .toDisplay .option:nth-of-type(1) img, .navbar .select .toDisplay .option:nth-of-type(2) img {
+        width: 20px;
+        margin: 0 7px;
+        filter: none;
+    }
+
+    .navbar .select .subSelect .toDisplaySub {
+        position: fixed;
+        top: 75px;
+        left: 180px;
+        min-width: 180px;
+        width: 180px;
+        height: auto;
+        max-height: calc(100% - 55px);
+        text-align: left;
+        overflow-y: auto;
+        color: white;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageJS {
+        background-color: #9379e6;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageTS {
+        background-color: #e0684b;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageJS .option {
+        color: white;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageTS .option {
+        color: white;
+    }
+
+    .save-layer .save-form {
+        z-index: 15;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        top: 0;
+        left: 0;
+        right: 0;
+        border-radius: 0;
+        padding-bottom: 20px;
+        box-sizing: border-box;
+    }
+    .save-layer .save-form .separator, .save-layer .save-form input, .save-layer .save-form textarea {
+        box-sizing: border-box;
+        width: calc(100% - 20px);
+        margin: 10px auto;
+    }
+    .save-layer .save-form #saveFormButtons {
+        margin-top: 15px;
+        text-transform: uppercase;
+    }
+}

Playground/css/index710.css

@@ -0,0 +1,46 @@
+@media (max-width: 710px) {
+    .navBar1280 { display: none; }
+    .navBar920 { display: none; }
+    .navBar710 { display: block; }
+    .navBar400 { display: none; }
+
+    .removeOnPhone {
+        display : none !important;
+    }
+
+    #fpsLabel {
+        top: 60px;
+    }
+    #exampleList {
+        width: 100%;
+    }
+
+    .navbar {
+        box-shadow: 0 2px 5px #000;
+    }
+
+    .navbarBottom .links .link a {
+        font-size: 14px;
+    }
+}
+
+.navbar.navBar710 .categoryTitle {
+    width: 155px;
+    height: 100%;
+    text-align: center;
+}
+.navbar.navBar710 .categoryTitle .logo {
+    margin-top: -7px;
+    margin-left: -5px;
+}
+.navbar.navBar710 .categoryTitle .version {
+    position: relative;
+    top: -35px;
+    left: 20px;
+}
+.navbar.navBar710 .select .toDisplayBig {
+    width:350px;
+}    
+.navbar.navBar710 .select .toDisplayBig ul {
+    column-count: 1;
+}

Playground/debug.html

@@ -1,457 +1,457 @@
-<!DOCTYPE html>
-<html>
-
-<!--
-    The purpose of the Debug.html file is to debug : ???
-    // TO DO - Complete that
-    // TO DO - Fix the console error : "Manifest: Line: 1, column 1, Unexpected token"
- -->
-
-<head>
-    <title>Babylon.js Playground</title>
-    <meta charset='utf-8' />
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
-
-    <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"
-        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
-
-    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
-
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
-    <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/indexMobile.css" />
-
-    <!-- Pep -->
-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-    <!-- For canvas/code separator -->
-    <script src="js/libs/split.js"></script>
-
-    <!-- DatGUI CDN -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-    <!-- jszip -->
-    <script src="js/libs/jszip.min.js"></script>
-    <script src="js/libs/fileSaver.js"></script>
-
-    <!-- Dependencies -->
-    <script src="https://preview.babylonjs.com/ammo.js"></script>
-    <script src="https://preview.babylonjs.com/cannon.js"></script>
-    <script src="https://preview.babylonjs.com/Oimo.js"></script>
-    <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
-    <script src="https://preview.babylonjs.com/babylon.max.js"></script>
-    <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
-    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
-    <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
-    <!-- Babylon.js -->
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
-
-    <script
-        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
-    <script
-        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>
-    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js"></script>
-    <script
-        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js"></script>
-    <script
-        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js"></script>
-    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js"></script>
-    <script
-        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js"></script>
-    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js"></script>
-
-    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
-    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
-
-    <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
-    <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
-    <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
-
-
-
-    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
-
-    <!-- Monaco -->
-    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
-
-    <!-- Extensions -->
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
-</head>
-
-<body>
-    <!-- Big screens -->
-    <div class="navbar navBar1280 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
-            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay languageJS">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub languageJS">
-                            <div class="option selected" id="darkTheme1280">Dark</div>
-                            <div class="option" id="lightTheme1280">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize languageJS">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton1280">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1280">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mid-size screens -->
-    <div class="navbar navBar1024 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme1024">Dark</div>
-                            <div class="option" id="lightTheme1024">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton1024">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1024">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mobile -->
-    <div class="navbar navBarMobile languageJS">
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="button select"><img src="css/img/hamburgerButton.svg">
-                <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
-                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
-                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
-                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
-                    </div>
-                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
-                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
-                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
-                    </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkThemeMobile">Dark</div>
-                            <div class="option" id="lightThemeMobile">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
-                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
-                        Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
-                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option nosubselect" id="metadataButtonMobile"><img
-                            src="css/img/metadataButton.svg">Metadata</div>
-                    <div class="option nosubselect"><img class="examplesButton"
-                            src="css/img/examplesButton.svg">Examples</div>
-                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
-                        <div class="toDisplaySub displayFooterLinks">
-                            <div class="option link">
-                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersionMobile">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="switchWrapper" class="languageJS">
-            <img id="switchWrapperCode" src="css/img/codeButton.svg">
-            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
-        </div>
-    </div>
-
-    <!-- Common things -->
-
-    <div class="wrapper">
-        <div id="jsEditor"></div>
-        <div id="canvasZone">
-            <canvas touch-action="none" id="renderCanvas"></canvas>
-        </div>
-    </div>
-    <div id="exampleList" class="javascript">
-        <div id="exampleBanner" class="languageJS">
-            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
-        </div>
-        <div class="horizontalSeparator"></div>
-        <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear"
-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
-    </div>
-
-    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
-
-    <div id="errorZone">
-    </div>
-
-    <div class="navbarBottom">
-        <div id="statusBar"></div>
-        <div class="links">
-            <div class='link'>
-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="saveLayer" class="save-layer">
-        <div class="save-form languageJS ">
-            <label for="saveFormTitle">TITLE</label>
-            <div class="separator"></div>
-            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-            <label for="saveFormDescription">DESCRIPTION</label>
-            <div class="separator"></div>
-            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-            <label for="saveFormTags">TAGS (separated by comma)</label>
-            <div class="separator"></div>
-            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
-
-            <div class="save-form-buttons" id="saveFormButtons">
-                <div id="saveFormButtonOk">OK</div>
-                <div id="saveFormButtonCancel">Cancel</div>
-            </div>
-        </div>
-    </div>
-
-    <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <br>
-            <br>
-            <br>
-        </span>
-        <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
-        </div>
-    </div>
-
-    <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery.js"></script>
-
-    <!-- Main scripts -->
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.js"></script>
-    <script src="js/examples.js"></script>
-    <script src="js/monacoCreator.js"></script>
-    <script src="js/settingsPG.js"></script>
-    <script src="js/menuPG.js"></script>
-    <script src="js/utils.js"></script>
-    <script src="js/zipTool.js"></script>
-    <script src="js/index.js"></script>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'UA-41767310-2');
-    </script>
-</body>
-
+<!DOCTYPE html>
+<html>
+
+<!--
+    The purpose of the Debug.html file is to debug : ???
+    // TO DO - Complete that
+    // TO DO - Fix the console error : "Manifest: Line: 1, column 1, Unexpected token"
+ -->
+
+<head>
+    <title>Babylon.js Playground</title>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+
+    <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"
+        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
+
+    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
+    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index710.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
+
+    <!-- Pep -->
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <!-- For canvas/code separator -->
+    <script src="js/libs/split.js"></script>
+
+    <!-- DatGUI CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+    <!-- jszip -->
+    <script src="js/libs/jszip.min.js"></script>
+    <script src="js/libs/fileSaver.js"></script>
+
+    <!-- Dependencies -->
+    <script src="https://preview.babylonjs.com/ammo.js"></script>
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
+    <script src="https://preview.babylonjs.com/babylon.max.js"></script>
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+    <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
+    <!-- Babylon.js -->
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
+
+    <script
+        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
+    <script
+        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js"></script>
+    <script
+        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js"></script>
+    <script
+        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js"></script>
+    <script
+        src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
+
+
+
+    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+
+    <!-- Monaco -->
+    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
+
+    <!-- Extensions -->
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
+</head>
+
+<body>
+    <!-- Big screens -->
+    <div class="navbar navBar1280 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
+            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize languageJS">
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1280">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mid-size screens -->
+    <div class="navbar navBar1024 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1024">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mobile -->
+    <div class="navbar navBarMobile languageJS">
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="button select"><img src="css/img/hamburgerButton.svg">
+                <div class="toDisplay">
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
+                    </div>
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
+                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                        Fullscreen</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
+                            src="css/img/metadataButton.svg">Metadata</div>
+                    <div class="option nosubselect"><img class="examplesButton"
+                            src="css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
+                        <div class="toDisplaySub displayFooterLinks">
+                            <div class="option link">
+                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersionMobile">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+        </div>
+
+        <div id="switchWrapper" class="languageJS">
+            <img id="switchWrapperCode" src="css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
+        </div>
+    </div>
+  
+    <!-- Common things -->
+
+    <div class="wrapper">
+        <div id="jsEditor"></div>
+        <div id="canvasZone">
+            <canvas touch-action="none" id="renderCanvas"></canvas>
+        </div>
+    </div>
+    <div id="exampleList" class="javascript">
+        <div id="exampleBanner" class="languageJS">
+            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
+        </div>
+        <div class="horizontalSeparator"></div>
+        <input id="filterBar" type="text" placeholder="Filter examples...">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+    </div>
+
+    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
+
+    <div id="errorZone">
+    </div>
+
+    <div class="navbarBottom">
+        <div id="statusBar"></div>
+        <div class="links">
+            <div class='link'>
+                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+            </div>
+        </div>
+    </div>
+
+    <div id="saveLayer" class="save-layer">
+        <div class="save-form languageJS ">
+            <label for="saveFormTitle">TITLE</label>
+            <div class="separator"></div>
+            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+            <label for="saveFormDescription">DESCRIPTION</label>
+            <div class="separator"></div>
+            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+            <label for="saveFormTags">TAGS (separated by comma)</label>
+            <div class="separator"></div>
+            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+            <div class="save-form-buttons" id="saveFormButtons">
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
+            </div>
+        </div>
+    </div>
+
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground
+            <br>
+            <br>
+            <br>
+        </span>
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery.js"></script>
+
+    <!-- Main scripts -->
+    <script src="js/pbt.js"></script>
+    <script src="js/libs/typescript.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/monacoCreator.js"></script>
+    <script src="js/settingsPG.js"></script>
+    <script src="js/menuPG.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/zipTool.js"></script>
+    <script src="js/index.js"></script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'UA-41767310-2');
+    </script>
+</body>
+
 </html>

Playground/index-local.html

@@ -1,401 +1,401 @@
-<!DOCTYPE html>
-<html>
-
-<!--
-    The purpose of the index-local.html file is to ???
-    // TO DO - Complete that
-    // TO DO - Fix error - "BabylonLoader.js:26 GET http://localhost/Tools/Config/config.json 404 (Not Found)". File exist, Wamp can't read it
- -->
-
-<head>
-    <title>Babylon.js Playground</title>
-    <meta charset='utf-8' />
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
-
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
-    <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/indexMobile.css" />
-
-    <!-- Pep -->
-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-    <!--For canvas/code separator-->
-    <script src="js/libs/split.js"></script>
-
-    <!-- DatGUI -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-    <!-- jszip -->
-    <script src="js/libs/jszip.min.js"></script>
-    <script src="js/libs/fileSaver.js"></script>
-
-    <!-- Dependencies -->
-    <script src="../dist/preview%20release/ammo.js"></script>
-    <script src="../dist/preview%20release/cannon.js"></script>
-    <script src="../dist/preview%20release/Oimo.js"></script>
-    <script src="../dist/preview%20release/gltf_validator.js"></script>
-    <script src="../dist/preview%20release/earcut.min.js"></script>
-    <!-- Monaco -->
-
-    <!-- Babylon.js -->
-    <script src="../Tools/DevLoader/BabylonLoader.js"></script>
-</head>
-
-<body>
-    <!-- Big screens -->
-    <div class="navbar navBar1280 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
-            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay languageJS">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub languageJS">
-                            <div class="option selected" id="darkTheme1280">Dark</div>
-                            <div class="option" id="lightTheme1280">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize languageJS">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton1280">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1280">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mid-size screens -->
-    <div class="navbar navBar1024 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme1024">Dark</div>
-                            <div class="option" id="lightTheme1024">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton1024">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1024">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mobile -->
-    <div class="navbar navBarMobile languageJS">
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="button select"><img src="css/img/hamburgerButton.svg">
-                <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
-                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
-                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
-                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
-                    </div>
-                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
-                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
-                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
-                    </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkThemeMobile">Dark</div>
-                            <div class="option" id="lightThemeMobile">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
-                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
-                        Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
-                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option nosubselect" id="metadataButtonMobile"><img
-                            src="css/img/metadataButton.svg">Metadata</div>
-                    <div class="option nosubselect"><img class="examplesButton"
-                            src="css/img/examplesButton.svg">Examples</div>
-                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
-                        <div class="toDisplaySub displayFooterLinks">
-                            <div class="option link">
-                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersionMobile">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="switchWrapper" class="languageJS">
-            <img id="switchWrapperCode" src="css/img/codeButton.svg">
-            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
-        </div>
-    </div>
-
-    <!-- Common things -->
-
-    <div class="wrapper">
-        <div id="jsEditor"></div>
-        <div id="canvasZone">
-            <canvas touch-action="none" id="renderCanvas"></canvas>
-        </div>
-    </div>
-    <div id="exampleList" class="javascript">
-        <div id="exampleBanner" class="languageJS">
-            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
-        </div>
-        <div class="horizontalSeparator"></div>
-        <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear"
-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
-    </div>
-
-    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
-
-    <div id="errorZone">
-    </div>
-
-    <div class="navbarBottom">
-        <div id="statusBar"></div>
-        <div class="links">
-            <div class='link'>
-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="saveLayer" class="save-layer">
-        <div class="save-form languageJS ">
-            <label for="saveFormTitle">TITLE</label>
-            <div class="separator"></div>
-            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-            <label for="saveFormDescription">DESCRIPTION</label>
-            <div class="separator"></div>
-            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-            <label for="saveFormTags">TAGS (separated by comma)</label>
-            <div class="separator"></div>
-            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
-
-            <div class="save-form-buttons" id="saveFormButtons">
-                <div id="saveFormButtonOk">OK</div>
-                <div id="saveFormButtonCancel">Cancel</div>
-            </div>
-        </div>
-    </div>
-
-    <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <br>
-            <br>
-            <br>
-        </span>
-        <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
-        </div>
-    </div>
-
-    <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <!-- jQuery -->
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <!-- Main scripts -->
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.js"></script>
-    <script src="js/examples.js"></script>
-    <script src="js/monacoCreator.js"></script>
-    <script src="js/settingsPG.js"></script>
-    <script src="js/menuPG.js"></script>
-    <script src="js/utils.js"></script>
-    <script src="js/zipTool.js"></script>
-    <script src="js/index.js"></script>
-    
-    <script>
-        BABYLONDEVTOOLS.Loader
-            .require('node_modules/monaco-editor/min/vs/loader.js')
-            .require('js/index.js')
-            .load(function () {
-                BABYLON.DracoCompression.Configuration.decoder = {
-                    wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
-                    wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",
-                    fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"
-                };
-            });
-    </script>
-</body>
-
+<!DOCTYPE html>
+<html>
+
+<!--
+    The purpose of the index-local.html file is to ???
+    // TO DO - Complete that
+    // TO DO - Fix error - "BabylonLoader.js:26 GET http://localhost/Tools/Config/config.json 404 (Not Found)". File exist, Wamp can't read it
+ -->
+
+<head>
+    <title>Babylon.js Playground</title>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index710.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
+
+    <!-- Pep -->
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <!--For canvas/code separator-->
+    <script src="js/libs/split.js"></script>
+
+    <!-- DatGUI -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+    <!-- jszip -->
+    <script src="js/libs/jszip.min.js"></script>
+    <script src="js/libs/fileSaver.js"></script>
+
+    <!-- Dependencies -->
+    <script src="../dist/preview%20release/ammo.js"></script>
+    <script src="../dist/preview%20release/cannon.js"></script>
+    <script src="../dist/preview%20release/Oimo.js"></script>
+    <script src="../dist/preview%20release/gltf_validator.js"></script>
+    <script src="../dist/preview%20release/earcut.min.js"></script>
+    <!-- Monaco -->
+
+    <!-- Babylon.js -->
+    <script src="../Tools/DevLoader/BabylonLoader.js"></script>
+</head>
+
+<body>
+    <!-- Big screens -->
+    <div class="navbar navBar1280 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
+            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize languageJS">
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1280">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mid-size screens -->
+    <div class="navbar navBar1024 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1024">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mobile -->
+    <div class="navbar navBarMobile languageJS">
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="button select"><img src="css/img/hamburgerButton.svg">
+                <div class="toDisplay">
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
+                    </div>
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
+                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                        Fullscreen</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
+                            src="css/img/metadataButton.svg">Metadata</div>
+                    <div class="option nosubselect"><img class="examplesButton"
+                            src="css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
+                        <div class="toDisplaySub displayFooterLinks">
+                            <div class="option link">
+                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersionMobile">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+
+        <div id="switchWrapper" class="languageJS">
+            <img id="switchWrapperCode" src="css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
+        </div>
+    </div>
+
+    <!-- Common things -->
+
+    <div class="wrapper">
+        <div id="jsEditor"></div>
+        <div id="canvasZone">
+            <canvas touch-action="none" id="renderCanvas"></canvas>
+        </div>
+    </div>
+    <div id="exampleList" class="javascript">
+        <div id="exampleBanner" class="languageJS">
+            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
+        </div>
+        <div class="horizontalSeparator"></div>
+        <input id="filterBar" type="text" placeholder="Filter examples...">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+    </div>
+
+    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
+
+    <div id="errorZone">
+    </div>
+
+    <div class="navbarBottom">
+        <div id="statusBar"></div>
+        <div class="links">
+            <div class='link'>
+                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+            </div>
+        </div>
+    </div>
+
+    <div id="saveLayer" class="save-layer">
+        <div class="save-form languageJS ">
+            <label for="saveFormTitle">TITLE</label>
+            <div class="separator"></div>
+            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+            <label for="saveFormDescription">DESCRIPTION</label>
+            <div class="separator"></div>
+            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+            <label for="saveFormTags">TAGS (separated by comma)</label>
+            <div class="separator"></div>
+            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+            <div class="save-form-buttons" id="saveFormButtons">
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
+            </div>
+        </div>
+    </div>
+
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground
+            <br>
+            <br>
+            <br>
+        </span>
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
+
+    <!-- jQuery -->
+    <script src="js/libs/jquery.min.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
+
+    <!-- Main scripts -->
+    <script src="js/pbt.js"></script>
+    <script src="js/libs/typescript.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/monacoCreator.js"></script>
+    <script src="js/settingsPG.js"></script>
+    <script src="js/menuPG.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/zipTool.js"></script>
+    <script src="js/index.js"></script>
+    
+    <script>
+        BABYLONDEVTOOLS.Loader
+            .require('node_modules/monaco-editor/min/vs/loader.js')
+            .require('js/index.js')
+            .load(function () {
+                BABYLON.DracoCompression.Configuration.decoder = {
+                    wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
+                    wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",
+                    fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"
+                };
+            });
+    </script>
+</body>
+
 </html>

Playground/index.html

@@ -1,404 +1,403 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>Babylon.js Playground</title>
-    <meta charset='utf-8' />
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
-
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
-    <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index_mobile.css" />
-
-    <!-- Pep -->
-    <script src="js/libs/pep.min.js"></script>
-    <!-- For canvas/code separator -->
-    <script src="js/libs/split.js"></script>
-
-    <!-- DatGUI -->
-    <script src="js/libs/dat.gui.min.js"></script>
-    <!-- jszip -->
-    <script src="js/libs/jszip.min.js"></script>
-    <script src="js/libs/fileSaver.js"></script>
-
-    <!-- Dependencies -->
-    <script src="https://preview.babylonjs.com/ammo.js"></script>
-    <script src="https://preview.babylonjs.com/cannon.js"></script>
-    <script src="https://preview.babylonjs.com/Oimo.js"></script>
-    <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
-    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
-    <!-- Babylon.js -->
-    <script src="https://preview.babylonjs.com/babylon.js"></script>
-    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
-    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
-    <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
-    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
-    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
-
-    <!-- Monaco -->
-    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
-
-    <!-- Extensions -->
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"
-        async></script>
-
-    <!-- Scene Manager -->
-    <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
-    <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>
-</head>
-
-<body>
-    <!-- Big screens -->
-    <div class="navbar navBar1280 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
-            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay languageJS">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub languageJS">
-                            <div class="option selected" id="darkTheme1280">Dark</div>
-                            <div class="option" id="lightTheme1280">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize languageJS">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton1280">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1280">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mid-size screens -->
-    <div class="navbar navBar1024 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme1024">Dark</div>
-                            <div class="option" id="lightTheme1024">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton1024">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1024">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mobile -->
-    <div class="navbar navBarMobile languageJS">
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="button select"><img src="css/img/hamburgerButton.svg">
-                <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
-                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
-                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
-                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
-                    </div>
-                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
-                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
-                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
-                    </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkThemeMobile">Dark</div>
-                            <div class="option" id="lightThemeMobile">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
-                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
-                        Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
-                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option nosubselect" id="metadataButtonMobile"><img
-                            src="css/img/metadataButton.svg">Metadata</div>
-                    <div class="option nosubselect"><img class="examplesButton"
-                            src="css/img/examplesButton.svg">Examples</div>
-                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
-                        <div class="toDisplaySub displayFooterLinks">
-                            <div class="option link">
-                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersionMobile">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="switchWrapper" class="languageJS">
-            <img id="switchWrapperCode" src="css/img/codeButton.svg">
-            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
-        </div>
-    </div>
-
-    <!-- Common things -->
-
-    <div class="wrapper">
-        <div id="jsEditor"></div>
-        <div id="canvasZone">
-            <canvas touch-action="none" id="renderCanvas"></canvas>
-        </div>
-    </div>
-    <div id="exampleList" class="javascript">
-        <div id="exampleBanner" class="languageJS">
-            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
-        </div>
-        <div class="horizontalSeparator"></div>
-        <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear"
-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
-    </div>
-
-    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
-
-    <div id="errorZone">
-    </div>
-
-    <div class="navbarBottom">
-        <div id="statusBar"></div>
-        <div class="links">
-            <div class='link'>
-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="saveLayer" class="save-layer">
-        <div class="save-form languageJS ">
-            <label for="saveFormTitle">TITLE</label>
-            <div class="separator"></div>
-            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-            <label for="saveFormDescription">DESCRIPTION</label>
-            <div class="separator"></div>
-            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-            <label for="saveFormTags">TAGS (separated by comma)</label>
-            <div class="separator"></div>
-            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
-
-            <div class="save-form-buttons" id="saveFormButtons">
-                <div id="saveFormButtonOk">OK</div>
-                <div id="saveFormButtonCancel">Cancel</div>
-            </div>
-        </div>
-    </div>
-
-    <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <br>
-            <br>
-            <br>
-        </span>
-        <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
-        </div>
-    </div>
-
-    <!-- jQuery -->
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <!-- Main scripts -->
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.js"></script>
-    <script src="js/examples.js"></script>
-    <script src="js/monacoCreator.js"></script>
-    <script src="js/settingsPG.js"></script>
-    <script src="js/menuPG.js"></script>
-    <script src="js/utils.js"></script>
-    <script src="js/zipTool.js"></script>
-    <script src="js/index.js"></script>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'UA-41767310-2');
-    </script>
-</body>
-
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Babylon.js Playground</title>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index_mobile.css" />
+
+    <!-- Pep -->
+    <script src="js/libs/pep.min.js"></script>
+    <!-- For canvas/code separator -->
+    <script src="js/libs/split.js"></script>
+
+    <!-- DatGUI -->
+    <script src="js/libs/dat.gui.min.js"></script>
+    <!-- jszip -->
+    <script src="js/libs/jszip.min.js"></script>
+    <script src="js/libs/fileSaver.js"></script>
+
+    <!-- Dependencies -->
+    <script src="https://preview.babylonjs.com/ammo.js"></script>
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
+    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+    <!-- Babylon.js -->
+    <script src="https://preview.babylonjs.com/babylon.js"></script>
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+    <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+
+    <!-- Monaco -->
+    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
+
+    <!-- Extensions -->
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"
+        async></script>
+
+    <!-- Scene Manager -->
+    <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
+    <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>
+</head>
+
+<body>
+    <!-- Big screens -->
+    <div class="navbar navBar1280 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
+            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize languageJS">
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1280">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mid-size screens -->
+    <div class="navbar navBar1024 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1024">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mobile -->
+    <div class="navbar navBarMobile languageJS">
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="button select"><img src="css/img/hamburgerButton.svg">
+                <div class="toDisplay">
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
+                    </div>
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
+                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                        Fullscreen</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
+                            src="css/img/metadataButton.svg">Metadata</div>
+                    <div class="option nosubselect"><img class="examplesButton"
+                            src="css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
+                        <div class="toDisplaySub displayFooterLinks">
+                            <div class="option link">
+                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersionMobile">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+        </div>
+
+        <div id="switchWrapper" class="languageJS">
+            <img id="switchWrapperCode" src="css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
+        </div>
+    </div>
+
+    <!-- Common things -->
+
+    <div class="wrapper">
+        <div id="jsEditor"></div>
+        <div id="canvasZone">
+            <canvas touch-action="none" id="renderCanvas"></canvas>
+        </div>
+    </div>
+    <div id="exampleList" class="javascript">
+        <div id="exampleBanner" class="languageJS">
+            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
+        </div>
+        <div class="horizontalSeparator"></div>
+        <input id="filterBar" type="text" placeholder="Filter examples...">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+    </div>
+
+    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
+
+    <div id="errorZone">
+    </div>
+
+    <div class="navbarBottom">
+        <div id="statusBar"></div>
+        <div class="links">
+            <div class='link'>
+                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+            </div>
+        </div>
+    </div>
+
+    <div id="saveLayer" class="save-layer">
+        <div class="save-form languageJS ">
+            <label for="saveFormTitle">TITLE</label>
+            <div class="separator"></div>
+            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+            <label for="saveFormDescription">DESCRIPTION</label>
+            <div class="separator"></div>
+            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+            <label for="saveFormTags">TAGS (separated by comma)</label>
+            <div class="separator"></div>
+            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+            <div class="save-form-buttons" id="saveFormButtons">
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
+            </div>
+        </div>
+    </div>
+
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground
+            <br>
+            <br>
+            <br>
+        </span>
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
+    <script src="js/libs/jquery.min.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
+
+    <!-- Main scripts -->
+    <script src="js/pbt.js"></script>
+    <script src="js/libs/typescript.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/monacoCreator.js"></script>
+    <script src="js/settingsPG.js"></script>
+    <script src="js/menuPG.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/zipTool.js"></script>
+    <script src="js/index.js"></script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'UA-41767310-2');
+    </script>
+</body>
+
 </html>

Playground/indexStable.html

@@ -1,414 +1,414 @@
-<!DOCTYPE html>
-<html>
-
-<!--
-    The purpose of the indexStable.html file is to ???
-    // TO DO - Complete that
- -->
-
-<head>
-    <title>Babylon.js Playground</title>
-    <meta charset='utf-8' />
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
-
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
-    <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/indexMobile.css" />
-
-    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
-
-    <!-- Pep -->
-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-    <!--For canvas/code separator-->
-    <script src="js/libs/split.js"></script>
-
-    <!-- DatGUI -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-    <!-- jszip -->
-    <script src="js/libs/jszip.min.js"></script>
-    <script src="js/libs/fileSaver.js"></script>
-
-    <!-- Dependencies -->
-    <script src="https://cdn.babylonjs.com/ammo.js"></script>
-    <script src="https://cdn.babylonjs.com/cannon.js"></script>
-    <script src="https://cdn.babylonjs.com/Oimo.js"></script>
-    <script src="https://cdn.babylonjs.com/gltf_validator.js"></script>
-    <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
-    <!-- Babylon.js -->
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
-    <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
-    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-    <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
-    <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
-    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
-    <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
-
-    <!-- Monaco -->
-    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
-
-    <!-- Extensions -->
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
-</head>
-
-<body>
-    <!-- Big screens -->
-    <div class="navbar navBar1280 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
-            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay languageJS">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub languageJS">
-                            <div class="option selected" id="darkTheme1280">Dark</div>
-                            <div class="option" id="lightTheme1280">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize languageJS">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton1280">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1280">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mid-size screens -->
-    <div class="navbar navBar1024 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme1024">Dark</div>
-                            <div class="option" id="lightTheme1024">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton1024">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1024">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mobile -->
-    <div class="navbar navBarMobile languageJS">
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="button select"><img src="css/img/hamburgerButton.svg">
-                <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
-                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
-                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
-                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
-                    </div>
-                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
-                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
-                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
-                    </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkThemeMobile">Dark</div>
-                            <div class="option" id="lightThemeMobile">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
-                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
-                        Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
-                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option nosubselect" id="metadataButtonMobile"><img
-                            src="css/img/metadataButton.svg">Metadata</div>
-                    <div class="option nosubselect"><img class="examplesButton"
-                            src="css/img/examplesButton.svg">Examples</div>
-                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
-                        <div class="toDisplaySub displayFooterLinks">
-                            <div class="option link">
-                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                            </div>
-                            <div class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersionMobile">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="switchWrapper" class="languageJS">
-            <img id="switchWrapperCode" src="css/img/codeButton.svg">
-            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
-        </div>
-    </div>
-
-    <!-- Common things -->
-
-    <div class="wrapper">
-        <div id="jsEditor"></div>
-        <div id="canvasZone">
-            <canvas touch-action="none" id="renderCanvas"></canvas>
-        </div>
-    </div>
-    <div id="exampleList" class="javascript">
-        <div id="exampleBanner" class="languageJS">
-            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
-        </div>
-        <div class="horizontalSeparator"></div>
-        <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear"
-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
-    </div>
-
-    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
-
-    <div id="errorZone">
-    </div>
-
-    <div class="navbarBottom">
-        <div id="statusBar"></div>
-        <div class="links">
-            <div class='link'>
-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="saveLayer" class="save-layer">
-        <div class="save-form languageJS ">
-            <label for="saveFormTitle">TITLE</label>
-            <div class="separator"></div>
-            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-            <label for="saveFormDescription">DESCRIPTION</label>
-            <div class="separator"></div>
-            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-            <label for="saveFormTags">TAGS (separated by comma)</label>
-            <div class="separator"></div>
-            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
-
-            <div class="save-form-buttons" id="saveFormButtons">
-                <div id="saveFormButtonOk">OK</div>
-                <div id="saveFormButtonCancel">Cancel</div>
-            </div>
-        </div>
-    </div>
-
-    <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <br>
-            <br>
-            <br>
-        </span>
-        <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
-        </div>
-    </div>
-
-    <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <!-- TO DO : Why is this a split here ? It's already in the JS code -->
-    <script>
-        Split(['#jsEditor', '#canvasZone']);
-    </script>
-
-    <!-- Main scripts -->
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.js"></script>
-    <script src="js/examples.js"></script>
-    <script src="js/monacoCreator.js"></script>
-    <script src="js/settingsPG.js"></script>
-    <script src="js/menuPG.js"></script>
-    <script src="js/utils.js"></script>
-    <script src="js/zipTool.js"></script>
-    <script src="js/index.js"></script>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'UA-41767310-2');
-    </script>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html>
+
+<!--
+    The purpose of the indexStable.html file is to ???
+    // TO DO - Complete that
+ -->
+
+<head>
+    <title>Babylon.js Playground</title>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
+
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index710.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
+
+    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
+    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+
+    <!-- Pep -->
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <!--For canvas/code separator-->
+    <script src="js/libs/split.js"></script>
+
+    <!-- DatGUI -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+    <!-- jszip -->
+    <script src="js/libs/jszip.min.js"></script>
+    <script src="js/libs/fileSaver.js"></script>
+
+    <!-- Dependencies -->
+    <script src="https://cdn.babylonjs.com/ammo.js"></script>
+    <script src="https://cdn.babylonjs.com/cannon.js"></script>
+    <script src="https://cdn.babylonjs.com/Oimo.js"></script>
+    <script src="https://cdn.babylonjs.com/gltf_validator.js"></script>
+    <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
+    <!-- Babylon.js -->
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
+    <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+    <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
+    <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
+    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
+    <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+
+    <!-- Monaco -->
+    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
+
+    <!-- Extensions -->
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
+</head>
+
+<body>
+    <!-- Big screens -->
+    <div class="navbar navBar1280 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
+            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize languageJS">
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1280">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mid-size screens -->
+    <div class="navbar navBar1024 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1024">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mobile -->
+    <div class="navbar navBarMobile languageJS">
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="button select"><img src="css/img/hamburgerButton.svg">
+                <div class="toDisplay">
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
+                    </div>
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
+                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                        Fullscreen</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
+                            src="css/img/metadataButton.svg">Metadata</div>
+                    <div class="option nosubselect"><img class="examplesButton"
+                            src="css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
+                        <div class="toDisplaySub displayFooterLinks">
+                            <div class="option link">
+                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersionMobile">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+
+        <div id="switchWrapper" class="languageJS">
+            <img id="switchWrapperCode" src="css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
+        </div>
+    </div>
+
+    <!-- Common things -->
+
+    <div class="wrapper">
+        <div id="jsEditor"></div>
+        <div id="canvasZone">
+            <canvas touch-action="none" id="renderCanvas"></canvas>
+        </div>
+    </div>
+    <div id="exampleList" class="javascript">
+        <div id="exampleBanner" class="languageJS">
+            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
+        </div>
+        <div class="horizontalSeparator"></div>
+        <input id="filterBar" type="text" placeholder="Filter examples...">
+        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+    </div>
+
+    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
+
+    <div id="errorZone">
+    </div>
+
+    <div class="navbarBottom">
+        <div id="statusBar"></div>
+        <div class="links">
+            <div class='link'>
+                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+            </div>
+        </div>
+    </div>
+
+    <div id="saveLayer" class="save-layer">
+        <div class="save-form languageJS ">
+            <label for="saveFormTitle">TITLE</label>
+            <div class="separator"></div>
+            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+            <label for="saveFormDescription">DESCRIPTION</label>
+            <div class="separator"></div>
+            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+            <label for="saveFormTags">TAGS (separated by comma)</label>
+            <div class="separator"></div>
+            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+            <div class="save-form-buttons" id="saveFormButtons">
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
+            </div>
+        </div>
+    </div>
+
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground
+            <br>
+            <br>
+            <br>
+        </span>
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
+
+    <!-- TO DO : Why is this a split here ? It's already in the JS code -->
+    <script>
+        Split(['#jsEditor', '#canvasZone']);
+    </script>
+
+    <!-- Main scripts -->
+    <script src="js/pbt.js"></script>
+    <script src="js/libs/typescript.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/monacoCreator.js"></script>
+    <script src="js/settingsPG.js"></script>
+    <script src="js/menuPG.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/zipTool.js"></script>
+    <script src="js/index.js"></script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'UA-41767310-2');
+    </script>
+</body>
+
+</html>

Playground/js/examples.js

@@ -1,93 +1,93 @@
-/**
- * This JS file is for examples list and actions linked to examples.
- */
-class Examples {
-    constructor() {
-        this.isExamplesDisplayed = false;
-
-        // There's a "close" button on the mobile interface.
-        document.getElementById("examplesButtonClose").addEventListener("click", this.hideExamples.bind(this));
-        /**
-         * Display / hide with the "examples" button. On any size interface
-         */
-        var examplesButton = document.getElementsByClassName("examplesButton");
-        if (examplesButton.length > 0) {
-            for (var i = 0; i < examplesButton.length; i++) {
-                examplesButton[i].parentElement.onclick = function () {
-                    if (!this.isExamplesDisplayed) this.displayExamples();
-                    else this.hideExamples();
-                }.bind(this);
-            }
-        }
-
-        /**
-         * The filter bar is used to search a thing on the examples.
-         * This react on any input on the bar, or on a click on the search button.
-         */
-        var filterBar = document.getElementById("filterBar");
-        if (filterBar) {
-            var filterBarClear = document.getElementById("filterBarClear");
-            var filter = function () {
-                var filterText = filterBar.value.toLowerCase();
-                if (filterText == "") filterBarClear.style.display = "none";
-                else filterBarClear.style.display = "inline-block";
-
-                var lines = document.getElementsByClassName("itemLine");
-                for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
-                    var line = lines[lineIndex];
-                    if (line.innerText.toLowerCase().indexOf(filterText) > -1) {
-                        line.style.display = "";
-                    } else {
-                        line.style.display = "none";
-                    }
-                }
-
-                var categories = document.getElementsByClassName("categoryContainer");
-                var displayCount = categories.length;
-
-                for (var categoryIndex = 0; categoryIndex < categories.length; categoryIndex++) {
-                    var category = categories[categoryIndex];
-                    category.style.display = "block";
-                    if (category.clientHeight < 25) {
-                        category.style.display = "none";
-                        displayCount--;
-                    }
-                }
-
-                if (displayCount == 0) document.getElementById("noResultsContainer").style.display = "block";
-                else document.getElementById("noResultsContainer").style.display = "none";
-            }
-            filterBar.oninput = function () {
-                filter();
-            }
-            filterBarClear.onclick = function () {
-                filterBar.value = "";
-                filter();
-            }
-        }
-    }
-
-    /**
-     * Function to display the examples menu
-     */
-    displayExamples() {
-        this.isExamplesDisplayed = true;
-        document.getElementById("fpsLabel").style.display = "none";
-        document.getElementById("exampleList").style.display = "block";
-        document.getElementsByClassName("wrapper")[0].style.width = "calc(100% - 400px)";
-        var menus = document.getElementsByClassName("toDisplay");
-        for (var i = 0; i < menus.length; i++) {
-            menus[i].style.display = "none";
-        }
-    };
-
-    /**
-     * Function to hide the examples menu
-     */
-    hideExamples() {
-        this.isExamplesDisplayed = false;
-        document.getElementById("fpsLabel").style.display = "block";
-        document.getElementById("exampleList").style.display = "none";
-        document.getElementsByClassName("wrapper")[0].style.width = "100%";
-    };
-}
+/**
+ * This JS file is for examples list and actions linked to examples.
+ */
+class Examples {
+    constructor() {
+        this.isExamplesDisplayed = false;
+
+        // There's a "close" button on the mobile interface.
+        document.getElementById("examplesButtonClose").addEventListener("click", this.hideExamples.bind(this));
+        /**
+         * Display / hide with the "examples" button. On any size interface
+         */
+        var examplesButton = document.getElementsByClassName("examplesButton");
+        if (examplesButton.length > 0) {
+            for (var i = 0; i < examplesButton.length; i++) {
+                examplesButton[i].parentElement.onclick = function () {
+                    if (!this.isExamplesDisplayed) this.displayExamples();
+                    else this.hideExamples();
+                }.bind(this);
+            }
+        }
+
+        /**
+         * The filter bar is used to search a thing on the examples.
+         * This react on any input on the bar, or on a click on the search button.
+         */
+        var filterBar = document.getElementById("filterBar");
+        if (filterBar) {
+            var filterBarClear = document.getElementById("filterBarClear");
+            var filter = function () {
+                var filterText = filterBar.value.toLowerCase();
+                if (filterText == "") filterBarClear.style.display = "none";
+                else filterBarClear.style.display = "inline-block";
+
+                var lines = document.getElementsByClassName("itemLine");
+                for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+                    var line = lines[lineIndex];
+                    if (line.innerText.toLowerCase().indexOf(filterText) > -1) {
+                        line.style.display = "";
+                    } else {
+                        line.style.display = "none";
+                    }
+                }
+
+                var categories = document.getElementsByClassName("categoryContainer");
+                var displayCount = categories.length;
+
+                for (var categoryIndex = 0; categoryIndex < categories.length; categoryIndex++) {
+                    var category = categories[categoryIndex];
+                    category.style.display = "block";
+                    if (category.clientHeight < 25) {
+                        category.style.display = "none";
+                        displayCount--;
+                    }
+                }
+
+                if (displayCount == 0) document.getElementById("noResultsContainer").style.display = "block";
+                else document.getElementById("noResultsContainer").style.display = "none";
+            }
+            filterBar.oninput = function () {
+                filter();
+            }
+            filterBarClear.onclick = function () {
+                filterBar.value = "";
+                filter();
+            }
+        }
+    }
+
+    /**
+     * Function to display the examples menu
+     */
+    displayExamples() {
+        this.isExamplesDisplayed = true;
+        document.getElementById("fpsLabel").style.display = "none";
+        document.getElementById("exampleList").style.display = "block";
+        document.getElementsByClassName("wrapper")[0].style.width = "calc(100% - 400px)";
+        var menus = document.getElementsByClassName("toDisplay");
+        for (var i = 0; i < menus.length; i++) {
+            menus[i].style.display = "none";
+        }
+    };
+
+    /**
+     * Function to hide the examples menu
+     */
+    hideExamples() {
+        this.isExamplesDisplayed = false;
+        document.getElementById("fpsLabel").style.display = "block";
+        document.getElementById("exampleList").style.display = "none";
+        document.getElementsByClassName("wrapper")[0].style.width = "100%";
+    };
+}

Playground/js/index.js

@@ -96,6 +96,13 @@ var run = function () {
         else {
             xhr.open('GET', 'https://raw.githubusercontent.com/BabylonJS/Documentation/master/examples/list_ts.json', true);
         }
+        return outputText;
+    }
+    function getRunCode(callBack) {
+        triggerCompile(monacoCreator.JsEditor.getValue(), function (result) {
+            callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
+        });
+    }
 
         xhr.onreadystatechange = function () {
             if (xhr.readyState === 4) {
@@ -689,7 +696,6 @@ var run = function () {
                                         document.getElementById("saveFormTitle").value = currentSnippetTitle;
                                         document.getElementById("saveFormDescription").value = currentSnippetDescription;
                                         document.getElementById("saveFormTags").value = currentSnippetTags;
-
                                         hideNoMetadata();
                                     }
                                 }

Playground/js/menuPG.js

@@ -1,299 +1,297 @@
-/**
- * This JS file is for UI displaying
- */
-class MenuPG {
-    constructor() {
-        this.allSelect = document.querySelectorAll('.select');
-        this.allToDisplay = document.querySelectorAll('.toDisplay');
-        this.allToDisplayBig = document.querySelectorAll('.toDisplayBig');
-        this.allSubItems = document.querySelectorAll('.toDisplaySub');
-        this.allSubSelect = document.querySelectorAll('.subSelect');
-        this.allNoSubSelect = document.querySelectorAll('.noSubSelect');
-
-        this.jsEditorElement = document.getElementById('jsEditor');
-        this.canvasZoneElement = document.getElementById('canvasZone');
-        this.switchWrapperCode = document.getElementById('switchWrapperCode');
-        this.switchWrapperCanvas = document.getElementById('switchWrapperCanvas');
-        this.fpsLabelElement = document.getElementById('fpsLabel');
-        this.navBarMobile = document.getElementsByClassName('navBarMobile')[0];
-
-        // Check if mobile version
-        this.isMobileVersion = false;
-        if (this.navBarMobile.offsetHeight > 0) this.isMobileVersion = true;
-        window.onresize = function () {
-            if (!this.isMobileVersion && this.navBarMobile.offsetHeight > 0) {
-                this.isMobileVersion = true;
-                this.resizeBigCanvas();
-            }
-            else if (this.isMobileVersion && this.navBarMobile.offsetHeight == 0) {
-                this.isMobileVersion = false;
-                this.resizeSplitted();
-            }
-        }.bind(this);
-
-        // Click on BJS logo redirection to BJS homepage
-        let logos = document.getElementsByClassName('logo');
-        for (var i = 0; i < logos.length; i++) {
-            logos[i].addEventListener('click', function () {
-                window.open("https://babylonjs.com", "_target");
-            });
-        }
-
-        // On click anywhere, remove displayed options
-        window.addEventListener('click', this.removeallOptions);
-
-        // In mobile mode, resize JSEditor and canvas
-        this.switchWrapperCode.addEventListener('click', this.resizeBigJsEditor.bind(this));
-        this.switchWrapperCanvas.addEventListener('click', this.resizeBigCanvas.bind(this));
-        document.getElementById('runButtonMobile').addEventListener('click', this.resizeBigCanvas.bind(this));
-
-        // Code editor by default.
-        // TO DO - Check why it doesn't work.
-        if (this.navBarMobile.offsetHeight > 0) this.resizeBigJsEditor();
-
-        // Handle click on select elements
-        for (var index = 0; index < this.allSelect.length; index++) {
-            this.allSelect[index].addEventListener('click', this.displayMenu.bind(this));
-        }
-
-        // Handle mouseover / click on subSelect
-        for (var index = 0; index < this.allSubSelect.length; index++) {
-            var ss = this.allSubSelect[index];
-            ss.addEventListener('click', this.displaySubitems.bind(this));
-            ss.addEventListener('mouseenter', this.displaySubitems.bind(this));
-        }
-        for (var index = 0; index < this.allNoSubSelect.length; index++) {
-            var ss = this.allNoSubSelect[index];
-            ss.addEventListener('mouseenter', this.removeAllSubItems.bind(this));
-        }
-
-        // Examples must remove all the other menus
-        var examplesButton = document.getElementsByClassName("examplesButton");
-        for (var i = 0; i < examplesButton.length; i++) {
-            examplesButton[i].addEventListener("click", this.removeallOptions);
-        }
-
-        // Fullscreen
-        document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function () {
-            if (document.webkitIsFullScreen) this.goFullPage();
-            else this.exitFullPage();
-        }.bind(this), false);
-
-        // Message before unload
-        window.onbeforeunload = exitPrompt;
-    }
-
-    /**
-     * Display children menu of the caller
-     */
-    displayMenu(evt) {
-        if (evt.target.nodeName != "IMG") {
-            evt.preventDefault();
-            evt.stopPropagation();
-            return;
-        }
-        var toDisplay = evt.target.parentNode.querySelector('.toDisplay');
-        if (toDisplay) {
-            if (toDisplay.style.display == 'block') {
-                this.removeAllOptions();
-            } else {
-                this.removeAllOptions();
-                toDisplay.style.display = 'block';
-            }
-        }
-        toDisplay = evt.target.parentNode.querySelector('.toDisplayBig');
-        if (toDisplay) {
-            if (toDisplay.style.display == 'block') {
-                this.removeAllOptions();
-            } else {
-                this.removeAllOptions();
-                toDisplay.style.display = 'block';
-            }
-        }
-        evt.preventDefault();
-        evt.stopPropagation();
-    };
-    /**
-     * Display children subMenu of the caller
-     */
-    displaySubitems(evt) {
-        // If it's in mobile mode, avoid the "mouseenter" bug
-        if (evt.type == "mouseenter" && this.navBarMobile.offsetHeight > 0) return;
-        this.removeAllSubItems();
-
-        var target = evt.target;
-        if (target.nodeName == "IMG") target = evt.target.parentNode;
-
-        var toDisplay = target.querySelector('.toDisplaySub');
-        if (toDisplay) {
-            toDisplay.style.display = 'block';
-
-            if (document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) {
-                var height = toDisplay.children.length * 33;
-                var parentTop = toDisplay.parentNode.getBoundingClientRect().top;
-                if ((height + parentTop) <= window.innerHeight) {
-                    toDisplay.style.top = parentTop + "px";
-                }
-                else {
-                    toDisplay.style.top = window.innerHeight - height + "px";
-                }
-            }
-        }
-
-        evt.preventDefault();
-        evt.stopPropagation();
-    };
-    /**
-     * Handle click on subOptions
-     */
-    clickOptionSub(evt) {
-        var target = evt.target;
-        if (evt.target.tagName == "A") target = evt.target.parentNode;
-        if (!document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) return; // If is not in mobile, this doesnt apply
-        if (!target.classList) return;
-
-        if (target.classList.contains('link')) {
-            window.open(target.querySelector('a').href, '_new');
-        }
-        if (!target.classList.contains('subSelect') && target.parentNode.style.display == 'block') {
-            target.parentNode.style.display = 'none'
-        }
-
-        evt.preventDefault();
-        evt.stopPropagation();
-    };
-
-    /**
-     * Remove displayed subItems
-     */
-    removeAllSubItems() {
-        for (var index = 0; index < this.allSubItems.length; index++) {
-            this.allSubItems[index].style.display = 'none';
-        }
-    };
-    /**
-     * Remove displayed options
-     */
-    removeAllOptions() {
-        this.removeAllSubItems();
-
-        for (var index = 0; index < this.allToDisplay.length; index++) {
-            var a = this.allToDisplay[index];
-            if (a.style.display == 'block') {
-                a.style.display = 'none';
-            }
-        }
-        for (var index = 0; index < this.allToDisplayBig.length; index++) {
-            var b = this.allToDisplayBig[index];
-            if (b.style.display == 'block') {
-                b.style.display = 'none';
-            }
-        }
-    };
-
-    /**
-     * Hide the canvas and display JS editor
-     */
-    resizeBigJsEditor() {
-        if (this.navBarMobile.offsetHeight > 0) {
-            this.removeAllOptions();
-            this.canvasZoneElement.style.width = '0';
-            this.switchWrapperCode.style.display = 'none';
-            this.fpsLabelElement.style.display = 'none';
-            this.jsEditorElement.style.width = '100%';
-            this.jsEditorElement.style.display = 'block';
-            if (document.getElementsByClassName('gutter-horizontal').length > 0) document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
-            this.switchWrapperCanvas.style.display = 'block';
-        }
-    };
-    /**
-     * Hide the JS editor and display the canvas
-     */
-    resizeBigCanvas() {
-        if (this.navBarMobile.offsetHeight > 0) {
-            this.removeAllOptions();
-            this.jsEditorElement.style.width = '0';
-            this.jsEditorElement.style.display = 'none';
-            document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
-            this.switchWrapperCanvas.style.display = 'none';
-            this.canvasZoneElement.style.width = '100%';
-            this.switchWrapperCode.style.display = 'block';
-            this.fpsLabelElement.style.display = 'block';
-        }
-    };
-    /**
-     * When someone resize from mobile to large screen version
-     */
-    resizeSplitted() {
-        this.removeAllOptions();
-        this.jsEditorElement.style.width = '50%';
-        this.jsEditorElement.style.display = 'block';
-        document.getElementsByClassName('gutter-horizontal')[0].style.display = 'block';
-        this.switchWrapperCanvas.style.display = 'block';
-        this.canvasZoneElement.style.width = '50%';
-        this.switchWrapperCode.style.display = 'block';
-        this.fpsLabelElement.style.display = 'block';
-    };
-
-    /**
-     * Canvas full page
-     */
-    goFullPage () {
-        var canvasElement = document.getElementById("renderCanvas");
-        canvasElement.style.position = "absolute";
-        canvasElement.style.top = 0;
-        canvasElement.style.left = 0;
-        canvasElement.style.zIndex = 100;
-    };
-    /**
-     * Canvas exit full page
-     */
-    exitFullPage () {
-        document.getElementById("renderCanvas").style.position = "relative";
-        document.getElementById("renderCanvas").style.zIndex = 0;
-    };
-    /**
-     * Canvas full screen
-     */
-    goFullscreen (engine) {
-        engine.switchFullscreen(true);
-    };
-    /**
-     * Editor full screen
-     */
-    editorGoFullscreen () {
-        var editorDiv = document.getElementById("jsEditor");
-        if (editorDiv.requestFullscreen) {
-            editorDiv.requestFullscreen();
-        } else if (editorDiv.mozRequestFullScreen) {
-            editorDiv.mozRequestFullScreen();
-        } else if (editorDiv.webkitRequestFullscreen) {
-            editorDiv.webkitRequestFullscreen();
-        }
-
-    };
-
-    /**
-     * Display the metadatas form
-     */
-    displayMetadata () {
-        document.getElementById("saveLayer").style.display = "block";
-    };
-
-    /**
-     * Navigation Overwrites
-     */
-    // TO DO - Apply this when click on TS / JS button
-    exitPrompt (e) {
-        var safeToggle = document.getElementById("safemodeToggle1280");
-        if (safeToggle.classList.contains('checked')) {
-            e = e || window.event;
-            var message =
-                'This page is asking you to confirm that you want to leave - data you have entered may not be saved.';
-            if (e) {
-                e.returnValue = message;
-            }
-            return message;
-        }
-    };
+/**
+ * This JS file is for UI displaying
+ */
+class MenuPG {
+    constructor() {
+        this.allSelect = document.querySelectorAll('.select');
+        this.allToDisplay = document.querySelectorAll('.toDisplay');
+        this.allToDisplayBig = document.querySelectorAll('.toDisplayBig');
+        this.allSubItems = document.querySelectorAll('.toDisplaySub');
+        this.allSubSelect = document.querySelectorAll('.subSelect');
+        this.allNoSubSelect = document.querySelectorAll('.noSubSelect');
+        this.jsEditorElement = document.getElementById('jsEditor');
+        this.canvasZoneElement = document.getElementById('canvasZone');
+        this.switchWrapperCode = document.getElementById('switchWrapperCode');
+        this.switchWrapperCanvas = document.getElementById('switchWrapperCanvas');
+        this.fpsLabelElement = document.getElementById('fpsLabel');
+        this.navBarMobile = document.getElementsByClassName('navBarMobile')[0];
+
+        // Check if mobile version
+        this.isMobileVersion = false;
+        if (this.navBarMobile.offsetHeight > 0) this.isMobileVersion = true;
+        window.onresize = function () {
+            if (!this.isMobileVersion && this.navBarMobile.offsetHeight > 0) {
+                this.isMobileVersion = true;
+                this.resizeBigCanvas();
+            }
+            else if (this.isMobileVersion && this.navBarMobile.offsetHeight == 0) {
+                this.isMobileVersion = false;
+                this.resizeSplitted();
+            }
+        }.bind(this);
+
+        // Click on BJS logo redirection to BJS homepage
+        let logos = document.getElementsByClassName('logo');
+        for (var i = 0; i < logos.length; i++) {
+            logos[i].addEventListener('click', function () {
+                window.open("https://babylonjs.com", "_target");
+            });
+        }
+
+        // On click anywhere, remove displayed options
+        window.addEventListener('click', this.removeallOptions);
+
+        // In mobile mode, resize JSEditor and canvas
+        this.switchWrapperCode.addEventListener('click', this.resizeBigJsEditor.bind(this));
+        this.switchWrapperCanvas.addEventListener('click', this.resizeBigCanvas.bind(this));
+        document.getElementById('runButtonMobile').addEventListener('click', this.resizeBigCanvas.bind(this));
+
+        // Code editor by default.
+        // TO DO - Check why it doesn't work.
+        if (this.navBarMobile.offsetHeight > 0) this.resizeBigJsEditor();
+
+        // Handle click on select elements
+        for (var index = 0; index < this.allSelect.length; index++) {
+            this.allSelect[index].addEventListener('click', this.displayMenu.bind(this));
+        }
+        // Handle mouseover / click on subSelect
+        for (var index = 0; index < this.allSubSelect.length; index++) {
+            var ss = this.allSubSelect[index];
+            ss.addEventListener('click', this.displaySubitems.bind(this));
+            ss.addEventListener('mouseenter', this.displaySubitems.bind(this));
+        }
+        for (var index = 0; index < this.allNoSubSelect.length; index++) {
+            var ss = this.allNoSubSelect[index];
+            ss.addEventListener('mouseenter', this.removeAllSubItems.bind(this));
+        }
+        // Examples must remove all the other menus
+        var examplesButton = document.getElementsByClassName("examplesButton");
+        for (var i = 0; i < examplesButton.length; i++) {
+            examplesButton[i].addEventListener("click", this.removeallOptions);
+        }
+
+        // Fullscreen
+        document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function () {
+            if (document.webkitIsFullScreen) this.goFullPage();
+            else this.exitFullPage();
+        }.bind(this), false);
+
+        // Message before unload
+        window.onbeforeunload = exitPrompt;
+    }
+
+    /**
+     * Display children menu of the caller
+     */
+    displayMenu(evt) {
+        if (evt.target.nodeName != "IMG") {
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+        }
+        var toDisplay = evt.target.parentNode.querySelector('.toDisplay');
+        if (toDisplay) {
+            if (toDisplay.style.display == 'block') {
+                this.removeAllOptions();
+            } else {
+                this.removeAllOptions();
+                toDisplay.style.display = 'block';
+            }
+        }
+        toDisplay = evt.target.parentNode.querySelector('.toDisplayBig');
+        if (toDisplay) {
+            if (toDisplay.style.display == 'block') {
+                this.removeAllOptions();
+            } else {
+                this.removeAllOptions();
+                toDisplay.style.display = 'block';
+            }
+        }
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+    /**
+     * Display children subMenu of the caller
+     */
+    displaySubitems(evt) {
+        // If it's in mobile mode, avoid the "mouseenter" bug
+        if (evt.type == "mouseenter" && this.navBarMobile.offsetHeight > 0) return;
+        this.removeAllSubItems();
+
+        var target = evt.target;
+        if (target.nodeName == "IMG") target = evt.target.parentNode;
+
+        var toDisplay = target.querySelector('.toDisplaySub');
+        if (toDisplay) {
+            toDisplay.style.display = 'block';
+
+            if (document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) {
+                var height = toDisplay.children.length * 33;
+                var parentTop = toDisplay.parentNode.getBoundingClientRect().top;
+                if ((height + parentTop) <= window.innerHeight) {
+                    toDisplay.style.top = parentTop + "px";
+                }
+                else {
+                    toDisplay.style.top = window.innerHeight - height + "px";
+                }
+            }
+        }
+
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+      
+    /**
+     * Handle click on subOptions
+     */
+    clickOptionSub(evt) {
+        var target = evt.target;
+        if (evt.target.tagName == "A") target = evt.target.parentNode;
+        if (!document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) return; // If is not in mobile, this doesnt apply
+        if (!target.classList) return;
+
+        if (target.classList.contains('link')) {
+            window.open(target.querySelector('a').href, '_new');
+        }
+        if (!target.classList.contains('subSelect') && target.parentNode.style.display == 'block') {
+            target.parentNode.style.display = 'none'
+        }
+
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+
+    /**
+     * Remove displayed subItems
+     */
+    removeAllSubItems() {
+        for (var index = 0; index < this.allSubItems.length; index++) {
+            this.allSubItems[index].style.display = 'none';
+        }
+    };
+    /**
+     * Remove displayed options
+     */
+    removeAllOptions() {
+        this.removeAllSubItems();
+
+        for (var index = 0; index < this.allToDisplay.length; index++) {
+            var a = this.allToDisplay[index];
+            if (a.style.display == 'block') {
+                a.style.display = 'none';
+            }
+        }
+        for (var index = 0; index < this.allToDisplayBig.length; index++) {
+            var b = this.allToDisplayBig[index];
+            if (b.style.display == 'block') {
+                b.style.display = 'none';
+            }
+        }
+    };
+
+    /**
+     * Hide the canvas and display JS editor
+     */
+    resizeBigJsEditor() {
+        if (this.navBarMobile.offsetHeight > 0) {
+            this.removeAllOptions();
+            this.canvasZoneElement.style.width = '0';
+            this.switchWrapperCode.style.display = 'none';
+            this.fpsLabelElement.style.display = 'none';
+            this.jsEditorElement.style.width = '100%';
+            this.jsEditorElement.style.display = 'block';
+            if (document.getElementsByClassName('gutter-horizontal').length > 0) document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
+            this.switchWrapperCanvas.style.display = 'block';
+        }
+    };
+    /**
+     * Hide the JS editor and display the canvas
+     */
+    resizeBigCanvas() {
+        if (this.navBarMobile.offsetHeight > 0) {
+            this.removeAllOptions();
+            this.jsEditorElement.style.width = '0';
+            this.jsEditorElement.style.display = 'none';
+            document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
+            this.switchWrapperCanvas.style.display = 'none';
+            this.canvasZoneElement.style.width = '100%';
+            this.switchWrapperCode.style.display = 'block';
+            this.fpsLabelElement.style.display = 'block';
+        }
+    };
+    /**
+     * When someone resize from mobile to large screen version
+     */
+    resizeSplitted() {
+        this.removeAllOptions();
+        this.jsEditorElement.style.width = '50%';
+        this.jsEditorElement.style.display = 'block';
+        document.getElementsByClassName('gutter-horizontal')[0].style.display = 'block';
+        this.switchWrapperCanvas.style.display = 'block';
+        this.canvasZoneElement.style.width = '50%';
+        this.switchWrapperCode.style.display = 'block';
+        this.fpsLabelElement.style.display = 'block';
+    };
+
+    /**
+     * Canvas full page
+     */
+    goFullPage () {
+        var canvasElement = document.getElementById("renderCanvas");
+        canvasElement.style.position = "absolute";
+        canvasElement.style.top = 0;
+        canvasElement.style.left = 0;
+        canvasElement.style.zIndex = 100;
+    };
+    /**
+     * Canvas exit full page
+     */
+    exitFullPage () {
+        document.getElementById("renderCanvas").style.position = "relative";
+        document.getElementById("renderCanvas").style.zIndex = 0;
+    };
+    /**
+     * Canvas full screen
+     */
+    goFullscreen (engine) {
+        engine.switchFullscreen(true);
+    };
+    /**
+     * Editor full screen
+     */
+    editorGoFullscreen () {
+        var editorDiv = document.getElementById("jsEditor");
+        if (editorDiv.requestFullscreen) {
+            editorDiv.requestFullscreen();
+        } else if (editorDiv.mozRequestFullScreen) {
+            editorDiv.mozRequestFullScreen();
+        } else if (editorDiv.webkitRequestFullscreen) {
+            editorDiv.webkitRequestFullscreen();
+        }
+
+    };
+
+    /**
+     * Display the metadatas form
+     */
+    displayMetadata () {
+        document.getElementById("saveLayer").style.display = "block";
+    };
+
+    /**
+     * Navigation Overwrites
+     */
+    // TO DO - Apply this when click on TS / JS button
+    exitPrompt (e) {
+        var safeToggle = document.getElementById("safemodeToggle1280");
+        if (safeToggle.classList.contains('checked')) {
+            e = e || window.event;
+            var message =
+                'This page is asking you to confirm that you want to leave - data you have entered may not be saved.';
+            if (e) {
+                e.returnValue = message;
+            }
+            return message;
+        }
+    };
 };

Playground/js/monacoCreator.js

@@ -1,199 +1,199 @@
-/**
- * This JS file is for Monaco management
- */
-class MonacoCreator {
-    constructor() {
-        this.jsEditor = null;
-        this.monacoMode = "javascript";
-        this.blockEditorChange = false;
-
-        this.compilerTriggerTimeoutID = null;
-
-        this.loadMonaco();
-    }
-
-    // ACCESSORS
-
-    get JsEditor() {
-        return this.jsEditor;
-    };
-
-    get MonacoMode() {
-        return this.monacoMode;
-    };
-    set MonacoMode(mode) {
-        if (this.monacoMode != "javascript"
-            && this.monacoMode != "typescript")
-            console.warn("Error while defining Monaco Mode");
-        this.monacoMode = mode;
-    };
-
-    get BlockEditorChange() {
-        return this.blockEditorChange;
-    };
-    set BlockEditorChange(value) {
-        this.blockEditorChange = value;
-    };
-
-    // FUNCTIONS
-
-    /**
-     * Load the Monaco Node module.
-     */
-    loadMonaco() {
-        var xhr = new XMLHttpRequest();
-
-        xhr.open('GET', "babylon.d.txt", true);
-
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4) {
-                if (xhr.status === 200) {
-                    require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
-                    require(['vs/editor/editor.main'], function () {
-                        if (this.monacoMode === "javascript") {
-                            monaco.languages.typescript.javascriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
-                        } else {
-                            monaco.languages.typescript.typescriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
-                        }
-
-                        run();
-                    });
-                }
-            }
-        };
-        xhr.send(null);
-    };
-
-    /**
-     * Function to (re)create the editor
-     */
-    createMonacoEditor() {
-        var oldCode = "";
-        if (this.jsEditor) {
-            oldCode = this.jsEditor.getValue();
-            this.jsEditor.dispose();
-        }
-
-        var editorOptions = {
-            value: "",
-            language: this.monacoMode,
-            lineNumbers: true,
-            tabSize: "auto",
-            insertSpaces: "auto",
-            roundedSelection: true,
-            automaticLayout: true,
-            scrollBeyondLastLine: false,
-            readOnly: false,
-            theme: settingsPG.vsTheme,
-            contextmenu: false,
-            folding: true,
-            showFoldingControls: "always",
-            renderIndentGuides: true,
-            minimap: {
-                enabled: true
-            }
-        };
-        editorOptions.minimap.enabled = document.getElementById("minimapToggle1280").classList.contains('checked');
-        this.jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
-        this.jsEditor.setValue(oldCode);
-        this.jsEditor.onKeyUp(function () {
-            utils.markDirty();
-        });
-    };
-
-    /**
-     * Format the code in the editor
-     */
-    formatCode () {
-        this.jsEditor.getAction('editor.action.formatDocument').run();
-    };
-
-    /**
-     * Toggle the minimap
-     */
-    toggleMinimap () {
-        var minimapToggle = document.getElementById("minimapToggle1280");
-        if (minimapToggle.classList.contains('checked')) {
-            this.jsEditor.updateOptions({ minimap: { enabled: false } });
-            utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-square" aria-hidden="true"></i>');
-        } else {
-            this.jsEditor.updateOptions({ minimap: { enabled: true } });
-            utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-check-square" aria-hidden="true"></i>');
-        }
-        minimapToggle.classList.toggle('checked');
-    };
-
-    /**
-     * Get the code in the editor
-     * @param {Function} callBack : Function that will be called after retrieving the code.
-     */
-    getRunCode(callBack) {
-        if (settingsPG.ScriptLanguage == "JS")
-            callBack(this.jsEditor.getValue());
-        else if (settingsPG.ScriptLanguage == "TS") {
-            this.triggerCompile(this.JsEditor.getValue(), function (result) {
-                callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
-            });
-        }
-    };
-
-    /**
-     * Usefull function for TypeScript code
-     * @param {*} codeValue 
-     * @param {*} callback 
-     */
-    triggerCompile(codeValue, callback) {
-        if (this.compilerTriggerTimeoutID !== null) {
-            window.clearTimeout(this.compilerTriggerTimeoutID);
-        }
-        this.compilerTriggerTimeoutID = window.setTimeout(function () {
-            try {
-
-                var output = this.transpileModule(codeValue, {
-                    module: ts.ModuleKind.AMD,
-                    target: ts.ScriptTarget.ES5,
-                    noLib: true,
-                    noResolve: true,
-                    suppressOutputPathCheck: true
-                });
-                if (typeof output === "string") {
-                    callback(output);
-                }
-            }
-            catch (e) {
-                utils.showError(e.message, e);
-            }
-        }, 100);
-    };
-    
-    /**
-     * Usefull function for TypeScript code
-     * @param {*} input 
-     * @param {*} options 
-     */
-    transpileModule(input, options) {
-        var inputFileName = options.jsx ? "module.tsx" : "module.ts";
-        var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
-        // Output
-        var outputText;
-        var program = ts.createProgram([inputFileName], options, {
-            getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
-            writeFile: function (_name, text) { outputText = text; },
-            getDefaultLibFileName: function () { return "lib.d.ts"; },
-            useCaseSensitiveFileNames: function () { return false; },
-            getCanonicalFileName: function (fileName) { return fileName; },
-            getCurrentDirectory: function () { return ""; },
-            getNewLine: function () { return "\r\n"; },
-            fileExists: function (fileName) { return fileName === inputFileName; },
-            readFile: function () { return ""; },
-            directoryExists: function () { return true; },
-            getDirectories: function () { return []; }
-        });
-        // Emit
-        program.emit();
-        if (outputText === undefined) {
-            throw new Error("Output generation failed");
-        }
-        return outputText;
-    }
+/**
+ * This JS file is for Monaco management
+ */
+class MonacoCreator {
+    constructor() {
+        this.jsEditor = null;
+        this.monacoMode = "javascript";
+        this.blockEditorChange = false;
+
+        this.compilerTriggerTimeoutID = null;
+
+        this.loadMonaco();
+    }
+
+    // ACCESSORS
+
+    get JsEditor() {
+        return this.jsEditor;
+    };
+
+    get MonacoMode() {
+        return this.monacoMode;
+    };
+    set MonacoMode(mode) {
+        if (this.monacoMode != "javascript"
+            && this.monacoMode != "typescript")
+            console.warn("Error while defining Monaco Mode");
+        this.monacoMode = mode;
+    };
+
+    get BlockEditorChange() {
+        return this.blockEditorChange;
+    };
+    set BlockEditorChange(value) {
+        this.blockEditorChange = value;
+    };
+
+    // FUNCTIONS
+
+    /**
+     * Load the Monaco Node module.
+     */
+    loadMonaco() {
+        var xhr = new XMLHttpRequest();
+
+        xhr.open('GET', "babylon.d.txt", true);
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
+                    require(['vs/editor/editor.main'], function () {
+                        if (this.monacoMode === "javascript") {
+                            monaco.languages.typescript.javascriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
+                        } else {
+                            monaco.languages.typescript.typescriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
+                        }
+
+                        run();
+                    });
+                }
+            }
+        };
+        xhr.send(null);
+    };
+
+    /**
+     * Function to (re)create the editor
+     */
+    createMonacoEditor() {
+        var oldCode = "";
+        if (this.jsEditor) {
+            oldCode = this.jsEditor.getValue();
+            this.jsEditor.dispose();
+        }
+
+        var editorOptions = {
+            value: "",
+            language: this.monacoMode,
+            lineNumbers: true,
+            tabSize: "auto",
+            insertSpaces: "auto",
+            roundedSelection: true,
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+            readOnly: false,
+            theme: settingsPG.vsTheme,
+            contextmenu: false,
+            folding: true,
+            showFoldingControls: "always",
+            renderIndentGuides: true,
+            minimap: {
+                enabled: true
+            }
+        };
+        editorOptions.minimap.enabled = document.getElementById("minimapToggle1280").classList.contains('checked');
+        this.jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
+        this.jsEditor.setValue(oldCode);
+        this.jsEditor.onKeyUp(function () {
+            utils.markDirty();
+        });
+    };
+
+    /**
+     * Format the code in the editor
+     */
+    formatCode () {
+        this.jsEditor.getAction('editor.action.formatDocument').run();
+    };
+
+    /**
+     * Toggle the minimap
+     */
+    toggleMinimap () {
+        var minimapToggle = document.getElementById("minimapToggle1280");
+        if (minimapToggle.classList.contains('checked')) {
+            this.jsEditor.updateOptions({ minimap: { enabled: false } });
+            utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-square" aria-hidden="true"></i>');
+        } else {
+            this.jsEditor.updateOptions({ minimap: { enabled: true } });
+            utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-check-square" aria-hidden="true"></i>');
+        }
+        minimapToggle.classList.toggle('checked');
+    };
+
+    /**
+     * Get the code in the editor
+     * @param {Function} callBack : Function that will be called after retrieving the code.
+     */
+    getRunCode(callBack) {
+        if (settingsPG.ScriptLanguage == "JS")
+            callBack(this.jsEditor.getValue());
+        else if (settingsPG.ScriptLanguage == "TS") {
+            this.triggerCompile(this.JsEditor.getValue(), function (result) {
+                callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
+            });
+        }
+    };
+
+    /**
+     * Usefull function for TypeScript code
+     * @param {*} codeValue 
+     * @param {*} callback 
+     */
+    triggerCompile(codeValue, callback) {
+        if (this.compilerTriggerTimeoutID !== null) {
+            window.clearTimeout(this.compilerTriggerTimeoutID);
+        }
+        this.compilerTriggerTimeoutID = window.setTimeout(function () {
+            try {
+
+                var output = this.transpileModule(codeValue, {
+                    module: ts.ModuleKind.AMD,
+                    target: ts.ScriptTarget.ES5,
+                    noLib: true,
+                    noResolve: true,
+                    suppressOutputPathCheck: true
+                });
+                if (typeof output === "string") {
+                    callback(output);
+                }
+            }
+            catch (e) {
+                utils.showError(e.message, e);
+            }
+        }, 100);
+    };
+    
+    /**
+     * Usefull function for TypeScript code
+     * @param {*} input 
+     * @param {*} options 
+     */
+    transpileModule(input, options) {
+        var inputFileName = options.jsx ? "module.tsx" : "module.ts";
+        var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
+        // Output
+        var outputText;
+        var program = ts.createProgram([inputFileName], options, {
+            getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
+            writeFile: function (_name, text) { outputText = text; },
+            getDefaultLibFileName: function () { return "lib.d.ts"; },
+            useCaseSensitiveFileNames: function () { return false; },
+            getCanonicalFileName: function (fileName) { return fileName; },
+            getCurrentDirectory: function () { return ""; },
+            getNewLine: function () { return "\r\n"; },
+            fileExists: function (fileName) { return fileName === inputFileName; },
+            readFile: function () { return ""; },
+            directoryExists: function () { return true; },
+            getDirectories: function () { return []; }
+        });
+        // Emit
+        program.emit();
+        if (outputText === undefined) {
+            throw new Error("Output generation failed");
+        }
+        return outputText;
+    }
 };

Playground/js/settingsPG.js

@@ -1,133 +1,133 @@
-/**
- * This JS file is for settings :
- * - Theme
- * - Script language
- * - Font size
- */
-/**
- * TO DO :
- * - Set the font in the localStorage
- */
-class SettingsPG {
-    constructor(monacoCreator) {
-        this.monacoCreator = monacoCreator;
-
-        // The elements that will color with languages
-        this.elementForscriptLanguage = [
-            '#exampleList #exampleBanner',
-            '.navbar',
-            '.navbar .category',
-            '.navbar .select .toDisplay',
-            '.navbar .select .toDisplay .subSelect .toDisplaySub',
-            '#fpsLabel',
-            '.save-form',
-            '#switchWrapper'
-        ];
-        // The elements that will color with theme
-        this.elementToTheme = [
-            '.wrapper #jsEditor',
-            '.wrapper .gutter'
-        ];
-        // Editor font size
-        this.fontSize = 14;
-        // Editor theme
-        this.vsTheme = localStorage.getItem("bjs-playground-theme") || 'light';
-        // Editor language
-        this.scriptLanguage = localStorage.getItem("bjs-playground-scriptLanguage") || 'JS';
-        this.defaultScene = "scripts/basic scene.js";
-        if(this.scriptLanguage == "JS") {
-            this.defaultScene = "scripts/basic scene.js";
-            monacoCreator.monacoMode = "javascript";
-        }
-        else if(this.scriptLanguage == "TS") {
-            this.defaultScene = "scripts/basic scene.txt";
-            monacoCreator.monacoMode = "typescript";
-        }
-    }
-
-    get ScriptLanguage() {
-        return this.scriptLanguage;
-    };
-    set ScriptLanguage(value) {
-        localStorage.setItem("bjs-playground-scriptLanguage", value);
-        this.scriptLanguage = value;
-    };
-    get DefaultScene() {
-        return this.defaultScene;
-    };
-
-
-    /**
-     * Change font size
-     */
-    setFontSize(size) {
-        this.fontSize = size;
-        this.monacoCreator.jsEditor.updateOptions({ fontSize: size });
-        var array = document.getElementsByClassName("displayFontSize");
-        for (var i = 0; i < array.length; i++) {
-            var subArray = array[i].children;
-            for (var j = 0; j < subArray.length; j++) {
-                subArray[j].classList.remove("selected");
-                if (subArray[j].innerText == size)
-                    subArray[j].classList.add("selected");
-            }
-        }
-    };
-    /**
-     * Toggle Typescript / Javascript language
-     */
-    setScriptLanguage() {
-        for (var index = 0; index < this.elementForscriptLanguage.length; index++) {
-            var obj = this.elementForscriptLanguage[index];
-            var domObjArr = document.querySelectorAll(obj);
-            for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
-                var domObj = domObjArr[domObjIndex];
-                domObj.classList.remove('languageJS');
-                domObj.classList.remove('languageTS');
-                domObj.classList.add("language" + this.scriptLanguage);
-            }
-        }
-        if (this.scriptLanguage == "JS") {
-            utils.setToMultipleID("toJSbutton", "removeClass", "floatLeft");
-        }
-        else if (this.scriptLanguage == "TS") {
-            utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
-        }
-    };
-    /**
-     * Set the theme (dark / light)
-     */
-    setTheme(theme) {
-        localStorage.setItem("bjs-playground-theme", theme);
-        // Get the Monaco theme name.
-        // Change the selected button style
-        utils.setToMultipleID("darkTheme", "removeClass", "selected");
-        utils.setToMultipleID("lightTheme", "removeClass", "selected");
-        if (theme == 'dark') {
-            this.vsTheme = 'vs-dark';
-            utils.setToMultipleID("darkTheme", "addClass", "selected");
-        }
-        else {
-            this.vsTheme = 'vs';
-            utils.setToMultipleID("lightTheme", "addClass", "selected");
-        }
-
-        this.monacoCreator.createMonacoEditor();
-
-        this.setFontSize(this.fontSize);
-        // Color the elements to theme
-        for (var index = 0; index < this.elementToTheme.length; index++) {
-            var obj = this.elementToTheme[index];
-            var domObjArr = document.querySelectorAll(obj);
-            for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
-                var domObj = domObjArr[domObjIndex];
-                domObj.classList.remove('light');
-                domObj.classList.remove('dark');
-                domObj.classList.add(theme);
-            }
-        }
-    };
-    restoreTheme(monacoCreator) {
-        this.setTheme(this.vsTheme, monacoCreator);
-    };
+/**
+ * This JS file is for settings :
+ * - Theme
+ * - Script language
+ * - Font size
+ */
+/**
+ * TO DO :
+ * - Set the font in the localStorage
+ */
+class SettingsPG {
+    constructor(monacoCreator) {
+        this.monacoCreator = monacoCreator;
+
+        // The elements that will color with languages
+        this.elementForscriptLanguage = [
+            '#exampleList #exampleBanner',
+            '.navbar',
+            '.navbar .category',
+            '.navbar .select .toDisplay',
+            '.navbar .select .toDisplay .subSelect .toDisplaySub',
+            '#fpsLabel',
+            '.save-form',
+            '#switchWrapper'
+        ];
+        // The elements that will color with theme
+        this.elementToTheme = [
+            '.wrapper #jsEditor',
+            '.wrapper .gutter'
+        ];
+        // Editor font size
+        this.fontSize = 14;
+        // Editor theme
+        this.vsTheme = localStorage.getItem("bjs-playground-theme") || 'light';
+        // Editor language
+        this.scriptLanguage = localStorage.getItem("bjs-playground-scriptLanguage") || 'JS';
+        this.defaultScene = "scripts/basic scene.js";
+        if(this.scriptLanguage == "JS") {
+            this.defaultScene = "scripts/basic scene.js";
+            monacoCreator.monacoMode = "javascript";
+        }
+        else if(this.scriptLanguage == "TS") {
+            this.defaultScene = "scripts/basic scene.txt";
+            monacoCreator.monacoMode = "typescript";
+        }
+    }
+
+    get ScriptLanguage() {
+        return this.scriptLanguage;
+    };
+    set ScriptLanguage(value) {
+        localStorage.setItem("bjs-playground-scriptLanguage", value);
+        this.scriptLanguage = value;
+    };
+    get DefaultScene() {
+        return this.defaultScene;
+    };
+
+
+    /**
+     * Change font size
+     */
+    setFontSize(size) {
+        this.fontSize = size;
+        this.monacoCreator.jsEditor.updateOptions({ fontSize: size });
+        var array = document.getElementsByClassName("displayFontSize");
+        for (var i = 0; i < array.length; i++) {
+            var subArray = array[i].children;
+            for (var j = 0; j < subArray.length; j++) {
+                subArray[j].classList.remove("selected");
+                if (subArray[j].innerText == size)
+                    subArray[j].classList.add("selected");
+            }
+        }
+    };
+    /**
+     * Toggle Typescript / Javascript language
+     */
+    setScriptLanguage() {
+        for (var index = 0; index < this.elementForscriptLanguage.length; index++) {
+            var obj = this.elementForscriptLanguage[index];
+            var domObjArr = document.querySelectorAll(obj);
+            for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
+                var domObj = domObjArr[domObjIndex];
+                domObj.classList.remove('languageJS');
+                domObj.classList.remove('languageTS');
+                domObj.classList.add("language" + this.scriptLanguage);
+            }
+        }
+        if (this.scriptLanguage == "JS") {
+            utils.setToMultipleID("toJSbutton", "removeClass", "floatLeft");
+        }
+        else if (this.scriptLanguage == "TS") {
+            utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
+        }
+    };
+    /**
+     * Set the theme (dark / light)
+     */
+    setTheme(theme) {
+        localStorage.setItem("bjs-playground-theme", theme);
+        // Get the Monaco theme name.
+        // Change the selected button style
+        utils.setToMultipleID("darkTheme", "removeClass", "selected");
+        utils.setToMultipleID("lightTheme", "removeClass", "selected");
+        if (theme == 'dark') {
+            this.vsTheme = 'vs-dark';
+            utils.setToMultipleID("darkTheme", "addClass", "selected");
+        }
+        else {
+            this.vsTheme = 'vs';
+            utils.setToMultipleID("lightTheme", "addClass", "selected");
+        }
+
+        this.monacoCreator.createMonacoEditor();
+
+        this.setFontSize(this.fontSize);
+        // Color the elements to theme
+        for (var index = 0; index < this.elementToTheme.length; index++) {
+            var obj = this.elementToTheme[index];
+            var domObjArr = document.querySelectorAll(obj);
+            for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
+                var domObj = domObjArr[domObjIndex];
+                domObj.classList.remove('light');
+                domObj.classList.remove('dark');
+                domObj.classList.add(theme);
+            }
+        }
+    };
+    restoreTheme(monacoCreator) {
+        this.setTheme(this.vsTheme, monacoCreator);
+    };
 };

Playground/js/utils.js

@@ -1,79 +1,79 @@
-/**
- * This JS file contains utils functions
- */
-class Utils {
-    constructor() {
-        this.multipleSize = [1280, 1024, 'Mobile'];
-    }
-
-    // TO DO - Comment this
-    markDirty() {
-        if (monacoCreator.BlockEditorChange) return;
-
-        // setToMultipleID("currentScript", "innerHTML", "Custom");
-        this.setToMultipleID("safemodeToggle", "addClass", "checked");
-        // setToMultipleID("minimapToggle", "addClass", "checked"); // Why ?!
-        this.setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
-    };
-
-    /**
-     * Used to show error messages
-     * @param {String} errorMessage 
-     * @param {String} errorEvent 
-     */
-    showError(errorMessage, errorEvent) {
-        var errorContent =
-            '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>';
-        if (errorEvent) {
-            var regEx = /\(.+:(\d+):(\d+)\)\n/g;
-
-            var match = regEx.exec(errorEvent.stack);
-            if (match) {
-                errorContent += "Line ";
-                var lineNumber = match[1];
-                var columnNumber = match[2];
-
-                errorContent += lineNumber + ':' + columnNumber + ' - ';
-            }
-        }
-
-        errorContent += errorMessage + '</div>';
-
-        document.getElementById("errorZone").style.display = 'block';
-        document.getElementById("errorZone").innerHTML = errorContent;
-
-        // Close button error
-        document.getElementById("errorZone").querySelector('.close').addEventListener('click', function () {
-            document.getElementById("errorZone").style.display = 'none';
-        });
-    };
-
-    /**
-     * Apply things to the differents menu sizes
-     */
-    setToMultipleID(id, thingToDo, param) {
-        this.multipleSize.forEach(function (size) {
-            if (thingToDo == "innerHTML") {
-                document.getElementById(id + size).innerHTML = param
-            }
-            else if (thingToDo == "click") {
-                if (param.length > 1) {
-                    for (var i = 0; i < param.length; i++) {
-                        document.getElementById(id + size).addEventListener("click", param[i]);
-                    }
-                }
-                else
-                    document.getElementById(id + size).addEventListener("click", param);
-            }
-            else if (thingToDo == "addClass") {
-                document.getElementById(id + size).classList.add(param);
-            }
-            else if (thingToDo == "removeClass") {
-                document.getElementById(id + size).classList.remove(param);
-            }
-            else if (thingToDo == "display") {
-                document.getElementById(id + size).style.display = param;
-            }
-        });
-    };
+/**
+ * This JS file contains utils functions
+ */
+class Utils {
+    constructor() {
+        this.multipleSize = [1280, 1024, 'Mobile'];
+    }
+
+    // TO DO - Comment this
+    markDirty() {
+        if (monacoCreator.BlockEditorChange) return;
+
+        // setToMultipleID("currentScript", "innerHTML", "Custom");
+        this.setToMultipleID("safemodeToggle", "addClass", "checked");
+        // setToMultipleID("minimapToggle", "addClass", "checked"); // Why ?!
+        this.setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
+    };
+
+    /**
+     * Used to show error messages
+     * @param {String} errorMessage 
+     * @param {String} errorEvent 
+     */
+    showError(errorMessage, errorEvent) {
+        var errorContent =
+            '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>';
+        if (errorEvent) {
+            var regEx = /\(.+:(\d+):(\d+)\)\n/g;
+
+            var match = regEx.exec(errorEvent.stack);
+            if (match) {
+                errorContent += "Line ";
+                var lineNumber = match[1];
+                var columnNumber = match[2];
+
+                errorContent += lineNumber + ':' + columnNumber + ' - ';
+            }
+        }
+
+        errorContent += errorMessage + '</div>';
+
+        document.getElementById("errorZone").style.display = 'block';
+        document.getElementById("errorZone").innerHTML = errorContent;
+
+        // Close button error
+        document.getElementById("errorZone").querySelector('.close').addEventListener('click', function () {
+            document.getElementById("errorZone").style.display = 'none';
+        });
+    };
+
+    /**
+     * Apply things to the differents menu sizes
+     */
+    setToMultipleID(id, thingToDo, param) {
+        this.multipleSize.forEach(function (size) {
+            if (thingToDo == "innerHTML") {
+                document.getElementById(id + size).innerHTML = param
+            }
+            else if (thingToDo == "click") {
+                if (param.length > 1) {
+                    for (var i = 0; i < param.length; i++) {
+                        document.getElementById(id + size).addEventListener("click", param[i]);
+                    }
+                }
+                else
+                    document.getElementById(id + size).addEventListener("click", param);
+            }
+            else if (thingToDo == "addClass") {
+                document.getElementById(id + size).classList.add(param);
+            }
+            else if (thingToDo == "removeClass") {
+                document.getElementById(id + size).classList.remove(param);
+            }
+            else if (thingToDo == "display") {
+                document.getElementById(id + size).style.display = param;
+            }
+        });
+    };
 }