Update sandbox - step 1

sandbox/Assets/Icon_Fullscreen.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Icon_Fullscreen</title><path class="cls-1" d="M117.66,42.34v26.9h-5.38V51.54L51.54,112.28h17.7v5.38H42.34V90.76h5.38v17.7l60.74-60.74H90.76V42.34Z"/></svg>

sandbox/Assets/Icon_OpenFile.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Icon_OpenFile</title><path class="cls-1" d="M49.45,113H96.53v4.7H44.74V42.34h41L106,62.53V80h-4.71V65.88H82.41V47h-33ZM87.12,61.17H97.89L87.12,50.39Zm24.82,37.55-6-6v24.9h-4.71V92.76l-6,6-3.31-3.31L103.6,83.75l11.66,11.66Z"/></svg>

sandbox/index-local.html

@@ -11,31 +11,17 @@
     <canvas id="renderCanvas"></canvas>
     <div id="logo">
     </div>
-    <div id="help01" class="help">
-        <span class="helpText">Press this button to open your assets' files</span>
-        <img id="helpArrow" src="./Assets/FlecheTuto.png" />
-    </div>
-    <div id="help02" class="help2">
-        <span class="helpText">Or directly drag'n'drop your files in the browser</span>
-    </div>
     <div id="footer" class="footer">
         <div class="footerLeft">
-            Powered by <a href="http://www.babylonjs.com/" target="_blank">Babylon.js</a><br />
         </div>
         <div class="footerRight">
-            <ul>
-                <li id="btnFullscreen">
-                    <img src="./Assets/BtnFullscreen.png" alt="Switch the scene to full screen" title="Switch the scene to full screen" />
-                </li>
-                <li id="btnPerf">
-                    <img src="./Assets/BtnPerf.png" alt="Display inspector" title="Display inspector" />
-                </li>
-                <li id="btnFiles">
-                    <div class="custom-upload" title="Open your .babylon scene from your hard drive">
-                        <input type="file" id="files" multiple />
-                    </div>
-                </li>
-            </ul>
+            <a href="#" id="btnFullscreen" class="hidden"><img src="./Assets/Icon_Fullscreen.svg" alt="Switch the scene to full screen" title="Switch the scene to full screen" /></a> 
+            <a href="#" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg" alt="Display inspector" title="Display inspector" /></i></a> 
+            <a href="#">
+                <div class="custom-upload" title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
+                    <input type="file" id="files" multiple />
+                </div>
+            </a>
         </div>
     </div>
     <div id="errorZone"></div>

sandbox/index.css

@@ -7,46 +7,6 @@
     font-family: "Segoe WP", "Segoe UI", "Verdana", "Arial";
 }
 
-#DebugLayerLogs {
-    height: 100px !important;   
-}
-
-    #DebugLayerLogs > div:first-child {
-        background-color: #3B789A !important;
-    }
-
-#DebugLayerStats {
-    margin-top: 2px !important;
-}
-
-#DebugLayerStats div:nth-child(2) {
-    max-height: 180px !important;
-}
-
-    #DebugLayerStats > div:first-child {
-        background-color: #3B789A !important;
-    }
-
-#DebugLayerOptions {
-    overflow-y: hidden !important;
-}
-
-#DebugLayerOptions > div:first-child {
-    background-color: #3B789A !important;
-}
-
-#DebugLayerTree > div:first-child {
-    background-color: #3B789A !important;
-}
-
-a {
-    color: white;
-}
-
-    a:visited {
-        color: white;
-    }
-
 .hidden {
     display: none;
 }
@@ -122,38 +82,30 @@ a {
     width: 85px;
 }
 
-.footer {
-    position: absolute;
-    width: 100%;
-    height: 60px;
-    bottom: 0;
-    background-color: #3B789A;
-    padding-top: 5px;
-    padding-left: 15px;
+a {
+    color: white;
 }
 
-.perffooter {
+    a:visited {
+        color: white;
+    }
+
+
+.footer {
     position: absolute;
     width: 100%;
-    height: 60px;
-    bottom: 0px;
+    height: 56px;
+    bottom: 0;
     background-color: #3B789A;
-    padding-top: 5px;
     padding-left: 15px;
-        transition: all 0.5s ease;
-    -webkit-transition: all 0.5s ease;
 }
 
-    .perffooter.shown {
-        transform: translateY(-65px);
-        -webkit-transform: translateY(-65px);
-    }
-
 .footerRight {
     display: inline;
     position: absolute;
     bottom: 0;
     right: 10px;
+    top: 0px;
 }
 
 .footerLeft {
@@ -163,12 +115,35 @@ a {
     color: white;
 }
 
+.footerRight a {
+    float: left; /* Float links side by side */
+    width: 56px; 
+    height: 56px;
+    margin: 0px;
+    padding: 0;
+    transition: all 0.3s ease; /* Add transition for hover effects */
+}
+
+.footerRight a img {
+    width: 48px; 
+    height: 48px;
+    margin: 4px;
+}
+
+.footerRight a:hover {
+    background-color: #162D3A; /* Add a hover color */
+}
+
+.footerRight a:active {
+    background-color: #2c5a74; /* Add a hover color */
+}
+
 .custom-upload {
     position: relative;
-    background:url(./Assets/BtnDragdrop.png) center right no-repeat;
-    height: 56px;
-    width: 56px;
-    margin: 10px 20px 5px 5px;
+    background:url(./Assets/Icon_OpenFile.svg) center right no-repeat;
+    width: 48px; 
+    height: 48px;
+    margin: 4px;
 }
 
 .custom-upload input[type=file]
@@ -191,45 +166,12 @@ a {
     background-position: center;
 }
 
-#btnFullscreen {
-    margin-top: 10px;
-    margin-right: 25px;
-}
-
-#btnPerf {
-    margin-top: 10px;
-    margin-right: 15px;
-}
-
-ul {
- padding:0;
- margin:0;
- list-style-type:none;
- }
-
-li {
- float:left;
- }
-
 #btnDownArrow {
     position: absolute;
     bottom: 35px;
     right: 30px;
 }
 
