LCARS based User Interface

The new design is based on Bootstrap 4 and with own style.

Would love to hear how you’re doing with this now.

Der Screenshot ist auf deutsch. Deswegen hoffe ich, du verstehst mich, wie kann ich das lcars design in openhab einbinden? ist es dann auf dem Habpanel zu sehen?

Even the screenshot is in German, please keep the conversation in English. This is an international community.

Hallo Martin

[English below]
Schön daß es Dir gefällt. Leider ist das Teil noch immer nicht so weit wie ich es gern hätte.
Nein Habpanel wird es nicht darstellen können. Die Idee war ein eigenes UI im LCARS Design.

Leider ist die Entwicklung von UIs für openHAB alles andere als trivial :frowning:. Da ich auch nur beschränkt Entwicklererfahrung habe. Da ich nur in den späten Abendstunden dran arbeite ist das enorm Zeitraubend.

Derzeit arbeite ich daran den Slider vernünftig darstellen zu können. Das nächste werden die Charts sein. Ich verwende PHP und REST zur Aufbereitung, später soll es aber als native Java daherkommen. Aber eben… Java ist nicht meine Stärke, oder noch nicht…


good to read that you like it. Unfortunately it is by far not finished yet. And no it isn’t mean to be seen within Habpanel. The idea was/is a separate UI addon in the LCARS Design.
But developing a UI for openHAB isn’t that easy and as my developer skills are not that high, it doesn’t make it easier too. As I only work on it in the late evening hours, it needs a lot of time to finish parts of.

Currently I work on the Slider elements to make them looking good, a next one will be charts. At the moment I use a PHP / rest environment but the plan is to have a native java one. But as I wrote before Java is not one of my strengths … at least not by now.

Stefan

If it helps anyone.,…

I have been playing around with the SVG approach to a HabPanel UI and used LCARS as a starting point.

This is what I have so far.

(If anyone has a suggestion on how to get a slider working, I’d love to hear it)



Dear Stuart

technically feasible for habpanel. But frankly spoken some of the colors would, in my opinion, need to be adjusted and the elbows are partially looking strange, at least on these pictures.

Cheers
Stefan

Hey Stefan,

I take all that onboard.
I’m certainly not known for my graphics skills, or programming skills for that matter.

If you can get your UI to run in OH2.5, I would be very keen to give it a try.

(I dropped your jar file into OH and Karaf saw it as a bundle, but nothing appeared in the Start/Index page. Was I doing something wrong?)

Good luck,

Stuart

Hallo Stefan,
muss ich die jar datei über die console öffnen? über PaperUI findet man nicht, wenn ich die Datei in addons kopiert habe.


Hello Stefan,
do I have to open the jar file from the console? You won’t find it over PaperUI if I have copied the file into addons.

Dear Martin @Marteyn83
Dear Stuart @MDAR

The jar you downloaded is so outdated, that it doesn’t make sense to talk about it. I should remove that link. That version was a fork of PaperUI which didn’t work well on one hand and on the other PaperUI was never meant to be as a “normal user” interface but for admin reasons.

If you would like I could provide you my current “work in progress” framework. But it is not a OH2 addon. It is outside of it and requires you to have PHP 7.2 installed at least. Please send me a PM in case of.

1 Like

Thanks.

PHP is a step too far for me.

I found this article that references openHAB, which I’ll have a dig around in.

That’s great. Ho can i use openhab items in php?

@MDAR Funny to keep seeing you on the same threads, I’m guessing we have some similar interests!

I’m actually also working on an LCARS interface, built with SVGs on HABpanel.

It’s designed for simultaneous display on three screens: one is a home monitor with a map, one is a frame for displaying logs or node-RED (among others), and a small touchscreen is for controlling it all.

Just for fun, all design elements respond to a red alert virtual switch.

It’s very much still a work in progress but I am willing to share code once it’s more stable, if there’s interest.

Note: that’s a low quality video. I’ll probably put a better one up soon and will update this link.

5 Likes

Are you guys going to update your LCARS to match the style in Star Trek: Picard? :slight_smile:

I haven’t seen it yet. I’m waiting for more episodes to be out before I start. Certainly possible if I like what I see. :grinning:

Seems that here are some Star Trek fans using openhab :laughing: so after watching PICARD, I also though it would be fun to remodel my HABpanel to the LCARS design.
My initial idea was to use the CSS based framework that looks really good to me. So I copied the css file to /conf/html/lcars.css and tried to use it in template widgets. This is straight forward and I would just need to make a few different templates for the elbows, lines and brackets. Unfortunately the style in the background of habpanel always introduces some margins/paddings/borders which I am not able to locate and overwrite… Someone with knowledge about habpanel theme design would probably be able to adopt the CSS from the github so that the spacings around the habpanel boxes are eliminated and the content is scaled to the box size. But I give up. :woozy_face:

PS: my second idea was to put all in a separate html page and call it within an iframe, but this doesn’t work either, because the angularJS for the dynamic content isn’t working anymore. :man_shrugging:

Screenshot_2020-02-03_00-09-50

4 Likes

@Dome, would you care to share the code for what you’ve got so far?

If you use an SVG file in a template widget, it’ll work well

I’d be glad to. I haven’t yet because I’m still developing it and have quite a bit more to go, but I’ll try to get something up on github this week. I’ll post here once I do.

This was my approach. I use kiosk mode so there’s nothing visible but the svg.

2 Likes

It’s a long ways from done, but here’s what I have so far. I posted it on a GitHub repository so it’ll be relatively easy for me to update going forward.

1 Like