Where is the Basic UI sitemap HTML output being generated?

Add-ons UIs
1

Dear all,

does anybody know, where the openHAB sitemap is being generated and output as HTML?
I definitely want to make some design changes to the Basic UI, but the options with the “Webview” element (where some custom HTML/CSS can be “injected” within an iframe) are extremely limited.

That’s why i wanted to see, where or how to change the original HTML output.

Thank you!

2

There is the web-src folder with scss.

3

Thanks - that’s a massive amount of JS and CSS :slight_smile:
Where do i find or edit these files on my running system?

4

Well my guess is, you don’t.

Since BasicUI is a UI Binding I think you need to make the changes and bundle it again and install then your “custom” BasicUI Add-On/Binding.

EDIT:
Instead of assuming maybe just google or search the forum, silly me :slight_smile:

https://community.openhab.org/search?q=Customizing%20Basic%20UI

5

Hi Elias,

thanks - but bundling every time doing a small change seems … not be an option :smiley:
What a shame :frowning: so no other options i guess :frowning:

Thanks as well for the forum link, but the first result gives an example for injecting HTML/CSS after the sitemap is being loaded (no touch of original basic ui files), but it does not work properly that way.

6

I am in no way en expert on UI stuff :smiley:
Backend developer here :wave:

Maybe this here helps?

7

So this would be the perfect start to have some cooperation going?
Graphic and UI designer here :sweat_smile: :wave:

8

All the current UIs are being replaced in OH3 anyway. Since the UIs use the REST API to access OH it should be possible to write a standalone UI.

9

When will OH3 be released?

10

BasicUI is intended to be … basic.

Have you discovered HABpanel alternative UI ?

11

I would guess not before the end of 2021.

12

So thats enough time to make some decent jQuery and CSS makeover for the Basic UI :slight_smile:

13

Sounds like there is a new volunteer raising, great news!

1 Like
14

2 Likes
15

:grin: Haha okay guys :smiley:

Things start to look better already :v:
I think the most important thing is the horizontal navigation, which i desperately needed so much …

Screenshot_20200222-171337_Chrome
Screenshot_20200222-171337_Chrome444×937 40.6 KB

3 Likes
16

That looks nice!

If you can and want to, could you share your work on GitHub? :wink:

17

I definitely would. But i am a rookie developer (as mentioned, more designer), so my code is just trial and error and neither very structured nor compact :smiley:

Furthermore if have 2-3 jQuery issues i can not solve myself. Is anybody there to help me out?

18

No one? :pensive:

19

If there would be a git repository it would be easier to take a look and help :wink: :wink: :wink:

20

As I am not really into development and even less into git, I think i can not achieve that :grin:
If sufficient, i can provide these files via plain old download link: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free
Just insert them into your “html” folder and add to your bottom of sitemap:

“Webview url=”/static/designhome.html" icon=none"

The main issue I have for now is: Navigating to “child elements” of an Item.
When clicking on such an element, like:
Anmerkung 2020-02-27 100816
… you get redirected to a standard openHAB “injected” subpage. You can see it in the URL like:

http://192.168.XX.XXX:8080/basicui/app?w=0002&sitemap=test

Issues:
a) When being there, the horizontal Navigation does no longer work. jQuery click function on navitem is not even recognized!
b) When clicking the basic UI back button arrow on top left, it gets my to the startpage, but the initial “display: none” method for all the widgets is not working. So all widgets are visible at once which is not how it should be. I tried to create my own back button to compensate that behaviour, but then issue a) is into place: i can not affect any HTML elements with jQuery on these subpages :sleepy:
Anmerkung 2020-02-27 101141