Openhab and graphics

Good morning eveyone!

I really didn’t use OH but recently I’ve been called by a customer having a camping and using openhab integrated with KNX to monitor power enertgy and so on. The system has been created by a technician who is not working anymore and I have to follow this new customer. So basically I’d like to ask to some experienced people a few questions. The main problem is the visualization, at the moment there is a graphical map created in html which has icons located in the right coordinates but itis not resposive so basically the customer can only use it from his pc, changing resolution moves this icons and makes it useless. The question is, is there any way to update or insert a better graphic system like a 3D map which is visible and responsive on different devices like tablets smartphones and pc? I’m not asking someone to do this for me or for free, but before spending hours in trying building something, I’d like an opinion. Otherwise I have other solutions like IKON which has an impressive system about grahic scaling.

PS: on the graphical maps there are about 100 objects, i said 3D map but a 2D is more than enough

Thanks a lot

At this point, there’s very little you cannot do in the way of visualization if you have the time and determination. There’s what’s easy and built in, there’s what’s supported, and then there’s what’s possible with a little creativity.

From your description, if the visualization your talking about is built in HTML, then you are probably looking at the HABPanel UI. This is an older UI, but still fully supported, that let’s you work directly with HTML and angularJS for dynamic interaction with OH information. It is difficult, though not impossible, to make this responsive. It is more intended for display on fixed resolution tablets as control panels.

MainUI is the newer solution to this with it’s custom page and widget system built around the framework7 library which makes size responsiveness much easier. At a minimum, MainUI has a built-in web frame viewer which allows you to incorporate into an OH page any other page or frame that permits it.

Thanks Justin! So basically I could create a new view using MainUI and make a responsive page and then importing the parts of the code from the old html? The point is economic too, making this could be expensive as it would require a lot of work, and I want to offer the best and honest solution to the customer, if it was something I could do as “freetime” I probably would stick to openhab, but I need to be sure of the results as the system must work. I am used with IKON server when it comes to KNX, as it has an easy and fast way to configure every object. In your opinion, would it be worth the time spent creating a responsive page in OH or would you replace it with something else?

To make a page responsive in MainUI is as simple as:

  1. Create a Page
  2. Add Row(s) to the Page.
  3. Add Column(s) to the Row.
  4. Add widgets to each Column

So far we’ve just built up the page. To make it responsive click the Column’s setting icon:

image

select “Column Options” and enter what percentage of the screen this column should consume based on the width of the screen (in pixels).

In the above case the column will take up 100% of the row except on screens >= 1200 pixels wide in which case it takes up 1/3 of the row. Thus, on my computer I see three widgets in a row but on my phone each widget gets it’s own row. The responsiveness almost comes for free.

The work in working with MainUI comes from creating the widgets. And for basic stuff like switches and sliders and the like even that is super easy and little work. For more complex widgets, there are many options on the marketplace that can be installed and used as is or customized as needed.

I don’t think that HABPanel widgets are compatible with MainUI though so “importing parts of the code” from HABPanel is likely not going to be an option. You might be able to create a separate panel in HABPanel and import that into MainUI using a webframe as @JustinG describes. But honestly I think the time might be better spent using the native MainUI widgets in most cases. It would probably be less work and look and work better in the long run.

It’s also worth mentioning that MainUI will autogenerate a UI for you based on how the Items are put into the Semantic Model. We don’t know what this HABPanel looks like so it’s hard to assess whether this would work for you.

While I’ve applied some customizations above (custom background images on the cards, some customization of the widgets shown on the locations card so the icons are dynamic, etc.) pretty much everything you see is automatically generated, including the chart which appears by clicking on the humidity sensor entry. And these autogenerated UI elements are all responsive too out-of-the-box.

Not quite, but close.

As Rich points out, creating a responsive page is point-and-click easy.

Beyond that there’s a little bit of extra knowledge and understanding if you wanted to convert HABPanel html directly to MainUI pages and widgets.

Here’s an example. I just pulled this HABPanel snippet off a random thread here on the forums:

<button class="sonosbutton" style="background-image: url(/static/sonos/bbc_6music.png);background-size: contain; background-repeat: no-repeat;background-position: center center" ng-click="sendCmd('Sonos_2_playradio', 'BBC Radio 6 Music')"></button>

and here’s how I would convert that to MainUI widget yaml:

- component: oh-button
  config:
    class: sonosbutton
    style:
      background-image: url(/static/sonos/bbc_6music.png)
      background-size: contain
      background-repeat: no-repeat
      background-position: center center
    action: command
    actionCommand: BBC Radio 6 Music
    actionItem: Sonos_2_playradio

Let’s break that down:

- component: oh-button

The widget system supports all standard html tags so if you have a <div> element, you can use -component: div etc. In this case, you could try to use - component: button and you would get an element rendered on the screen, but no good way to link that button’s click event to openHAB. Fortunately there are many built-in elements that are made to interface with openHAB including a button variant, so that’s the component we’ll use here.

Next we configure the button with various options in a config object:

  config:
    class: sonosbutton
    style:
      background-image: url(/static/sonos/bbc_6music.png)
      background-size: contain
      background-repeat: no-repeat
      background-position: center center

CSS styles and classes are directly convertible (just note the lack of ; after each style declaration). However, because of the differences in the higher levels of the html documents in each case, I think you will find that much of the styling needs to be adjusted when moving from HABPanel to MainUI.

The next piece of the original is the angularJS:

ng-click="sendCmd('Sonos_2_playradio', 'BBC Radio 6 Music')"

There’s no equivalent of that in the MainUI widgets so this is where the biggest difference is. Because this angularJS is reacting to a user input (as opposed to just getting a value for display) the best equivalent in the widgets is the widget actions, so that is what we add to the button configuration here:

    action: command
    actionCommand: BBC Radio 6 Music
    actionItem: Sonos_2_playradio

So, once you get used to it, the conversion could be done fairly easily and quickly. How much time the learning curve takes you depends quite a bit on your background, comfort with the basics, and whether or not the tutorials and docs fit your learning preferences.

1 Like

thanks a lot I really appreciate your time to explain this to me!

So creating a responsive page is quite easy, and I understood the coding part related to creating objects. Now imagine to have a background image as a territory map where you can find every camping areas and on every area I have to put a button which will open another page with the details. I need that the position of the buttons stays in the correct area, should I create a div with the image and inside of it a div for every button with a %padding value to make them responsive? or do you have any other ideas? this is a more webdev question, about using OH you were very clear

thanks again

I think you are talking about something like this?

That’s a floorplan but the same sorts of usage applies. Pan and zoom are supported.

There’s also this.

But I don’t know that this will cover your use case unless the full layout of your camping areas happen to be already represented in OpenMap.

No, just create the floorplan page as discussed in the docs I linked to above. You don’t mess with div tags when working with MainUI. That stuff is all handled for you.

If you are working outside of OH, :man_shrugging: . You are pretty much on your own in that case.

thank you everyone! I think I have all the necessary info to explain the idea to my customer! Thanks