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
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?