Building Pages in the OH3 UI: documentation draft (3/3)

UPDATE: The most current information on this topic is now available at: User Interface Design Overview | openHAB. The following is kept for archival purposes only!

Layout Pages

Chart Pages

The persistence database rrd4j comes installed by default and we recommend configuring rrd4j as the default persistence and configured to save everything. There is a reason for this. In MainUI you will find scattered here and there a button labeled “Analyze”. Clicking on that will generate a chart of what ever you are looking at. Here is the chart I see when I click on “Analyze All” on a Humidity card in the “Properties” tab of the Overview Page which is built from the model. I show this because I didn’t set anything up to generate this chart. All I had to do was build the semantic model so my humidity sensors are properly tagged and make sure the humidity Items are saved to the default persistence.

You can change how the chart looks in controls and change the time period by clicking D in the upper right corner.

You can even put the chart of an Item behind the Item’s card so no matter where you look at it you can see a history of it’s state.

And there’s that “Analyze” button again.

I bring these up to point out that a lot of charting capability “just happens”. You don’t have to do much of anything to get them.

If you want to create a chart manually though, go to Settings -> Pages and click the + icon at the bottom right. Choose “Chart” from the list.

To create a simple line chart:

  1. give it a reasonable ID, Label, and set the visibility settings as desired.
  2. Change the Chart Type and Initial Period as desired.
  3. Add Grid
    a. Click the + in the upper left to add the Y-axis, click the newly created axis to configure it

    b. Click the + in the lower right to add the X axis, click the newly created axis to configure it
    c. Click “Add Time Series” and then click the menu to edit the series

    d. Choose the Item and other charting parameters for that time series.
    e. Repeat c-d for all the Items you want to chart.

    f. You can add additional components like tool tips, a legend, title, etc at the bottom.
    Repeat 3 to add additional charts to the page.

At any time you can toggle the live view in the bottom right corner or by typing ctrl-r.

Save the page as you go (ctrl-s, button at top right).

When done, depending on the settings you chose, you will see a new entry in the left menu for the new chart page.

Tabbed Pages

1 Like

@ysc, I started a page for this because I wrote a quick tutorial from someone on charting and didn’t want to lose it. I’m also adding links between all the pages so users can more easily find and navigate between the pages and this page was missing.

1 Like

Thanks a lot for the efforts to describe the new features.

One question why is the rrd4j is the recommandation? In my setup mapdb and influxdb are the persistence services and this works well for the last years. Unfortunately the Analyse feature works currently only with rrdj4.

It is not only rrd4j. I self run jdbc mariadb as persistence service because i need this also for other projects. The analyze feature runs out of the box. Just make sure that you define a default persistende service in the mainUI settings. This will be used for the analyzer

@rlkoshakmany thanks for the nice documentation!!!

Great! I’ll write the section on the layout pages since they’re somewhat more complex and there are a number of tips I wanted to share.

About the chart pages, it’s pretty nice already, a couple things:

  • you have a “Save” button on the Analyzer window which can save the current state in a chart page - since it’s a little easier to configure parameters with simplified controls section of the Analyzer, especially with agreggate series, so maybe you’d want to consider building the chart first with it, saving it as a page, then continue with the regular editor.
  • You can directly add a first series even if you haven’t added the axes, it will add some default ones automatically for you. (but it might not be what you wanted in some cases, then you’d have to add them yourself)
  • The same way the oh-* layout components usually pass their config to their Framework7 counterparts, so you have many additional undocumented options you can add in YAML, the config of the chart components is in many cases used as-is to build the final ECharts config, example here: Charts in OH3. Maybe worth mentioning, even though it’s probably outside the scope of a beginner tutorial.

@buschif4 You are right, in my actual version it is working with influx. So bye bye Grafana

I think you’ve answered your own question. Also, rrd4j comes installed by default. But it’s supposed to work with any persistence service (except MapDB of course) as long as you set it as the default. At least for the analyze feature. For the charting, you can tell it what persistence to use for each timeseries I think.

