Chart Window Menu and HTML Files :: What is Stored Within the Module?

Hello VASSAL Masters,

In my current module, I’d like a button on the Main Board that activates a pop-up window which contains the game’s rulebook. I see that you can largely do that with a Chart Window Menu. That’s really great, thanks for that feature.

But I’m curious: My rulebook will have lots of text and diagrams. I’d also like to break it up into chapters so the whole thing isn’t one enormous document that takes forever to scroll through. My knowledge of HTML docs is limited, but to have a web page that links to other local pages and contains pictures, wouldn’t that mean I’d need to have lots of additional HTML docs and JPEG images, all contained within a directory structure? It might look something like this:


And so on. All of those files and directories would be necessary to surf the webpage.

So when I put my HTML doc into my Chart Window Menu, I specify that main page, rulebook.html:

So here’s my real question: What is actually ingested into the .vmod module file? Is it just the main page only? Or all the supporting pages/images/directories? I’m guessing its the former.

This is a concern because my friends and I play this game using peer-to-peer connections. I’m used to sending them that latest module file via a shared cloud drive. I don’t want to send them a .vmod file plus a bunch of supporting HTML materials; they’ll just mess that up. Thank you!

1 Like

The VMOD file is really just a ZIP file with a different extension, so you can “look inside the zip” either by temporarily renaming it to a .ZIP to use your OS’ usual zip browsing tools, or use an app like 7-Zip to look inside. So in other words you could use that to experiment and see what’s getting put in. I think I normally drag the images I want in manually (and/or use images that are already in the images directory – those are available for any tag you put in your html)

I haven’t personally tried having one html reference another, but I think if you manually dragged in the html files you wanted, you might be able to reference one from the other – you’d have to experiment. The HTML engine embedded in Java Swing is a bit out of date, but it does a lot of stuff.

Meanwhile see the image below – notice that you can have multiple “Chart” pages in a “tabbed panel” underneath a Chart Window Menu, and those will appear as tabs along the top - similar to having multiple chapters.

Hope this helps! Brian


@Cattlesquat Thanks Brian,

So interesting! So the contents of my module in ZIP file form don’t look too intimidating at first glance:

I guess that the game’s metadata is saved in the “buildFile.xml” and “moduledata” files, and the images are obviously stashed in the “images” directory.

So in theory, I could create an “html” directory, put all my non-home HTML pages in there, and then figure out the links withing the code. I’ll try it, thank you!



For the benefit of more novice module builders, like me, please post what you learn about adding an “html” directory and linking to to the files therein from VASSAL.


@pawnpusher Sure thing, please give me a day or so? Very busy time at work. I’m happy to share what I’ve learned…

1 Like


Sorry for the delay! Okay, here’s my “Build a HTML Page” crash course. I haven’t worked out all the bugs, and I’m not an experienced HTML user, so please take this all with a grain of salt.

So I first started by writing up my HTML rulebook in Microsoft Word. As I wrote the text, I pasted in some JPEG images. When I liked how everything looked, I did a “Save As” and saved it as a webpage (.htm file)

MS Word left me with a new .htm file and then a new folder with a copy of all my images inside.

Next, I used a text editor (Windows Notepad, ugh) and edited the .html file a little. The VASSAL designer’s guide says your file can’t have any tags. I don’t know what a tag is, but I knew enough to delete everything in the file between these two tags:

...lots of stuff...
...lots of stuff...
...lots of stuff...

It was actually pretty big, so don’t worry if you feel like you’re deleting a big chunk of your doc.

Next, you have to do some surgery wherever the .htm file mentions your images. In my .htm file, I had an image named “image002.png” as a banner across the top of my file. In my editor, I searched for “image002.png” in my file, and found this:

</v:shape><![endif]--><![if !vml]><img width=556 height=84
src="C:/My Stuff/Rulebook/image002.png" v:shapes="Picture_x0020_6"><![endif]></span></p>

That’s a lot of HTML gobblygook, but the key thing is that full path to the image, in my case this:

C:/My Stuff/Rulebook/image002.png

It tells my computer to look in this location on my hard drive for this PNG file. As long as the file is in that location with that exact name, the picture will load.

The problem is, once you import your HTML file in to VASSAL, your VASSAL module can’t read files on your hard drive. It can only read files that were imported into the module. So you have to:

  • (A) Edit your .htm file to change the picture file location, and
  • (B) Hack your module file to insert the picture file(s)

The first step is easy. I just deleted the path name to the image file:

</v:shape><![endif]--><![if !vml]><img width=556 height=84
src="image002.png" v:shapes="Picture_x0020_6"><![endif]></span></p>

There. Its a pain to have to do this manually, but I don’t know how else to do it. Edit your HTML to do this for every image. (Yes, every image!)

Now for the ugly part. You’ll have to hack your .vmod file:

  • Click your .vmod file, and change the filename suffix from “.vmod” to “.zip” Windows will probably complain; don’t worry about it.

  • The icon for your module file will change to a WinZip icon. (I’m assume you’re a Windows user)

  • Now double-click the module file, and it should open with WinZip, or whatever you use to zip files. Do NOT extract anything! (The option in WinZip is: “No, don’t unzip anything”) You only want to edit the contents of the file.

  • Now you should be looking at the inside of your module file. Mine looked like this:

  • The “images” folder is what we’re looking for here. Drag-and-drop your HTML’s image files into this folder. So, in my case, I dropped a copy of “image002.png” into that folder.

  • When you have every last image file that your HTML file mentions inside images, you should be good to go. Save your work, then exit WinZip.

  • Change the filename suffix back from “.zip” to “.vmod”. The file icon should revert back to the VMOD logo.

Now you should be good to go. Your HTML file is now pointing to image files inside the internal “images” folder and not to a location on your hard drive. If all goes well, those images will be displayed in your rulebook.

1 Like

Wow! That looks involved. Thanks!

I strongly recommend using 7zip or any other archiving software that will open whatever file you want to with it, obviating the need for changing the module’s file extension and back.

When creating HTML with Microsoft Word (minor yikes), choose to save as “Web page, filtered”–which will strip out many of the Word-specific tags that aren’t required in valid HTML (I see some of this in what you pasted).

1 Like

THanks Joel! Good feedback, I’ll take it all to heart. :grinning: