Support for Picture-Elements

Fixes #4

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -22,6 +22,19 @@ decluttering_templates:
         height: 1px
         margin: 15px auto
         opacity: "[[opacity]]"
+  demo_icon:
+    element:
+      type: icon
+      icon: mdi:alert-circle
+      title: Problem detected!
+      entity: "[[entity]]"
+      tap_action:
+        action: more-info
+      style:
+        right: 50%
+        top: 50%
+        color: var(--google-red-500)
+        filter: drop-shadow(black 0 0 1px)
 
 views:
   - cards:
@@ -35,3 +48,10 @@ views:
           - type: custom:decluttering-card
             template: large_divider
           - sun.sun
+      - type: picture-elements
+        image: https://www.w3schools.com/w3css/img_lights.jpg
+        elements:
+          - type: custom:decluttering-card
+            template: demo_icon
+            variables:
+              - entity: sun.sun

README.md

@@ -31,6 +31,8 @@ This object needs to contains your templates declaration, each template has a na
 
 You can also define default values for your variables in the `default` object.
 
+For a card:
+
 ```yaml
 decluttering_templates:
   <template_name>
@@ -43,6 +45,20 @@ decluttering_templates:
       [...]
 ```
 
+For a Picture-Element:
+
+```yaml
+decluttering_templates:
+  <template_name>
+    default:  # This is optional
+      - <variable_name>: <variable_value>
+      - <variable_name>: <variable_value>
+      [...]
+    element:  # This is where you put your element config
+      type: icon
+      [...]
+```
+
 Example in your `lovelace-ui.yaml`:
 ```yaml
 resources:

src/decluttering-card.ts

@@ -39,11 +39,16 @@ class DeclutteringCard extends LitElement {
       throw new Error("The object decluttering_templates doesn't exist in your main lovelace config.");
     }
     const templateConfig = ll.config.decluttering_templates[config.template] as TemplateConfig;
-    if (!templateConfig || !templateConfig.card) {
+    if (!templateConfig) {
       throw new Error(`The template "${config.template}" doesn't exist in decluttering_templates`);
+    } else if (!(templateConfig.card || templateConfig.element)) {
+      throw new Error('You shoud define either a card or an element in the template');
+    } else if (templateConfig.card && templateConfig.element) {
+      throw new Error('You can define a card and an element in the template');
     }
     this._config = deepReplace(config.variables, templateConfig);
-    this._createCard(this._config).then(card => {
+    const type = templateConfig.card ? 'card' : 'element';
+    this._createCard(this._config, type).then(card => {
       this._card = card;
       return this._card;
     });
@@ -57,12 +62,21 @@ class DeclutteringCard extends LitElement {
     `;
   }
 
-  private async _createCard(config: LovelaceCardConfig): Promise<LovelaceCard> {
+  private async _createCard(config: LovelaceCardConfig, type: 'element' | 'card'): Promise<LovelaceCard> {
     let element: LovelaceCard;
     if (HELPERS) {
-      if (config.type === 'divider') element = (await HELPERS).createRowElement(config);
-      else element = (await HELPERS).createCardElement(config);
-      // fireEvent(element, 'll-rebuild');
+      if (type === 'card') {
+        if (config.type === 'divider') element = (await HELPERS).createRowElement(config);
+        else element = (await HELPERS).createCardElement(config);
+        // fireEvent(element, 'll-rebuild');
+      } else {
+        element = (await HELPERS).createHuiElement(config);
+        if (config.style) {
+          Object.keys(config.style).forEach(prop => {
+            this.style.setProperty(prop, config.style[prop]);
+          });
+        }
+      }
     } else {
       element = createThing(config);
     }
@@ -73,15 +87,19 @@ class DeclutteringCard extends LitElement {
       'll-rebuild',
       ev => {
         ev.stopPropagation();
-        this._rebuildCard(element, config);
+        this._rebuildCard(element, config, type);
       },
       { once: true },
     );
     return element;
   }
 
-  private async _rebuildCard(element: LovelaceCard, config: LovelaceCardConfig): Promise<void> {
-    const newCard = await this._createCard(config);
+  private async _rebuildCard(
+    element: LovelaceCard,
+    config: LovelaceCardConfig,
+    type: 'element' | 'card',
+  ): Promise<void> {
+    const newCard = await this._createCard(config, type);
     element.replaceWith(newCard);
     return;
   }

src/deep-replace.ts

@@ -12,7 +12,7 @@ export default (variables: VariablesConfig[] | undefined, templateConfig: Templa
   if (templateConfig.default) {
     variableArray = variableArray.concat(templateConfig.default);
   }
-  let jsonConfig = JSON.stringify(templateConfig.card);
+  let jsonConfig = templateConfig.card ? JSON.stringify(templateConfig.card) : JSON.stringify(templateConfig.element);
   variableArray.forEach(variable => {
     const key = Object.keys(variable)[0];
     const value = Object.values(variable)[0];

src/types.ts

@@ -10,5 +10,6 @@ export interface VariablesConfig {
 
 export interface TemplateConfig {
   default: VariablesConfig[];
-  card: any;
+  card?: any;
+  element?: any;
 }