LCARS based User Interface

[Dome]

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.

[JGluch (Jugl)]

Seems that here are some Star Trek fans using openhab 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.

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.

[JimT (jimtng)]

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

[MDAR (Stuart Hanlon, UK importer of Velbus hardware)]

@JGluch

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

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

Design your SVG floorplan or dashboard for HABPanel with Inkscape

Hi all, Today a friend using Home Assistant showed me ha-floorplan - basically a way to display interactive SVGs in the web UI. Some skilled people got very creative with it - this goes far beyond floorplans since you can design your dashboard entirely with SVG! But did you know you can already achieve a similar result for your openHAB system with HABPanel? SVG can be included in templates without problems using ng-include! [habpanel-floorplan] Here’s a little quick start gu…

[Dome]

@JimT

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

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.

@MDAR

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

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

[Dome]

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.

dome2048/lcars

[omnipotens (Michael Brazda)]

Glad I found this I am 3d printing my a 8 foot warp core for my office and just finished coding the arudino. This will be perfect for complete it and tie everything all together.

[Rook (Robert Allsbrook)]

JGluch,

Here’s a method using CSS that just might help you:

<style>

  *{
        margin: 0px;
        padding: 0px;
    }

</style>

Using an asterisk–at the *{ syntax–as your HTML selector will cover all the HTML elements of the webpage you’re working on. You’ll be clearing all margins and paddings, so further CSS will be needed to format other elements in your work.

Of course, using the

<style>
...
</style>

tags are for CSS formating to be placed in the header HTML of your webpage.

If you’re using a CSS file to format your page

*{
    margin: 0px;
    padding: 0px;
}

is all you’ll need to put (normally at the very top) into your .css file.

Best regards,

R. Allsbrook

[JimT (jimtng)]

@Dome

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.

Hi @Dome, I’m curious to see your progress with your LCARS! I’ve just now committed to adding a display into my openhab system.

[Dome]

Hey @JimT - I haven’t made a ton of progress lately. I moved to openHAB 3 early this year and it took quite awhile just to update my existing LCARS interface to make it compatible with my updated items that are based on the OH3 model.

I’m still hoping to make a baseline demo install for use by anyone that wants to use this to make their own. To do that I want to create a more generic interface that isn’t so customized to my home.

[JimT (jimtng)]

Hi @Dome thanks for the update. I was thinking it would be nice to be able to add the lcars interface using OH3 MainUI’s yaml interface, so no css/html/js will be needed. I was thinking that this could be implemented using custom mainui components, e.g. - component: lcars-button

[Dome]

Interesting idea. I have barely scratched the surface with the mainUI, largely because my primary interface is my iPhone and beyond that everything is on HABpanel.

If you come up with anything, please share!

[rediculum (Roland H)]

Hello

Has anybody successfully implemented the sounds in habpanel from Joern Weissenborn’s lcars framework?