How to start with pages?

I just read every Tutorial a second time.

What I can say:

  1. I already have a complete semantic model.

When I want to control something I use the Equipment Tab. This is the best one.
I don’t have that much properties. I rarely use this Tab
The locations tab is just to much
The overview Page is the one I can’t handle. Can I just disable it?

You can edit the Overview page (when logged as an administrator, click on the orange pencil on the upper right angle of the overview page) and choose the tabs you do not want to appear (apparently the overview tab cannot be disabled in this way).

It reflects your model. If it’s too much, have a second look at your model. Not every Item needs to be nor should it be in your model. In my experience no more than 60% of your Items belong in the semantic model.

For end users, the Locations tab is the more intuitive tab to use because they just want to “turn on the lights in the kitchen”. It’s intuitive to look in the kitchen for the control to do that.

Unfortunately not, at least not yet. You can hide each of the other three.

You can just leave it empty. Nothing says that something has to go there.

There are tons of great widgets on the marketplace you can install and use.

“Can’t handle” really gives us zero insight into what specific parts of Pages you are struggling with. So ultimately we can only help with equally vague and high level responses that ultimately tell you to go look at the docs. Without direction, there is nothing we can write here that is going to be better, and likely will be significantly worse than what’s in the docs already.

2 Likes

I’ve tried everything read every documentation and a lot of exampes. I’ve never had such a big problem with anything about openhab. I even don’t know where to start. Pages is the worst thing ever came to openhab. It’s 100% unusable and completly confusing.

No, it is not and you can create really nice UIs with pages.
I did not read the complete old posts here, but if you can just describe what you want to achieve, we might be able to help you getting a positive experience.

Basic UI and Paper UI did their Thing in OH1 and OH2.
Main UI is not like those two not intuitive.
Sometimes less is more.

I just want to create a plan rooms->devices->Options.

Sorry, but you are comparing apples with pears.
BasicUI is still existing in openHAB 4.x and PaperUi was never meant as a daily usage control UI, but just for administration purpose.

Just try the following :

  • Add a new page (crate layout)
  • Give the page a meaningfull name
  • Enter Sidebar&Visibility and enable “Show on sidebar”
  • Press “Add Block”
  • Press “Add Row”
  • Press “Add Column”
  • Press the big plus symbol and select “Label card”
  • Press the little symbol above the new card ans select “Configure Widget”
  • Under Action select “Group Details”
  • Under “Group Popup Item” select the group of the Room you want to see
  • Enter the Room Name in the Label field.

You have created your first Page with a big "Button to show your Room like this

Easy, isn’t it :wink:

1 Like

If I could swipe from Main UI to Basic UI as the Main UI then I would do it without thinking about it. Paper UI control was a nice development from Basic UI even if it is not considered as a daily usage control UI.

I created a page in Main UI but I don’t find it.
It is only in the administration under Pages nowhere else.
Main UI and I will never get friends

That’s easy and I explained it in my last post :

After Saving, you will find it in the menu on the left

image

You can, in openHAB apps, you can select BasicUI as default or your browser just open

http://YOUROPENHABIP:8080/basicui/app

or

https://YOUROPENHABIP:8443/basicui/app

Now it looks like this:
Screenshot 2024-01-22 085146

Yes, and when you click on the equipments, you get the controls.

1 Like

And how to make it look better than this?
Screenshot 2024-01-22 093710

Depends on how you want it to look like :wink:
You can e.g. see our project „semanticHomeMenu“, which gives you s unique UI with near to zero config.
And you will find a lot of great examples how users created their overview page…
But first of all, you should have a clear imagination, what you want.

1 Like

If you use the Semantic Model (Semantic Model | openHAB) a page for rooms (i.e. locations), equipment (i.e. device types), and properties (i.e. temperatures and the like) builds itself in MainUI. You need do nothing at all. Are you avoiding the semantic model or finding something about the autogenerated Overview tabs insufficient?

The Overview page is pretty much just the logical extension of what PaperUI used to do. But it provides more capability and customization options than PaperUI used to do. But it basically serves the same purpose, only better.

  • it can show any Item, not just Items linked to Channels
  • it can present the Items in up to three different ways: Locations, Equipment, Properties
  • what is shown and how it is shown can be customized through configuration.

I don’t know about swiping. But BasicUI and sitemaps are still there like they always were. And you can access BasicUI from the icon in the top right corner. I don’t know the iOS app but I know that by default the Android app works with sitemaps, not MainUI. You actually have to go out of your way to use MainUI with the app.

It’s perfectly reasonable and acceptable to use MainUI for administration and Sitemaps for everything else.

You have lots of options.

That looks like a List Card Widget. By default, MainUI will choose a default widget to represent an Item based on the Item type and the semantic tags. The default icon (where shown) is often taken from the Item’s “Category” filed.

If these defaults are not sufficient or desired, you can define a “default list item widget” at the Item level. Navigate to the Item and click “add metadata” and choose default list Item widget". You can define a custom widget here.

If you have more than one of this type of Item, you can go to Developer Tools → UI Widgets and define a new widget there and instead of defining a new widget for each Item, just apply the widget to the Items where you want to use it.

Keep in mind that a single widget can represent more than one Item. For example:

This one widget represents both the state of the deadbolt of the front door and the openclose sensor of the front door. Clicking on the lock icon causes the deadbolt to open/close. The Icons and colors are chosen based on the states of the Items.

If you want to see how this widget works, see Door and Lock Combo. As that is a marketplace widget, you can install this widget from Add-on store → UI →
Widgets for MainUI. Even if it’s mostly what you want, you can install and modify what’s there until it’s exactly what you want.

For a simpler example, that just adjusts the icon based on the state of the Item see Temperature °F.

Be sure to look at the marketplace as there are lots of great widgets available, including the semanticHomeMenu.

Further details can be found at Pages - Item Widgets | openHAB and Pages - Custom Widgets | openHAB.

1 Like

No, it was my example from above with a label card and group popup :wink:

1 Like

I’m impressed by the design: GitHub - BangerTech/openHAB3WebUI: One of my favorite WebUI for openHAB3
But I think I’m not far enough into pages to put my items into this.

When you add a widget to a page, you have a nice form to fill in the widget properties. All you do is fill in the properties. You get the same form when you apply a custom widget to an Item in the “default list item widget”. For example:

The door widget above defines a two properties, the control item and the sensor item. This is what the “default list item widget” form looks like:

Easy peasy.

Those widgets would work the same. Each defines one or more properties. When you add it to a Page you have the opportunity to set the properties and that’s how you connect your Items to the widget.

As for the pages, you’d probably need to import the widgets first under Developer Tools → Custom Widgets and pasting the YAML from the Github page first. None of these appear to be on the marketplace. Then you’d create each page and paste the YAML for the new pages to the “code” tab for the page.

But I recommend starting smaller first. Create a simple custom widget of your own and apply it. It can be as simple as something that changes the color of an icon. Then everything in that repo will make more sense.

2 Likes

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…

E.g.
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.

2 Likes