feat(#126): activate scene effect (colorthief detect)

Gh61 · Dec 3, 2023 · 3a9f5ef · 3a9f5ef
1 parent 036c369
commit 3a9f5ef
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "license": "LGPLv2.1",
     "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
+        "colorthief": "npm:@pioug/colorthief@^3.0.1",
         "custom-card-helpers": "^1.9.0",
         "home-assistant-js-websocket": "^9.1.0",
         "lit": "^3.1.0"

diff --git a/src/controls/dialog-scene-tile.ts b/src/controls/dialog-scene-tile.ts
@@ -60,10 +60,10 @@ export class HueDialogSceneTile extends HueDialogTile {
             this._effectQueue.addEffect(3000, () => sceneElement.classList.add('unclicked'));
             this._effectQueue.addEffect(animationMs, () => {
                 sceneElement.classList.add('stop-color-animate');
-                sceneElement.classList.remove('clicked'); 
+                sceneElement.classList.remove('clicked');
             });
             this._effectQueue.addEffect(50, () => {
-                sceneElement.classList.remove('stop-color-animate', 'unclicked'); 
+                sceneElement.classList.remove('stop-color-animate', 'unclicked');
             });
             this._effectQueue.start();
         }
@@ -111,15 +111,20 @@ export class HueDialogSceneTile extends HueDialogTile {
         color: var(--hue-tile-fg-color, ${unsafeCSS(Consts.LightColor)});
         transform: scale(${HueDialogSceneTile.iconScale});
     }
+    .scene .icon-background .picture-color {
+        background-color: var(--hue-tile-picture-color, darkgoldenrod);
+    }
     .scene .icon-background .picture-color .picture {
         display: inline-block;
-        width: 100%;
-        height: 100%;
+        height: ${HueDialogSceneTile.pictureDimensions}px;
+        width: ${HueDialogSceneTile.pictureDimensions}px;
+        border-radius: ${HueDialogSceneTile.pictureDimensions / 2}px;
         background-position: center;
         background-size: cover;
     }
 
-    .scene.clicked .icon-background .color {
+    .scene.clicked .icon-background .color,
+    .scene.clicked .icon-background .picture-color {
         height: ${HueDialogTile.height * 2}px;
         width: ${HueDialogTile.width * 2}px;
         border-radius: ${HueDialogTile.height}px;
@@ -129,17 +134,19 @@ export class HueDialogSceneTile extends HueDialogTile {
     .scene.clicked .icon-background .color ha-icon {
         animation: pop-icon 0.5s linear 1;
     }
-    .scene.unclicked .icon-background .color {
+    .scene.clicked .icon-background .picture {
+        animation: pop-picture 0.5s linear 1;
+    }
+
+    .scene.unclicked .icon-background .color,
+    .scene.unclicked .icon-background .picture-color {
         background: transparent;
     }
-    .scene.stop-color-animate .icon-background .color {
+    .scene.stop-color-animate .icon-background .color,
+    .scene.stop-color-animate .icon-background .picture-color {
         transition: none;
     }
 
-    .scene.clicked .icon-background .picture {
-        animation: pop-picture 0.5s linear 1;
-    }
-
     .scene .title {
         transition: all ${HueDialogSceneTile.animationSeconds / 2}s linear;
     }
@@ -180,6 +187,16 @@ export class HueDialogSceneTile extends HueDialogTile {
                     textFg.toString()
                 );
             }
+
+            // set picture color
+            this._scene.getPictureColor().then(pictureColor => {
+                if (pictureColor) {
+                    this.style.setProperty(
+                        '--hue-tile-picture-color',
+                        pictureColor
+                    );
+                }
+            });
         }
     }
 
@@ -194,17 +211,16 @@ export class HueDialogSceneTile extends HueDialogTile {
         return html`
         <div class='hue-tile scene' title='${title}'>
             <div class='icon-background'>
-                ${
-                    picture
-                    ? html`
+                ${picture
+                ? html`
                     <div class='picture-color'>
                         <div class='picture' style='background-image:url("${picture}")'></div>
                     </div>`
-                    : html`
+                : html`
                     <div class='color'>
                         <ha-icon icon="${this._scene.getIcon('mdi:palette')}"></ha-icon>
                     </div>`
-                }
+            }
             </div>
             <div class='title'>
                 <span>${title}</span>

diff --git a/src/types/colorthief.d.ts b/src/types/colorthief.d.ts
@@ -0,0 +1,11 @@
+declare module 'colorthief' {
+    type ColorCT = [number, number, number];
+    export default class ColorThief {
+        public getColor: (img: HTMLImageElement, quality?: number) => ColorCT;
+        public getPalette: (
+            img: HTMLImageElement,
+            colorCount?: number,
+            quality?: number
+        ) => ColorCT[];
+    }
+}