Individual start / landing page for mainUI

Add-ons UIs
,
1

Hi!
i’m using a tabbed page on my phone, but everytime chrome/brave browser opens the link to the page (f.e. http://ohab:8080/page/mobileTabbed ) i land on the Overview page.
if i’m not totally mistaken on the overview page i can remove/hide the model tabs (coming from openhab2 i’m not using most of the model stuff) but i can’t add other tabs.
so everytime i open openhab3 on my phone first thing i have to do is open the side menu and switch to the right page.
strange enough: fully browser on my tabs opens the correct page on load (not Overview)…

is there any way to open an individual url directly on my phone? i remember that somebody had a similar question but i couldn’t find the thread… :neutral_face:

2

this one ?

3

If you want to launch openhab from home screen and want to load a custom page you need to do the following:
create the following folder:

ohab/etc/openhab/html/manifest

create new index.html file:

<!doctype html>
<html>
<head>
	<meta charset="UTF-8"/>
	<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: blob:; style-src 'self' 'unsafe-inline';"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"/>
	<meta name="theme-color" content="#f7f7f7"/>
	<meta name="format-detection" content="telephone=no"/>
	<meta name="msapplication-tap-highlight" content="no"/>
	<title>openHAB</title>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
	<link rel="apple-touch-icon" href="/res/icons/apple-touch-icon.png" crossorigin="use-credentials"/>
	<link rel="icon" href="/res/icons/favicon.svg" type="image/svg+xml" sizes="any" crossorigin="use-credentials"/>
	<link rel="icon" href="/res/icons/128x128.png" type="image/png" sizes="128x128" crossorigin="use-credentials"/>
	<link rel="manifest" href="/static/manifest/manifest.webmanifest" type="application/manifest+json" crossorigin="use-credentials"/>

	<meta name="mobile-web-app-capable" content="yes"/>
</head>
<body>
	<h1>Add to homescreen now</h1>
</body>
</html>

create webmanifest file:

{
  "name": "openHAB",
  "short_name": "openHAB",
  "description": "openHAB",
  "lang": "de-DE",
  "start_url": "/page/mobileTabbed",
  "id": "/page/Home",
  "display": "fullscreen",
  "background_color": "#ffffff",
  "theme_color": "#f7f7f7",
  "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"
    }
  ]
}

Launch index.html file in your iOS browser and add to home screen

1 Like
4

no, i waa looking for startpage and landing page. custom tabbed page wasn’t one of my keywords :slight_smile:

just a file called “webmanifest” without extension?

the newly created file, right?

thank you so much. at least now i know it can be done. :slight_smile:

5

you can choose any name. you need to add it to the index.html

image
image1280×256 28.1 KB

yes

1 Like
6

thank you! it works like a charm!