ah ok, yes it does show in the top left corner correctly. Admittedly my skills in this area are limited however it sure seems like it should work based on examples I’ve been following.
You could try to look at the element with the dev-tools of your browser (usually f12) and check for the position in there.
~Cheers
Again limited skills here but this is what I see via the dev-tools. Unfortunately not much help for me. What’s odd is when you hover over both the svg and the box they both show the weather sensor info.
So…as a simple fix did you try to just lift the placeholder box up…might not look to good in the svg but on floorplan it should work.
~Cheers
So try to move the box up thinking that will raise the svg up to the location I actually would like it? Hadn’t tried that however I don’t think I can scale the svg the way it is now. Meaning ultimately I wanted to make it slightly larger than what is shown above but I believe I tried enlarging the box but it had no impact on the svg. I’ll try moving the box up to see what that does.
Edit: That did work, by moving the box up I was able to place it where I would like it to be. As I mentioned though enlarging the box has no effect on sizing the weather svg. I wonder what would happen if I change the values in the actual weather svg. I think the height and width is currently at 64
Edit #2: well I take that back, I was able to enlarge the svg. Guess I just didn’t go big enough before to see a difference. I went from a 64 pixel to 164 and noticed it did get larger (within Inkscape). Still not within the box as expected but at least useful now.
Thanks for your suggestions!
1 Like
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:8123and on ios devices with custom dnshttps://xxxxx.ddns.net:8123(the dns entry just mapsxxxxxx.ddns.netto192.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:
However, when I hit the exact same icon on floorplan on my kindle fire, it “kind of” opens the image (it opens the white box) but no image inside:
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.
Thanks!
Jason
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:
#panel_custom:
# - name: floorplan
# sidebar_title: Floorplan
# sidebar_icon: mdi:home
# url_path: floorplan
# config: !include floorplan.yaml
2.) I have added the state-card-floorplan.html from github to www/custom_ui/state-card-floorplan.html.
3.) I have added the code for the dummy binary sensor in my binary_sensor.yaml:
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: Floorplan
4.) I have added the code for customized virtual entitiy in my customize.yaml:
binary_sensor.floorplan:
custom_ui_state_card: floorplan
config: !include floorplan.yaml
5.) I have added the dummy binary sensor to a group an put that group in my default view in my groups.yaml:
Floorplan:
- binary_sensor.floorplan
Default_view:
name: Räume
view: yes
entities:
- device_tracker.simonmotog4plus
- device_tracker.lisad802
- sensor.fahrtzeit_arbeit
- group.floorplan
- group.wohnzimmer
- group.kuche
- group.schlafzimmer
- group.buro
- group.flur
And that is what I get in my default view afterwards as result:
Did anyone have a tip for me what I might have done wrong?
Thanks in advance.
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.
Any ideas?
.static-textNB {
fill: #000000;
font-family : Helvetica;
font-size : 12px;
word-wrap: normal;
}
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