Splitting up the .js file for a widget

Third party integrations HADashboard
1

I am writing a sort of 3D floorplan for Home Assistant, https://tjntomas.github.io/3dfloorplan-for-Home-Assistant/ and I am tryin to make it into a HADashboard widget, but I can’t figure out how to split up the js file into several files since it’s quite a lot of code. This is a namespace issue as I understand, but how would I go about using code from other js files in the widget without creating a library?

It started out as a HADashboard widget, but then it grew to big with the need to split up the code and I made it into a stand-alone project with its own websocket connection. Now, its mostly finished, and I like to make into into a widget again.

2

i hope you get another for that answe, because it would be interesting.
but this is javascript above my head :wink:

did you google for “javascript splitting up js files” ?

you are doing something that is on Andrews wishlist, so if its donr right it can and up inside AD :wink:

3

Rene, splitting up js files is easy, just a matter of including the js file as a script source in the html file as I have done in my stand-alone project. The issue is how to access functions in other js files from within the widget function. If I wrap my code in a library, I am able to use the code in a widget, but I would like all the js files to share the same namespace, meaning that I want the other js files to be part of the basewidget function’s namespace.

4

sorry but i dont know. thats to complicated for me at this point.

but this might be of interest for you.
recently i have developed a plan and did speak with Andrew about that.

what i want to create is this:

a default directory (Lets call it custom_js) with small javascript functions for all kind of stuff. (for instance navigate)
and then in the widget yaml you can add any of the js functions that are there and connect it to any kind of action.

so in that case it would be possible to add a longpress function navigate to a cam, or a light icon, or a sensor value
or a slide function to a cam
etc.

so you specify the widget part, the action and the javascript in the yaml. thats it.

i think that will be very helpfull for your case.
so maybe we need to work on it together.

1 Like
5

Rene, if we could have a folder with custom js and css files and possibly other assets being compiled together with the widget, this would indeed solve my issue!

6

Then, I would suggest the ability to specify an “assets” folder to be inluded while the widget is compiled, either on an instance basis ( for each instance of a widget) or on a widget basis, i.e. assets used by the widget itself.

7

i think it will be something like the widgets at this moment.
the js files that are available by default will be in the appdaemon area
and the js files that everyone wants to add are in the custom_js dir in the config dir.

there is no need for css like that, because thats were the skins are for.

also there wouldnt be need to specify an assets dir. on instance basis you got the skin and on widget basis you got the new js dir, and the options to change the css in the widget.

i am talking about something like:

some_widget_name:
  widget_type: switch
  entity: switch.some_switch
  title: 
    name: switchname
    action: longpress
    functiontype: navigate
    functionargs:
      url: some_url
  title_style: "css for the title"
  icon:
    icontype: mdi_weather
    action: press
    functiontype: custom_function_name

without the setting you get default behaviour, with the setting you get the behaviour you specify