How to add spaces between sensor outputs

Configuration Frontend
1

I have a template chip cards showing some readings in particular room in one line. I want to separate this numbers with three (or more spaces), but output is always one space. I have tis code


- type: custom:mushroom-template-card
    primary: Bedroom
    secondary: >-
      {{ states('sensor.hue_motion_sensor_1_temperature') }} °C __  {{
      states('sensor.hue_motion_sensor_1_illuminance') }} lux __ {% if
      is_state('light.bedroom', 'on') %} {{ (state_attr('light.bedroom',
      'brightness')/255*100)|round(0) }} % {% endif %}

I need spaces instead of underscores, how to achieve that?
Thanks

1 Like
2

How about this?

(You may also need to supress line breaks.)

- type: custom:mushroom-template-card
    primary: Bedroom
    secondary: >-
      {{ states('sensor.hue_motion_sensor_1_temperature') }}{{ '°C   ' }}{{
      states('sensor.hue_motion_sensor_1_illuminance') }}{{ 'lux   '}}{% if
      is_state('light.bedroom', 'on') %} {{ (state_attr('light.bedroom',
      'brightness')/255*100)|round(0) }} % {% endif %}
3

Adding to what @templeton_nash suggested, I would prevent the case where some of those values are not available, just like you have done for brightness…

Something like this:

- type: custom:mushroom-template-card
    primary: Bedroom
    secondary: >-
      {% if is_number('sensor.hue_motion_sensor_1_temperature') %}
        {{ states('sensor.hue_motion_sensor_1_temperature') | round(0) }}{{ '°C   ' }}
      {% endif %}
      {% if is_number('sensor. hue_motion_sensor_1_illuminance') %}
        {{ states('sensor.hue_motion_sensor_1_illuminance') | round(0) }}{{ 'lux   '}}
      {% if is_state('light.bedroom', 'on') %}
        {{ ((state_attr('light.bedroom', 'brightness') | float(0))/255*100) | round(0) }} %
      {% endif %}
4

Thanks.
How do I supress line breaks?

Edit: i just tried it and its still one space only

5

You suppress line breaks by putting a dash immediately after the opening braces and/or immediately before the closing braces.

If there is a percent sign then after the opening sign and/or before the closing sign.

Try putting the following in the developer tools → TEMPLATES

{{ 'X X' }}

and try putting extra spaces between the X’s.

6

Here is a screenshot of the code and output (right most template card). Despite in the code is ‘C .’ on the card there is just one space between C and dot.

image
image1671×1073 202 KB

7

I see what you mean.

My guess is that the card is passing the spaces straight into the final HTML.

In HTML one would add a non-breaking space &nbsp to get a decimate space.

I’m not sure if this is the issue or how you can insert this if it is.

Maybe someone more technical than me can help. Maybe you could raise an issue on GitHub so that the developers see it.

8

Just a thought. What is you add spaces like this:

{{ ' ' }}{{ ' ' }}{{ ' ' }}

9

Agree with @templeton_nash. In html, whitespace gets reduced to a single space. Like if you have 3 spaces " " it will result in a single space, unless you use the html entity for a space.

Not sure if the templating system converts white space to html entities, so you may have to do it manually in your code.

{{ '°C   .' }}

For 3 spaces between °C and the period, etc.

10

It doesn’t work either, this is the output
Screenshot 2023-02-05 at 19.51.38

11

try double quotes instead of single quotes.

12

You have to enable multiline support in the card options:


multiline_secondary: true
13

Bingo, that finally works, thank you very much.

14

I’m not sure if anyone is still watching this forum thread. I am trying to add tab spacing my card very similar to @MartinG … but it simply doesn’t work. What am I doing wrong?

type: custom:mushroom-template-card
secondary: >-
  {{ states('sensor.process_0_exe') }} {{ '   ' }} VIRT:{{ 
  states('sensor.process_0_res') }}M  RES:{{ states('sensor.process_0_virt') }}M
multiline_secondary: true

image