How to edit a Lovelace plugin?

That is not exactly true, I have 2 forked lovelace plugins and these work fine…but beats me why this does not work for those above.

EDIT: HACS provides some protection to the HA instance so I am OK with this … but then I would really like to know how to do this and without errors

Probably you are right, there some other reasons of this “not compliant”.

I am happy with HACS so far - unless I want to instal some custom repo.

You absolutely can install custom plug-ins to your system without using HACS.

But yes, first you will need to have a valid .js file somewhere on your local system.

I do my editing on my windows pc using notepad++. Then when done I move it to HA.

Depending on if you want to remove the existing plug-in or keep it while you do your testing determines what you do next.

if you don’t care about the existing one and want to remove it then remove it using HACS. Then reboot your system. Then clear your browser cache. I usually clear the cache by using ctrl-F2 in Chrome but there are times when it required to do a “hard clear” by going into dev mode in the browser (F12) then right click on the refresh button and hard clear the cache there.

once you do that then you can install your plugin to the www/ folder. I put mine in www/lovelace/ (using a path like www/lovelace/some_plugin_file.js).

then in your lovelace resources you reference the plugin:

  - url: /local/lovelace/fan-percent-button-row-2.js
    type: module

once you restart (and clear the cache again for good measure) the old plugin will be gone and you should be using the one you installed.

if you want to keep both then you will need to do a couple of extra things.

first, both plugins can’t be called the same thing (obviously) so you need to change the name of the plugin in the plugin code.

here is an example from some of the testing I do on my own plugins.

I change the references to the plugin at the top and bottom:

class CustomFanPercentRow2 extends Polymer.Element {
.
.
.
.
.
customElements.define('fan-percent-button-row-2', CustomFanPercentRow2);

then save the file so it matches the reference in the bottom line of code above.

write the correct resource reference exactly as above, again restart, clear the cache, etc and it should work.

this example uses a fairly simple plugin that only has one file that constitutes the plugin. for more complex ones I’m not sure how those may work but you need to basically do the same thing but in that case I would put all associated files in a sub-folder - www/lovelace/some_complex_plugin/the_plugin_file.js. - then add the other files to the same folder.

Hopefully I’ve helped and explained it clearly…

2 Likes

First, thanks a lot for participating in the discussion.

Regarding the method you described.
Yes, this is a good description and I did exactly as you described.
I removed the “official” plugin by HACS, rebooted, cleared cache.
But I was unable to add a resorce - it accepts a js file.
In most of cases Lovelace plugins include several files - and sometimes they are not js, they are ts.
Which makes this way not working.
I guess this whole page must be rewritten.

Btw, I really tried to specify a ts file as a resource here:

  - url: /local/lovelace/fan-percent-button-row-2.js
    type: module

and after HA reboot the plugin is not installed.

I agree that the way some/many plugin devs make their plugins makes it difficult to fork their repos unless you are a true js dev yourself.

I’m not one of those and have been bitten by it before when trying to make my own version of that type of plugin a long time back. Luckily some other knowledgeable user took it over and saved me. :laughing:

The doc page you reference is still correct for many plugins that have a more basic configuration. So I don’t think a complete rewrite is needed.

And I don’t think he meant it to be a comprehensive instruction on how to install the more complex stuff that most users will never do.

have you tried to contact Iantrich about it yet?

Not yet. Probably I will have to,
Unfortunately, the same story is about some other cards.
The custom:button-card was already mentioned here…

Hope this helps everyone on this thread. If the source of a plugin is a set of typescript files, you need to ‘compile’ that to make the js file. You will need fork the repo, make tour changes and then use npm to create the js file. Once you have done that you can just xopy the js file into the www folder (sub folder if you like) and add the file as a resource to your dashboard, or copy the new js file over the old one.

You will need to remove the original if you create a new version as otherwise some of the classes will conflict. It is also a common issue of caching that you may need to do a shift F5 to load your new version.

1 Like

This link may help you understand more. It is a boiler plate typescript for creating your own plugin but instead if you use a fork of the one you want to amend and then follow the rest of it to compile to a js file.

1 Like

Although I used to be a C/C++ programmer, this “use npm” is absolutely unclear for me.
I understand that this is easy for you - but for many people this is unclear.
How to use it?
Can I use it in Windows?

Again, this link is for trained people with an experience in devcontainers, npm etc.
This is not a TUTORIAL.
It is not a set of step-by-step instructions.
I know what is a manual, have written many of them.
I am not complaining, will have to learn it.

As this is all open-source and voluntary, people do their best on the level they work best. You are free and even thankfully invited to improve or create instructions/manuals :slight_smile: for the greater good of the community

Most probably I will propose my corrections as soon as I find out a better description…

So I am not a developer at all. However, using this blueprint instruction and looking at other people’s work and googling stuff, I have now written 2 cards to add to an integration that I help write ( which I also had to put some self learning effort into as I had never written python code either).

As @vingerha says, with open source software you have to put the effort in if you want something just like the thousands of people have done to develop this great application.

I was mearly trying to point you in the right direction to then allow you to Google the many many tutorials that exist on writing and compiling typescript as the thread seemed to be very confused about how you amend a plugin written in ts. You cannot expect everything is served on a plate to you or that people will put their time into something that you don’t seem willing to invest your own on.

Really?
Since I am not a native English person - it’s hard for me to explain you how you are wrong. In Russian I can explain things better.
Trust me, I am spending lots of my own time to explain people many things - here in Community too.
And I just named a fact - “that info is a bad tutorial and should be improved”. Period.
This story is not about your successful learning. Sorry for being straight.