Getting around the limitation of sitemaps using Webview

yfaway · April 6, 2025, 7:59pm

All,

Sitemap is no longer the primary UI for OpenHab. That said, for many of us that have system mainly automated and doesn’t require much user interaction, it is good enough. Sitemap, however, has several major limitations. Two of them are the inability to dynamically change a label and to display complex composite value. Of course, to be able to do this requires a rule to set the corresponding values. How the rules should be done is out of the scope of this post. But I’d like to show how we can generate a static html that looks similar to normal sitemap content.

Here is an sample image of my system, all from a static file:

What is not shown is how the labels such as ‘Evening’, ‘Night’, … would change as the time moves forward.

The step to do this is:

Create a rule that periodically generate the html content, and place it in /etc/openhab/html. Sample html output below.
In the sitemap file, add a Webview.
Voila - this works on both the browser and the Android app.

Sitemap content:

Frame label="Weather Forecast" {
  Webview url="/static/weather-forecast.html" height=14
}

Sample generated HTML content:

<!doctype html>
<html>
  <head>
    <!-- need this to get Android app to refresh the content. -->
    <meta http-equiv="refresh" CONTENT="10">

    <link rel="stylesheet" type="text/css" href="../basicui/mdl/material.min.css" />
    <link rel="stylesheet" type="text/css" href="../basicui/material-icons.css" />
    <link rel="stylesheet" type="text/css" href="../basicui/framework7-icons.css" />
    <link rel="stylesheet" type="text/css" href="../basicui/smarthome.css?v=202501122027" />

    <script src="../basicui/smarthome.js?v=202501122027"></script>
    <script src="../basicui/mdl/material.min.js"></script>
  </head>

  <body class="mdl-color-text--grey-700">
    <div class="mdl-layout mdl-js-layout">
      <div class="mdl-layout__header mdl-layout__header--scroll navigation navigation-home">
        <div class="mdl-layout__header-row">
          <div class="mdl-layout__header-button navigation__button-back"></div>
          <div class="mdl-layout__header-button navigation__button-settings"></div>
          <div class="mdl-layout-spacer"></div>
        </div>
      </div>

      <main class="mdl-layout__content">
        <div class="page-content mdl-grid">
          <div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col">

            <div class="mdl-form__row mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet ">
                <span class="mdl-form__label">Evening</span>
                <div class="mdl-form__control mdl-form__text">
            <span class="mdl-form__icon">
                <img src="../icon/sun_clouds?format=svg" />
            </span>
            5 &deg;C</div>
            </div>

            <div class="mdl-form__row mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet ">
                <span class="mdl-form__label">Night</span>
                <div class="mdl-form__control mdl-form__text">
            <span class="mdl-form__icon">
                <img src="../icon/sun_clouds?format=svg" />
            </span>
            0 &deg;C</div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>

Here is the code that generated the image above (it is part of a framework so might not be straightforward).

github.com/yfaway/zone-apis

src/zone_api/core/actions/generate_weather_forecast_html.py

master

from typing import List

from zone_api import platform_encapsulator as pe
from zone_api.core.event_info import EventInfo
from zone_api.core.parameters import Parameters, ParameterConstraint, positive_number_validator
from zone_api.core.zone_event import ZoneEvent
from zone_api.core.action import action, Action


@action(events=[ZoneEvent.TIMER], devices=[], zone_name_pattern='.*Virtual.*')
class GenerateWeatherForecastHtml(Action):
    """
    Generate the weather forecast HTML page similar to what is on the Ecobee thermostat view, and save it in OpenHab's
    html folder. This will be displayed via a Webview. The content in the html folder is considered static; however, as
    this action generates a new file after an event, the content of the Webview will be refreshed automatically after
    a configured interval (specified in the generated html content).
    The motivation is to get around sitemap's limitations such as the inability to dynamically update a label.
    This action is triggered by a recurring timer.
    """
    @staticmethod

This file has been truncated. show original

I hope this might be helpful for others.

jimtng · April 6, 2025, 10:44pm

Nice! This has the advantage of freedom in layout too! Does the sitemap autorefresh when the html is updated, or does the user need to refresh the sitemap manually?

yfaway · April 7, 2025, 2:51am

The refresh is kind of in the middle of the two things you mentioned. The client doesn’t know when the page is updated as it is considered static content. However, the generated HTML content can contain a meta field, ‘refresh’, that instructs the client how many seconds to wait before loading the page again (you can see this in the sample HTML content of the original post). It is a bit crude but it works for both the browser and the android client.