HabPanel - Where to Start?

I’m just starting to experiment with Habpanel and am honestly unsure where to start. I’m used to doing my own basic programming vs the actual GUI wysiwyg interface. I am fairly familiar with html, css, php, etc having done some basic coding in the past. But have a few basic question on where to start with Habpanel.

  1. I experimented creating a dashboard and 1 widget. But seems that dashboard only shows on my PC and not on my android device?

  2. Where is the code stored to start creating your own dashboards from scratch?

  3. Do you need to create separate dashboards for each device?

1 Like

If you are using OHv1 then you have to create on each device. Server-side storage only exists on OHv2 I believe. I don’t use Habpanel myself but I had a look the other day and am pretty sure that is how it works.

I am using OH2, so this information will be for that. If you are on OH1 I believe it is different, hopefully someone can add that information.

  1. You can share dashboards between devices. If you click the menu button in the top left (looks like a stack of pancakes), then click the gear icon on the bottom right of the menu that opens, you will see a “Current storage configuration” menu. You can click the item that says “Save the current configuration to a new panel configuration”, give it a name, and it will be saved. Note that on each device, you will have to go into these settings, and select the saved panel configuration you want to use, but it will remember your setting once you set it on each device.

  2. To create a new dashboard, you can click that same menu button on the top left, then click the house icon, it will take you to a page that lists all your dashboards. You can then click the gear on the top right of that page, and you will be able to add a new dashboard, change the order, etc.

  3. There is no need to create a separate dashboard for each device, although you could if you want. See the answer to question 1.

If you are just starting out, I would take a look at the threads on the template widget and the custom widget. They have lots of information on how to create custom widgets for your dashboard to get it to look just how you want.

1 Like

Thanks guys for some early feedback and tips.

But if you want to do all of your coding outside of Habpanel in NotePad, Sublime, or some other text editor, where do you save your templates to OH2/Habpanel? Or it a must to do within HabPanel GUI itself?

And if you wanted to make multiple ‘pages’. Is it better to link/reference another Dashboard, or use the Boostrap component and then place widgets within each ‘page’.

And maybe any possible plans to access Habpanel via myopenhab.org or other in the future and not need to open a port to the outside?

You already can.

Can you share the procedure to access Habpanel via myopenhab.org?
Also, for backup purposes is there a file location for the habpanel-config.json file (I know I can import / export it via Habpanel, but if I want to automatically restore a configuration so that openhab loads habpanel from a reference json file, where do I put this file?

Well, assuming you can access myopenhab.org and login, you should be able to see and configure Habpanel same as if you were within your LAN. The direct url would be.

https://home.myopenhab.org/habpanel/index.html

Unsure what you trying to ask though on the 2nd question. I think the configuration could be stored in a database or xml config file and not a file simply stored on your server.

Thanks
I verified that the link https://home.myopenhab.org/habpanel/index.html works
Note: the link works from the desktop (Ubutnu 16.04) via regular web browsers (Firefox, Chrome). In an Android phone (Nexus 6P Android 7.1.2) it works via the Chrome web browser, but not from the android openhab app (version 1.8.0.7)

So if I play with the configuration and later want to restore it to a known xml reference file, where would this xml file location be? (the reason I’m asking is that I want to set my habpanel configuration by importing a textual (e.g. json, xml) reference file and make changes by directly editing the file instead of interacting through the GUI)