Text Wrapping

Third party integrations Floorplan
1

Just Curious if anyone has been able to figure out how to wrap text inside of an object using Floorplan. I’d like to be able to keep text within a certain “box” and have tried updating the HTML files, trying to wrap in Inkscape, etc with no luck.

To elaborate, I’d like to be able to use entities such as Wunderground daily summary (which sometimes can be lengthy) and have them stay inside a given boundary.

I’m at work at the moment, but i’ll post a picture of what I’m trying to describe tonight.

Any help is greatly appreciated!

-Zach.

2

I had posted the same question here but was not able to find a solution. Not sure if it is currently possible.

3

You are correct SVG does not make it easy to make wrappable text. I think it would be possible but it would need you to hack away at the actual svg file. Take a look here for SVG 2.

~Cheers

4

I saw that and noticed no one replied to your question. I figured starting a thread would gain a little more attention.

@PhyberApex
I’ll have to read up on that thank you. I’ve been doing quite a bit of googling and playing with the html and css coding but with little luck.

5

Sorry all, just realized I never posted what I meant by wrapping. Please see below:

image

Haven’t had time to read up on what PhyberApex had linked but I hope to get to it this week.

1 Like
6

We made some progress on the topic in the main Floorplan discussion. Check here: Floorplan for Home Assistant

1 Like
7

@namadori solved it (at least the first way I’ve seen) thank you!

For those looking for a solution please check out this thread:

Solution!

8

HI,
Can you tell me where you should put this text

  • platform: template
    sensors:
    weather_summary1:
    value_template: ‘{{ (sensor.pws_weather_2d_metric | wordwrap(50, true,"§")).split("§")[0]}}’
    friendly_name: ‘Weather Summary1’
  • platform: template
    sensors:
    weather_summary2:
    value_template: ‘{{ (sensor.pws_weather_2d_metric | wordwrap(50, true,"§")).split("§")[1]}}’
    friendly_name: ‘Weather Summary2’

From my reading it is config.yaml but I am not sure which section?
Thanks!

9

@OzGav

It does go in the config.yaml as new sensors. You then use those sensors in your floorplan.yaml. From there the class-template is used in the css file.

config.yaml
sensor 33:
platform: template
sensors:
weather_summary1:
value_template: >
{{ (states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,"§")).split("§")[0] }}

sensor 34:
  platform: template
  sensors:
    weather_summary2:
      value_template: >
        {{ (states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,"§")).split("§")[1] }}

floorplan.yaml:
- name: DkSky Hourly Summary
entities:
- sensor.weather_summary1
text_template: ‘${entity.state ? entity.state : “undefined”}’
class_template: ‘return “static-textNB”;’

        - name: DkSky Hourly Summary2
          entities:
            - sensor.weather_summary2
          text_template: '${entity.state ? entity.state : ""}'
          class_template: 'return "static-textNB";'
10

Thanks. That was what I needed. All working now. Cheers.