CustomUI - discussion thread

Configuration Frontend
126

Not sure what you are trying to do there. For icon you can use icon_template

127

I am trying to let the ‘menu’-icon change color according to the number of people home. Obviously this is a group with view: true, should have mentioned that, sorry.

24

it changes when no-one is home to mdi:account-off just fine.(cant show you since lots of people around :wink: ) 49

128

Where to find “state_card_custom_ui_secondary” ?

129

Define themes starting from first line in frontend.yaml
From first line in customize.yaml

130

Sorry but do not understand, can you please write me an example?
Right now i have in my customize_glob this entry:

  input_boolean.mauhome:
    state_card_custom_ui_secondary: state-card-custom_boolean

But in the frontend the input_boolean.mauhome disappeared after this.

What else i must configure to have that?

131

In configuration.yaml

  customize: !include include/customize.yaml
# Enables configuration UI
config:
# Enables the frontend

frontend: !include include/frontend.yaml

In frontend.yaml:

extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-floorplan.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-floorplan.html
javascript_version: auto
themes:
green_1:
primary-text-color: ‘#008000’
sad_1:
primary-text-color: ‘#ff0000’

In customize.yaml
sensor.speedtest_ping:
custom_ui_state_card: state-card-custom-ui
icon: mdi:speedometer
friendly_name: Ping
templates:
theme: “if (state == ‘unknown’) return ‘sad_1’; else return ‘green_1’;”
hs_color: “if (state === ‘unknown’) return [0,100]; else return [120,100];”

1 - (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red 2 - (0%-100%) | 0%=Grey 100%=Full Saturation

132

Thanks a lot, but i have themes included into themes.yaml so how to change your configuration in my behaviour?

EDIT:
Here it is my fronted:

frontend:
  themes: !include themes.yaml
  extra_html_url:
    - https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui.html
    - /local/custom_ui/state-card-hline.html
    - /local/custom_ui/state-card-custom_boolean.html
  extra_html_url_es5:
    - https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui-es5.html
    - /local/custom_ui/state-card-hline_es5.html
    - /local/custom_ui/state-card-custom_boolean.html
133

Use code from customize.yaml and point to yours themes

134

So i must put those lines at the beginning of ALL themes i have in themes.yaml?

135

NO.
Use customize

sensor.speedtest_ping:
custom_ui_state_card: state-card-custom-ui
icon: mdi:speedometer
friendly_name: Ping
templates
theme: “if (state == ‘unknown’) return ‘your_themes_name_with_red_color’; else return ‘your_themes_name_with_green_color’;”
hs_color: “if (state === ‘unknown’) return [0,100]; else return [120,100];”

136

btw this is a small improvement for one-glance-know-all, just a bit of fun to make the UX more meaningful:

  templates:
    icon: >
      if (entities['sensor.home_badge'].state === '0') return 'mdi:account-off';
      if (entities['sensor.home_badge'].state > '1') return 'mdi:account-multiple-check';
      return 'mdi:account';

49

137

If you do not use preformatted text inside replies is very difficult for me to understand what you mean…
So i must put:

“templates
theme: “if (state == ‘unknown’) return ‘your_themes_name_with_red_color’; else return ‘your_themes_name_with_green_color’;”
hs_color: “if (state === ‘unknown’) return [0,100]; else return [120,100];””

inside customize.yaml?

How ?

138

HA 0.70 (Now in beta) doesn’t work with customUI. I’ll release a new version tomorrow.

139

Ok thanks… how to know when you release this?
And i only need to run the update.sh script? Also if i have customiser local and not hosted?

140

I just released a new version - 20180521, that should work with HA 0.70

2 Likes
141

Tested 20180521 with 0.70.0b1 and not working.

https://github.com/andrey-git/home-assistant-custom-ui/issues/131#issuecomment-390785379

20180521 working with 0.70.0b1. For some reason my page didnt actually refresh.

142

Ok great, just one question… all the other state card i am using with HASS need alo them to be upgraded?
I am speaking about custom_boolean, hline, custom-text and weather-card i have configured in the frontend entry? And the updated custom ui works also with 0.69.x?

143

sorry for this repost, accidentally created a new thread, should have posted here:

12

00

what could this be? Is this the reason my Hassio isnt loading? It is the only error I can see in the inspector.

got mention in the setup of the latest Custom-ui about js-map, so is this related?

59

144

Probably unrelated. Check if you have this error with customui disabled.

145

@andrey, Hoping you could provide a simple example for what I’m trying to do.

To date, I have been using custom html files to change how switches display in HA. Instead of the slider-looking switch, I prefer to use a paper button element. So my setup that has been working is this:

homeassistant:
  customize_glob:
    switch.kitchen_light_switch:
      custom_ui_state_card: state-card-switch
frontend:
  extra_html_url:
    - /local/custom_ui/state-card-switch.html

With a file state-card-switch.html:

<dom-module id="state-card-switch">
  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      :host {
        line-height: 1.5;
      }
      paper-button {
        width: 85px;
        min-width: 30px;
        height: 30px;
        margin: 5px 0px;
        padding: 5px 0px;
        font-size: 12px;
        background-color: var(--paper-card-background-color);
      }
      .info {
        font-family: var(--paper-font-body1_-_font-family); -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing); font-size: var(--paper-font-body1_-_font-size); font-weight: var(--paper-font-body1_-_font-weight); line-height: var(--paper-font-body1_-_line-height);min-width:10px;white-space:nowrap;float:left
      }
      .info {
        margin-left:16px
      }
      .name {
        white-space: var(--paper-font-common-nowrap_-_white-space); overflow: var(--paper-font-common-nowrap_-_overflow); text-overflow: var(--paper-font-common-nowrap_-_text-overflow);color:var(--primary-text-color);line-height:40px
      }
      .on {
        color: var(--paper-item-icon-active-color);
        border: 1px solid var(--paper-item-icon-active-color);
      }
      .off {
        color: var(--secondary-text-color);
        border: 1px solid var(--secondary-text-color);
      }
      .badge {
        position:relative;display:inline-block;width:40px;border-radius:50%;height:40px;text-align:center;background-size:cover;line-height:40px
      }
    </style>
