Already asked in a different thread, but without a definitive answer. Check here: Text Wrapping
Thanks, I missed that. I took a look but still couldn’t figure out a way to do it.
However I had another thought, would there be a way to split the data received in the sensor.darksky_hourly_summary into 2 different sensors? Maybe use some temple-ting logic that could grab the first 60 characters into one sensor and grab the remaining characters into a second sensor. This way I could then put the two separate sensors on to my floorplan on separate lines.
That seems a good idea. As a first take you can split mid-word just splitting at a fixed char number (see example here http://grokbase.com/t/gg/ansible-project/15434da2pp/substring-variables )
A better implementation would be to find the last space before the limit length, and split at that position. Check out if the wordwrap filter can be used (http://jinja.pocoo.org/docs/2.9/templates/#builtin-filters).
I’ve been trying the developer tools in HA to see if this would work
value_template >
{{ states.sensor.dark_sky_hourly_summary | truncate(11) }}
however it doesn’t return any values nor does it provide an error message.
*Edit: Found the problem, it needed to be
value_template >
{{ states.sensor.dark_sky_hourly_summary.state | truncate(11) }}
Some good news, while still not perfect I was able to create another sensor based on the sensor.dark_sky_hourly_summary. In my config.yaml file I added this:
sensor 33:
platform: template
sensors:
weather_summary:
value_template: "{{ states.sensor.dark_sky_hourly_summary.state | truncate(50) }}"
friendly_name: "Weather Summary"
then tied this new sensor (sensor.weather_summary) to my floorplan.svg which now renders the text like this:
I tried using value_template: “{{ states.sensor.dark_sky_hourly_summary.state | wordwrap(50) }}” however while it did work in the new sensor when I tied it the floorplan.svg it didn’t show the wrapping and displayed on 1 line and ran off the page.
In the short term the truncate filter will work. Hope this helps someone.
2 Likes
To show more than one line of text you can try this:
{{ ( states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,“§”)).split(“§”)[0]}}
Using [0] for the template for the first line of text, [1] for the second line, [2] for the third.
The convoluted logic is:
- wordwrap places a § between words in blocks less than 50 chars (you can use any character that hopefully will never be in the original text)
- split transform the string in an array of strings splitting on the § char
- [n] takes the nth element of the array.
This is the code I used to test it in the developer tools:
{{ (“Very long text used to try the word wrap feature in Jinja template system that should translate in three rows of text” | wordwrap(50, true,“§”)).split(“§”)[0]}}
{{ (“Very long text used to try the word wrap feature in Jinja template system that should translate in three rows of text” | wordwrap(50, true,“§”)).split(“§”)[1]}}
{{ (“Very long text used to try the word wrap feature in Jinja template system that should translate in three rows of text” | wordwrap(50, true,“§”)).split(“§”)[2]}}
3 Likes
Interesting however I am getting this in the Dev Tools -> Error rendering template: TemplateSyntaxError: unexpected char ‘§’ at 145.
Actually I replaced your text with my sensor and it worked
{{ (states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,"§")).split("§")[0]}}
{{ (states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,"§")).split("§")[1]}}
I assume I would have create a second sensor to capture the second line so something like this:
sensor 33:
platform: template
sensors:
weather_summary1:
value_template: "{{ (states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,"§")).split("§")[0]}}"
friendly_name: "Weather Summary1"
sensor 34:
platform: template
sensors:
weather_summary2:
value_template: "{{ (states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,"§")).split("§")[1]}}"
friendly_name: "Weather Summary2"
I’ll try this out. Thanks so much!
1 Like
Just fyi, the sensor.dark_sky_hourly_summary I am using varies in text length based on the information provided. You can see below that the current length is less than 50 so it all fits on one line so I am getting this “undefined” on my 2nd sensor line. I am hoping Checking to see if I can eliminate that through the floorplan.yaml or floorplan.css files.
Fixed it through the floorplan.yaml file by setting entity.state: “”
- name: DkSky Hourly Summary2
entities:
- sensor.weather_summary2
text_template: ‘${entity.state ? entity.state : “”}’
class_template: ‘return “static-textNB”;’
I just tried this and get an error… Any idea please?
- platform: template
sensors:
weather_summary1:
value_template: "{{ (states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,"§")).split("§")[0]}}"
friendly_name: "Weather Summary1"
- platform: template
sensors:
weather_summary2:
value_template: "{{ (states.sensor.dark_sky_hourly_summary.state | wordwrap(50, true,"§")).split("§")[1]}}"
friendly_name: "Weather Summary2"
2017-10-06 08:14:53 ERROR (SyncWorker_0) [homeassistant.util.yaml] while parsing a block mapping
in "/config/configuration.yaml", line 617, column 9
expected <block end>, but found '<scalar>'
in "/config/configuration.yaml", line 617, column 95
2017-10-06 08:14:53 ERROR (MainThread) [homeassistant.bootstrap] Error loading /config/configuration.yaml: while parsing a block mapping
in "/config/configuration.yaml", line 617, column 9
expected <block end>, but found '<scalar>'
in "/config/configuration.yaml", line 617, column 95
OK I fixed it by using single quotes around the template and friendly name…
how did you get to show the number of an entity that is on at a time example I see you have 3 lights
Is it possible to change all the items in an svg with the same class? for examples, all the windows and doors in my svg are tagged with a respective class. Can I use the floorplan.yaml to change the css for those classes? Maybe make a custome SVG class the entity and interact with it that way. I’ve tried several methods and thought I would reach out for help.
Hi all,
Just updated the GitHub repo with some changes that are required for Floorplan to work with HA versions 0.53 and upwards. Without these changes, the floorplan will not appear as a custom state card (custom panel always worked). Two files have changed, and one has been added:
customize.yaml
Changed from this:
custom_ui_state_card: floorplan
to this:
custom_ui_state_card: state-card-floorplan
configuration.yaml
Added this:
frontend: !include frontend.html
frontend.html (new file)
Let me know how you go.
BTW, can someone test this out on an iPhone or iPad? I don’t have one handy, but was able to test this successfully using the IOS emulators here:
Cheers,
Petar
3 Likes
No luck here with a custom panel on the iOS app, mobile Chrome, or in Safari on macOS.
What details can we provide to help troubleshoot this?
Chris
Is there any error information you can provide? Not sure if there is a way to see a developer console on those mobile devices…
Floorplan v1.0.6 is now ready. It fixes the stylesheet loading issue (script error) on Safari, Chrome, etc. on mobile devices.
Simply grab the latest floorplan file from GitHub repo:
www/custom_ui/floorplan/ha-floorplan.html
Let me know how you go… 
3 Likes
floorplan v1.0.6 works again on safari (both high sierra and ios 11 on my iphone7). the state card works again, too — on all browsers, including chrome. on safari i needed to clear the cache before it worked again. thanks a lot!
2 Likes