Customize the JavaScript code of OpenHAB 2 project

[Web_Solution]

Hello!

I installed OpenHab2 on my linux server. I have very little knowledge on this part.
I wanted customize the JavaScript code of OpenHab project.
I can change the views of OpenHab template but I can’t edit the JavaScript Code to what I want (Exactly, /app/widgets/template/template.widget.js).
How can I change the JavaScript files?
I didn’t find the template.widget.js file on my server
I just want to know the path of the file on my linux server.

Thanks for your help!

[dastrix80 (Kris K)]

@ysc

[David_Graeff]

openHAB is Java. There is no " JavaScript code of OpenHab"

You are talking about a frontend, but you forget to tell us which one. Is it HabPanel or Classic UI or Modern UI or another one?

Frontend in openHAB are bundles as java jar files (yes that’s stupid, but it is how it is). So you will not find any frontend files in directories. They are part of those jar files (zip format).

Instead you usually download a full blown Java development setup, checkout the openhab-webui repository, change the project that you are interested in, build the java project, which builds the frontend project, and push the jar file into your addons directory.

Cheers, David

Disclaimer: I’m not happy with this workflow and I’m already fighting for a better frontend developer workflow within the OH project.

[ysc (Yannick Schaus)]

@Web_Solution, the Javascript code for HABPanel is in the web folder here:

openhab-webui/bundles/org.openhab.ui.habpanel at main · openhab/openhab-webui

But you can’t modify the one which is included in your distribution, you can however do either of these things:

• make the changes you need, recompile the bundle with Maven (follow the docs here: Developer Guide | openHAB - basically, run mvn clean install -DskipChecks in the bundle’s directory) then add the resulting .jar file in the target folder to the addons folder in your distribution (uninstall the current distribution’s add-on with Paper UI first: Add-ons > UI > Click Uninstall next to HABpanel);
• (simpler) clone the repository with Git and copy the above mentioned web folder to the openHAB configuration folder, in html/myhabpanel for example. It will then be accessible under: http://<openhab>:8080/static/myhabpanel/. You can then change the code however you want. Note that this will be a customized version that is not accessible from the tile on the home page.

That being said, maybe you don’t really need to change the code itself, for widget development you can lazy-load additional Javascript with the technique described here:

HABPanel Development & Advanced Features: Start Here!

This Wiki post aims to be a centralized resource to help new users (and experienced users alike!) with the advanced features in HABPanel. It will contain relevant examples and links to help you with common issues and getting the most out of these features! Users with the “Member” badge (and levels above) can edit this post, don’t hesitate to do so if you deem it appropriate Templates & Custom Widgets What are templates? If the standard widgets don’t fit your needs or your taste, HAB…

(read this part: Advanced: Injecting custom JavaScript code)

[Web_Solution]

Hello David!
Thanks for your reply.
I’m saying about the frontend of the OpenHAB and using HabPanel for that.
If there is way to change the code of frontend, please help me.
Regards.

[dastrix80 (Kris K)]

See Yannick’s reply

[dastrix80 (Kris K)]

Hi Yannick

So the changes have been made to present a nice new dashboard, see photo. Its running locally.

I now need to work out how to recompile a binding gasp

[dastrix80 (Kris K)]

Hi @ysc where can I find the source for 2.4.0 habpanel?