Merge pull request #2856 from QuentinRillet/master

Fix #2629

inspector/sass/_detailPanel.scss

@@ -6,6 +6,10 @@
   color:$color;
   font-family: $font;
 
+  .details {
+      padding-left: 5px;
+  }
+
   // Common defintion between header row and detail row
   .base-row {      
     display:flex;
@@ -107,6 +111,7 @@
   // The div displaying a color
   .color-element {
       @extend .element-viewer;
+      top: 2px;
   }
 
   // The div displaying a texture element

inspector/src/gui/ColorPickerElement.ts

@@ -13,7 +13,6 @@ module INSPECTOR {
             let scheduler = Scheduler.getInstance();
             this._div.className = 'color-element';
             this._div.style.backgroundColor = this._toRgba(color);
-            this._div.style.top = "5px";
             this.pline = propertyLine;
 
             this._input = Helpers.CreateInput();  
@@ -24,8 +23,11 @@ module INSPECTOR {
             this._input.value = color.toHexString();
             
             this._input.addEventListener('input', (e) => {
-                console.log('Color', this._input.value, this.pline)
-                this.pline.validateInput(BABYLON.Color3.FromHexString(this._input.value));
+                let color = BABYLON.Color3.FromHexString(this._input.value);
+                color.r = parseFloat(color.r.toPrecision(2));
+                color.g = parseFloat(color.g.toPrecision(2));
+                color.b = parseFloat(color.b.toPrecision(2));
+                this.pline.validateInput(color);
                 scheduler.pause = false;
             });
             

inspector/src/tabs/TextureTab.ts

@@ -35,7 +35,6 @@ module INSPECTOR {
         }
 
         public update(_items?: Array<TreeItem>) {
-
             let items;
             if (_items) {
                 items = _items;
@@ -78,16 +77,14 @@ module INSPECTOR {
             Helpers.CleanDiv(this._imagePanel);
             // Get the texture object
             let texture = item.adapter.object;
-
             let imgs: HTMLImageElement[] = [];
             let img = Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement;
             imgs.push(img);
-            
             //Create five other images elements
             for(let i = 0; i<5; i++){
                 imgs.push(Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement);
             }
-
+            
             if (texture instanceof BABYLON.MapTexture) {
                 // instance of Map texture
                 texture.bindTextureForPosSize(new BABYLON.Vector2(0, 0), new BABYLON.Size(texture.getSize().width, texture.getSize().height), false);
@@ -111,7 +108,7 @@ module INSPECTOR {
                 // To display the texture after rendering
                 screenShotTexture.onAfterRenderObservable.add((faceIndex: number) => {
                     BABYLON.Tools.DumpFramebuffer(size.width, size.height, engine,  
-                        (data) => imgs[faceIndex].src = data, "image/png");
+                        (data) => imgs[faceIndex].src = data);
                 });
 
                 // Render the texture
@@ -120,22 +117,58 @@ module INSPECTOR {
                 screenShotTexture.render();
                 screenShotTexture.dispose();
             }else if(texture instanceof BABYLON.CubeTexture){
+                // Cannot open correctly DDS File
                 // Display all textures of the CubeTexture
-                let i: number = 0;
-                for(let filename of (texture as BABYLON.CubeTexture)['_files']){
-                    imgs[i].src = filename;
-                    i++;
-                }
-            }
-             else if (texture.url) {
-                // If an url is present, the texture is an image
-                img.src = texture.url;
+                let pixels = texture.readPixels();
+                let canvas = document.createElement('canvas');
+                canvas.id = "MyCanvas";
+                img.parentElement.appendChild(canvas);
+                let ctx = canvas.getContext('2d');
+                let size = texture.getSize();
+                
+                let tmp = pixels.buffer.slice(0, size.height * size.width * 4);
+                let u = new Uint8ClampedArray(tmp)
 
-            } else if (texture['_canvas']) {
+                let colors = new ImageData(size.width * 6, size.height);
+                
+                colors.data.set(u);
+                let imgData = ctx.createImageData(size.width * 6, size.height);
+                
+                imgData.data.set(u);
+                
+                // let data = imgData.data;
+
+                // for(let i = 0, len = size.height * size.width; i < len; i++) {
+                //     data[i] = pixels[i];
+                // }
+                ctx.putImageData(imgData,0 ,0);
+                // let i: number = 0;
+                // for(let filename of (texture as BABYLON.CubeTexture)['_files']){
+                //     imgs[i].src = filename;
+                //     i++;
+                // }
+            }
+            else if (texture['_canvas']) {
                 // Dynamic texture
                 let base64Image = texture['_canvas'].toDataURL("image/png");
                 img.src = base64Image;
-            } 
+            } else if (texture.url) {
+                let pixels = texture.readPixels();
+                let canvas = document.createElement('canvas');
+                canvas.id = "MyCanvas";
+                img.parentElement.appendChild(canvas);
+                let ctx = canvas.getContext('2d');
+                let size = texture.getSize();
+
+                let imgData = ctx.createImageData(size.width, size.height);
+
+                imgData.data.set(pixels);
+
+                ctx.putImageData(imgData, 0, 0);
+                // If an url is present, the texture is an image
+                // img.src = texture.url;
+
+            }
 
         }