Using HABPanel

[papa]

    Trying HABPanel, Introduction

Having worked on other openHAB aspects earlier, I'm just lately trying HABPanel & will share my thoughts here.

As I see it, HABPanel is a means to display & control openHAB.  It's parallel to displaying controlling openHAB via sitemaps on BasicUI (or ClassicUI).

Like using sitemaps on BasicUI, HABPanel requires installing openHAB & also requires configuring openHAB via Things/Channels, items, & perhaps rules. The official documentation is helpful on installing & configuring.  My thread here also gives instructions & examples. One must also install HABPanel (via PaperUI/Addons/UI or less likely via openHAB's /conf/services/addons.cfg file).

The upper level of HABPanel is a Panel Configuration. The first default Panel Configuration starts with a name of HABPanel, which we can change. We can have more than one Panel Configuration (more later).

Inside each Panel Configuration, we create one or more dashboards.  Inside each dashboard, we create widgets which display data via Things/Channel, items, & perhaps rules. In the case of Switch widgets, we can also change states of items.

        Next, Navigating HABPanel's Configuration

[papa]

        Navigating HABPanel's Configuration within a Dashboard

After it's installed, we reach HABPanel via openHAB's browser dashboard [openHAB computer's host name or IP]:8080 then click on HABPanel or [openHAB computer's host name or IP]:8080/habpanel/#/  For openHAB cloud, use the browser address home.myopenhab.org/habpanel/#/ & give your login info.

First, using HABPanel gives us a mostly blank screen in the default "HABPanel" panel configuration & the default dashboard (New Dashboard). Each have gear icons where we can change names.

At the upper right of the opening screen, we click "Add Widget" & each time we choose the type of widget (type of data) to be added to this dashboard. For Number & String openHAB items, we can choose Dummy widgets. For Switch items, Switch widget. For image (still or streaming), Image widget. I haven't tried the other widgets. Except for keeping the default switch icon, I have not tried using icons on other widgets because they use more screen real estate.

        I suggest you experiment some with the rest of this post, but soon go on to the next post about Planning Ahead.

Hover over & click the widget's lower right & one can resize the widget (with limits). Hover over & click the widget's upper left & one can move the widget. Click on three stacked dots at the widget's upper right & choose Edit. ("Delete" deletes the widget.)

In the widget dialog window, we replace "New widget" with a name for the widget (somewhat descriptive for our purpose) & the openHAB item whose data the widget displays or controls. (One can enter part of an item name & a choice list will appear. Just be sure to click on the right item & move to another field or it won't stick.) Perhaps we check "Use server-provided format if available" (ensures that your item formatting is used). Perhaps we make icon choices (Again I have not yet because of screen space). Be sure you click "Save" at the bottom right of this widget's settings. You can return to editing any of the widget's settings.

Update: Once you have at least one widget in a dashboard, you can click Edit & Copy which will duplicate the current widget's shape & other settings within the current dashboard. You may want the same widget in different locations of a dashboard.  Or as needed, you can edit the duplicates to be widgets reporting/controlling other openHAB data. (More later on Copy/Move to other Panel Configurations.)

From time to time, one might click "Save" at the upper left of the dashboard screen. To see results of created widgets, click "Run" near the dashboard screen's upper left. To return to adding/editing widgets on the dashboard, hover over the dashboard's name (upper left) & then click on the pencil icon that appears to the right of the dashboard's name.  (I believe "Run" also saves the dashboard edits.)

        Next, Some Planning Ahead

[papa]

        HABPanel Configuration
        Some Planning Ahead

HABPanel is flexible in some ways & not flexible in other ways (true of all of us). As we configure HABPanel, it's good to have these in mind plus some ideas for how we will organize our data/controls.

Instructions above only cover one Panel Configuration, but as seen later, we can have more than one (for different purposes including different screens (like computer, tablet, or phone). We can save a copy of a current Panel Configuration & give that copy a new name.  At first, I intended to create very full dashboards for computer screens then save one or more copies that I would tailor to mobile screens.  BUT it helps to know that we can move & copy widgets between a Panel Configuration's dashboard's, but probably not easily between different Panel Configurations' dashboards.

Computer screens are perhaps the most convenient location for HABPanel configuration, but efficiently using computer screen real estate may make widgets too small for a mobile device. Also configuring HABPanel on a computer screen tends to create dashboards that look better in a mobile device that is held portrait style. Computer screens perhaps let us create more widgets than can be easily viewed.

        Next, HABPanel Configuration, Where I Am Now

[papa]

        HABPanel Configuration
            Where I Am Now

At the moment, I am configuring on a computer screen, BUT I regularly look at that Panel Configuration on a mobile device & tailor the config to the mobile device held in portrait mode. This "mobile config" looks OK on a computer screen & is a smaller amount of data to absorb.  Using this approach would mean having only one Panel Configuration to update with tweaks & new features.

I've tried to consider how to deploy openHAB dashboards & item widgets to work most effectively now AND for where I hope to be. Perhaps create not too many dashboards with not too many widgets. For example, I now have six dashboards: 1) Climate (10 widgets reporting weather data); 2) Sump (7 widgets about my sump pump & its cistern); 3) Garden (15 widgets for my 3 garden beds); 4) DoorBell (10 widgets for ESP32 camera board); 5) Security (17 widgets of freezer data, light status/controls, garage opener, door deadbolts status); 6) RSSI (widgets for signal strength of my 19 nodes).

PS Some of the Climate Widgets relate to items that already combined two or more items of weather data before being used in HABPanel.

I'll likely experiment later with widget icons, colors, & types to see how that will help viewing openHAB data versus the extra screen space they may take.

        Next, Add Dashboards to a Panel Configuration

[papa]

            Add Dashboards to a Panel Configuration

An earlier post documents how to add/configure widgets on a first dashboard.  Other earlier posts recommend not crowding too much in one dashboard.

To add a dashboard:  From a running dashboard, click on the stacked papers icon at the upper left. Now the upper left will show the Panel Configuration (house icon with name, perhaps the default "HABPanel").  Click on that Panel Configuration name/icon.

The screen now shows the current dashboards. At the upper right, click the gear icon.  At the lower left, click Add New Dashboard.  Give the new dashboard a name & proceed as above with "Navigating HABPanel's Configuration within a Dashboard"  Each new dashboard adds another screen of widgets.

        Next, Copy/Move Widgets between Dashboards

[papa]

        Copy/Move Widgets between Dashboards

We can do this once we have more than one dashboard. To edit a dashboard, hover over the dashboard's name (upper left) & then click on the pencil icon that appears to the right of the dashboard's name.

Perhaps we want to display a widget on more than one dashboard. Click stacked dots at the upper right of a widget.  Choose Copy/Move. Choose another dashboard to get a copy of the current widget.  Click Copy.

Perhaps, we want to move a widget from one dashboard to another dashboard.  Click stacked dots at the upper right of a widget.  Choose Copy/Move. Choose another dashboard to receive the current widget.  Click Move.

        Next, Creating/Using New Panel Configurations

[papa]

        Creating/Using New Panel Configurations

For HABPanel, we can save & copy an existing Panel Configuration into a new panel configuration. Then we can edit that new configuration for a new purpose or for a device with a different display factor. This avoids needing to create a configuration from scratch when we already have the start of needed widgets in an existing configuration. Just remember you cannot really copy widgets between panel configurations.

How to create a New Panel Configuration:  If you are in one dashboard of the current panel configuration, click on its 3 stacked horizontal lines icon. Then click on the "House" icon with the panel configuration name underneath. Anyway go to the HABPanel screen that shows all your dashboards, the 3 stacked horizontal lines icon in the upper left, & the gear icon at the upper right. Click on that gear icon. At the lower right, click on Panel Settings. At the lower left (scroll down if needed), click on "Save the current configuration to a new panel configuration." Enter a new (descriptive?) name for the new configuration (example, "Mobile").

How to use a New Panel Configuration:  The names of the new panel configuration & its dashboards will appear above "Save the current configuration..."  At the left of each Panel Configuration listed is a small circle.  Click the circle of the panel configuration you want to use at the moment & then that circle will be empty.  Other panel circles will be full.

Click on the 3 stacked horizontal lines icon next to "Settings" at the other left. Now you can proceed to use & perhaps edit the panel configuration you clicked on.

        Other HABPanel Experiments May Follow

[G]

I've set up habpanel the way I want it on a pc, but now want to start using it on a tablet (Fire). I get the habpanel blank "page/app" opened on the tablet but no dashboards, just blank with "No default panel configuration". How do I choose the saved habpanel configured on the pc? I do not see the "gear" icon near the date as is on my pc that. What am I missing? Thanks

[papa]

               On OpenHAB App, Getting Access to

        Choosing a Saved Habpanel Configuration

Welcome, Guest.  For more benefits, I hope you register as a member (no charge).

It's been a while since I have edited my habpanel & put it on my mobile device. See if the following helps getting you started.

      You are right that the gear icon is not on the openHAB app.  Getting access to set up is a little different than on the PC.

Watch this short video (it goes fast so you may need to stop & start). It's an old video but will give you some idea of fields you need to fill (parallel to setting up habpanel on your PC.)

Close the mobile openHAB app. Reopen it. (Maybe while the app is loading,) look for a stacked horizontal lines icon (shown enlarged just below) near the upper left.

         

Click on that icon. In the resulting list, scroll down to & click "settings." There you should see links to fields you need to field & on/off switches for settings.

I hope that helps.

[G]

I am currently using OH 4.1.1. This is a new install, but I have an old setup from several years ago, version 2/x? that I'm using as a guide. Basically nothing on the old one works any more, but it's how I want the new one to look. I was not using any app for the mobile device. I'd rather not on the new one either if possible -just a browser. The fire tablet is old and slow but makes a perfect mobile device for OH. It runs the silk browser.

The video seems to show how to install and set up the app.

As an update, after a shutdown last night, the habpanel doesn't open on my pc either. I can still access the other UI? with the settings, etc. It now shows "Connection lost. Trying to reconnect" on the habpanel dashboard when trying to RUN it. When I EDIT the dashboard it show my layout. Very confusing. Please forgive my ignorance on habpanel BTW. Thanks for your quick response and thanks for your help.

[papa]

        Re: Habpanel troubles

As I described in this thread, my habpanel did not work when I upgraded to openHAB 4. Moreover, OH 4 requires Java 17 which was not compatible with my old OH computer.  As described there, my fix was to roll OH back to a later version of OH 3.

Sometimes when OH has a major update, configurations from a previous version may not work.  If that's the case for you now, you might do this:

           Roll back OH to an OH 3 version. Then take careful notes about your habpanel configuration. Upgrade to OH 4. Then use your notes to manually recreate your habpanel.

                    Somewhat starting over can also help clean up OH.

At this point, I'm not sure what else to tell you. I won't be ready to upgrade to OH 4 for at least several months until when I install it on a newer computer.

[G]

I thought my reply had been posted, but evidently not. Thanks for your responses.

My setup is completely new and nothing was transferred over from my old setup. I replaced it all manually. I am still looking for fixes for the HabPanel issue though. It appears that many people have had this issue, but I have yet to find a fix for me. Several of the others appear to list no resolution within their thread. I was able to get my Insteon devices to somewhat work and I now have an IP camera working as well. Some some progess.

Thanks again.

[papa]

Thanks for updating. You are Welcome. Glad you stopped by.

[G]

So after trying to load OH 4 on a RaspPi 3b+, and it failing to stay running, I reloaded the RaspPi 4 again and am in the process of recreating everything without importing to eliminate the possibility of repeating the error. It is up and running with Habpanel working as expected. I must have changed some setting somewhere trying to get Habpanel to load on my tablet, which killed it. Trying to get an old NVR system connected now.

[papa]

Yes, sometimes starting over may be the fastest way to fix things. I'm glad it's working so far.