Fixed grid layout - How to get rid of top bar and force "fullscreen"?

[Dogmaphobic (Gus Grubba)]

The goal is to have a the UI on a wall mounted tablet (running Ubuntu 20.04). I can have FireFox launched in kiosk mode and it properly takes the “full screen”. However, the page still shows the top bar (with the hamburger button and page label) as well as the icon for full screen mode, which works when clicked.

How can I launch the page directly in full screen mode with no icons to toggle full screen? I could not find anything in the documentation making references to this, which I assume it is something very basic.

While at it, during development, I’m using dark mode, which is what I want. However, when rendered on the Ubuntu VM, it comes up in light mode. How to programmatically force dark mode?

(Don’t mind the frame. This is a VM with the same size as the tablet as it is a lot easier to develop with it rather than going back and forth to the tablet)

/usr/bin/firefox --kiosk http://[server]:8080/page/foo

[JustinG]

@Dogmaphobic

How to programmatically force dark mode?

Dark vs Light mode is not set programmatically, it is set on a per browser basis. Just click on the help and about link in the side panel and you can select always light mode, always dark mode, or auto changing.

@Dogmaphobic

How can I launch the page directly in full screen mode with no icons to toggle full screen?

If you are using the fixed grid layout then all you need to do is click on the grid button in the upper right hand corner of the page editor to access the fixed grid options. In those options there’s a choice to hide the navigation bar and get a “full screen” view.

[Dogmaphobic (Gus Grubba)]

@JustinG

Dark vs Light mode is not set programmatically, it is set on a per browser basis. Just click on the help and about link in the side panel and you can select always light mode, always dark mode, or auto changing.

Perfect! So all I needed was to navigate manually once, switch to dark mode and it saved. That did it.

@JustinG

If you are using the fixed grid layout then all you need to do is click on the grid button in the upper right hand corner of the page editor to access the fixed grid options. In those options there’s a choice to hide the navigation bar and get a “full screen” view.

Sorry, my bad in using wrong nomenclature. I’m using “Fixed Canvas” within “Fixed Layout”. I now did notice there is indeed a button to show/not show the full screen button when in Fixed Grid but that same is not true for Fixed Canvas. Given my screens are static and all the same, I picked Fixed Canvas so I could precisely place and size items. Is there a way to hide the icon when using Fixed Canvas?

Thanks!

[Dogmaphobic (Gus Grubba)]

The issue I run when trying Fixed Grid is that it seems I have no control over a widget height. Even though there is a setting to define its height, it won’t let me make it smaller than some value, which is too tall. Here is an example where I’m showing a small video and the widget is way taller than the video.

Edit: The screen grab still shows the “Navigation Bar” but I’ve since found how to hide it as well.

[JustinG]

@Dogmaphobic

Is there a way to hide the icon when using Fixed Canvas?

I’m not aware of one. In addition, as the full screen link is, I believe, a javascript function, I don’t think there’s anyway to load the page directly to it.

[Dogmaphobic (Gus Grubba)]

Ugh… I’ve been a software engineer for 30 years. Web development is certainly not something I’ve ever dealt with. In looking at the generated code for the page above, I see the main generated html page is quite short, which in turn loads a 75,000-line JavaScript file. Good grief. I’ve written entire complex applications in less lines than that.

In the code, there are obvious references to the notion of toggling that on/off but I have no desire to spend this much time digging through code I don’t (or want to) understand.

<...>
 )), Object(a.b)("showFullscreenIcon", "Show Fullscreen Icon", "Show a fullscreen icon on the top right corner (default false)")])
<...>

Thanks! I will try to work around it instead. I have yet to fully grasp that YAML stuff. I’m certain the way is to create my own widgets to avoid the limitations of the canned ones. And here I am, running away from HA because I had found something using “normal” languages, even though Java is something I’ve always avoided like the plague. But… Better a readable plague than an unreadable YAML

[Dogmaphobic (Gus Grubba)]

@JustinG

My reference hierarchy is as follows: My first go-to is the autocomplete in the editor itself to see what’s available for a given component. If it’s not immediately clear what a particular property does then I’ll hop over to the the f7 vue docs to get the details. If it’s an oh- component, then it also helps sometimes to have a look at the autogenerated oh component docs but more often, I’ll check out the vue files on the webUI repository itself.

This is from an older thread and it is gold (for those bumping into the same)

[Dogmaphobic (Gus Grubba)]

Found a work around by extrapolating a solution to a different problem given by @JustinG

The source for the FullScreen button is here (the lines might change if the file changes):

While looking at, basically all posts by @JustinG, I bumped into a solution to remove the border of a fixed grid and added code to hide the fullscreen button:

config:
  label:        Foo
  fixedType:    canvas
  gridEnable:   true
  layoutType:   fixed
  scale:        false
  screenHeight: 1080
  screenWidth:  1920
  hideNavbar:   true
  hideSidebarIcon: true
  stylesheet: >
    .oh-canvas-layout-container div img {
      visibility: hidden;
    }
    .fullscreen-icon {
      visibility: hidden;
    }

The above does both. Hides the white border and the full screen button.