Any examples of custom Lovelace state cards? Not card cards, but state cards.
Like:
https://developers.home-assistant.io/docs/en/frontend_creating_custom_ui.html
I have something working, but really it is just wrapping around the old style way of doing things. As such, things like override the name doesn’t work.
I am not compiling, so I’m not sure I can import things from HA. If I can, I don’t know the proper path. So I can’t import computeStateName, etc.
This “works” but ignores the name I pass in from ui-lovelace.yaml. Probably because state-info only gets stateObj which doesn’t have the correct name in it.
const UNAVAILABLE = 'Unavailable';
class CustomFanCard extends Polymer.Element {
static get template() {
return Polymer.html`
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
.speed {
min-width: 30px;
max-width: 30px;
margin-left: 0px;
margin-right: 0px;
}
ha-entity-toggle {
margin-left: 16px;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<div class='horizontal justified layout' on-click="stopPropagation">
<paper-button
in-dialog='[[inDialog]]'
hidden$="[[inDialog]]"
class='speed'
toggles name="low"
on-tap='setSpeed'
disabled='[[isLowSpeed]]'>L</paper-button>
<paper-button
in-dialog='[[inDialog]]'
hidden$="[[inDialog]]"
class='speed'
toggles name="medium"
on-tap='setSpeed'
disabled='[[isMedSpeed]]'>M</paper-button>
<paper-button
in-dialog='[[inDialog]]'
hidden$="[[inDialog]]"
class='speed'
toggles name="high"
on-tap='setSpeed'
disabled='[[isHighSpeed]]'>H</paper-button>
<ha-entity-toggle state-obj='[[stateObj]]' hass='[[hass]]' in-dialog='[[inDialog]]'></ha-entity-toggle>
</div>
</div>
`;
}
static get properties() {
return {
hass: {
type: Object,
observer: 'hassChanged'
},
name: String,
inDialog: Boolean,
config: Object,
stateObj: Object,
isLowSpeed: Boolean,
isMedSpeed: Boolean,
isHighSpeed: Boolean
}
}
set hass(hass) {
}
setConfig(config) {
this.config = config;
}
hassChanged(hass) {
const config = this.config;
const entityId = config.entity;
const stateObj = hass.states[entityId];
// Check if this entity changed
if (!stateObj && this.previousSpeed === UNAVAILABLE)
return;
let speed;
if (stateObj && stateObj.attributes) {
speed = stateObj.attributes.speed || 'off';
}
if (speed === this.previousSpeed) {
return;
}
//let name;
//if (stateObj) {
// name = config.name || computeStateName(stateObj);
//}
//else {
// name = config.name || entityId;
//}
//console.log(name);
this.setProperties({
//name: name,
stateObj: stateObj,
previousState: speed,
isLowSpeed: speed === 'low',
isMedSpeed: speed === 'medium',
isHighSpeed: speed === 'high',
});
}
stopPropagation(e) {
e.stopPropagation();
}
setSpeed(e) {
const entityId = this.config.entity;
const speed = e.currentTarget.getAttribute('name');
if (speed === 'off') {
this.hass.callService('fan', 'turn_off', { entity_id: entityId });
}
else {
this.hass.callService('fan', 'set_speed', { entity_id: entityId, speed: speed });
}
}
}
customElements.define('custom-fan-card', CustomFanCard);
