Stupid question but did did you also install the js-files in the lib-directory?
@quadmasta I haven’t pulled your fork in yet, but it looks like your code is better than mine since it doesn’t rely on stop propagation. However, I have been running the code I posted for 24 hours now and it hasn’t had any unintended side effects.
Having warnings enabled only show HA related errors (like having an element configured in the floorplan.yaml file but not in your floorplan.svg file). It doesn’t show JS errors.
I have no idea how to troubleshoot what’s going on with the Fire 
Hi there.
@CCOSTAN has some great ideas on using the Fire. We’ve been doing a bit of work on getting the Fully Kiosk Browser app working with HA.
Still work in progress, but the relevant files are in this repo:
: https://github.com/pkozul/ha-floorplan-kiosk
This functionality allows your Fire to be used in the following ways by HA:
- Binary sensor (motion detection via inbuilt camera)
- TTS media player (via inbuilt speaker)
Since the Fire (Fully Kiosk Browser) and HA know nothing about each other, the Floorplan serves as a bridge between the two.
I’ve been using this over the weekend and it seems to work nicely. Primarily, I use the Fire as a floorplan display. The features mentioned here are really just adding further value to the what can be done with the Fire.
Whenever I walk past the Fire, it shows up as a triggered zone (binary sensor) on my floorplan. Also, I have some set some automations that play TTS (via Google TTS) and it all plays nicely on the Fire using the URL of the TTS file. BTW, Fully Kiosk has its own TTS so its possible to send it raw text and get it to play that, rather than provide it with the URL generated by HA.
Thanks to the Fully Kiosk Browser’s JavaScript API, we can access other bits and pieces of information from the Fire (battery level, charging state, and hook that into HA (i.e. as a sensor).
Let me know if you give this a go.
BTW, this may work nicely on just about any tablet, so feel free to try it on your devices. I’ve only mentioned the Fire here since that’s the device @CCOSTAN and I are using.
2 Likes
@quadmasta @kevinfcook Good work on this guys,.Been a little busy lately, but this week I will look into this and do some tests on my Fire.
It’s 100% reliable via chrome on my phone and chrome on my PC. It behaves strangely on my Fire using the stock browser, wall panel, and fully kiosk (I think these all use the stock browser) as well as via Chrome on the Fire.
1 Like
@CCOSTAN cool! I’m going to load this up later tonight and play around with it. I don’t use HA for security, so the proximity stuff isn’t super useful for me, but I’m definitely interested in monitoring Fully Kiosk with it. Any idea how access the Fire’s info (battery, etc) yet or were you saying that would come in the future?
Now, we just need to figure out how to turn the Fire into an iBeacon so we can track people inside our homes that way 
As for the double firing of events on tap on the Fire, definitely let us know what you figure out! My solution works all the time so far, but as @quadmasta pointed out, it might not be optimal since it relies on stopPropagation(). @quadmasta’s code is probably better, but it doesn’t work on the Fire 
@kevinfcook @quadmasta There was a PR submitted that totally removed the need for handling the touchstart event.
This was added to the top of the floorplan HTML:
<meta name="viewport" content="width=device-width">
Relevant info here:
Please try the new version v1.0.5. I’ve been testing it on the Amazon Fire (Fully Kiosk), on my laptop (Google Chrome), and even on my Windows Phone. Seems to work well across the board.
Let me know how you go…
BTW, for future reference, if you want to display debugging info in the floorplan, simply call the debug() function within the code you want to inspect, and the text will be displayed at the top of the floorplan.
this.debug('Some debug info here...');
or in some cases (depending on the context):
this.instance.debug('Some debug info here...');
Adding debug info is useful when testing on mobile devices since you don’t have all the developer tools available as you do on a laptop/dekstop.
1 Like
@kevinfcook The floorplan code in the experimental repo already contains the battery level and other data available from the tablet. The only missing link for now is getting that data into HA. This is still being worked on. We might end up creating a custom component in HA to represent the tablet, or piggyback off one of the existing components.
In the experimental repo, we simply created a dummy MQTT binary sensor to represent Fully Kiosk’s motion detection, and also created a custom component for playing TTS within Fully Kiosk. There are many ways to skin a cat.
Fully Kiosk exposes a bunch of JavaScript functions (API) that allow the floorplan code to get all this information. The floorplan can then call the relevant HA REST API to keep HA informed about the tablet’s current state.
In the opposite direction, HA can indirectly tell Fully Kiosk what to do (i.e. play some TTS audio). Once again, the floorplan code intervenes here. It uses the HA WebSocket API and listens for HA service calls. When it detects a service call that is meant for Fully Kiosk, it then calls the Fully Kiosk JavaScript API to do the work.
Although Fully Kiosk supports TTS natively, we have implemented this using the HA mechanism whereby the TTS is served as a URL that contains an MP3 file ready to be played. The floorplan simply calls the HTML5 play() function, which works nicely within Fully Kiosk.
I just pulled the latest version from the repo and tested it on my Fire in Fully Kiosk Browser and it seems to work perfectly!
2 Likes
Can I ask a truly dumb question please?
it says copy the files to www/etc etc
Do I create the www folder in the root of my home assistant folder with my yaml config files please?
Cheers
Mark
perfect, thank you so much!
After about 3 hours of making this work, drawing a floorplan in Inkscape and getting all my sensors/lights etc in there…
I can say, this is THE BEST addon? plugin? component? ever to hit Homeassistant
The wife acceptance factor just went up ten fold because I gave her a tablet with v1 of my floorplan on it. It doesnt even have any animation or anything, its literally just the plan, and all my sensors in the default state! So much more potential than I have now
I cannot thank you enough. I hope this post brings you as much happiness as it did me (WAF considered)
Keep up the great work @pkozul - and thank you.
6 Likes
Hi!
Thanks for a great write-up. I followed your tutorial, but the actual image is not showing up. I just see a generic circle, with a black circle inside.
When I hit the circle, it shows status as off and the following text:
{ “name”: “Demo Floorplan”, “image”: “/local/custom_ui/floorplan/floorplan.svg”, “stylesheet”: “/local/custom_ui/floorplan/floorplan.css” }
I am getting the following errors in chrome:
:8123/local/custom_ui/floorplan/lib/jquery-3.2.1.min.js:1 GET http://10.0.0.29:8123/local/custom_ui/floorplan/lib/jquery-3.2.1.min.js :8123/local/custom_ui/floorplan/lib//moment.min.js:1 GET http://10.0.0.29:8123/local/custom_ui/floorplan/lib//moment.min.js :8123/local/custom_ui/floorplan/lib/svg-pan-zoom.min.js:1 GET http://10.0.0.29:8123/local/custom_ui/floorplan/lib/svg-pan-zoom.min.js
@pkozul - trying to get sensor data printed as text on the floorplan. The temp sensor has a ‘state’ = an integer, like ‘82’. I’m not clear on what the text_template line should look like.
I tried the:
text_template: ‘${entity.state ? entity.state : “unknown”}’
Like in the example, but there is no text being printed. I made a invisible line in the floorplan.svg file with the ID of the sensor (I can hover over the invisible line and see the temp sensor information and current state) but it’s not printing any text.
Thanks!
EDIT: got it working by copying the exact dotted line from the example floorplan.svg file. Not sure how it’s different than the line I made…
1 Like
I dunno why but you have to make your text ‘unflow’ for this to work properly. In inkscape there is an option for that in the text menu.
~Cheers
There’s a very good chance I just screwed something up because i only had an hour to play before packing and heading out for a week for work over the weekend, but can anyone tell me in the latest version if the “light groups” issue is fixed? Specifically I have a group called “Living Room Lights” and whenever I’d add “group.living_room_lights” to entities: on the yaml config file, I’d get an error that light.lr1, light.lr2 and light.lr3 weren’t on the SVG, yet if I put it in groups: and set the svg’s ID for the single “bulb” i want to represent the group, the light just shows up as lit even when it’s off and is no longer clickable/tappable. Is there something I should be trying outside updating to the latest code, which I’ve done? Is this still an issue? I saw there is an update to the grouping but it seemed like when I’d try it, it would either be the same issue or else just straight up not work.
Is there a good video demo of this somewhere? People talk highly about it but I don’t understand the excitement so I’m hoping to see a video demo before I jump in to spend a few hours on it.
@hejman08 Just tried this to make sure it works. I added the group group.all_lights to my floorplan config:
- name: Switches
entities:
- group.all_lights
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
service: toggle
I then added a single element (i.e. <rect>) to the SVG file to represent that light group. Clicking that element toggles the group state between ‘on’ and ‘off’. The element changes colour, and the entity in HA shows the changes in state.
Is that the same sort of scenario you are trying to achieve?
From what I understand, you want to use a single bulb image to represent the group, which means you should be using the entities: section, as I have shown above (i.e. you don’t want the floorplan to explode the group into separate entities).