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:
2 Likes
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:
1 Like
We must add this also in the fronted section?
1 Like
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;
}
1 Like
thanks! will test and try after updating to 0.70.1
nice.
I have released a new version
2018-06-02
- Hotfix for HA 0.71+
- Restore handling custom attributes in form and more-info.
cc @sfiorini
2 Likes