Indigo Domotics

Well first of all, I am a noob when it comes to webdesign.
So forgive me if there are any stupid things in that question.

What I am trying to do is to implement a security keypad on the controlpage. I am using the EPS Control Page Keypad plugin.
I have designed a keypad and connected it to the plugin. Everything works but the performance of the keypas really sucks....

What is most problematic is that the iPad / iPhone zooms instead of entering 2 identical digits if you are not doing it in super slow motion.
So I am trying to disable the zoom function.
Searching the web I found this meta tag.

Code: Select all

<meta name="viewport" content="width=device-width,user-scalable=no" />


So I wanted to try it out but how can I embed that tag into my keypad control page?
Any ideas?
Thanks
Wilhelm

It can't be done per page, but you might be able to hack it into the HTML template for all control pages (though you'd have to experiment yourself, no idea if it'll work). The templates are located here:

Code: Select all

/Library/Application Support/Perceptive Automation/Indigo 7/IndigoWebServer/templates

and I think the one you'll want to edit is controlpage.html (though I could also be wrong there). Note that anything you change in that directory will be overwritten the next time you install an update.

Thanks, I wil experiment with that.

Note too, that only will work if you are viewing the Control Page from a browser (Safari). If you are using Indigo Touch then none of the HTML templates are used.

Thanks matt,

that was my intention.
Indigo Touch doesn't zoom anyway.

The meta tag doesn't seem to work though. Is there any special palce I should put it?
I placed it in the header like this, but it it seems to be ignored.

Code: Select all

<title>Indigo Home Control Server : Security Keypad</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


Don't add it to the top. Edit line 12. Or maybe line 20. (just do both)

Note also you have to stop and restart the server because the templates are cached at runtime.

It simply doesn't work.
I can see that the meta tag is delivered in the source code, but it simply doesn't stop safari from zooming.

I give up for now,
It seems from iOS 10 on Safari ignore the meta tag.
Apple simply know what's best for the user....

Seems I cannot let it go...

I found this :

I've been able to fix this using the touch-action css property on individual elements. Try setting touch-action: manipulation; on elements that are commonly clicked on, like links or buttons.

Can anyone tell me if this is usable?

As I stated earlier the Indigo Touch app doesn't have the zooming problem on buttons, so I suppose something differs there.

Umtauscher wrote:

As I stated earlier the Indigo Touch app doesn't have the zooming problem on buttons, so I suppose something differs there.

Indigo Touch doesn't use a web view and it's not rendering HTML. It's completely different.

Just for anyone who is interested, I put this line in the iPhone section of the control template.

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no">


This works on the iPhone when using mobile Safari.

This is a global setting and restricts zoom on all control pages.

I would really have an option to set such a meta tag on individual pages.
Cheers
Wilhelm