[Script] Walls - SVG Path importer for dynamic lighting. -- Now with Advanced Fog of War Support!

Update v0.3.5 -- I've rewritten the heart of Walls to approximate Bézier Curves using Line Segments.  This fixes the bug were Advanced Fog of War could see through Walls created Dynamic Lighting lines. (Note that the nature of AFoW still permits showing some amount of a cell beyond DL lines.)  An added bonus is that the Line Segments are probably better performing for DL in general.  (Thanks Dylan G. and Rotimer)

Original post: https://app.roll20.net/forum/post/1337473/script-walls-svg-path-importer-for-dynamic-lighting-revisited

Prerequisites:

• The GIMP for creating and exporting the path SVG file for your map
• Post Processing Website for turning the SVG into commands to setup your walls.

You may be able to use Photoshop or Inkscape or some other program to generate the path SVG file. PM me if you'd like to try and I'll try to help you.

The Basic Process:

1. In The GIMP
   1. Load your map.
   2. Generate a path for your walls.
   3. Export your path to a file (SVG).
2. On the Post Processing Website
   1. Upload your SVG file from step 1.3
   2. Copy the output commands
3. In Roll20
   1. On the map layer, select the image that is your map
   2. Paste the commands into the chat and send them.
   3. Wait about a minute (feel free to watch the log, there are status messages so you know it's working).
4. Enjoy!

Detailed Instructions:

1. In The GIMP

1. Load your Map

From the menu, select File->Open...Browse to your map and click the Open button.

2. Generate a path for your walls and Export your path to a file

There are several ways of doing this, the methods I like best involve selecting an area and turning it into a path. I'll cover two ways of doing that, but feel free to do more advanced things or experiment further.

The Magic Wand Tool

Selections on a Grid

Select the Magic Wand tool from the toolbox. The Magic Wand creates a selection by flooding out from a point across all the pixels whose colors are "close" to the color of the pixel you clicked on. The "close" is controlled by the Threshold setting in the Tool Options dialog (From the menu, choose Windows->Dockable Dialogs->Tool Options). You can hold Shift to add several regions to your selection, if you have walls multiple dungeon levels on the same map, or areas accessed through some other means than a door. The image I'm using here has a light grey grid in the background, so I have to adjust the Threshold up quite a bit to flood past the grid and hit the walls. In this case, I used a value around 48. The mouse cursor shows where I clicked to get this selection Now that I have a selection for my walls, I need to adjust it a bit. I want some of the texture of the wall to show through, so I'm going to move the selection back into the walls a little ways. From the menu, choose Select->grow... For my map, 15px allows a nice bit of the cave wall to show.  You may need to play with the number a bit to get the effect you want. You can undo adjustments to the selection in the usual way (From the menu, choose Edit->Undo ) Now you need to turn this selection into a path. From the menu, choose Select->To PathNext, open up the Path dialog. From the menu, choose Windows->Dockable Dialogs->Path You should see the path you just created, named Selection. Right click it and choose Export Path... Save the path to a file you will be able to find. That's it for the Magic Wand method!

If your map is laid out on a grid and has lots of intervening details, it may be easier to just select the walls directly using the Rectangle Select Tool. You can turn on the grid to make this easier. (If you don't know the size of your grid, you can measure features of the map with the Measure Tool or just play with the size until it looks right.) From the menu, select Image->Configure Grid... Under Spacing, adjust the Width and Height to the correct size. The grid updates as you change it, so you should be able to match the grid on an image just by clicking the up and down arrows. (It may help to set the Foreground color to something especially distinct, like a bright red or blue.) If your map doesn't begin precisely on the grid, you can change the Offset in order to align it. If your map features a grid that isn't square, click the chain link (see mouse cursor in above image) below the Width and Height of Spacing or Offset in order to adjust Width and Height separately. Now that you have a grid you just need to select your walls. There are many ways of doing this, but I prefer to either select the individual walls with the Rectangle Select tool, or start with everything selected and deselect the rooms (On a Mac, hold down Command while selecting to subtract. On Windows, you can change to subtract mode in the Tool Options dialog. From the menu, choose Windows->Dockable Dialogs->Tool Options). Now that I have my selection for the walls, I need to adjust it a bit. I want some of the texture of the wall to show through, so I'm going to move the selection back into the walls a little ways.  In my example, I have selected the walls, but I think you get better effects from adjusting based on the floor. This is easily fixed by inverting the selection. From the menu, choose Select->Invert Now we can proceed as in the other example. From the menu, choose Select->grow... For my map, 5px allows a little of the dungeon wall to show. on this grid, 15px was more than I wanted to show, but use whatever you like. Now you need to turn this selection into a path. From the menu, choose Select->To Path Next, open up the Path dialog. From the menu, choose Windows->Dockable Dialogs->Path You should see the path you just created, named Selection. Right click it and choose Export Path... Save the path to a file you will be able to find. That's it for the Selections on a Grid method!

2. On the Post Processing Website

Follow the instructions on the website to upload your SVG file and click 'Parse'.

Click in the output box and copy the generated commands.

Now we'll take those commands to Roll20.

3. In Roll20

With the Walls Roll20 API script installed, you can add your walls to the map.

Start by selecting a map token on the map layer. The script will use that map for positioning and scaling. Because the commands all come through as separate api messages, it will have to do all of the work regardless of if you have selected a map, and then tell you afterwards that you didn't, so do yourself a favor and select one now. =D

Paste the commands into the chat and hit enter. You can watch the log file to make sure it's actually doing something.

Depending on the complexity of the Path, it can take a while to run. For the caves in the Magic Wand example above, it took about a minute to parse all the commands. This one took only a few seconds. Here is the view of the Dynamic Lights layer after running the commands. You can see the walls we added in red as well as their effects on the lights.

4. Enjoy!

Current Limitations:

• Only the SVG commands M, C, and Z are supported. These are the absolute position commands for moving to a point, drawing a curve, and closing a curve. I couldn't actually get The GIMP to export a path with anything but these 3 commands in it, so this is only a limitation if you are coming from some other source. If other commands become necessary, I'm happy to add them in. PM me with details if you need this.
• No support for Rotation, Flip Horizontal, Flip Vertical. If you need these operations, you're either on your own with adjusting the paths afterwards, or you need to do them in TheGIMP and then export the path.

Future Features:

• Support for Rotation -- this won't be terribly difficult, let me know if you need it and I'll prioritize it.
• Support for Flip Horizontal and Flip Vertical -- Also not too difficult
• Support for generating smaller path segments to allow post import customization.
• Support for applying a loaded path to a map if you forgot to select one.
• Support for color selection and stroke size. (You can do this on the webpage!)

GitHub: https://github.com/shdwjk/Roll20API/blob/master/W...

Support my work on

If you use my scripts, want to contribute, and have the spare bucks to do so, go right ahead. However, please don't feel like you must contribute just to use them! I'd much rather have happy Roll20 users armed with my scripts than people not using them out of some sense of shame. Use them and be happy, completely guilt-free!

Disclaimer: This Patreon campaign is not affiliated with Roll20; as such, contributions are voluntary and Roll20 cannot provide support or refunds for contributions.

Hmm.. looks like I took those log messages out...  It should come back after running for a bit.  If it seems to be taking too long, copy the commands into a text document, and paste in only 20 or so at a time, and see if that sorts it out.  

kk, I'll give it like 10 minutes and if it doesn't finish I'll do that thank you, sir.

No problem.  I'll see about adding some sort of feedback back in.

Sounds good I'll let you know if anything else weird happens. It's a wonderful script though I can see it saving tons of time. :)

Hi Aaron,

I'm working on adding support for your amazing script to my dungeon generator. I'm still working on it, but it's getting there:

(don't pay attention to the awful-looking dungeon above, it's just a mask)

In principle it's working well, but the large number of nodes I believe tends to lag large maps. It might be unfeasible, but have you considered adding an option to optimize the path for tile-perfect maps? (!walls begin --optimize ?)

For example moving all nodes to the nearest grid vertex and removing the ones that now form a path to that same point so only nodes forming a path further away remain active, eliminating duplicates here as well. To illustrate, it could end up looking like this:

I don't know if my explanation makes sense or if the idea is doable, but I thought I'd mention it and hear your thoughts.

Cheers!

This version actually does a little of that while converting curves to lines. It does not collapse line segments that overlap or are near to one another. I'm not sure how well it could do that with the limited information it has. It doesn't actually know about grid points as it scales based on the selected image which may not be aligned to the grid (and the grid might not be on). 

It seems like it would be easier for the source system to to optimize the path data before passing it to walls. 

Thanks for the reply Aaron, I'll see what I can do to minimize the points from my side before sending it to the script in that case.

Cheers!

Done!

Paths can now be generated and imported directly to Roll20 with your script: https://dungen.app/

Short video showing how to do it: https://youtu.be/aXI0m_Or6Hc

Sweet!!

That looks great!  Love what you did with the points on the external corners!

Thank you!