Playground v4.4 : QRcode is back. Version selector too.

Playground/css/index.css

@@ -414,6 +414,13 @@ body {
 .navbar .select {
     position: relative;
 }
+.navbar .select span {
+    width: 100%;
+    height: 55px;
+    line-height: 55px;
+    font-family: "acumin-pro-extra-condensed";
+    font-size: 20px;
+}
 
 .navbar .select .subSelect {
     position: relative; 
@@ -429,6 +436,10 @@ body {
     text-transform: uppercase;
     background-color: #201936;
 }
+.navbar .select .toDisplay.currentVersionDisplay {
+    width: 100%;
+    display: none;
+}
 .navbar .select .toDisplay .option {
     font-size: 20px;
     height: 35px;
@@ -454,9 +465,6 @@ body {
 .navbar .select .toDisplay.languageTS .option:hover {
     background-color: #ff7656;
 }
-.navbar .select .toDisplay.currentVersionDisplay {
-    width: auto;
-}
 
 .navbar .select .subSelect .toDisplaySub {
     position: absolute;
@@ -491,7 +499,17 @@ body {
     color: white;
     background-color: #ff7656;
 }
-
+.navbar .select .subSelect .qrCodeImage div {
+    width: 256px;
+    height: 256px;
+    padding: 2px;
+}
+.navbar .select .subSelect .qrCodeImage.languageJS div {
+    background-color: #9379e6;
+}
+.navbar .select .subSelect .qrCodeImage.languageTS div {
+    background-color: #e0684b;
+}
 
 .navbar .select .toDisplayBig.dark {
     background-color: #333;    
@@ -560,11 +578,6 @@ body {
     content: "\00a0 \00a0 \00a0 \f096";
 }
 
-#qrCodeImage div {
-    width: 256px;
-    height: 256px;
-}
-
 #errorZone {
     display:none;
     position: absolute;
@@ -686,12 +699,6 @@ body {
     .navBar1024 { display: none; }
     .navBarMobile { display: none; }
 
-    #qrCodeImage {
-        height:auto;
-        padding: 20px;
-        padding-bottom: 10px;
-    }
-
     .navbar .select .toDisplayBig ul {
         column-count: 3;
     }
@@ -701,12 +708,6 @@ body {
     .navBar1024 { display: block; }
     .navBarMobile { display: none; }
 
-    #qrCodeImage {
-        height:auto;
-        padding: 20px;
-        padding-bottom: 10px;
-    }
-
     .navbar .categoryTitle {
         width: 315px;
     }

Playground/css/index_mobile.css

@@ -179,7 +179,8 @@
         filter: none;
     }
 
-    .navbar .select .subSelect .toDisplaySub {
+    .navbar .select .subSelect .toDisplaySub,
+    .navbar .select .subSelect .currentVersionDisplay {
         position: fixed;
         top: 40px;
         left: 180px;
@@ -208,6 +209,15 @@
         background-color: #e0684b;
         color: white;
     }
+    .navbar .select .subSelect .qrCodeImage div {
+        width: 180px;
+        height: 180px;
+        padding: 2px;
+    }
+    .navbar .select .subSelect .qrCodeImage div canvas {
+        width: 180px;
+        height: 180px;
+    }
 
     .save-layer .save-form {
         z-index: 15;

Playground/index.html

@@ -101,8 +101,8 @@
                     </div>
                     <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i
                             class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage1280">QR Code Image</div>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
                         </div>
                     </div>
                     <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
@@ -112,11 +112,9 @@
         </div>
 
         <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1280">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option">4.0</div>
-                </div>
+            <div class="button select">
+                <span id="currentVersion1280"></span>
+                <div class="toDisplay currentVersionDisplay" style="display: none"></div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
@@ -172,8 +170,8 @@
                     </div>
                     <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i
                             class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage1024">QR Code Image</div>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
                         </div>
                     </div>
                     <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
@@ -183,10 +181,9 @@
         </div>
 
         <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion1024">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option">4.0</div>
+            <div class="button select">
+                <span id="currentVersion1024"></span>
+                <div class="toDisplay currentVersionDisplay" style="display: none">
                 </div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
@@ -207,6 +204,12 @@
                     <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">
+                        Version<div id="currentVersionMobile" style="display: none"></div>
+                        <div class="toDisplaySub currentVersionDisplay">
+                        </div>
+                    </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
                             <div class="option selected" id="darkThemeMobile">Dark</div>
@@ -238,11 +241,11 @@
                     <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="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                    <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
                         </div>
-                    </div>
+                    </div> -->
                     <div class="option nosubselect" id="metadataButtonMobile"><img
                             src="css/img/metadataButton.svg">Metadata</div>
                     <div class="option nosubselect"><img class="examplesButton"
@@ -274,15 +277,6 @@
             </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">4.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">
@@ -372,6 +366,7 @@
     <script src="js/qrcode.js"></script>
 
     <!-- Main scripts -->
+    <script src="js/config_versions.js"></script>
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
     <script src="js/examples.js"></script>

Playground/js/main.js

@@ -125,7 +125,6 @@ class Main {
         this.parent.utils.setToMultipleID("editorFullscreenButton", "click", this.parent.menuPG.editorGoFullscreen.bind(this.parent.menuPG));
         // Format
         this.parent.utils.setToMultipleID("formatButton", "click", this.parent.monacoCreator.formatCode.bind(this.parent.monacoCreator));
-        this.parent.utils.setToMultipleID("qrCodeHover", "over", this.parent.menuPG.showQRCode.bind(this.parent.menuPG));
         // Minimap
         this.parent.utils.setToMultipleID("minimapToggle", "click", this.parent.monacoCreator.toggleMinimap.bind(this.parent.monacoCreator));
         // Debug
@@ -137,6 +136,8 @@ class Main {
 
         // Restore theme
         this.parent.settingsPG.restoreTheme();
+        // Restore font size
+        this.parent.settingsPG.restoreFont();
         // Restore language
         this.parent.settingsPG.setScriptLanguage();
         // Check if it's mobile mode. If true, switch to full canvas by default
@@ -298,7 +299,6 @@ class Main {
                             var query = queryString.replace("?", "");
                             index = parseInt(query);
                             if (!isNaN(index)) {
-                                // TO DO - Should we remove this deprecated code ?
                                 var newPG = "";
                                 switch (index) {
                                     case 1: newPG = "#TAZ2CB#0"; break; // Basic scene
@@ -507,10 +507,7 @@ class Main {
          */
     compileAndRun() {
         try {
-            var waitRing = document.getElementById("waitDiv");
-            if (waitRing) {
-                waitRing.style.display = "none";
-            }
+            this.parent.menuPG.hideWaitDiv();
 
             if (!BABYLON.Engine.isSupported()) {
                 this.parent.utils.showError("Your browser does not support WebGL. Please, try to update it, or install a compatible one.", null);

Playground/js/menuPG.js

@@ -40,7 +40,6 @@ class MenuPG {
         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
@@ -88,9 +87,62 @@ class MenuPG {
         window.addEventListener('click', function () {
             this.removeAllOptions();
         }.bind(this));
+
+        // Version selection
+        for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
+            var versionButtons = document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement;
+            versionButtons.addEventListener("click", function (evt) {
+                this.displayVersionsMenu(evt);
+            }.bind(this));
+
+            for (var j = 0; j < CONFIG_last_versions.length; j++) {
+                var newButton = document.createElement("div");
+                newButton.classList.add("option");
+                // newButton.classList.add("noSubSelect");
+                newButton.innerText = CONFIG_last_versions[j][0];
+                newButton.value = CONFIG_last_versions[j][1];
+
+                newButton.addEventListener("click", function (evt) {
+                    this.parent.settingsPG.setBJSversion(evt);
+                    this.displayWaitDiv();
+                }.bind(this));
+
+                versionButtons.lastElementChild.appendChild(newButton);
+            }
+        }
+
+        this.showQRCodes();
     }
 
     /**
+     * The logo displayed while loading the page
+     */
+    displayWaitDiv() {
+        document.getElementById("waitDiv").style.display = "flex";
+    };
+    hideWaitDiv() {
+        document.getElementById("waitDiv").style.display = "none";
+    };
+
+    displayVersionNumber(version) {
+        this.hideWaitDiv();
+        for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
+            document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement.firstElementChild.innerText = "v." + version;
+        }
+    };
+
+    /**
+     * Display children menu of the version button
+     */
+    displayVersionsMenu(evt) {
+        if (evt.target.classList.contains("option")) return;
+
+        var toggle = evt.target.lastElementChild;
+        if (toggle == null) toggle = evt.target.parentElement.lastElementChild;
+        if (toggle.style.display == "none") toggle.style.display = "block";
+        else toggle.style.display = "none";
+    };
+    /**
      * Display children menu of the caller
      */
     displayMenu(evt) {
@@ -312,18 +364,18 @@ class MenuPG {
     };
 
     // TO DO - Make it work with all sizes
-    showQRCode() {
-        console.log("Plop");
-        $("#qrCodeImage1280").empty();
-        var playgroundCode = window.location.href.split("#");
-        playgroundCode.shift();
-        $("#qrCodeImage1280").qrcode({ text: "https://playground.babylonjs.com/frame.html#" + (playgroundCode.join("#")) });
+    showQRCodes() {
+        for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
+            $("#qrCodeImage" + this.parent.utils.multipleSize[i]).empty();
+            var playgroundCode = window.location.href.split("#");
+            playgroundCode.shift();
+            $("#qrCodeImage" + this.parent.utils.multipleSize[i]).qrcode({ text: "https://playground.babylonjs.com/frame.html#" + (playgroundCode.join("#")) });
+        }
     };
 
     /**
-     * Comes from "pbt.js"
+     * When running code, display the loader
      */
-    // TO DO - Comment this correctly
     showBJSPGMenu() {
         var headings = document.getElementsByClassName('category');
         for (var i = 0; i < headings.length; i++) {

Playground/js/settingsPG.js

@@ -8,8 +8,6 @@ class SettingsPG {
     constructor(parent) {
         this.parent = parent;
 
-        // TO DO - Set the fond in the localStorage (same as theme and language)
-
         // The elements that will color with languages
         this.elementForscriptLanguage = [
             '#exampleList #exampleBanner',
@@ -27,20 +25,23 @@ class SettingsPG {
             '.wrapper .gutter'
         ];
         // Editor font size
-        this.fontSize = 14;
+        this.fontSize = localStorage.getItem("bjs-playground-font") || 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") {
+        if (this.scriptLanguage == "JS") {
             this.defaultScene = "scripts/basic scene.js";
             this.parent.monacoCreator.monacoMode = "javascript";
         }
-        else if(this.scriptLanguage == "TS") {
+        else if (this.scriptLanguage == "TS") {
             this.defaultScene = "scripts/basic scene.txt";
             this.parent.monacoCreator.monacoMode = "typescript";
         }
+
+        // Last BJS version
+        this.lastBJSversionURL = "";
     }
 
     get ScriptLanguage() {
@@ -59,6 +60,7 @@ class SettingsPG {
      * Change font size
      */
     setFontSize(size) {
+        localStorage.setItem("bjs-playground-font", size);
         this.fontSize = size;
         this.parent.monacoCreator.jsEditor.updateOptions({ fontSize: size });
         var array = document.getElementsByClassName("displayFontSize");
@@ -71,6 +73,10 @@ class SettingsPG {
             }
         }
     };
+    restoreFont() {
+        this.setFontSize(this.fontSize);
+    };
+
     /**
      * Toggle Typescript / Javascript language
      */
@@ -92,6 +98,7 @@ class SettingsPG {
             this.parent.utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
         }
     };
+
     /**
      * Set the theme (dark / light)
      */
@@ -128,4 +135,21 @@ class SettingsPG {
     restoreTheme() {
         this.setTheme(this.vsTheme, this.parent.monacoCreator);
     };
+
+    /**
+     * Set a different BJS version
+     */
+    setBJSversion(evt) {
+        // if(this.lastBJSversionURL != '') unload(this.lastBJSversionURL);
+        BABYLON = null;
+
+        var newScript = document.createElement('script');
+        this.lastBJSversionURL = evt.target.value;
+        newScript.src = this.lastBJSversionURL;
+        newScript.onload = function () {
+            this.parent.menuPG.displayVersionNumber(BABYLON.Engine.Version);
+        }.bind(this);
+
+        document.head.appendChild(newScript);
+    };
 };

Playground/js/utils.js

@@ -8,7 +8,9 @@ class Utils {
         this.multipleSize = [1280, 1024, 'Mobile'];
     }
 
-    // TO DO - Comment this correctly
+    /**
+     * When something is written in the editor, it reset the safe mode
+     */
     markDirty() {
         if (this.parent.monacoCreator.BlockEditorChange) return;