Display only text in card

Configuration
1

Hi everyone, for my weather view, I scrape the forecast for the next hours on the Belgian Royal Meteorology Institute (Météo à Bruxelles - IRM). So far everything works well and it gives me a sensor which state is something like :

“La nébulosité restera abondante avec toujours un peu de pluie dans la moitié sud-est du pays. Ailleurs, le temps restera généralement sec avec quelques éclaircies.”

Now I want to display that text it in a card beneath other weather info I get from yahoo, the meteo.be website, a radar map for rain, etc.
Is there a (simple?) way to display ONLY THE TEXT quoted hereabove instead of having the typical two columns display (ie. ‘sensor NAME // ALL info in a very long and narrow column’) ? I’m currently at work, so I can not post a picture to be more clear, but I hope you understand what I mean.

Thank you

1 Like
2

I’m guessing you can accomplish that by creating a custom card:
https://home-assistant.io/developers/frontend_creating_custom_ui/

Also have a look at his repo:

It has some examples of custom cards

3

Thank you for your reply. However, I have already checked custom UI and from my understanding it does not allow such thing (I may be wrong though).
Could you please explain a bit more how you would do it ?

4

What does your data structure looks like?
Is the sensor state the text? If so, something like this might work as custom card:

<dom-module id='ha-text-card'>
  <template>
    [[computeText(stateObj)]]
  </template>
</dom-module>
<script>
(function() {
  ' use strict';
  
  Polymer({
    is: 'ha-text-card',
    properties: {
      hass: {
        type: Object,
      },

      stateObj: {
        type: Object
      }
    },

    computeText: function(stateObj) {
      return stateObj.attributes.state;
    }
  });
}());
</script>
1 Like
5

Yes, the text is the sensor state. I am not sure to understand everything, but I will check your solution when I get back from work. :smiley:
Thanks a lot

6

I had the same need. I did a custom state card like @tmatheussen mention.
Here is a working card. Will show only the value (expanded) not the caption.
SS:

<dom-module id="state-card-value_only">
  <template>

    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      .state {
        @apply(--paper-font-body1);
        color: var(--primary-text-color);
        margin-left: 10px;
        text-align: left;
        line-height: 20px;
      }
    </style>

    <div class='horizontal left layout'>
      <!--
      <state-badge state-obj='[[stateObj]]'></state-badge>
      -->
      <div class='state'>[[computeStateDisplay(stateObj)]]</div>
    </div>
    
  </template>
</dom-module>

<script>
Polymer({
  is: 'state-card-value_only',
  
  properties: {
    hass: {
      type: Object,
    },
    
    stateObj: {
      type: Object,
    },
  },
  
  computeStateDisplay: function (stateObj) {
    return window.hassUtil.computeStateState(stateObj);
  },
  
});
</script>
4 Likes
7

OK, I feel really stupid now, how did you get it to show?
I’m probably missing something very obvious here (possibly something with the naming), did you need to install the andrey-git repo?

8

I didn’t metion before, but the code above is in www/custom_ui/state-card-value_only.html
And I added the customize: of the sensor, with custom_ui_state_card: value_only

1 Like
9

I believe I did all that correctly, is the sensor in a group?

10

Right, just put it in a group and you get that text only panel.

11

Any way to insert linefeeds in the text displayed? Right now a standard line feed does nothing

12

i was inspired by this and came up with the following. as long as your computeStateState() function returns a JSON formatted array… [{“somekey”:“data1”},{“somekey”:“data2”}], you can use the polymer template “dom-repeat” to iterate over the keys in the html section and insert line breaks as
elements:

    <template is="dom-repeat" items="[[computeStateDisplay(stateObj)]]" as="item" >
      [[ item.somekey ]]<br>
    </template>

where somekey is a key in your JSON response.

i put that html inside a table to make it a little prertier, hope this help someone.

13

Could you help me apply your idea in the state card inserted above by @mviezzer?

Cant seem to get it to work

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
15

Thanks for the example, I’ll play with it this weekend…
Having other ideas like icons and rich format…

16

@roflcoopter here is my working config
In my github info I have the links to the files…
To keep it simple yet powerful I concat info in a python script and in the state card I split the string (to use in dom-repeat, like suggested by @bnhhass) and check for special formatting characters.

main
main523×761 78.6 KB

17

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

18

Nice.
I don’t think that there is an easy way to debug… For me is try and error, and I use the Chrome Inspector…

19

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>
20

The code seems fine