Use code from customize.yaml and point to yours themes
So i must put those lines at the beginning of ALL themes i have in themes.yaml?
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];”
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';
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 ?
HA 0.70 (Now in beta) doesn’t work with customUI. I’ll release a new version tomorrow.
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?
I just released a new version - 20180521, that should work with HA 0.70
2 Likes
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.
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?
sorry for this repost, accidentally created a new thread, should have posted here:
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?
Probably unrelated. Check if you have this error with customui disabled.
@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.
Looks like relativetime is not working with 0.70. The following has stopped working since 0.70
extra_data_template: "${window.hassUtil.relativeTime(new Date(entity.last_changed))}"
2018-05-28 06:49:29 ERROR (MainThread) [frontend.js.latest.201805264] https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui.html:27:11572 Uncaught TypeError: Cannot read property 'relativeTime' of undefined
@arsaboo
HA 0.70 removed window.hassUtil so this handy shortcut is no longer available.
@jamesdawson3
The syntax seems correct, however show_last_changed won’t work with state_card_custom_ui_secondary.
When state_card_custom_ui_secondary is used, your state card is shown so you are on your own displaying the things you like.
What customUI does is it wraps your state-card and provides it with a stateObj that was changed with context-aware attributes.
I updated my customize_glob according to this thread to remove relativeTime.
It’s ugly, but it works 
Thanks @andrey
@andrey Thanks for the explanation. I suspected that might be the case - so if I want something similar show_last_changed, I just need to add it into my custom state card. Should be easy enough, thanks!
I pushed a new release 20180528
It fixes an issue where local theming on FF/Edge weren’t applied and adds a new feature where you can replace default controls with your own: https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/features.md#custom-controls
@jamesdawson3 now you can write just the control part and use customUI along with show_last_changed
Wow, that worked perfectly. Just had to strip out the badge and info html sections from my custom card files and it worked. Thank you! Greatly simplifies my setup and still allows me to use other aspects of your CustomUI. Much appreciated.
hope this answers my question about coloring the toolbar icons…
would be way nice indeed, hope it works out!
cheers,Marius