I had a similar issue and was a cache problem…
IDK how iOS app handle this, you could try in another (clean) iDevice…
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
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>
Can someone make a easy tutorial for me?
I just want text in card. Like a reminder.
I have no idea how to get this done, I tried to do as you guys but nothing comes up, NOTHING…
This should be a easy thing to do, but I have spent several hours now and I’m getting soooo frustrated. I will soon set my computer on fire. Please help me.
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>Yes! This one worked after I have updated both the only-text custom_ui and the files from https://github.com/andrey-git/home-assistant-custom-ui repository: state-card-custom-ui.html, state-card-custom-ui-es5.html, state-card-custom-ui-dbg.html, state-card-custom-ui-dbg-es5.html.
Thank you, Mariusthvdb
1 Like
well now im lost…
have a sensor with a state of possible 255+ characters, and trying to use the custom card, it still won’t show.
sensor.map_totaal_actueel_sensors:
custom_ui_state_card: state-card-value_only
and sensor:
map_totaal_actueel_sensors:
friendly_name: Overzicht sensors actueel
unit_of_measurement: 'Watt'
value_template: >
{%-for state in states.sensor
if state.entity_id.endswith('actueel') and state.state|float > 0 %}
{{state.name[:-8]}}: {{state.state}}
{%-endfor%}
{{ '-'.ljust(30, '-') }} {{ '-'.ljust(30, '-') }}
How did you customize your sensor?
I finally switched to a text-only sensor (and have not saved the working value-only config, sorry about it). The data is sent to the sensor over MQTT and it was not possible to get >255 symbols (due to the sensor txt size or mqtt limitation). So I split the data into several mqtt messages and fetch them by sensors to yield something of this kind:
https://drive.google.com/file/d/1CRhkSoRIWLM6LNCJRTlxANIUdM8smQR-/view?usp=sharing
In config and customize everything is pretty straight forward:
configuration.yaml
sensor:
- platform: mqtt
name: "Stocks 1"
state_topic: "last.stock_1"
- platform: mqtt
name "Stocks 2"
state_topic: "last.stock_2"
....
customize.yaml
sensor.stocks_1:
custom_ui_state_card: state-card-text
sensor.stocks_2:
custom_ui_state_card: state-card-text
…
@k0n1e5 nt evermind, found my way again…
for the custom cards to work and overcome the 255 character limit, we need an attribute ‘text’, and that can only be achieved in a python script.
Made that now, and its doing its job just fine.
glad you got your setup to work too. cool.
This thread seems to be old but I also want to add my two cents:
I tried something similar with the weather alarm integration (it is supposed to display the warning text below the warning banner).
After some fiddeling I found a very easy solution with a markdown card.
In my case I display the code conditional so the warning and text only show when there is a warning
- type: conditional
conditions:
- entity: sensor.dwd_weather_warnings_current_warning_level
state_not: '0'
card:
type: vertical-stack
cards:
- type: custom:meteoalarm-card
entity: sensor.dwd_weather_warnings_current_warning_level
integration: automatic
override_headline: false
- type: markdown
content: >-
{{ state_attr('sensor.dwd_weather_warnings_current_warning_level',
'warning_1_instruction' ) }}
So with a markdown containing a state it does exactly what I wanted it to do:
- type: markdown
content: >-
{{ state_attr('sensor.dwd_weather_warnings_current_warning_level',
'warning_1_instruction' ) }}
in the end it looks like this:
2 Likes
Super helpful, thank you!
I’ll just add the link to the templating documentation, and specifically the states examples section.
The Environment Canada integration gives a forecast that is a text string in the state value. So the markdown for this could be:
{{ states('sensor.<city_name>_forecast') }}
1 Like
I wanted to do exactly the same thing but with the NWS Alerts integration - have the multiple lines of the ‘display desc’ show up - and I’m not great at coding in HAS yet. I grabbed your code, changed the entity & attribute names and it worked first time. This was incredibly helpful - many thanks for posting.
1 Like