tl;dr, for the getting started tutorial and tutorials like this, I stick with what comes out of the box.

I did see that as an option but I wanted to explore doing it from scratch since I didn’t really have an “Analyze All” option that included all the Items I cared about or had extra Items I didn’t want in the chart.

Yes, I did notice that too. It would probably be better to go with that approach and then edit than to create them from scratch like I showed.

Funnily enough it was only after I linked all the pages that I remembered that you didn’t initially intend these Pages docs to be part of the beginner’s tutorial as they go into more depth. I’m not sure what to do about that right now.

Unfortunately for me, I know zilch about F-7, ECharts, etc. so anything outside of what’s presented in the forms is anything but intuitive to me. I’m not even sure where to begin to look for details in a lot of cases. So I won’t be able to go much beyond that.

I won’t have time today, but I’ll come back and add those details to the OP, unless someone comes along and does it for me [hint hint, it’s a wiki people, don’t be afraid to edit it…].

You know what, I forgot this wasn’t the beginner tutorial too :man_facepalming:

I think this page should be put before the previous reference ones (before 1/3) - for a first time users, trying to understand the logical flow, having to sink in the fractal quicksand of all possible widgets before seeing how things play out, makes things difficult.
That’s a bit general: before for instance, explaining the possible complexity of the model, a simple example with just a location defined would help to keep the flow running.
As a first time user, I find easier the approach of having an example set up and running from A to Z and then having a set of pages which allow to dig into what’s behind the simple choice, of, for instance, defining a kitchen.

@rlkoshak: you should also mention that adding other persistences (maybe unconfigured) breaks the magic of the auto chart.
In my case, I after adding a JDBC MySQL persistence (unconfigured, that is not pointing yet to a mysql db), all the charts were broken (showed no data) - which might make sense, but should be mentioned in your guide :slight_smile:
Not sure if this is a bug, if automatic population of chart is supported only by rrd4j, if rrd4j can coexist with other persistence, and many other questions. I just took a lot of time to understand why my charts did not work anymore (lot of deleting of broker things, items etc).

Except for mapdb it should work with any of them. If it didn’t that’s a big and needs to be fixed. The ui gets the data from what ever is configured as the default persistence. Mapdb only stores one value per item so that’s why it doesn’t work to generate charts.

thanks, I’ll probably file a bug report then.

BTW I didn’t get it clear from your example above - is there a way to have a chart automatically created/shown for a thing and showing the data for all the items linked to that Thing? I managed to get only to get the Analyze show an individual item chart - My overview page is still empty, even if I defined the thing and an equipment using that thing in a location?

Persistence and therefore charts is always and always just for Items, not Things.

If you build the model than the Overview Page gets populated automatically. For example, on the Properties page one will find a card for all the Items of a given type, as determined by the model. In this case I have a number of Point Items tagged with measurement and humidity. So there is a humidity card on the Properties tab of the Overview Page (look at the tabs at the bottom). Clicking on that shows all the humidity items and analyze all will create a chart.

I think you can also get to analyze all on Group Items from the Group Items config page.

Or you can create a custom chart by hand by creating a new chart page.

You probably won’t see analyze all on a Location or equipment card because it doesn’t often make sense to chart a bunch of stuff that all represents something different on the same chart.

1 Like

@ysc @rlkoshak
is it possible to add a Chartpage as a “card” in another page?
Or is there something like a “chart card” which can be used?

I have an overview page with a lot of items and I want to add a chart to this page. But at the moment I just saw chart pages or “normal” pages

Yes, that’s the oh-chart widget, which is the same as oh-chart-page but can be embedded. You cannot currently add it with the UI as it’s too complex to configure with the UI. You’ll have to use YAML, maybe design the indiividual charts as chart pages first and use the generated YAML in the Code tab as a basis for the configuration of the widget.

Search oh-chart on this forum for examples: Search results for 'oh-chart' - openHAB Community