#67 Change defaults of shadow to false, #68 Add darken_image option a…

…nd default to false. (#70)
junalmeida · Apr 13, 2023 · 9863739 · 9863739
1 parent d27a0bc
commit 9863739
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -34,6 +34,8 @@ For `tap_action` options, see https://www.home-assistant.io/dashboards/actions/.
   entities: #optional, lists area entities automatically if ommited.
     - entity: media_player.living_room_tv
       state_color: false # enable or disable HA colors for this entity
+      shadow: true # enable a drop shadow on entity icons to contrast with the background
+      darken_image: true # reduce brightness of the background image to constrast with entities
     - entity: switch.fireplace_on_off
     - entity: cover.window_covering
       tap_action:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "minimalistic-area-card",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "Minimalistic Area Card for Home Assistant",
   "keywords": [
     "home-assistant",

diff --git a/src/minimalistic-area-card.ts b/src/minimalistic-area-card.ts
@@ -187,26 +187,30 @@ class MinimalisticAreaCard extends LitElement {
                 hasAction(this.config.hold_action), hasDoubleClick: hasAction(this.config.double_tap_action),
         })}
             tabindex=${ifDefined(hasAction(this.config.tap_action) ? "0" : undefined)}>
-            ${imageUrl ? html`<img src=${imageUrl} />` : null}
-            ${this.config.camera_image ? html`<div class="camera">
-                <hui-image .hass=${this.hass} .cameraImage=${this.config.camera_image} .entity=${this.config.camera_image}
-                    .cameraView=${this.config.camera_view || "auto"} .width="100%"></hui-image>
+            ${imageUrl ? html`<img src=${imageUrl} class=${classMap({
+            "darken"
+                : this.config.darken_image === undefined ? false : this.config.darken_image,
+        })} />` : null}
+            ${this.config.camera_image ? html`<div class="camera" class=${classMap({
+            "darken"
+                : this.config.darken_image === undefined ? false : this.config.darken_image,
+        })}>
+                <hui-image
+                    .hass=${this.hass} 
+                    .cameraImage=${this.config.camera_image} 
+                    .entity=${this.config.camera_image}
+                    .cameraView=${this.config.camera_view || "auto"} 
+                    .width="100%"></hui-image>
             </div>` : null}
         
             <div class="box">
                 <div class="card-header">${this.config.title}</div>
                 <div class="sensors">
-                    ${this._entitiesSensor.map((entityConf) =>
-            this.renderEntity(entityConf, true, true)
-        )}
+                    ${this._entitiesSensor.map((entityConf) => this.renderEntity(entityConf, true, true))}
                 </div>
                 <div class="buttons">
-                    ${this._entitiesDialog.map((entityConf) =>
-            this.renderEntity(entityConf, true, false)
-        )}
-                    ${this._entitiesToggle.map((entityConf) =>
-            this.renderEntity(entityConf, false, false)
-        )}
+                    ${this._entitiesDialog.map((entityConf) => this.renderEntity(entityConf, true, false))}
+                    ${this._entitiesToggle.map((entityConf) => this.renderEntity(entityConf, false, false))}
                 </div>
             </div>
         </ha-card>
@@ -232,7 +236,7 @@ class MinimalisticAreaCard extends LitElement {
             <div class="wrapper">
                 <hui-warning-element .label=${createEntityNotFoundWarning(this.hass, entityConf.entity)} class=${classMap({
                 "shadow"
-                    : this.config.shadow === undefined ? true : this.config.shadow,
+                    : this.config.shadow === undefined ? false : this.config.shadow,
             })}></hui-warning-element>
             </div>
       `;
@@ -415,8 +419,7 @@ class MinimalisticAreaCard extends LitElement {
           display: block;
           height: 100%;
           width: 100%;
-
-          filter: brightness(0.55);
+          
           object-fit: cover;
 
           position: absolute;
@@ -425,6 +428,10 @@ class MinimalisticAreaCard extends LitElement {
           border-radius: var(--ha-card-border-radius, 12px)
       }
 
+      .darken {
+        filter: brightness(0.55);
+      }
+
       div.camera {
           height: 100%;
           width: 100%;

diff --git a/src/types.ts b/src/types.ts
@@ -22,6 +22,7 @@ export interface MinimalisticAreaCardConfig extends LovelaceCardConfig {
   double_tap_action?: ActionConfig;
   shadow?: boolean;
   state_color?: boolean;
+  darken_image?: boolean;
 }
 
 export interface HomeAssistantArea {