bnhhass
October 26, 2017, 11:12pm
14
I probably should have added in my previous post to apply JSON.parse() to the computeStateDisplay return value. Here’s my config and code snippets. Post your config and sensor JSON value, if you’re still having trouble.
sensor:
- platform: command_line
name: CurrentlyRecording
command: "/home/homeassistant/.homeassistant/media Recording"
customize:
- sensor.CurrentlyRecording:
friendly_name: Currently Recording
custom_ui_state_card: state-card-value_only
group:
Currently_Recording:
name: Currently Recording
entities:
- sensor.CurrentlyRecording
The JSON being returned from the sensor is: (there’s only one record in this example)
{{states.sensor.currentlyrecording.state}}[{"Start":1509057000000,"Title":"CBS Evening News"}]
Then in the state-card-display_only.html file:
<table>
<template is="dom-repeat" items="[[computeStateDisplay(stateObj)]]" as="media" index-as="num">
<tr><td>[[ media.Start ]]</td><td>[[ media.Title ]]</td></tr>
</template>
</table>
Polymer({
is: 'state-card-value_only',
properties: {hass: {type: Object,}, stateObj: {type: Object, },},
computeStateDisplay: function (stateObj) {return JSON.parse(window.hassUtil.computeStateState(stateObj)) },
});
1 Like
mviezzer
October 27, 2017, 8:44pm
15
Thanks for the example, I’ll play with it this weekend…
mviezzer
November 3, 2017, 3:34am
16
@roflcoopter here is my working configgithub info I have the links to the files…@bnhhass ) and check for special formatting characters.
Beautiful! This works perfectly.
That is one interresting repo you have there, i might use that control panel of yours to make a remote for my TiVo!
thanks a lot @mviezzer , @bnhhass
Btw, do you have an easy way to debug statecards like this? would simplify the process a lot
mviezzer
November 4, 2017, 1:21am
18
Nice.
On Hass 0.58.1 this no longer works for me on the iOS app, but works fine on the PC. The text is not shown so its just a blank card. I have the text stored in an attribute named text since the state is limited to 255 characters.
Maybe @andrey has an idea? It works if i use the extra data from his Custom UI but that doesnt satisfy my need of splitting the text into several rows
<!--
https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-display.html
https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/entity/state-badge.html
-->
<dom-module id="state-card-value_only">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
.normal {
@apply(--paper-font-body1);
color: var(--primary-text-color);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.bold {
@apply(--paper-font-body1);
color: var(--primary-text-color);
font-weight: bold;
font-style: italic;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.atention {
@apply(--paper-font-body1);
color: var(--google-red-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.hidden {
@apply(--paper-font-body1);
color: var(--paper-card-background-color);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
</style>
<template is="dom-repeat" items="[[computeStateDisplay(stateObj)]]">
<div class$="[[computeClass(item)]]">[[computeItem(item)]]</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-value_only',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
computeStateDisplay: function (stateObj) {
//window.hassUtil.computeStateState(stateObj);
return stateObj.attributes.text.split("\n");
},
computeItem: function (item) {
var value = item.trim();
switch(value.substring(0,1)) {
case "*":
case "!":
return value.substring(1);
default:
return value;
}
},
computeClass: function (item) {
switch(item.trim().substring(0,1)) {
case "*": return "bold";
case "!": return "atention";
default: return "normal";
}
},
});
</script>
mviezzer
November 27, 2017, 11:48pm
21
I had a similar issue and was a cache problem…
Yeah seems to be a cache problem, it works if i go incognito mode on Safari.
Need to use a third party app to clear cache i think. iOS sometimes…
This stopped working for me (both in hassio and on my Mac) with the latest updates in home assistant
Same, im not great with JavaScript but ill see if i can get it to work
The issue is probably related to: https://home-assistant.io/blog/2017/11/18/release-58/
“Note: For Custom UI users: your custom UI will need to be updated before it can work with the new version of the frontend.”
Found the problem, you need to add this to your configuration.yaml (note: im using andrey’s custom ui)
# Enables the frontend
frontend:
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-value_only.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-value_only.html
This way the state-card-value_only.html is loaded both when using es5 and the latest JS functionality. The codes does not have to be changed
2 Likes
Thanks but while this helped me get another custom ui solution working, it did not work when tested under Mac or IOS
I think it’s working now (probably a browser cache thing) - thanks again
Dolores
January 12, 2018, 2:15am
29
I’m trying to use this to display an input_number, but not let the input_number be directly changeable. Here’s how it looks before the custom state card:
The input_number is actually controlled by the scripts. It’s a bit crude but works fine. I just wish I could prevent accidental changing of the input_number from the ui, hence the desire for the state card.
Once I addded the state-card-value-only to my www/customui , and customized the input_number with it, this is what I got. It just doesn’t appear in the group.
Any idea what’s up or how to fix this? I tried forcing my cache to reset, but that didn’t fix it either.
trying to expand this a bit further (and correct the bold into bold an add italic) I edited the state-card-value_only.html somewhat. Unfortunately I cant get the brown and grey to show. they’re the only non-google colors, not declared in the badge colors of https://github.com/PolymerElements/paper-styles/blob/master/color.html ?
fixed the italic and bold, working as they should now (was erratic in the original, had font-weight and font-style incorrect).
Please have a look what could be wrong, tried to use the colors from https://github.com/PolymerElements/paper-styles/blob/master/color.html:
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
.bold {
@apply(--paper-font-body1);
color: var(--primary-text-color);
font-weight: bold;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.italic {
@apply(--paper-font-body1);
color: var(--primary-text-color);
font-style: italic;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.red {
@apply(--paper-font-body1);
color: var(--google-red-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.green {
@apply(--paper-font-body1);
color: var(--google-green-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.yellow {
@apply(--paper-font-body1);
color: var(--google-yellow-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.grey {
@apply(--paper-font-body1);
color: var(--paper-grey-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.brown {
@apply(--paper-font-body1);
color: var(--paper-brown-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.blue {
@apply(--paper-font-body1);
color: var(--google-blue-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.normal {
@apply(--paper-font-body1);
color: var(--primary-text-color);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
</style>
<template is="dom-repeat" items="[[computeStateDisplay(stateObj)]]">
<div class$="[[computeClass(item)]]">[[computeItem(item)]]</div>
</template>
ohman92
March 5, 2018, 6:09pm
31
Can someone make a easy tutorial for me?
I have no idea how to get this done, I tried to do as you guys but nothing comes up, NOTHING…
k0n1e5
August 15, 2018, 2:57pm
32
Have you made it to work finally. In home assistant 0.75 I only get a white card, no sensor values displayed
yes, my final custom card adaptation is below. If you show us what you’ve done, we can help find the issue.
<!--
https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-display.html
https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/entity/state-badge.html
https://github.com/PolymerElements/paper-styles/blob/master/color.html
paper-brown-500: #795548 and google-grey-500: #9e9e9e
-->
<dom-module id="state-card-value_only">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
.bold {
@apply(--paper-font-body1);
color: var(--primary-text-color);
font-weight: bold;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.italic {
@apply(--paper-font-body1);
color: var(--primary-text-color);
font-style: italic;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.red {
@apply(--paper-font-body1);
color: var(--google-red-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.green {
@apply(--paper-font-body1);
color: var(--google-green-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.yellow {
@apply(--paper-font-body1);
color: var(--google-yellow-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.grey {
@apply(--paper-font-body1);
color: #9e9e9e;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.brown {
@apply(--paper-font-body1);
color: #795548;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.blue {
@apply(--paper-font-body1);
color: var(--google-blue-500);
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.normal {
@apply(--paper-font-body1);
color: #009688;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
</style>
<template is="dom-repeat" items="[[computeStateDisplay(stateObj)]]">
<div class$="[[computeClass(item)]]">[[computeItem(item)]]</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-value_only',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
computeStateDisplay: function (stateObj) {
var text = stateObj.attributes.text;
if (text == null) { text = stateObj.state };
return text.split("\n");
},
computeItem: function (item) {
var value = item.trim();
switch(value.substring(0,1)) {
case "*":
case "/":
case "!":
case "+":
case "=":
case "%":
case "$":
case "#":
return value.substring(1);
default:
return value;
}
},
computeClass: function (item) {
switch(item.trim().substring(0,1)) {
case "*": return "bold";
case "/": return "italic";
case "!": return "red";
case "+": return "green";
case "=": return "yellow";
case "%": return "grey";
case "$": return "brown";
case "#": return "blue";
default: return "normal";
}
},
});
</script>
