well, yes, that’s what I thought, but didnt get it to work. How do you think that would have to be configured ?
I tried it like this:
- type: markdown
content: >
sensor.orphans_sensor
showing:
lol.
which is the way it is done in regular (legacy) HA:
orphans_sensor:
name: Orphans sensor
icon: mdi:magnify
entities:
- sensor.orphans_sensor
If i do this in lovelace yaml:
- type: entities
title: Home summary
show_header_toggle: true
entities:
- sensor.summary
- sensor.orphans_sensor
will show:
but more-info shows the card as it should show in the first place:
so the info is there, now how to get it in the frontend.
don’t think this will be possible with the Markdown card since that uses, wel, Markdown formatting…
The custom card I use is a html card using css:
<!--
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
# (expanded from original with extra color codes and corrected cases bold/italic)
# paper-brown-500: #795548 and google-grey-500: #9e9e9e, blue, darkbrown, deepbrown, purple
# by @Mariusthvdb
-->
<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;
}
.darkbrown {
@apply(--paper-font-body1);
color: #500000;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.deepbrown {
@apply(--paper-font-body1);
color: #2d0000;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.purple {
@apply(--paper-font-body1);
color: #2d214b;
margin-left: 8px;
text-align: left;
line-height: 20px;
}
.normal {
@apply(--paper-font-body1);
color: #4b4b4b;
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 "#":
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";
case "@": return "darkbrown";
case "^": return "deepbrown";
case "&": return "purple";
default: return "normal";
}
},
});
</script>
maybe this whole card could be rewritten to a Lovelace card?
