Changes in plugin files not showing


#1

Hi everyone!
I am trying to add a plugin to the 2D map. The idea is to use the surface model to recognize the different areas of a field according to their trees’ height. When I make it work I would love to add it to WebODM through a PR :smile:

So far I was able to copy the measurement plugin, but I can’t modify any of it, nor the original one. Neither the text nor the icon.

I am not a web expert, so I apologize if it’s a silly question: I realized that in order to see the changes I make in the dashboard I need to run:

./devenv.sh start

But I don’t know how to see the changes I make in the plugins (it has something to do with webpack I think?)

TL;DR: How do I see in the browser the changes I make in the plugin’s js and scss files?

Thank you very much in advance!


#2

Hey @julianpalladino that sounds like a cool plugin.

Currently, WebODM rebuilds a plugin SCSS/JS files (with webpack) at container startup (when the container is created). Also the plugin is loaded only when WebODM is restarted. So if you run ./devenv.sh start before you created the plugin, the plugin will not show up until you restart the enviroment (./devenv.sh stop && ./devenv.sh start). This will load the plugin, but will not automatically rebuild the SCSS/JS files with webpack (we should probably improve on that, I’ve opened a task to track this: https://github.com/OpenDroneMap/WebODM/issues/503)

Currently I like to simply start a bash console in the running container via:

docker exec -ti $(docker ps -q --filter "name=webapp") bash

Then from the container navigate to the plugin directory and run a webpack --watch task:

cd /webodm/plugins/myplugin/public
webpack --watch

Now changes should be reflected without needing to teardown the container every time.

I suppose this should be improved. :slight_smile:


#3

Hi @pierotofy, thank you so much! It works now. You’re the best! :smile:


#4

Hey @pierotofy , I have a little follow up question, if you dont mind. :slightly_smiling_face:

I would like to add some post-processing at node-ODM. So I would like to modify some files such as:

/WebOdm/nodeodm/external/node-OpenDroneMap/libs/Task.js
/WebOdm/nodeodm/external/node-OpenDroneMap/libs/processRunner.js
/WebOdm/nodeodm/external/node-OpenDroneMap/scripts/postprocess.sh

But I can’t see the changes I make on those files. How should I use webpack watch with those? I tried running webpack --watch on each of those files’ folders, but I get an error. I also tried on the main directory WebODM/ in order to “watch everything” but I can’t see the changes I make on those 3 files.

Sorry if it’s a silly question! I am researching how webpack works on node-ODM but I’m having a hard time understanding it.

Thanks a bunch!!


#5

No worries @julianpalladino, that’s a good question. :+1:

First of all, the code in nodeodm/external/node-OpenDroneMap is actually not being used when you process a dataset. The code is there just for unit testing.

Node-ODM runs on a separate docker container (see docker-compose.nodeodm.yml). You could make changes by doing:

git clone https://github.com/OpenDroneMap/node-OpenDroneMap
docker run -ti --rm -v $(pwd)/node-OpenDroneMap:/var/www -p 3000:3000 opendronemap/node-opendronemap

Then add a new processing node (using your network interface IP, such as 192.168.x.x, it will not work with localhost or 127.0.0.1) to do testing in WebODM.

Node-ODM is plain Node.js code, so you don’t need to use webpack to make changes (although you could use the nodemon program, look it up on Google, if you want to avoid restarting the container everytime you make a change).

Hope this helps!


#6

Amazing! Now I can modify the node-ODM code and see the changes in WebODM :+1:

Sorry for the delayed answer, Piero! These 2 weeks I had a couple of exams that didn’t let me focus on other important things… Like coding and drones! :smile:

Thank you very much again, and talk soon.