Merge pull request #57 from Bitspark/extend-preview-object

Add color display to preview object
Bitspark · Aug 13, 2018 · f1019d9 · f1019d9
2 parents 38d6039 + 8b22c5f
commit f1019d9
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/src/app/components/preview-object.component.html b/src/app/components/preview-object.component.html
@@ -21,6 +21,14 @@
     </div>
   </div>
 
+  <div *ngIf="isColor(object)">
+    <div class="color-box" [ngStyle]="colorStyle(object)"></div>
+    <div class="color-details">
+      RGB48: {{colorRGB48(object)}}<br>
+      HEX: {{colorHex(object)}}
+    </div>
+  </div>
+
   <div *ngIf="isStream(object)">
     <div *ngFor="let item of object" class="entry item">
       <app-preview-object class="inline" [object]="item"></app-preview-object>

diff --git a/src/app/components/preview-object.component.scss b/src/app/components/preview-object.component.scss
@@ -55,3 +55,16 @@
 .trigger {
   background-color: #767675;
 }
+
+.color-box {
+  vertical-align: top;
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+}
+
+.color-details {
+  vertical-align: middle;
+  display: inline-block;
+  padding: 5px;
+}
diff --git a/src/app/components/preview-object.component.ts b/src/app/components/preview-object.component.ts
@@ -51,6 +51,35 @@ export class PreviewObjectComponent {
     return this.isType(obj, ['file', 'name']);
   }
 
+  public isColor(obj: any): boolean {
+    return this.isType(obj, ['red', 'green', 'blue']);
+  }
+
+  public colorHex(obj: any): string {
+    const rgbToHex = function (rgb) {
+      let hex = Number(rgb).toString(16);
+      if (hex.length < 2) {
+        hex = '0' + hex;
+      }
+      return hex;
+    };
+
+    return '#' +
+      rgbToHex(Math.floor(obj.red / 256)) +
+      rgbToHex(Math.floor(obj.green / 256)) +
+      rgbToHex(Math.floor(obj.blue / 256));
+  }
+
+  public colorRGB48(obj: any): string {
+    return `R: ${Math.floor(obj.red)}, G: ${Math.floor(obj.green)}, B: ${Math.floor(obj.blue)}`;
+  }
+
+  public colorStyle(obj): any {
+    return {
+      'background-color': `rgb(${obj.red / 255}, ${obj.green / 255}, ${obj.blue / 255})`
+    };
+  }
+
   public imageSrc(obj: any): SafeUrl {
     return this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,' + (obj as string).substr(7));
   }
@@ -64,7 +93,7 @@ export class PreviewObjectComponent {
   }
 
   public isMap(obj: any): boolean {
-    return !this.isImage(obj) && !this.isFile(obj) && !Array.isArray(obj) && typeof obj === 'object';
+    return !this.isImage(obj) && !this.isFile(obj) && !this.isColor(obj) && !Array.isArray(obj) && typeof obj === 'object';
   }
 
   public toString(obj: any): string {