Floorplan on Tablet/Phone Not Working

Third party integrations Floorplan
1

While on my computer using chrome I am able to click on the svg icons within my floorplan and have lights turn on/off however when trying to turn on/off the same lights while using a tablet I touch them and it does not work. I have tried on an older Samsung tablet, a new amazon HD Fire 8 tablet and my Android Samsung S4 phone, none of which allow me to turn on/off a light by just touching the svg icon in the floorplan.

Would anyone know why it would work using a mouse on my computer but not via touch on a tablet? Did I miss something in the setup of my Floorplan when creating the svg file? I am using either an svg file of a light bulb or a table lamp to represent the lights. Has anyone else encountered this?

2 Likes
2

I am completely stumped on this one. I have re-drawn my entire floorplan and readded all of the html and css files but no matter what I try I can not get this to work on a tablet or phone. Works great on my computer using a mouse click on any of the lights or bulbs, you can see the lights in “orange” as being on. There is still plenty I would like to do but I would need to have this working on a tablet by touching the icons. I am not familiar enough with html/css code to understand why it’s not working or if that’s even the cause. If you have any ideas please let me know, thx!

image

3

Yea it seems like an html / CSS issue…
Can you check if he elements are there with the correct ‘hit-boxes’
When you are on your tablet. Can you bring up a keyboard and tab around the elements and highlight one which has an action… If you can do that hit enter and see if it works…

My other thinking is. Do you have an onClick call on the element… maybe it should be more specific
Like onPress…

4

Thanks for the reply, couple of follow ups.

  1. Having some trouble trying to figure out how to get the keyboard to appear. If I can I’ll try your suggestion. If you know how to make it appear please let me know.
  2. Would I have to make those coding changes for onClick or onPress? Since others have posted videos showing their tablets and just pressing the elements I assumed this was already in the coding provided.

Thanks for your help

5

Which browser are you using for Amazon tablet?

6

Silk browser on amazon, Chrome on Samsung tablet and phone

7

I’d suspect a hit box problem - I’ve just tried it on my tablet (7") and it’s very hard to tap just right on “pretty” icons, it’s effectively impossible on the phone. The ones I’ve switched for solid shapes, they work without issue because the hit box isn’t just the lines.

8

How did you setup the box in inkscape, is it filled or just have color lines, did you do anything special when setting it up? I wonder if I can draw a box behind the icon but use the box as the element to turn on/off the light but still show icon although I suspect the then the icon wouldn’t change color to represent being on/off.

9

“Hit box” is a term that refers to the touch target. You can see it by what (with the default CSS) gets a white border when you hover your mouse over it. Generally (and it is a generality, since it depends on how the entity was created) the only things that responds to click/touch are the “coloured” pieces. So your lights, for example, only respond to touches on the black lines, not the hollow core.

The “visual” approach is fine if you’re using Floorplan to display the state, but if you’re wanting to make it touch friendly you need to replace those icons with solid icons, such as here, or here, or here.

10

I’ll give that a try

Thanks

11

I have that issue as well. I found that pan_zoom floorplan setting influences touch accuracy a lot. With pan_zoom turned on, the touch success ratio was well below 5%. With the setting turned off, I would say it’s about 70-90%, depending on icon size.

12

I did turn that off but what I also did was create a rectangular box under the lamp icon and used that to tie the lights to. Made a huge difference by touching the box versus trying to touch the exact spot on the lamp icon.

13

You can put all your elements in a group, name the group the entity_id. Then touching any element activates the touch.

You can make it even easier - add a transparent circle into the group that extends beyond the icons.

If you add a class attribute to the individual elements in the group, you can style them individually.

ie on/off light state on my floorplan looks like

39 PM
39 PM254×520 11.6 KB

1 Like
14

@oakbrad

Wow, those icons look great!
can you share a little more on how you did that?

15

my SVG and CSS are here if you want to take a look

You should be able to copy and paste the light group from the SVG into your own floorplan, rename the group to the appropriate light entity, and copy the relevant CSS to make it work. When on the filament ‘glows’ and when off the strike becomes visible.

If you look at the CSS you’ll see a more complicated version for my coffee sensor - like 5 states with different elements visible/invisible instead of 2.

16

I was looking at your config and noticed you have a blinking animation. I had tried and tried and tried to get this working yesterday with no success (admittedly a novice to css). My config of the css and floorplan yaml files are nearly identical to yours which makes me think it might have something to do with the svg icon you used. Was there anything special that needs to be done to that? I just added an svg icon to my inkscape floorplan svg and tied a binary sensor to it but darned if I could get it to blink. Any suggestions you might have?

17

I’m not an expert in CSS either especially the animations, but you might need to specify whether to blink the fill or the stroke, depending on your SVG icon

18

I did notice you were blinking the stroke and I was just doing the fill. Although I am still racking my brain on why it didn’t work. I’ll try the stroke this time and see if I get lucky. Between this and the weather icon config not confining itself to the rectangular box leaves me very perplexed.