Force habpanel landscape

I use habpanel for my phone UI but I don’t like how bad it renders in portrait mode if I designed the UI for landscape mode, so I would like to force it to landscape if possible. I think it is possible in Android, but I’m not sure if the page has to request is somehow and if habpanel has that support…

Would it otherwise be possible to create my own web app pointing to the habpanel url and force it to landscape in the manifest? But then I don’t know if I can fix it for my gfs iPhone as well…

https://developer.chrome.com/multidevice/android/installtohomescreen

Yeah, this hack works.
Create conf/html/manifest.html with this content:

<html>
<head>
<link rel="manifest" href="habpanel-manifest.json" />
</head>
<body>
<h1>Add to homescreen now</h1>
</body>
</html>

and conf/html/habpanel-manifest.json with this content:

{
  "name": "HABPanel - User Interface for openHAB",
  "short_name": "HABPanel",
  "icons": [
    {
      "src": "/habpanel/assets/manifest/logo36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/habpanel/assets/manifest/logo48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/habpanel/assets/manifest/logo72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/habpanel/assets/manifest/logo96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/habpanel/assets/manifest/logo144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/habpanel/assets/manifest/logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "display": "fullscreen",
  "orientation": "landscape",
  "start_url": "/habpanel/index.html",
  "background_color": "black"
}

Next navigate to http://openhab:8080/static/manifest.html with your phone and add to the homescreen with the Chrome menu.

(btw, this also enables you to change the icon if you wish!)

1 Like

Nice solution, thanks a lot! :slight_smile:

For some reason all I see is a white page showing that header “Add to homescreen now”…