Add 'Tile feature' version of the card

bokub · Sep 19, 2024 · 557488c · 557488c
1 parent 47721cd
commit 557488c
Show file tree

Hide file tree

Showing 10 changed files with 4,701 additions and 2,403 deletions.
diff --git a/README.md b/README.md
@@ -32,11 +32,17 @@ However, you can enforce a [specific version](https://github.com/bokub/rgb-light
 
 ## Configuration
 
-The `rgb-light-card` is meant to be included in the [Entities card](https://www.home-assistant.io/dashboards/entities/)
+The `rgb-light-card` is meant to be included either:
 
-You can start with a sample configuration by choosing "**Custom: RGB Light Card**" in the card picker
+-   In the [Entities card](https://www.home-assistant.io/dashboards/entities/)
+-   As a feature in a [Tile card](https://www.home-assistant.io/dashboards/tile/)
 
-Example configuration:
+To start with an example configuration, you can create a new card in your dashboard, then:
+
+-   Choose "**Custom: RGB Light Card**" in the card picker
+-   Or choose the **Tile** card, click on **Add feature** in the **features** section, and select **RGB Light Card (Tile feature)**
+
+Example configuration within an **Entities** card:
 
 ```yaml
 type: entities
@@ -62,6 +68,30 @@ entities:
             icon_color: '#fff8b0' # Override icon color
 ```
 
+Example configuration as a **Tile** feature:
+
+```yaml
+# Tile card configuration
+type: tile
+entity: light.example_light
+features:
+    # The "feature" configuration starts here
+    - type: custom:rgb-light-card-feature
+      entity: light.example_light
+      colors:
+          # Any option of the light.turn_on action can be used in each color
+          - rgb_color:
+                - 255
+                - 127
+                - 255
+            brightness: 220
+            transition: 1
+          - hs_color:
+                - 60
+                - 30
+            icon_color: '#fff8b0' # Override icon color
+```
+
 > #### Pro tip
 >
 > You can test all the colors options in the **Developer Tools > Actions** page of your Home Assistant.
@@ -158,7 +188,7 @@ The 5 examples above will render like this:
 As explained above, the `icon_color` option accepts any valid CSS value
 
 If you want icons in your colors, you can use the [icon tool](https://bokub.github.io/rgb-light-card/test/icon.html)
-to convert [material design icons](https://materialdesignicons.com/) into CSS
+to convert [material design icons](https://pictogrammers.com/library/mdi/) into CSS
 
 ![Light icons examples](https://github.com/bokub/rgb-light-card/raw/images/icons_light.png)
 ![Dark icons examples](https://github.com/bokub/rgb-light-card/raw/images/icons_dark.png)

diff --git a/card.js b/card.js
@@ -8,6 +8,10 @@ class RGBLightCard extends HTMLElement {
         this.setVisibility();
     }
 
+    get isInTile() {
+        return this.constructor.name === 'RGBLightCardFeature';
+    }
+
     init() {
         let shadow = this.attachShadow({ mode: 'open' });
         shadow.appendChild(RGBLightCard.getStaticCSS());
@@ -45,7 +49,12 @@ class RGBLightCard extends HTMLElement {
         const fs = parseFloat(this.config.label_size) || 12; // Label font size
         const style = document.createElement('style');
         style.textContent = `
-        .wrapper { justify-content: ${RGBLightCard.getJustify(this.config.justify)}; margin-bottom: -${s / 8}px; }
+        .wrapper { 
+            justify-content: ${RGBLightCard.getJustify(this.config.justify)};
+            margin-bottom: -${s / 8}px;
+            margin-left: ${this.isInTile ? -s / 4 : 0}px;
+            margin-right: ${this.isInTile ? -s / 4 : 0}px;
+        }
         .wrapper.hidden { display: none; }
         .color-circle {  width: ${s}px; height: ${s}px; margin: ${s / 8}px ${s / 4}px ${s / 4}px; }
         .color-label { font-size: ${fs}px; margin-bottom: ${s / 8}px; }
@@ -264,16 +273,31 @@ class RGBLightCard extends HTMLElement {
         );
     }
 
+    static getSupportedEntityIds(ha) {
+        return Object.values(ha.states)
+            .filter(
+                (entity) =>
+                    entity.entity_id.startsWith('light.') &&
+                    entity.attributes &&
+                    entity.attributes.supported_color_modes &&
+                    entity.attributes.supported_color_modes.find((mode) => ['hs', 'rgb', 'xy'].indexOf(mode) !== -1)
+            )
+            .map((entity) => entity.entity_id);
+    }
+
+    static getExampleColors() {
+        return [
+            { rgb_color: [234, 136, 140], brightness: 255, transition: 1 },
+            { rgb_color: [251, 180, 139], brightness: 200, transition: 1 },
+            { rgb_color: [136, 198, 237], brightness: 150, transition: 1 },
+            { rgb_color: [140, 231, 185], brightness: 100, transition: 1 },
+        ];
+    }
+
     // Default config when creating the card from the UI
     static getStubConfig(ha) {
-        const supportedEntities = Object.values(ha.states).filter(
-            (entity) =>
-                entity.entity_id.indexOf('light.') === 0 &&
-                entity.attributes &&
-                entity.attributes.supported_color_modes &&
-                entity.attributes.supported_color_modes.find((mode) => ['hs', 'rgb', 'xy'].indexOf(mode) !== -1)
-        );
-        const entity = supportedEntities.length > 0 ? supportedEntities[0].entity_id : 'light.example_light';
+        const supportedEntityIds = RGBLightCard.getSupportedEntityIds(ha);
+        const entity = supportedEntityIds[0] || 'light.example_light';
 
         return {
             type: 'entities',
@@ -283,19 +307,30 @@ class RGBLightCard extends HTMLElement {
                 {
                     type: 'custom:rgb-light-card',
                     entity: entity,
-                    colors: [
-                        { rgb_color: [234, 136, 140], brightness: 255, transition: 1 },
-                        { rgb_color: [251, 180, 139], brightness: 200, transition: 1 },
-                        { rgb_color: [136, 198, 237], brightness: 150, transition: 1 },
-                        { rgb_color: [140, 231, 185], brightness: 100, transition: 1 },
-                    ],
+                    colors: RGBLightCard.getExampleColors(),
                 },
             ],
         };
     }
 }
 
+class RGBLightCardFeature extends RGBLightCard {
+    static getStubConfig(ha, stateObj) {
+        let entity = stateObj ? stateObj.entity_id : undefined;
+        if (!entity || !entity.startsWith('light.')) {
+            const supportedEntityIds = RGBLightCard.getSupportedEntityIds(ha);
+            entity = supportedEntityIds[0] || 'light.example_light';
+        }
+        return {
+            type: 'custom:rgb-light-card-feature',
+            entity,
+            colors: RGBLightCard.getExampleColors(),
+        };
+    }
+}
+
 customElements.define('rgb-light-card', RGBLightCard);
+customElements.define('rgb-light-card-feature', RGBLightCardFeature);
 
 window.customCards = window.customCards || [];
 window.customCards.push({
@@ -305,8 +340,15 @@ window.customCards.push({
     preview: true,
 });
 
+window.customCardFeatures = window.customCardFeatures || [];
+window.customCardFeatures.push({
+    type: 'rgb-light-card-feature',
+    name: 'RGB Light Card (Tile feature)',
+    configurable: true,
+});
+
 console.info(
-    '\n %c RGB Light Card %c v1.12.0 %c \n',
+    '\n %c RGB Light Card %c v1.13.0 %c \n',
     'background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 3px 0 0 3px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)',
     'background-color: #bc81e0;background-image: linear-gradient(90deg, #b65cff, #11cbfa);color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 3px 3px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)',
     'background-color: transparent'