A simple example of an Overview Page

Add-ons UIs
#15

I believe you could. You could start first by adding the below lines to the services/runtime.cfg file located in your configuration folder. Replace the “IPaddress” phrase with the actual IP address of your openhab instance.

org.openhab.core.ui.tiles:openhabiandocs-link-name=openHABian Help
org.openhab.core.ui.tiles:openhabiandocs-link-url=https://www.openhab.org/docs/installation/openhabian.html
org.openhab.core.ui.tiles:frontail-link-name=openHAB Log Viewer
org.openhab.core.ui.tiles:frontail-link-url=http://IPaddress:9001

You may need to reboot your openhab instance to see if it took. If not, then you’ll need to check if /var/lib/openhab/config/org/openhab/core/ui/tiles.config exists and if so, then modify it as well.

#16

Rich, this is super helpful. Thanks for posting this.

#17

@rlkoshak What size are your picture for the background (ie the one with the house and the water)?

I took some pictures here but they are stretched, pictulated and off center. Tried various options to move them but they just move within the expended Location pages… a different size might be helpful here!

#18

I’ve no idea. What ever size it was when I downloaded it from some random site on the net. That’s a picture of Frank Lloyd Wright’s Falling Water house. It looks like it’s 720 x 515.

#19

Ok thanks. I’ll start with something similar then and go from there :wink:

#21

Hi. thanks for your Document!
I migrated my system from OH2 to OH3. Lots of things are clear and work straight forward but one thing i absolutely cant solve is: My Overview screen is empty (When you click the Openhab Logo on the top left.) and i have not found a way to populate it. Locations equipment and all the rest are as expected.
I am probably missing something very obvious - can someone point me in the right direction?

#22

The Overview tab is one you need to populate and create. Click the pencil icon in the upper right and start adding widgets to make of it what you will. Layout Pages | openHAB will be your primary reference. Pages - Custom Widgets | openHAB discusses it in the Getting Started Tutorial.

#23

That was quick!
Got it solved, thanks: My problem was that I had a layout page named Overview but that was not the page with the id = Overview - the latter was empty. No idea how that happened though.
Once i had discovered the select button on the top right I could delete the useless pages and got it to work.

By the way: If I click the pencil on the title screen I get to the “page configuration” with the possibility to configure the properties of the other tabs on the screen. No way of adding widgets there.
I have to edit the page with “id=Overview” by selecting it via the pages button to get there.

grafik

#24

I’ve started with the main ui since a couple of weeks and have a problem with the overview page. I created a custom widget with 2 buttons to choose a room (living and office). according to the chosen button it saves a variable with this name and occupies the temperature value with the item from this room. Pretty neat and works great. But I need a default value for my variable when the pages loads. Not a problem for a ‘normal’ page:

config:
  defineVars:
    room: Living

But when i add this to the code of the overview page. It just doesn’t load the value.

As of my knowing there is no posibility to default load an other page then overview page at start. So or this idea doesn’t work, or i must be missing something.

Hope someone has an anwser for this problem.

#25

You cannot load any other page except the Overview page when first bringing up MainUI.

However, in your widget you could test to see if the variable is undefined in an expression and do a default behavior in that case.

#26

Ok, didn’t know of that posibility! Sounds like a better approache the way you explain it. Not sure how to do it, but i will search for it and post the sollution here!

#27

Can’t get it to work as I want to. Not sure if i understand what you meant. The way I read your reply was check per ‘widget-item’ if the variable state = undefined. But that seems like a lot of extra code and extremely long lines.

text: '=(vars.room == undefined) ? "Heating - Living" : "Heating - " + vars.room'

in the above case, it isn’t much of a problem, but the widget contains a lot of items referring to a room so for example this line would be verry long:

text: =items[vars.room + "_temperature"].displayState + " (" + items[vars.room + "_temp_setpoint"].displayState + ")"

These two buttons define the room:

        default:
          - component: oh-button
            config:
              style:
                width: 150px
                position: absolute
                top: -10px
                right: 50px
                box-shadow: 0px 0px 0px
              text: Living
              round: true
              outline: true
              color: purple
              fill: "=vars.room == 'Living' ? true : false"
              action: variable
              actionVariable: room
              actionVariableValue: Living
          - component: oh-button
            config:
              style:
                width: 150px
                position: absolute
                top: 30px
                right: 50px
                box-shadow: 0px 0px 0px
              text: Office
              round: true
              outline: true
              fill: "=vars.ruimte == 'Office' ? true : false"
              color: purple
              action: variable
              actionVariable: room
              actionVariableValue: Office