<div class='horizontal justified layout'>
    <div class='horizontal start-justified layout'>
      <div class="badge">
        <state-badge class="badge" state-obj="[[stateObj]]"></state-badge>
      </div>
      <div class="info">
        <div class="name" in-dialog>[[friendlyName]]</div>
      </div>
    </div>
  <paper-button-group on-click="stopPropagation">
        <paper-button
        class="on"
        on-tap='handleOnTap'
        hidden$='[[!onButtonVisible]]'>On</paper-button>
      <paper-button
        class="off"
        on-tap='handleOffTap'
        hidden$='[[!offButtonVisible]]'>Off</paper-button>
  </paper-button-group>
</div>
</template>
</dom-module>
<script>
        Polymer({
          is: 'state-card-switch',
          properties: {
            hass: {
              type: Object,
            },
            stateObj: {
              type: Object,
              observer: 'stateObjChanged',
            },
            onButtonVisible: {
              type: Boolean,
              value: false,
            },
            offButtonVisible: {
              type: Boolean,
              value: false,
            },
            friendlyName: {
              type: String,
              value: 'unknown',
            },
          },
          stateObjChanged: function (newVal) {
            if (newVal) {
              if (newVal.state == 'on') {
                this.onButtonVisible = true;
                this.offButtonVisible = false;
                this.friendlyName = this.stateObj.attributes.friendly_name;
              } else if (newVal.state == 'off') {
                this.onButtonVisible = false;
                this.offButtonVisible = true;
                this.friendlyName = this.stateObj.attributes.friendly_name;
                this.timeAgo = this.stateObj.last_changed;
              }            
            }
          },
          handleOnTap: function (e) {
            var serviceData = {entity_id: this.stateObj.entity_id}
            this.hass.callService('switch', 'turn_off', serviceData);
          },
          handleOffTap: function (e) {
            var serviceData = {entity_id: this.stateObj.entity_id}
            this.hass.callService('switch', 'turn_on', serviceData);
          },
          stopPropagation: function (e) {
            e.stopPropagation();
          },
});
</script>

However, if I try to switch to this configuration:

homeassistant:
  customize_glob:
    "*.*":
      custom_ui_state_card: state-card-custom-ui
    switch.kitchen_light_switch:
        show_last_changed: true
        state_card_custom_ui_secondary: state-card-switch
frontend:
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
    - /local/custom_ui/state-card-switch.html

The entire element then disappears from the UI, possibly similar to what @maurizio53 was experiencing? . If I comment out the secondary html option, the switch shows up in the UI with the time since last change, as expected. I’m assuming this behavior is due to the custom html file I’m using for the switch. Which elements of the custom html file need to exist in order to have the state_card_custom_ui_secondary option work properly? My goal is to combine some of the CustomUI features (ie time since last change) with some custom cosmetic changes. Any thoughts would be much appreciated. Perhaps even a template secondary html file could be added to the Github docs.