Sitemap without Title Bar

Setup, Configuration and Use Items & Sitemaps
1

Usually a sitemap looks like this (screenshot taken from http://docs.openhab.org/configuration/sitemaps.html):

Is it possible to display a sitemap without the title bar and make it look like this:

I’d like to do that for both Classic UI and Basic UI. Maybe someone knows a hack to accomplish this.

2

You could load the <div class="page-content mdl-grid"> into an iframe in a custom HTML page that you load rather than the original sitemap.

3

You could also build yourself a small and easy greasemonkey skript to remove the titlebar inside your browser.

The simple answer to your question: No that’s not intended by the system but there are multiple ways how you can implement your idea.

4

Regarding greasemonkey, here you go: http://stackoverflow.com/questions/9169032/how-to-use-greasemonkey-to-selectively-remove-content-from-a-website

As always, regardless of whichever way you choose, please post the solutions for others to learn from :wink:

5

@ThomDietrich is right - all you need to do is to install either Greasemonkey or TamperMonkey extension for your Chrome/Firefox/Opera and create a new script like this:

// ==UserScript==
// @name         Basic UI remove header
// @version      0.1
// @description  Remove header from the Basic UI
// @author       Kuba Wolanin
// @match        http://openhabianpi:8080/basicui/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.getElementsByClassName('mdl-layout__header')[0].remove();
})();

Then save it and refresh any Basic UI page :slight_smile:

1 Like
6

Thanks for your answers.

I don’t quite understand the suggestion made by pahansen, could you please give an example?

I’ll also try the greasemonkey approach. Would that also work with the ClassicUI in the same way?

7

I’m not using the Classic UI but it’s really a matter of reconfiguring my script from the previous post.
Off the top of my head (and after looking up the DOM structure of webapp.net) :

// ==UserScript==
// @name         Classic UI remove header
// @version      0.1
// @description  Remove header from the Classic UI
// @author       Kuba Wolanin
// @match        http://openhabianpi:8080/classicui/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.getElementById('iHeader').remove();
})();
8

@Automark This is an approach for what I mentioned, but in reality the Greasemonkey option will probably be simplest, and allow menu navigation better so I wouldn’t do it this way.

9

Thanks for the suggestions and examples. Finally I got around to test this with the following setup:
Windows Firefox + Tampermonkey + openHAB 1.8.3 + ClassicUI

Edit
Now both header and footer can be removed as described below.
But still it doesn’t work for a local sitemap.

I installed Tampermonkey instead of Greasmonkey because to my understanding the latter wouldn’t run on Linux which is the target system for my openHAB installation.

The code had to be modified slightly:

// ==UserScript==
// @name         openHAB: Unclutter ClassicUI
// @namespace    openhab
// @version      0.1
// @description  Remove Header and Footer
// @author       automark
// @match        http://demo.webapp-net.com/*
// @match        *localhost* and similar doesn't work
// @match        *192.168.168.20* and similar doesn't work
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.getElementById("iHeader").remove();
        document.getElementsByClassName('iFooter')[0].remove();
})();

This script is successfully applied to the demo sitemap http://demo.webapp-net.com/.
[[I didn’t get the script to remove the header so for a test I chose to remove the footer instead.]]
Also I didn’t manage to apply this script to my local sitemap with thisURL: http://localhost:8080/openhab.app?sitemap=sensors.

The remaining questions are:

  • What do I need to put in the @match line to catch my local sitemap?
  • [Solved] How can I find and remove the header?
10

Hi,

what I did is the following - as on mobile and office devices I do not want/can install additional SW/plugins I’ve added a web view @ the end of my sitemap with the following code:


<head></head>
<body>
    <script type="text/javascript">
      window.parent.document.body.firstElementChild.firstElementChild.firstElementChild.style.display = "none";

      // Hide the last web element of the page ...
      _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
      _lastWebViewElement = _webViewElements[_webViewElements.length - 1];
      _lastWebViewElement.style.display = "none";
    </script>
</body>

with kind regards,
Patrik

Screenshot_20170517-015908.png720×1280 60.5 KB

1 Like