Ok, I would like to share my finds on “Script Error:” problems.I am on hass 0.54 and latest revision of floorplan (just downloaded)
I have a NAT forwarding disabled router at home, so I use custom dns solutions for ios to connect the hass server from home.
Connection possibilities:
From outside of wifi network https://xxxxx.ddns.net
From local either https://192.168.1.x:8123 and on ios devices with custom dns https://xxxxx.ddns.net:8123 (the dns entry just maps xxxxxx.ddns.net to 192.168.1.x)
From pc on windows 10: both xxxxx.ddns.net:8123 with custom dns and 192.168.1.x:8123 (with a warning on ssl certificates which the pc can easily ignore where the ios devices can’t ignore)
floorplan works flawlessly on every case.
From iphone ios 10.2 within wifi: floorplan page is empty with loading icon.
Outside of wifi: floorplan screen comes up with all animations working etc, but nothing is clickable. Tried with both chrome and safari.
From ipad ios 11 within wifi network: floorplan gives the error “Script error: See browser console for detail” and a white page. Can’t try outside of the wifi network as it is a wifi only device. Tried with both chrome and safari.
I’m having an issue combining hidden layers and image_templates.
I’m trying to do two things:
Toggle a Layer to show a ‘weather detail’ panel if I want more information than today’s basic weather.
Dynamically load SVG icons for the five day forecast on the aforementioned layer using image_template
The problem that I’m finding is that the SVGs are attached to the root layer of the SVG when loaded using image_template. This means that they are always visible, even when the layer (which the placeholder rectangles are a child of) are hidden.
I tried adding the image.xxxx elements that are generated by image_template to the class toggle in my floorplan.yaml file but that just fires them opposite of the layer. (It seems the default class is being applied prior to the base svg elements being created.)
I’ve spent quite a bit of time on this with no success. Any ideas? All I want is a pop-up when I click on the weather summary that contains the correct icons for the five day forecast.
Not sure if this is the right spot for this question, but I’m having some issues with the camera displaying properly on the amazon fire. I’m bringing this up via a camera icon on floorplan.
It works fine when I interface with it via a browser on a PC:
These used to work on both platforms. Seems like the fire version stopped working ~ 3-4 mo ago. I did update to the current version of home assistant, but still same issue.
I have some problems to integrate florplan as a custom state card
I did a few tests with floorplan as a custom panel and that worked well.
But now, when I tried to implement it as a custom state card I had no success.
This is how I proceeded: 1.) I have commented out the code in my configuration.yaml, which I have used for the custom panel:
Would anyone know if it is possible to wrap text that shows on the floorplan? I have the darksky_hourly_summary text displaying on the floorplan and you see below how it runs off the page. Since it varies in length sometimes it fits and sometimes not. I tried adding word-wrap to the css file however that isn’t wrapping the text as expected. The fill, font and font size all work correctly but the word-wrap doesn’t. The darksky_houry_summary is tied to a text element in the floorplan.svg file.
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.
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:
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.
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]}}
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:
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: “”
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
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.
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:
