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
great addition @andrey! thanks for implementing this. Could you have some details on what controls are allowed?
Could this for example be used to have the scripts in my question https://github.com/andrey-git/home-assistant-custom-ui/issues/92#issuecomment-362051640 have a ârealâ button?
Not sure this is exactly what youâre after but this is how Iâve changed all of my switches to ârealâ buttons:
First, add this to your customization:
"*.*":
custom_ui_state_card: state-card-custom-ui
switch.your_switch:
control_element: state-card-switch
Then, add this to your configuration:
frontend:
extra_html_url:
- /local/custom_ui/state-card-switch.html
extra_html_url_es5:
- /local/custom_ui/state-card-switch.html
Then, add this file to your custom_ui folder:
state-card-switch.html:
<dom-module id="state-card-switch">
<template>
<style>
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);
}
.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);
}
</style>
<div class='horizontal justified layout'>
<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,
},
},
stateObjChanged: function (newVal) {
if (newVal) {
if (newVal.state == 'on') {
this.onButtonVisible = true;
this.offButtonVisible = false;
} else if (newVal.state == 'off') {
this.onButtonVisible = false;
this.offButtonVisible = true;
}
}
},
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>
You can change the size of the button in the style section. Colors should also conform to any theme. Should produce a button like this:
i see, nice indeed, looking somewhat like the custom card scenes, or indeed the Tiles i have set in dedicated cards. Nice this can combine the various items, hope to see it works out in my example, next to the 2 extra data sensors.
Would have hoped to be able to use user-selectable âiconsâ tbh, and have it have a less square look, something like:
on:
off:
fwiw if youâd need a dedicated Lights card, you can use Tiles for this too:
We must add this also in the fronted section?
I just updated to HA 0.70.0, but now any item that had a customization no longer appear.
I ran update.sh, but Custom UI 20180216 still displays in info.
Rerunning update.sh returns files are up to date.
Any ideas?
EDIT: Nevermind, had to clear browser cache. Sorry.
It appears that âcustomizerâ is no longer hiding its own custom attributes from the more-info popups.
@andrey any idea?
Hi there,
i have issues setting Custom UI up running Hassio 0.70. I have chosen the manual method and copied the lastest files manually to the hassio samba share. Can someone tell me if my setup is correct cause as soon as uncomment the customizer âsectionâ and auto check the configuration it runs forever and will never stop neither does customui work:
Any existing element (which probably wonât be useful, as an icon element wonât act like a button) or any custom element you write.
Yes, this is broken since HA 0.70. I havenât figured how to re-implement it yet.
You should either use
extra_html_url: ...
extra_html_url_es5: ...
or custom_ui: local. Not both.
Your files are at the correct places, but it is not clear to what is not working.
Thanks for the hint⌠so whats the difference between both of em ? I thought one would need both because only using the html entries is doing nothing for me.
And as soon as i only use the customizer entry the config check runs forever ⌠this is why i think something must be wrong somewhere!
Just restarted without the config check and now custom ui appears under Dev Info:
But i guess config check should be working anyway?
Update: i think i got it working with the html section. But can someone still tell me whats the difference between both methods?
Thank you @andrey!! Not a biggie, I just wanted to make sure I wasnât doing anything wrong with my setup.
You should definitely be able to do this by changing the html in my code. I havenât tested this, but I bet it would be something like this:
<paper-button-group on-click="stopPropagation">
<paper-icon-button
src="/local/on.png"
class="on"
on-tap='handleOnTap'
hidden$='[[!onButtonVisible]]'>On</paper-icon-button>
<paper-icon-button
src="/local/off.png"
class="off"
on-tap='handleOffTap'
hidden$='[[!offButtonVisible]]'>Off</paper-icon-button>
</paper-button-group>
Then you should be able to set the size in the style section like this:
paper-icon-button {
width: 30px;
height: 30px;
}thanks! will test and try after updating to 0.70.1
nice.