Stand alone web app html code

I would like to be able to see the control pages on a full screen web app interface. On IOS it would be in Safari, and on Android it would be in Google Chrome. The idea is to have a html page with attributes making the web browser go into stand alone mode, without showing the title bar etc, only the actual control page on the entire screen. Navigation would only be done with links in each control page. I have been experimenting with "navigator.standalone" in html, but since my coding skills are very limited, I can't get it to work properly. I would browse to a "parent" html page, and then add it to my homepage as a stand alone web app. My plan is to have one i-frame in the parent html page, and the i-frame should contain a control page. It would be cool to have one i-frame/control page configured for landscape orientation and another for portrait orientation, switching automatically between them on rotation.

Anyone with the knowledge about this who could give a hand?

Thanks!
Peter

Hi Peter,

Looks like the following link is what you need.

https://developer.apple.com/library/mac ... tions.html

You refer to the navigator.standalone value - I think that is readonly, set by safari when you use the link meta tag in that post.

You could use a parent page and iframe, assuming Safari works with iframes, but it would also be nice if Matt/Jay added those lines to the native pages.

That is the page I have been using as a reference. I have got some of it to work, but I can't get links in the control page to open in the same (parent i-frame, since the link is generated by the control page, hence I can't add the parent attribute to the href.

Yes, if Matt of Jay could add the option to run control pages in browser stand alone mode that would be great, and probably the easiest solution.

EDIT: I also don't have a solution to show different control pages depending on the screen orientation.

Ah, sorry.

Do good old fashioned regular frames still work nowadays? If so, that should get around your parent href issue.

JavaScript used to be able to detect the screen dimensions, but I've not used it recently, or tested on a rotatable device.

If it works ( something like window.width?) you can use JavaScript to write the frame HTML with href of the relevant orientated control page.

Oh, don't apologize, I appreciate any help I can get

I-frames as technique seams to be working.
Well, now I feel that my knowledge about this is not enough

The idea is to have a html page with attributes making the web browser go into stand alone mode, without showing the title bar etc, only the actual control page on the entire screen.

You mention Android briefly here, so I might point out that the HousePad client is able to do this if you really have the need on Android. You can setup a home screen widget to launch straight to your desired control page full-screen if that is the desire.

That is the page I have been using as a reference. I have got some of it to work, but I can't get links in the control page to open in the same (parent i-frame, since the link is generated by the control page, hence I can't add the parent attribute to the href.

Technically you could probably adjust this yourself if you are willing to modify the Indigo templates. Alternatively, you may be able to modify it after the page loads via JavaScript, but to do so you would probably need have to load the initial page (with the frames) from the Indigo server or you would potentially get cross-site scripting warnings/protections preventing you.

JavaScript used to be able to detect the screen dimensions, but I've not used it recently, or tested on a rotatable device.

You can hook into the window resize event and determine your orientation based upon what you want (e.g. check to see if the width is greater than the height, thus concluding you are in landscape mode).

EDIT: I also don't have a solution to show different control pages depending on the screen orientation.

That's been requested and on the wish list a while for Indigo Touch, so we know they are aware of that request at least.

Adam

Hi Adam,

I have tried HousePad which I like very much, great job! Haven't gone into depth with it yet, but I will for sure. I would have liked to have a solution for both IOS and Android, that is why I am trying to find a solution with stand alone web app working in both Safari and Chrome. I will look more into HousePad which I am sure will do a great job for my Android devices. How does it deal with screen orientation? Will you eventually port it to IOS too?

Thanks!
Peter

I would have liked to have a solution for both IOS and Android, that is why I am trying to find a solution with stand alone web app working in both Safari and Chrome

I understand your desire to keep things the same, but I mention that because staying with a web interface could limit on features going forward; for instance, if Indigo Touch and/or HousePad were to enable directly embedding sliders you might lose this on the web side (just one example, but one I noted because it was a recent request in another thread). Also, some features on various OSes require an app, simply can't be done completely within HTML even when configured as a web app.

I will look more into HousePad which I am sure will do a great job for my Android devices. How does it deal with screen orientation?

I won't fault anyone for wanting to do it their own way, just thought I would mention it; if you do try it again, you might want to take a look at the HousePad CP Widget which basically just puts a control page icon on your home screen, directly launching to that control page.

In terms of orientation change, would LOVE to include something, but was kind of hoping that the new Indigo Touch 2.0 (or 2.something) would include some features to support this that I could piggy-back on. We will have to wait for that to come out to determine their final feature set and if this is addressed. If not, I may try to come up with a temporary solution to accommodate (something simple like appending -Landscape or -Portrait to the name. Downside is that right now the orientation change does nothing so it is quick, defining a separate page/layout would require going back to the server to reload.

Will you eventually port it to IOS too?

I've been asked that a couple of times, actually... but will have to see. I think that Matt & Jay are happy to control their own iOS Indigo application and there is a lot of overlap in functionality with HousePad, so not really so sure it would make sense to port it. Never say never, but no current plans or consideration at this point.

Adam

[jay (support)]

Using the Indigo Touch URLs with the hideNavBar param will hide the nav bar when opening a control page. The iOS status bar is still showing but nothing else except the control page.

That is not too bad, a little unstable showing just a white page sometimes, but I guess it will be solved in 2.x.
Can I get that as a shortcut on the IOS desktop so it acts like a stand alone app? The Safari send shortcut to desktop doesn't work since transferred to Touch immediately.

Peter

Good day!

Is it totally impossible to hide the iOs status bar at an iPad with Indigo control pages?
No trick?
(when I added this text at the end of the Control Page URL : hideNavBar=1
I got an "could not find control page error")

Kind regards,

John

Good day!

Is it totally impossible to hide the iOs status bar at an iPad with Indigo control pages?
No trick?
(when I added this text at the end of the Control Page URL : hideNavBar=1
I got an "could not find control page error")

Kind regards,

John

It needs to be in a format like

Code: Select all

 indigo://controlpage/Office?action=showPage&hideNavBar=1

in Indigo Touch 2 it works perfectly. It now also hides the iOS status bar giving it the full use of the screen!

Thanks for the fast reply.

When I place this URL xxxxxxxxxx:xxxx//controlpage?name=control%20page%20II&hideNavBar=1
in Safari at the iPad, I got a white screen with: "undefined page request"
(normally without the text" &hideNavBar=1" this URL works ok)

When I replaced the IP address in Safari with indigo://controlpage?name=control%20pag ... deNavBar=1
Safari asked if I want to open this page in Indigo Touch 2, then I got a totally black screen in Indigo Touch 2.

When I first open Indigo Touch 2 and then go tot the control page list and select the control page above, the status bar is still there (in black)
and the heuristic variables that normally goes over the total iPad screen every 60 seconds, are now a quarter from the normal size.

So, the question is; what is the solution?

Thanks for the help and kind regards,

John

Why is this problem only with iOs 8.3 ?

With an iPad with iOs 7.1.2 the status bar is disappeared when a Safari page (bookmark) is placed at the home screen.

[matt (support)]

If you get a totally black screen then that means Indigo Touch couldn't find a Control Page with that name. It needs to show an error alert or something, but for now you get a blank page.

So if you remove "&hideNavBar=1" from the URL it works? Are you sure that is the only difference between the 2 URLs? I'm unable to reproduce the problem here.