If I have to add everytime the default room in every single line, it feels a bit complex. Maybe it’s the only way, but maybe there is a way to test the var on undefined status and fill it with a default value but i can’t think of a sollution and can’t find any sollution on the forum here.

#28

Another possibility might be to create two versions of the widget. Then use the visibility property to choose which one to show. I don’t know if that will work. But using expressions does indeed result in long lines.

1 Like
#29

Found the best sollution for me :slight_smile: You where right at first @rlkoshak, the best way is test within the expression. And the line isn’t that long / unreadable. One of the lines looks like this now and i think it’s pretty nice:

text: '=(vars.room == undefined) ? items["Living_temp_setpoint"].displayState : items[vars.room + "_temp_setpoint"].displayState'

not sure if i should post this on this forum, but wanted to show what was possible after the help i got :slight_smile:

verwarming
verwarming390×571 96 KB

Nice detail, the flame goes on / off according to the status of our central heating unit.

2 Likes
#30

Another question about the overview page. When I open the overview page, it takes about 4 seconds before i see my widget (i only have the above at the moment). When I add widgets to another page, it load instantly. Not sure it this is normal behaviour.

#31

Much of the Overview page is build automatically which requires the loading and parsing of all the Items. I could imagine that might take more time than a custom page. Remember, the Overview page consists of all four tabs: Overview, Locations, Equipment, and Properties.

1 Like
#32

restarted openhab today and the overview page loaded almost instantly. My openhab slows down after editing a lot of rules / main ui / items / things / etc. not sure why that is, but it’s also affecting designing in main ui and didn’t realise that.

Tip for others, when you experience this behaviour, restart openhab :slight_smile:

#33

How can I hide/get rid of the HABot “Hi, what can I help you with?” input field at the top of the Overview page (without uninstalling HABbot)? I have spent an hour searching online/through the documentation and cannot find any way to disable/remove this field that is taking up a lot of space at the top of my Overview page.

On the “Overview” layout/editing page this input field does not appear as a building block/row at the top of the page that I am able to remove.

On the “Edit Home Page” settings page I have no options checked (Administrators, Users) for the “Allow chat input box to” setting yet it is still appearing. It should not show if I haven’t granted/set permission for any users (myself included as the Admin) to see it. I cannot find any setting on this page to hide/remove the field. The “Code” view does not have any code pertaining to the HABot input box.

With openHAB 2.x I could edit a CSS file somewhere to manually modify page content. Is this something I am able to do for openHAB 3.X? Using my browser’s Developer Tools/html inspector I see that the CSS coding for this page is being served by my openHAB server from a style sheet located at http://localhost:8080/css/app.css however using a comprehensive file searching tool on my server/computer does not locate this CSS page anywhere within the bowels of openHAB. I also found this OH Community forum post where another user was also trying to locate this page and was told to try looking through the github repo and so I also searched there and only found where app.css is referenced one time in some JavaScript file in the actual code but not the actual document itself and also found a closed Issue where someone had also suggested they please add a “HABPanel like layouting page” but it doesn’t look like they ever did.

Anyway, I tried doing my homework to find the answer on my own before asking here but have not found the answer. I would really appreciate if you might be able to offer me some guidance here. Thank you!

#34

There is no setting for this that I am aware of.

You can add css styling to pages with the stylesheet property in the page yaml.

1 Like
#35

You can select Administrators as the only role which will be allowed the HABot text box and the “regular” users that are either not logged in, or have a user role only, will not be presented with the HABot text box.
As a best practice it’s always advisable to log out of your admin account whenever you don’t need the admin access anymore, as it will stop sending access tokens with admin access over a potentially unsecured line (if you don’t use HTTPS even in your LAN).

If you want to hide the chat box on a per-device basis, you can go to “Help & About” and find a few options that pertain to the current device only, including “Hide chat box input on home page” (under Miscellaneous).
This option is locally stored.

Otherwise if you want to hide it from everybody, you can still do it with a workaround:
When editing the home page select only “Administrators” from the “Allow chat input box to” parameter. Then switch to the Code view and replace:

  allowChatInputTo:
    - role:administrator

with:

  allowChatInputTo:
    - role:nobody

Since that role doesn’t exist it will effectively hide the chat box to everyone.

2 Likes