Own UI (html,css) - how to communicate with openHab2(an raspi)?

Hey, I hope this section is the right.
So, I create my own UI/webinterface with .html and .css. But whats about the functionality ? What is the best way, to get status-updates from my things to my webinterface, and control things with it. I search for weeks now, but I cannot find an answer. Any Ideas ?
I don´t know how to realize the communication from the HTML website --> Openhab.

  • Rest API ? but how ? how can I send the commands from a webinterface ? .js .py … ?!
  • MQTT ? with MQTT broker on rasperry and MQTT Bindung ?

…i don´t know… and I´m a bit confused now …

I hope anybody could tell me a way to do this…

thanks - Thomas

1 Like

First of all, your UI should be working with Items, not Things directly.

The other UIs use OH’s REST API and websockets I think. I suggest you look at the source code for one of them as an example. HABPanel will probably be the closest to what you are doing.

Thank you for your reply. I know the difference between things and items :wink: … sorry I wrote this while working and eating together fast :joy:.
Okay, I thought the rest API will the way I must go. But I was not shure how… so thank you, I will look at websockets (nerver used something like this)…

hey, I will also go with an own UI. I believe a good way to go is with javascript and the rest API. So you can create a single page application with a good and fast response.

Okay, I will try, but its very difficult to do this the first time. I need to learn, how to build the websocket connection. Then I will try only simple things in the beginning - switch a lamp on/off and get its state, when switched on, by a wall switch.

if you are going with javascript, I would suggest to use jquery library. But when you dont have any web programming experience, dont give up after some days. It will become easier after a week.

Well javascript is the only option here, if you want realtime updates.

Just for curiosity: What’s the reason for creating an own UI?
Is it just for fun/personal education? Or are you trying to solve a problem that the available UIs do not?

1 Like

I believe UI is not only problem solving / function missing, its also look and feel. habpanel ist a great tool and you can customize it, but e.g. for fully customizing you need to know the angularjs v1 framework.

creating something knew with any other js framework/library or plain js could be easier for someone who isnt aware with angular.

If its just about the look & feel, I suggest to take a look at the CometVisu (Disclaimer: I am one of the developers). You can create your own design with css there and don’ t have to worry about the communication with openHAB because its build-in.

Basically there are two options for customizing:

  1. Create a new design just using CSS (the easiest way)
  2. Create an own structure (thats whats generating the HTML code in CometVisu) + an own design on top of that (the complex way, but with full freedom about you design decisions).

You don’ t have to learn an complex framework, but of course you have to learn how the CometVisu works. But you save the time you would need to create an own backend communication stack. So its an individual decision, which road you go.

IMHO its always better to join and improve an existing project instead of re-inventing the wheel, because they solved many of the problems you will face when you do everything from scratch. And even with the steep learning curve for a complex framework like angular/habpanel you will benefit in the long run. But I know its more appealing to start something own, because you will see much more progress in the beginning, because you don’t have dive into complex project before you can do anything.

Don’ t get me wrong I don’t want to talk you out of your intention to create something own. I just want to show some other options and share my humble opinion about that.

2 Likes

wow, I´m very very impressed about your replies to my question. Thank you so much @all.
Yes @DubZ my reason for creating an own/ my own UI is the look & feel. Actually I have an Z-Wave network with 35 Nodes and so many Items and it works without any problems --> Now I will mount my 23" touchscreen (with raspi) to the wall, to get a beautiful integration in my house. And the HABpanel is very good for the beginning - but i want something different also with more “WAF” :slight_smile:

I could program C/C++ Windows Applications but I never do something like php, python …
HTML and css a little bit. So as @tbraeutigam said, its very hard for me to understand the way to communicate from Website <—> openHAB. Yes, thats my big problem at the moment.

I searched days and days to understand how I could realize the communication from an html to the openhab, but I don´t understand it. I have nobody here with I could discuss this in my language (german // so sorry for that bad english).

I will look at “CometVisu” … your explanation @tbraeutigam sounds good for me. I will give it a try. I hoped to get tips like this here :wink: so - THX for that.

p.s.: CometVisu - a german language project ? good for me :slight_smile:

Hey ths, I can help out with html css js but I’m also compete new in home automation (started 1 week ago). I’m also German :slight_smile:

@tbraeutigam I already read a bit about cometvisu (not much). The reason why I didn’t try it was regarding requiring php. I don’t know for what php is used at cometvisu but normally just using Javascript should get the best performance, responsibility etc.

While I wrote the lines above, I had a look at cometvisu page. I don’t know what I thought php is required. But in memories I thought that there are less information in the internet… But now I will definitely have a look at cometvisu!

As you are both german, you can get german support for the cometvisu here, if thats easier for you:

Feel free to ask any question, we will try our best to help.

The CometVisu does not need PHP to run. You only get some additional features with PHP, like a manager to download/upload your config files (which you dont need if you have access to your servers filesystem) and an editor for the config files (which you don’t need because the config files are XML-Files which can be edited by any XML-Editor).

I have found this as an possible way:
https://www.w3schools.com/nodejs/nodejs_raspberrypi.asp

There are interesting tutorial about this.