How to start with pages?

Two things I want the most are those little Icons under e.g. my living room where I see current temperature, humidity, light on or off (1 group of 5 and 2 plugged into power outlet) and power outlets on (number next to a power outlet Icon)
And I want to have a custom popup with temperature control (set manual, return to idle, disable) and a light control (on/off, brightness, temperature, color - where available)
Some kind of graph would also be nice.

Have you ever checked our community marketplace for UI widgets ?

You will find plenty nice widgets there and I am sure, one that solves your wish…

Room Card with status overview - Add-on Marketplace / UI Widgets - openHAB Community

You get those for free on the Locations tab if you configure your Items into the Semantic Model.

I did some customization of the background images here but the icons just “happened” based on how I tagged my Items in the semantic model. I didn’t “create” these cards.

Opening a card shows the Equipment and Points at that location.

There might be widgets on the marketplace that fit this requirement as well.

Depending on what you are after, as @hmerk points out there are lots of widgets you can install and use on the marketplace or, at least look at and use as inspiration for your own widgets.

By default clicking on any Number Item in the Locations/Equipment/Properties tab of the Overview page will bring up the chart of that clicked on Item.

The default card widget for most number Items (card widgets are what are used when the Item is put on a page on it’s own instead as a row in a list card) will show a sparkline chart of it’s most recent states.

On the Properties tab of the Overview page, each Property has an “Analyze all” link at the bottom which will chart all the Items in that one card on the same chart.

The most important takeaway from the above is that all of the above was built automatically by MainUI based on the semantic model. I put in a little more work on the appearance but that was mostly just configuration stuff like background images, defining “default list item widgets” on the Items, etc.

In addition, any widget you create/add to a page has an “action” property. The “action” defines what happens when you click on the widget. The default “action” is “analyze” which will pop up a chart of that Item.

In BasicUI you have to manually define everything through a sitemap (there are some rumblings about making sitemaps semantic model aware, stay tuned).

In HABPanel you have to manually define everything through the browser.

In MainUI, you can get a pretty good UI built for you based on how you tag your Items in the semantic model. Right now, that’s the main reason the semantic model exists, though it can be useful in other places like in rules as well.

Earlier you were singing the praises of PaperUI’s Control tab. Well the MainUI is just an enhanced version of what that tab was supposed to be.

Two of the three things you asked for are there by default when using the semantic model.