What is the best starting point for building a new UI?

Add-ons UIs
1

Hi there!
I’m a new member of this community and I have come here because I’m developing Zumly, which is a JS library to power user interfaces with zooming transitions.

I’ve received a suggestion from an openHAB user saying that Zumly could be suitable for using it as openHAB UI.

My newbie question is how can I create a new UI for OpenHAB using external libraries?

Here is a short video showing some Zumly features

In the past I made a demo of a hypothetical UI for smart homes using zircleUI. This library was my first experimental approach for creating zoomable UIs, but I believe Zumly will be a more flexible and powerful tool.

Hope someone can give some guidance to start with.

Thanks,
Martin

3 Likes
2

All the current UIs use the REST API of OpenHAB. In other words they all use external libraries. They just happen to ship with the system.

2 Likes
3

Thank you Bruce!

4

Hi Martin, i noticed your library is based on vue.js. We are using vue as well as framework7 in our next generation UI, you might want to check out https://github.com/openhab/openhab-webui as well as a few specific issues like https://github.com/openhab/openhab-webui/issues/155 and https://github.com/openhab/openhab-webui/issues/266 . I don’t know if your library could be used, but it may be worth joining the discussion there.

1 Like
5

Hi Dan, I saw the repo earlier this morning and I think you are doing a amazing job there. I’m afraid Zumly is not based on Vue.js, is an standalone JS library. However, as you noticed, Zircle is a Vue plugin.
I’ll take a deep look and read the issues you pointed out.

6

Hi Martin, sorry for the delay - just noticed this thread now…
Your library looks really interesting! At first sight there could definitely be some cool use cases, like zooming in to drill down into details. There are a couple of options on how to proceed:

  1. integrating a Zumly-based type of page or widget in the main OH3 UI (perhaps named “zoomable page/widget” or something similar) - if it doesn’t come with heavy dependencies we can probably add it, eventually as a separate webpack chunk;
  2. developing your own UI and deploying it as an separate installable add-on - similarly to other UIs such as HABPanel or HABot, then you’re free to use any library you want.

In any case you should head over to GitHub to discuss it further. Thanks, and welcome!

2 Likes
7

Hi Yannick, thank you for your feedback! I’ve just released a public beta of Zumly few weeks ago and I’m collecting ideas of the Zumly community to improve the experience for developers. I like your second option, the idea to develop a dedicated UI based on Zumly. I like very much the development of the next gen of openHAB UI as well, so I’m willing to contribute from my experience to this project.

3 Likes