Release 2017-04-27

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## Changelog
 
+#### 2018-04-27
+*   Add support for `icon_color` attribute to force-set icon color of any entity.
+
 #### 2018-03-30
 *   Prevent template from being applied twice. Fixes #110
 *   Use new system to display version info.

README.md

@@ -20,6 +20,9 @@ Please ask questions and post feature requests in the [forum](https://community.
 
 ## Changelog
 
+#### 2018-04-27
+*   Add support for `icon_color` attribute to force-set icon color of any entity.
+
 #### 2018-03-30
 *   Prevent template from being applied twice. Fixes #110
 *   Use new system to display version info.

docs/features.md

@@ -2,13 +2,15 @@
 
 *   [Customizer component](#customizer-component)
 *   [CustomUI panel](#customui-panel)
+*   [Global Features](#global-features)
+    +   [Hiding entities from default view tab (HA 0.62+)](#hiding-entities-from-default-view-tab)
+    +   [Template attributes [New in 20170927]](#template-attributes)
+    +   [Icon Color](#icon-color)
 *   [Features available for all domains](#features-available-for-all-domains)
     +   [Context-aware attributes](#context-aware-attributes)
-    +   [Template attributes [New in 20170927]](#template-attributes)
     +   [Badges in state cards](#badges-in-state-cards)
     +   [Per entity theming (Requires HA 0.50+)](#per-entity-theming)
     +   [Secondary custom UI](#secondary-customui)
-    +   [Hiding entities from default view tab (HA 0.62+)](#hiding-entities-from-default-view-tab)
 *   [Features available for almost all domains](#features-available-for-almost-all-domains)
     +   [You can always show the last-changed text](#you-can-always-show-the-last-changed-text)
 *   [Features available for light, cover, "plain", and "toggle" cards](#features-available-for-light-cover-plain-and-toggle-cards)
@@ -39,13 +41,17 @@ Provides the following features:
 Use it to set device name.
 
 In HA 0.53+ is added automatically to configuration panel.
-## Features available for all domains
 
-### Context-aware attributes
-![context_aware](https://cloud.githubusercontent.com/assets/5478779/26284053/45fbc000-3e3b-11e7-8d4a-56ef0d5e6c60.png)
+## Global Features
+Those features do not require setting `custom_ui_state_card: state-card-custom-ui`
+on any entity. Just [loading](activating.md) is enough.
 
-You can use context-aware attributes to give different names/attributes for the same entity in different groups, views, or devices.
-See [context-aware.md](context-aware.md)
+### Hiding entities from default view tab
+Requires HA 0.62+
+
+If you don't have a `default_view` view defined you still hide some entities from the Home tab by setting `hide_in_default_view: true` attribute.
+
+If applied to a View (a group with `view: true`) `hide_in_default_view` will hide everything under that view (not just the view group itself).
 
 ### Template attributes
 You can set entity's attributes or state using JavaScript templates. See [Templates](templates.md) for more info.
@@ -60,6 +66,30 @@ homeassistant:
 ```
 This is very powerful feature that can do a lot of cool things, but it could also have performance implications.
 
+### Icon Color
+Starting from version 2018-04-27 you can set an icon color by specifying `icon_color`
+attribute which was removed from core in HA 0.66
+
+For example:
+```yaml
+homeassistant:
+  customize:
+    light.bed_light:
+      icon_color: green
+```
+
+The color could take any CSS color value.
+
+Note that the color will be applied as-is and it won't be affected by the `brightness` attribute.
+
+## Features available for all domains
+
+### Context-aware attributes
+![context_aware](https://cloud.githubusercontent.com/assets/5478779/26284053/45fbc000-3e3b-11e7-8d4a-56ef0d5e6c60.png)
+
+You can use context-aware attributes to give different names/attributes for the same entity in different groups, views, or devices.
+See [context-aware.md](context-aware.md)
+
 ### Badges in state cards
 ![badges](https://cloud.githubusercontent.com/assets/5478779/26284132/b4a2dbe6-3e3c-11e7-9bb5-0441d30342bf.png)
 
@@ -183,6 +213,9 @@ light.yard:
   theme: green_example
 ```
 
+Starting from version 2018-01-26 per-entity theming can also affect top-of-the-page
+badges.
+
 ### Secondary customUI
 ![secondary_custom_ui](https://user-images.githubusercontent.com/5478779/30005196-a8d8bd2a-90e5-11e7-9f4c-a787a1227076.png)
 
@@ -196,13 +229,6 @@ homeassistant:
       state_card_custom_ui_secondary: state-card-custom_alarm
 ```
 
-### Hiding entities from default view tab
-Requires HA 0.62+
-
-If you don't have a `default_view` view defined you still hide some entities from the Home tab by setting `hide_in_default_view: true` attribute.
-
-If applied to a View (a group with `view: true`) `hide_in_default_view` will hide everything under that view (not just the view group itself).
-
 ## Features available for almost all domains.
 
 The following is supported for all state cards except `configurator`

src/version.html

@@ -1,3 +1,3 @@
 <script>
-window.customUI.VERSION = '20180330';
+window.customUI.VERSION = '20180427';
 </script>

state-card-custom-ui-dbg-es5.html

@@ -416,6 +416,9 @@
       return !excludes[entityId];
     };
   },
+
+
+  // Allows theming "regular" top badges.
   installHaStateLabelBadge: function installHaStateLabelBadge() {
     var haStateLabelBadge = customElements.get('ha-state-label-badge');
     if (!haStateLabelBadge || !haStateLabelBadge.prototype.stateChanged) return;
@@ -432,17 +435,36 @@
       }
       this.updateStyles();
       if (this.startInterval) {
-        // Added on 19.1.18
+        // Added on 19.1.2018
         this.startInterval(stateObj);
       }
     };
   },
+  installStateBadge: function installStateBadge() {
+    var stateBadge = customElements.get('state-badge');
+    if (!stateBadge || !stateBadge.prototype.updateIconAppearance) return;
+    var originalUpdateIconAppearance = stateBadge.prototype.updateIconAppearance;
+    // Use named function to preserve 'this'.
+    stateBadge.prototype.updateIconAppearance = function customUpdateIconAppearance(stateObj) {
+      if (stateObj.attributes.icon_color && !stateObj.attributes.entity_picture) {
+        this.style.backgroundImage = '';
+        Object.assign(this.$.icon.style, {
+          display: 'inline',
+          color: stateObj.attributes.icon_color,
+          filter: ''
+        });
+      } else {
+        originalUpdateIconAppearance.call(this, stateObj);
+      }
+    };
+  },
   installClassHooks: function installClassHooks() {
     if (window.customUI.classInitDone) return;
     window.customUI.classInitDone = true;
     window.customUI.installPartialCards();
     window.customUI.installStatesHook();
     window.customUI.installHaStateLabelBadge();
+    window.customUI.installStateBadge();
   },
   init: function init() {
     if (window.customUI.initDone) return;
@@ -502,7 +524,7 @@
   }
 };</script>
 <script>
-window.customUI.VERSION = '20180330';</script>
+window.customUI.VERSION = '20180427';</script>
 <script>
 window.customUI.init();</script>
 <dom-module id="ha-config-custom-ui">

state-card-custom-ui-dbg.html

@@ -465,6 +465,7 @@
     };
   },
 
+  // Allows theming "regular" top badges.
   installHaStateLabelBadge() {
     const haStateLabelBadge = customElements.get('ha-state-label-badge');
     if (!haStateLabelBadge || !haStateLabelBadge.prototype.stateChanged) return;
@@ -484,18 +485,38 @@
       }
       this.updateStyles();
       if (this.startInterval) {
-        // Added on 19.1.18
+        // Added on 19.1.2018
         this.startInterval(stateObj);
       }
     };
   },
 
+  installStateBadge() {
+    const stateBadge = customElements.get('state-badge');
+    if (!stateBadge || !stateBadge.prototype.updateIconAppearance) return;
+    const originalUpdateIconAppearance = stateBadge.prototype.updateIconAppearance;
+    // Use named function to preserve 'this'.
+    stateBadge.prototype.updateIconAppearance = function customUpdateIconAppearance(stateObj) {
+      if (stateObj.attributes.icon_color && !stateObj.attributes.entity_picture) {
+        this.style.backgroundImage = '';
+        Object.assign(this.$.icon.style, {
+          display: 'inline',
+          color: stateObj.attributes.icon_color,
+          filter: '',
+        });
+      } else {
+        originalUpdateIconAppearance.call(this, stateObj);
+      }
+    };
+  },
+
   installClassHooks() {
     if (window.customUI.classInitDone) return;
     window.customUI.classInitDone = true;
     window.customUI.installPartialCards();
     window.customUI.installStatesHook();
     window.customUI.installHaStateLabelBadge();
+    window.customUI.installStateBadge();
   },
 
   init() {
@@ -562,7 +583,7 @@
 };
 </script>
 <script>
-window.customUI.VERSION = '20180330';
+window.customUI.VERSION = '20180427';
 </script>
 <script>
 window.customUI.init();