[solved] How to start individual page in fullscreen mode

Add-ons UIs
1

Did anybody succeed in starting a MainUI page from home screen on an iOS device?

The problem in detail is as follows:
I have chosen a custom page as the default page for my MainUI. If you try to add this page as a favorite to your home screen (i.e. creating a home screen button for that page) iOS does not let you do that.
If you try to add http://192.168.178.61:8080/#!/page/Home to your home screen, iOS is ALWAYS cutting the path and adds http://192.168.178.61:8080 to your homescreen.

The reason for this is a file called manifest.json which you can find here:
http://192.168.178.61:8080/manifest.json

Within that file you can see the property start_url which makes iOS behave like the way described above.

Does anybody know any further how to overcome this problem?
I was hoping that this file can be edited but have no idea if this file is created dynamically or where t find it.

EDIT: complete solution (thanks to Yannick)

create the following two files in openHAB-conf/html (file name can be changed):

  1. index.html
<html>
<head>
	<link rel="apple-touch-icon" href="/res/icons/apple-touch-icon.png" crossorigin="use-credentials">
	<link rel="icon" href="/res/icons/favicon.png" crossorigin="use-credentials">
	<link rel="manifest" type="application/manifest+json" href="manifest.json" />
</head>
<body>
	<h1>Add to homescreen now</h1>
</body>
</html>
  1. manifest.json
{
  "name": "openHAB",
  "short_name": "openHAB",
  "description": "openHAB",
  "lang": "en-US",
  "start_url": "/#!/page/Home/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#e64a19",
  "icons": [
    {
      "src": "/res/icons/128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/res/icons/144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/res/icons/152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/res/icons/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/res/icons/256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/res/icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

open http://ip.address.of.openhab:8080/static/index.html in your browser
now you can add a link to your individual page to your home screen

2

@ysc Hi Yannick. Sorry for bothering you. As I understand starting MainUI from home screen is the only way to switch into kiosk mode. However, iOS does not let you add a different home page to home screen from what is defined in manifest.json which is root directory.
Any chance to start an indivdual page in kiosk mode?

Many thanks for advice

3

Maybe try this old hack: Force habpanel landscape - #3 by ysc

i.e. you make a custom Web App Manifest (based on the real one, with your changes, not the HABPanel one from the post) along with a simple HTML page referencing it, you put all that in the html conf folder, navigate to your page under /static with the browser and add that to the home screen. It will in theory use your custom manifest. Whether it still works or not, I have no idea, but it’s worth a try.

1 Like
4

Genius! That hack still works. It just does not find the src-icon anymore. Playing around to find a way for that - unless you have an idea right away.

Thanks again very much

5

You need some specific meta/link tags to deal with icons on Apple devices.
Look in here: openhab-webui/index.html at master · ghys/openhab-webui · GitHub

Especially

  <link rel="apple-touch-icon" href="/res/icons/apple-touch-icon.png" crossorigin="use-credentials">
  <link rel="icon" href="/res/icons/favicon.png" crossorigin="use-credentials">

(possibly others and note the added / before “res”)

1 Like
6

precisely. those 2 lines did it. thank you very much! I make a summary in the first post so that other users can easily deploy this, too.