-#miscCounters {
-    position: relative;
-    top: 18px;
-    height: 60px;
-    -webkit-column-width: 150px;
-    -moz-column-width: 150px;
-    -ms-column-width: 150px;
-    -o-column-width: 150px;
-    column-width: 150px;
-
-    font-size: 14px;
-}
-
 #loadingText {
     width: 100%;
     height: 60px;
@@ -253,16 +195,6 @@ li {
     -webkit-transform: translateX(120%);
 }
 
-#btnFullscreen, #btnPerf, #btnFiles {
-     -webkit-transition: -webkit-transform 0.15s ease-in-out;
-     transition: transform 0.15s ease-in-out;
-}
-
-#btnFullscreen:hover, #btnPerf:hover, #btnFiles:hover {
-    -webkit-transform: scale(0.9);
-    transform: scale(0.9);
-}
-
 #errorZone {
     display:none;
     position: absolute;

sandbox/index.html

@@ -40,31 +40,20 @@
     <canvas id="renderCanvas"></canvas>
     <div id="logo">
     </div>
-    <div id="help01" class="help">
-        <span class="helpText">Press this button to open your assets' files</span>
-        <img id="helpArrow" src="./Assets/FlecheTuto.png" />
-    </div>
-    <div id="help02" class="help2">
-        <span class="helpText">Or directly drag'n'drop your files (in .babylon, .gltf, .glb, .obj format) in the browser</span>
-    </div>
     <div id="footer" class="footer">
         <div class="footerLeft">
-            Powered by <a href="http://www.babylonjs.com/" target="_blank">Babylon.js</a><br />
         </div>
         <div class="footerRight">
-            <ul>
-                <li id="btnFullscreen">
-                    <img src="./Assets/BtnFullscreen.png" alt="Switch the scene to full screen" title="Switch the scene to full screen" />
-                </li>
-                <li id="btnPerf">
-                    <img src="./Assets/BtnPerf.png" alt="Display inspector" title="Display inspector" />
-                </li>
-                <li id="btnFiles">
+            <div class="icon-bar">
+                <a class="active" href="#"><i class="fa fa-home"></i></a> 
+                <a href="#"><img src="./Assets/Icon_Fullscreen.svg" alt="Switch the scene to full screen" title="Switch the scene to full screen" /></a> 
+                <a href="#"><img src="./Assets/Icon_Dashboard.svg" alt="Display inspector" title="Display inspector" /></i></a> 
+                <a href="#">
                     <div class="custom-upload" title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
                         <input type="file" id="files" multiple />
                     </div>
-                </li>
-            </ul>
+                </a>
+            </div>             
         </div>
     </div>
     <div id="errorZone"></div>

sandbox/index.js

@@ -35,28 +35,24 @@ if (BABYLON.Engine.isSupported()) {
     var htmlInput = document.getElementById("files");
     var footer = document.getElementById("footer");
     var btnFullScreen = document.getElementById("btnFullscreen");
-    var btnPerf = document.getElementById("btnPerf");
-    var help01 = document.getElementById("help01");
-    var help02 = document.getElementById("help02");
+    var btnInspector = document.getElementById("btnInspector");
     var errorZone = document.getElementById("errorZone");
     var filesInput;
-    var currentHelpCounter;
     var currentScene;
     var currentSkybox;
     var enableDebugLayer = false;
     var currentPluginName;
     var skyboxPath = "Assets/environment.dds";
 
+    btnFullScreen.classList.add("hidden");
+    btnInspector.classList.add("hidden");
+
     canvas.addEventListener("contextmenu", function (evt) {
         evt.preventDefault();
     }, false);
 
-    currentHelpCounter = localStorage.getItem("helpcounter");
-
     BABYLON.Engine.ShadersRepository = "/src/Shaders/";
 
-    if (!currentHelpCounter) currentHelpCounter = 0;
-
     // Setting up some GLTF values
     BABYLON.GLTFFileLoader.IncrementalLoading = false;
     BABYLON.SceneLoader.OnPluginActivatedObservable.add(function (plugin) {
@@ -87,6 +83,9 @@ if (BABYLON.Engine.isSupported()) {
         // Clear the error
         errorZone.style.display = 'none';
 
+        btnFullScreen.classList.remove("hidden");
+        btnInspector.classList.remove("hidden");        
+
         currentScene = babylonScene;
         document.title = "BabylonJS - " + sceneFile.name;
         // Fix for IE, otherwise it will change the default filter for files selection after first use
@@ -225,27 +224,12 @@ if (BABYLON.Engine.isSupported()) {
     if (kiosk) {
         footer.style.display = "none";
     }
-    else {
-        // The help tips will be displayed only 5 times
-        if (currentHelpCounter < 5) {
-            help01.className = "help shown";
-
-            setTimeout(function () {
-                help01.className = "help";
-                help02.className = "help2 shown";
-                setTimeout(function () {
-                    help02.className = "help2";
-                    localStorage.setItem("helpcounter", currentHelpCounter + 1);
-                }, 5000);
-            }, 5000);
-        }
-    }
 
     btnFullScreen.addEventListener('click', function () {
         engine.switchFullscreen(true);
     }, false);
 
-    btnPerf.addEventListener('click', function () {
+    btnInspector.addEventListener('click', function () {
         if (currentScene) {
             if (!enableDebugLayer) {
                 currentScene.debugLayer.show();