Create attractive VASL scenarios, with loads of useful information embedded to assist with game play.
https://vasl-templates.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
636 lines
41 KiB
636 lines
41 KiB
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title> VASL Templates </title>
|
|
<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="imageZoom/jquery.imageZoom.css" />
|
|
<link rel="stylesheet" type="text/css" href="main.css" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<noscript>
|
|
<div style="margin:1em;"> Javascript is disabled. Please enable it, then reload this page. </div>
|
|
</noscript>
|
|
|
|
<img id="loader" src='images/loader.gif' style="position:fixed;top:50%;left:50%;margin-top:-16px;margin-left:-16px;">
|
|
|
|
<!-- ----------------------------------------------------------------- -->
|
|
|
|
<div id="app-name" style="display:none;"> VASL Templates<span id="app-version"></span> </div>
|
|
|
|
<div id="helptabs" style="display:none;">
|
|
|
|
<ul>
|
|
<li> <a href="#helptabs-installation">Installation</a>
|
|
<li> <a href="#helptabs-quickstart">Quick Start</a>
|
|
<li> <a href="#helptabs-userguide">User Guide</a>
|
|
<li> <a href="#helptabs-chapterh">Chapter H</a>
|
|
<li> <a href="#helptabs-templatepacks">Template packs</a>
|
|
<li> <a href="#helptabs-fordevelopers">For developers</a>
|
|
<li> <a href="#helptabs-license">License</a>
|
|
</ul>
|
|
|
|
<div id="helptabs-content">
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<div id="helptabs-installation">
|
|
|
|
<p> <em>VASL Templates</em> is a web application that runs in a browser, but since it hasn't been set up as a web site on the public internet, you will need to run the web server yourself.
|
|
<p> As a convenience, a program is provided that bundles the web server together with an embedded browser, so that it runs as if it were a normal desktop application.
|
|
|
|
<a name="install-windows"></a>
|
|
<h2> Installing on Windows </h2>
|
|
|
|
<p> If you're using Windows, you should get the pre-built version from <a href="https://github.com/pacman-ghost/vasl-templates/releases">Github</a>, unpack it somewhere, then run <tt>vasl-templates.exe</tt>. Note that it can be a bit slow to start, so please give it a few seconds.
|
|
<p> If the program won't start because a DLL is missing from your computer, install the <a href="https://www.microsoft.com/en-in/download/details.aspx?id=48145">VC2015 runtime</a> (get the 32-bit version, <tt>vc_redist.x86.exe</tt>, even if you are running 64-bit Windows).
|
|
<p> If you don't see anything in the main window, check the notes below about configuring OpenGL.
|
|
|
|
<a name="run-from-source"></a>
|
|
<h2> Running from source </h2>
|
|
|
|
<p> If you're on a Mac or Linux, you can run the program directly from the source code. Get a copy from <a href="https://github.com/pacman-ghost/vasl-templates">Github</a> in the usual way, by <tt>git clone</tt>'ing it, or downloading a ZIP and unpacking it somewhere.
|
|
|
|
<p> The web server was written and tested using Python 3.8.7, but it doesn't do anything particularly funky, so any recent version of Python <em>should</em> work.
|
|
|
|
<p> While not essential, it is <em>strongly</em> recommended that you set up a <a href="https://virtualenv.pypa.io/en/stable/">virtual environment</a> first. Then, install the requirements:
|
|
<div class="code">
|
|
pip install .[gui]
|
|
</div>
|
|
|
|
<h4> Running the desktop application </h4>
|
|
|
|
<p> If you're on Windows, the Qt runtime will have been installed as part of PyQt5 (when you did the <tt>pip install</tt> above), but if you're in a virtual environment and you're getting <em>"DLL load failed"</em> errors, this is due to a problem with the way Python sets up the virtualenv. In the virtualenv's <tt>scripts/</tt> sub-directory, there should be <em>two</em> Python DLL's, so if you're missing <tt>python3.dll</tt>, copy it over from the Python installation the virtualenv was created from, and you should be good to go.
|
|
|
|
<p> If you're on Linux, you <em>may</em> need to install Qt 5.15.4. On Fedora 33, running the "gui" install above should install everything you need.
|
|
|
|
<p> Then, just run the <tt>vasl-templates</tt> command.
|
|
|
|
<div class="hint">
|
|
<a name="selenium-fix"></a>
|
|
<img src="images/selenium-fix.png" class="preview" style="float:right;width:250px;">
|
|
If you're running from source on Windows, you may see a black DOS box appear temporarily when performing certain actions (e.g. updating a VASL scenario). This is because <em>vasl-templates</em> runs a webdriver as part of its processing, which is a CLI program, and so the DOS box appears. Unfortunately, there's no way to control this in the <em>vasl-templates</em> code, but it can be disabled in the webdriver code itself. In your virtualenv, open the file <tt>Lib/site-packages/selenium/webdriver/common/service.py</tt>, and in the call to <tt>subprocess.Popen()</tt>, add a new <tt>creationflags = 0x8000000</tt> parameter.
|
|
</div>
|
|
|
|
<h4> Running just the web server </h4>
|
|
|
|
<p> The simpler option is to just run the web server:
|
|
<div class="code">
|
|
python vasl_templates/webapp/run_server.py
|
|
</div>
|
|
and then connect to it in a browser at <tt>http://localhost:5010</tt>.
|
|
|
|
<a name="run-docker"></a>
|
|
<h2>Running a Docker container</h2>
|
|
|
|
<p> If you have Docker installed, the webapp can be run in a container e.g.
|
|
<div class="code">
|
|
./run-container.sh \
|
|
--port 5010 \
|
|
--vassal ~/vassal-3.5.5/ \
|
|
--vasl ~/vasl/vasl-6.6.2.vmod \
|
|
--vasl-extensions ~/vasl/extensions/ \
|
|
--boards ~/vasl/boards/ \
|
|
--chapter-h ~/vasl/chapter-h/ \
|
|
--user-files ~/vasl/user-files/
|
|
</div>
|
|
|
|
<p> Then open a browser and connect to the webapp at <tt>http://localhost:5010</tt>.
|
|
<div class="warning"> If you have SElinux enabled, it may prevent the container from accessing files on the host. Access can be allowed like this:
|
|
<div class="code"> chcon -Rt svirt_sandbox_file_t /home/pacman-ghost/vasl/ </div>
|
|
</div>
|
|
|
|
<a name="install-webdriver"></a>
|
|
<h2>Installing a webdriver</h2>
|
|
|
|
<p> Some features require a <em>webdriver</em> to be installed. You can use either:
|
|
<ul>
|
|
<li> <a href="https://github.com/mozilla/geckodriver/releases"><tt>geckodriver</tt></a> (requires Firefox to be installed)
|
|
<li> <a href="http://chromedriver.chromium.org/downloads"><tt>chromedriver</tt></a> (requires Chrome to be installed)
|
|
</ul>
|
|
|
|
<p> Unpack the download ZIP file somewhere (it will contain a single executable file), and configure the location in the <em>Server Settings</em> dialog (or set <tt>WEBDRIVER_PATH</tt> in <tt>site.cfg</tt>, if you are running from source).
|
|
|
|
<a name="gui-problems"></a>
|
|
<h2> I'm having problems running the desktop application </h2>
|
|
|
|
<p> The desktop application uses OpenGL for the embedded browser, so if you are getting error messages about OpenGL, or the main window is not displaying properly, you can try configuring OpenGL to work in a different way.
|
|
<p> Create a file called <tt>debug.cfg</tt> in <tt>$/config/</tt> (the same directory that contains a file called <tt>app.cfg</tt>) that looks like this:
|
|
<div class="code">
|
|
[Debug]
|
|
OPENGL_TYPE = AA_UseSoftwareOpenGL
|
|
</div>
|
|
Other possible values are <tt>AA_UseDesktopOpenGL</tt> and <tt>AA_UseOpenGLES</tt>.
|
|
|
|
<p> If you're on Windows, <a href="https://doc.qt.io/qt-5/windows-requirements.html">this page</a> might also help.
|
|
|
|
<p> In the worst case, you can set up your <tt>debug.cfg</tt> file like this:
|
|
<div class="code">
|
|
[Debug]
|
|
DISABLE_WEBENGINEVIEW = 1
|
|
</div>
|
|
The program will then not attempt to create the embedded browser, and will just start the web server, which you can then connect to in an external browser at <tt>http://localhost:5010</tt>.
|
|
|
|
</div>
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<div id="helptabs-quickstart">
|
|
|
|
<a name="qs-configure"></a>
|
|
<h2 style="margin-top:0;">
|
|
<img src="images/quick-start/settings.png" class="preview" style="float:right;width:400px;">
|
|
Configuring the program
|
|
</h2>
|
|
|
|
<p> The first thing we want to do is configure the program.
|
|
|
|
<p> Choose <em>Settings</em> from the <em>File</em> menu and configure the highlighted settings. As a guide, here are some example settings:
|
|
<table class="settings">
|
|
<tr> <td class="key"> VASSAL installation: </td> <td class="val"> <nobr>C:\Program Files\VASSAL-3.5.5\</nobr>
|
|
<tr> <td class="key"> VASL module: </td> <td class="val"> <nobr>C:\bin\vasl\vasl-6.6.2.vmod</nobr>
|
|
<tr> <td class="key"> VASL extensions: </td> <td class="val"> <nobr>C:\bin\vasl\extensions\</nobr>
|
|
<tr> <td class="key"> VASL boards: </td> <td class="val"> <nobr>C:\bin\vasl\boards\</nobr>
|
|
<tr> <td class="key" valign="top"> Java: </td> <td class="val"> <nobr>C:\Program Files\VASSAL-3.5.5\jre\bin\java.exe</nobr>
|
|
<div class="hint"> Leave this field blank to use the Java that comes with VASSAL (Windows only), or on your PATH. </div>
|
|
<tr> <td class="key"> Web driver: </td> <td class="val"> <nobr>C:\bin\geckodriver.exe</nobr>
|
|
</table>
|
|
For the webdriver, download and unpack one of the following:
|
|
<ul>
|
|
<li> <a href="https://github.com/mozilla/geckodriver/releases">geckodriver</a> (you must have Firefox installed)
|
|
<div class="note"> Make sure to download the correct version (32- or 64-bit) for your browser (check the About box). </div>
|
|
<li> <a href="http://chromedriver.chromium.org/downloads">chromedriver</a> (you must have Chrome installed)
|
|
<div class="note"> Make sure to download the version that corresponds to the version of Chrome you are running. </div>
|
|
</ul>
|
|
|
|
<a name="qs-setup-scenario"></a>
|
|
<h2> Setting up a scenario </h2>
|
|
|
|
<p> <img src="images/quick-start/scenario-card.png" class="preview" style="float:right;">
|
|
We'll set up <em>The Streets Of Stalingrad</em>, and the scenario card tells us that this is played on Board 1, so fire up VASL, add this board, then save the scenario somewhere (e.g. <tt>streets-of-stalingrad.vsav</tt>).
|
|
<br clear=all>
|
|
<br>
|
|
|
|
<p> <img src="images/quick-start/load-scenario.png" class="preview" style="float:left;">
|
|
In <em>VASL Templates</em>, open the save file for this scenario (<tt>The Streets Of Stalingrad (Scenario C).json</tt>; you'll find it in the <tt>examples/</tt> directory).
|
|
<p> Browse through the tabs, and you'll see all the scenario details e.g. Victory Conditions, SSR's, setup instructions.
|
|
<p> Click on the info icon in the top-right corner of the <em>Scenario</em> panel to get more detailed information about the scenario.
|
|
<div class="info" style="float:right;"> This information is provided by the <a href="https://aslscenarioarchive.com">ASL Scenario Archive</a>. </div>
|
|
<br clear=all>
|
|
<br>
|
|
|
|
<p> <img src="images/quick-start/update-scenario.png" class="preview" style="float:right;">
|
|
We now want to create labels in the VASL scenario for all this information. Choose <em>Update VASL scenario</em> from the menu, and select the VASL scenario file you created earlier (e.g. <tt>streets-of-stalingrad.vsav</tt>). The program will now launch VASSAL to do the work, so be patient since it may take a minute or two, and you may see VASSAL momentarily appear on-screen.
|
|
<p> Once it's done, save the updated <tt>.vsav</tt> file somewhere. Go back to VASSAL, open the updated <tt>.vsav</tt> file, and you will see all the labels with the scenario information: <br>
|
|
<img src="images/quick-start/updated-scenario.png" class="preview" style="margin:0.5em 0 0 2em;"> <br>
|
|
In particular, note the data tables for the vehicles, which contain useful information that you can refer to during your game.
|
|
|
|
<a name="qs-include-pictures"></a>
|
|
<h2> Including pictures in the labels </h2>
|
|
|
|
<p> <img src="images/quick-start/user-settings.png" class="preview" style="float:right;">
|
|
We can pretty-up the labels by including pictures in them. Open the <em>User Settings</em> dialog and turn on the <em>Images in scenarios</em> settings.
|
|
<p> Update the VASL scenario again (as above), open it again in VASSAL, and you will see that the labels now include nationality flags, and the vehicle data tables show the counter images: <br>
|
|
<img src="images/quick-start/images-in-labels.png" class="preview" style="margin:0.5em 0 0 2em;">
|
|
<div class="warning"> Because images can't be stored inside a VASL scenario file, if you turn these options on, you must choose where VASSAL will get the images from:
|
|
<ul>
|
|
<li> <span style="border-bottom:1px solid #ccc;">From this program</span>: the <em>VASL Templates</em> program must be running before you open the scenario in VASSAL. If you are playing with someone online, they must have the program running as well.
|
|
<li> <span style="border-bottom:1px solid #ccc;">From the internet</span>: you must have a working internet connection when you open the scenario in VASSAL. There will be a short delay when opening the scenario, as VASSAL downloads the images.
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<div id="helptabs-userguide">
|
|
|
|
<p> <img src="images/hill-621.png" class="preview" style="width:20em;float:right;">
|
|
<a href="https://vasl-templates.org"><em>VASL Templates</em></a> makes it easy to set up attractive <a href="http://vasl.info">VASL</a> scenarios, with loads of useful information embedded to assist with game play.
|
|
<p> We'll show how by walking through a setup of everyone's favorite scenario, <em>Hill 621</em>. Click on the screenshot to the right to see the finished scenario.
|
|
|
|
<div class="info"> You can find more examples <a href="https://github.com/pacman-ghost/vasl-templates/tree/master/examples/">here</a>, with files that you can load into the program, together with the generated VASL scenarios. </div>
|
|
|
|
<a name="add-scenario-details"></a>
|
|
<h2> Adding the scenario details </h2>
|
|
|
|
<p> <img src="images/asa-search.png" class="preview" style="width:30em;float:left;">
|
|
We start by entering the basic scenario details, such as its name, location and date. The easiest way to do this is by searching the <a href="https://aslscenarioarchive.com">ASL Scenario Archive</a>.
|
|
<p> Click on the search button, enter the name of the scenario, and once you've found the correct one, click on <em>Import</em> to transfer the details into <em>VASL Templates</em>.
|
|
<p> If the <em>Downloads</em> button is enabled, this means that somebody has contributed the entire scenario setup and/or VASL save file, and these are available for download.
|
|
<div class="hint" style="float:right;width:30em;"> The scenario card may list special rules and errata, and have screenshots of the map setup, all of which will help you set up your scenario correctly. </div>
|
|
<br clear="all">
|
|
|
|
<p> <img src="images/draggable-overlays.png" class="preview" style="width:20em;float:right;">
|
|
Once the scenario details are in, click on one of the <em>Snippet</em> buttons, and the program will generate an HTML snippet and put it into your clipboard, which you can then copy into a VASL label.
|
|
<p> To create a label in VASL, open the <em>Draggable Overlays</em> window, and drag a label onto the main window.
|
|
<div class="hint"> Make sure to use the <em>"Label (no background)"</em> label, as indicated in the screenshot, since the others may not work properly! </div>
|
|
<p> Labels come in two parts, which are accessible via the right-click menu, or press Ctrl-L and Ctrl-2 to access each one. I always just use the first line, so I delete everything in line 2.
|
|
<p> The thick black box indicates that the label is selected. If you click elsewhere on the main window, it goes away, and the label will remain in place even if you click on it, or try to drag it. To select it again, Shift-click somewhere in the box, and you will be able to move it around, or edit it. This can sometimes be difficult to find, since it's not visible on-screen, but it will be in the middle (vertically and horizontally) of the label.
|
|
<br clear="all">
|
|
|
|
<p> <img src="images/scenario-vasl.png" class="preview" style="width:20em;float:left;">
|
|
Once you have a label in VASL, copy the HTML snippet generated above into it.
|
|
<p> Repeat the process to add the ELR and SAN for both players, and you will now have two labels that you can position in the VASL scenario.
|
|
|
|
<br><br>
|
|
|
|
<h4 style="clear:none;"> Automatically adding labels to the VASL scenario </h4>
|
|
<p>Once you've got the hang of adding labels to your VASL scenario, you can get <em>VASL Templates</em> to do it automatically for you. After entering all the scenario details, choose <em>Update VASL scenario</em> from the menu, select the <tt>.vsav</tt> file you want to update, and all the labels will be inserted into the scenario (or updated, if they're already there).
|
|
<div class="info"> VASSAL will be run to update the scenario, so you may see it temporarily appear on-screen. The process can be a little slow, and may take several minutes to complete. </div>
|
|
|
|
<br clear="all">
|
|
|
|
<a name="add-vc-ssr"></a>
|
|
<h2> Adding victory conditions and SSR's </h2>
|
|
|
|
<p> <img src="images/vc.png" class="preview" style="width:20em;float:left;">
|
|
Adding the scenario's victory conditions is straight-forward. We're generating <em>HTML</em> snippets, so we can type in things like <tt>&ge;</tt> to get <tt>≥</tt> in the VASL label.
|
|
<img src="images/vc-vasl.png" class="preview" style="display:block;width:15em;margin:0.5em 0 0 2em;">
|
|
<p>
|
|
<p> Note that we explicitly set a width for the snippet (240px), which caused the text to wrap onto a new line. You could also do this by manually inserting <tt><br></tt> tags where you want line-breaks.
|
|
<br clear="all">
|
|
|
|
<p> <img src="images/add-ssr.png" class="preview" style="width:15em;float:right;">
|
|
To add SSR's, click on the green plus button in the SSR section and add the SSR text.
|
|
<p> Click on the OK button when you're done, or press Ctrl-Enter.
|
|
<p> If you want to go back and change the text of an SSR, just double-click on it.
|
|
<br clear="all">
|
|
|
|
<p> <img src="images/ssr.png" class="preview" style="width:25em;float:right;">
|
|
Once they're all in, click on the <em>Snippet</em> button to get a nicely formatted bullet list.
|
|
|
|
<a name="add-ob"></a>
|
|
<h2> Adding each player's OB </h2>
|
|
|
|
<p> <img src="images/ob_vehicles.png" class="preview" style="width:20em;float:right;">
|
|
Adding each vehicle and ordnance for each player is just a matter of selecting them from a list, and the generated HTML snippet will produce a table of information for each one (see right). Very handy if you have a menagerie of armor and you're, say, looking for something that can fire Smoke.
|
|
<p> The scenario date is taken into account when generating these tables e.g. APCR for the Pz IVH is A5<sup>2</sup>, but since the program knows the scenario is set in 1944, it just shows A5. Had the scenario been set in 1941, it wouldn't be shown at all.
|
|
|
|
<div class="hint"> It's also possible to include Chapter H notes in your scenarios, although you will need to <a href="#" onclick="select_tab('chapterh');">set some things up</a> first. </div>
|
|
|
|
<p> <img src="images/edit-vehicle.png" class="preview" style="width:15em;float:left;">
|
|
Double-click on an entry to make changes to it e.g. because an SSR changes its capabilities, or you'd like to add a note.
|
|
<br clear="all">
|
|
|
|
<p> <img src="images/ob_setup.png" class="preview" style="width:15em;float:left;">
|
|
We can also add ad-hoc notes describing where and how units should setup.
|
|
<p> Click on the icon in each note to generate its snippet, or Shift-click on it.
|
|
<br clear="all">
|
|
|
|
<p> <img src="images/pf.png" class="preview" style="width:15em;float:right;">
|
|
Finally, if special support weapons such as PF and BAZ are in play, snippets are available with information for them. As with vehicles/ordnance, they are date-aware and update themselves accordingly.
|
|
|
|
<h4> Analyzing a VASL scenario </h4>
|
|
|
|
<p> If you have already set up the VASL scenario, you can choose <em>Analyze VASL scenario</em> from the menu, and the program will scan the <tt>.vsav</tt> file for vehicles and ordnance, and automatically create entries for each one. Only counters from the two configured nationalities will be imported, so make sure you set these first.
|
|
|
|
<a name="extras-templates"></a>
|
|
<h2> Extra templates </h2>
|
|
|
|
<p> <img src="images/extras-templates.png" class="preview" style="width:15em;float:right;">
|
|
<p> Extra templates are also available to generate other kinds of snippets e.g. to keep track of how many PF shots you have left, or to generate a shaded box that can be inserted behind the Turn Track to indicate an LV Hindrance.
|
|
|
|
<a name="user-images"></a>
|
|
<h2> Including your own images </h2>
|
|
|
|
<p> <img src="images/user-file.png" class="preview" style="width:300px;float:right;">
|
|
You can also include your own images in scenarios e.g. the picture from the scenario card, or CG reinforcement tables.
|
|
|
|
<p> In the <em>Server Settings</em> dialog, configure the directory where you keep your files, then in a template, use <tt>{{USER_FILES}}</tt> at the start of an image URL e.g.
|
|
<div class="code">
|
|
<img src="{{USER_FILES}}/hill-621.png">
|
|
</div>
|
|
You can add a <tt>scaling</tt> parameter to resize the image (as a percentage of the original) e.g.
|
|
<div class="code">
|
|
<img src="{{USER_FILES}}/hill-621.png?scaling=50">
|
|
</div>
|
|
or a <tt>width</tt> and/or <tt>height</tt> parameter to explicitly set the image size (in pixels).
|
|
|
|
<div class="warning"> If you use this feature in your scenarios, the images won't be available if you share the VASL scenario with someone else (since the files are only on your computer). However, if you upload them to a web server on the internet, you can configure the <em>"User files"</em> directory as a URL, and any image URL's that use <tt>{{USER_FILES}}</tt> will now get them from there. </div>
|
|
|
|
<div class="info"> VASSAL caches images (which can't be turned off), so if you're making changes that don't seem to be having any effect, try restarting VASSAL. </div>
|
|
|
|
<div class="warning"> You should avoid having spaces in image URL's, since VASSAL seems to have problems with them. </div>
|
|
|
|
<a name="workflow"></a>
|
|
<h2> Suggested workflow </h2>
|
|
|
|
<p> <ul>
|
|
<li> Set up the VASL scenario, with the boards and counters.
|
|
<li> In <em>VASL Templates</em>, search the ASL Scenario Archive, and use it to get your scenario configuration started.
|
|
<li> Enter the other scenario details e.g. Victory Conditions, SSR's and setup instructions.
|
|
<li> Analyze the VASL scenario, to automatically create entries for vehicles and ordnance.
|
|
<li> Update the VASL scenario, to automatically create labels for all the scenario details and vehicles/ordnance.
|
|
</ul>
|
|
|
|
<p> <img src="images/asa-upload.png" class="preview" style="width:300px;float:left;">
|
|
When the scenario has been completed and checked, you can contribute it back to the community by uploading it to the <a href="https://aslscenarioarchive.com">ASL Scenario Archive</a>, where it will be made available to everyone for download.
|
|
<p> Just add your VASL scenario file (<tt>.vsav</tt>), a screenshot will be automatically generated (or you can add your own), then click <em>Upload</em>.
|
|
<div class="info" style="float:right;">For copyright reasons, some details will be removed <br> from the upload e.g. the Victory Conditions and SSR's. </div>
|
|
<br clear="all">
|
|
|
|
<a name="lfa"></a>
|
|
<h2> Analyzing log files </h2>
|
|
|
|
<p> <img src="images/lfa.png" class="preview" style="width:400px;float:right;">
|
|
As an added bonus, <em>VASL Templates</em> can also analyze VASL log files, to generate a report on how the game went. Choose <em>Analyze log files</em> from the menu, and add one or more VASL log files.
|
|
<p> You will be shown a report showing distribution graphs for the dice, and how the dice went over time. You can filter by the type of dice roll (e.g. only Morale Checks or To Kill rolls), as well as change the window size for moving averages. You can even download the data as a CSV, for further analysis!
|
|
<p> Click on the flaming dice to see how many 2's and 12's each player rolled, as well as Sniper Activations. <br>
|
|
<img src="images/lfa-2s-and-12s.png" class="preview" style="margin:0.5em 0 0 2em;width:200px;">
|
|
<p> And if there is more than one log file, you can also drill down into each individual session: <br>
|
|
<img src="images/lfa-files.png" class="preview" style="margin:0.5em 0 0 2em;width:200px;">
|
|
<p> <img src="images/lfa-hotness.png" class="preview" style="width:300px;float:right;">
|
|
The report also calculates <em>"hotness"</em>, which is a measure of how hot your dice were. The more low rolls you make, the higher your hotness score, while rolling high makes it go down.
|
|
<p> So if you lose, you now have some hard numbers to back you up when you blame the dice <img src="images/smilies/cool.gif">
|
|
|
|
<br clear="all">
|
|
|
|
<a name="configuration"></a>
|
|
<h2> Configuring the program </h2>
|
|
|
|
<img src="images/user-settings.png" class="preview" style="width:300px;float:right;">
|
|
|
|
<h4 style="clear:none;"> VASL user name</h4>
|
|
<p> Configure your VASL user name here, to have it always shown first when analyzing VASL log files.
|
|
|
|
<h4 style="clear:none;"> HTML snippet font </h4>
|
|
<p> This setting lets you change the font, and its size, used in VASL labels.
|
|
|
|
<h4 style="clear:none;"> Auto-create <em>National Capabilities</em> labels </h4>
|
|
<p> Turn this on to automatically create labels that list the national capabilities for both sides when updating a VASL scenario.
|
|
|
|
<h4 style="clear:none;"> Hide unavailable multi-applicable notes </h4>
|
|
<p> Turn this on to completely omit vehicle/ordnance multi-applicable notes that haven't been set up (instead of showing them as <em>"unavailable"</em>).
|
|
|
|
<h4 style="clear:none;"> Confirm settings before updating scenarios </h4>
|
|
<p> Turn this on to show the <em>User Settings</em> dialog before updating a VASL scenario. This is useful if you are often creating VASL setups with different settings, and gives you a chance to make sure they are correct.
|
|
|
|
<br><br>
|
|
|
|
<h4> Images in scenarios </h4>
|
|
<p> Images cannot be stored in a VASL scenario file, so they must stored elsewhere, which means that VASL needs to be told where to get them from:
|
|
<ul style="font-size:90%;">
|
|
<li> <em>From this program</em>: the <em>VASL Templates</em> program must be running before you open the scenario in VASSAL. If you are playing with someone online, they must have the program running as well.
|
|
<li> <em>From the internet</em>: you must have a working internet connection when you open the scenario in VASSAL. There will be a short delay when opening the scenario, as VASSAL downloads the images.
|
|
</ul>
|
|
|
|
<h4> Show Chapter H vehicle/ordnance notes as images </h4>
|
|
<p> If you have set up the <a href="#" onclick="select_tab('chapterh');">Chapter H vehicle/ordnance notes</a> as HTML, it may not be possible to get the layout you want, since VASSAL's HTML engine is very old and doesn't support many HTML/CSS features. To work around this, this option tells <em>VASL Templates</em> to render the HTML itself (using a modern browser) and send it as an image to VASSAL, which is slower but gives better results.
|
|
<p> To optimize this process, the generated images are cached, and if you want to keep these cached images between sessions, configure <tt>VO_NOTES_IMAGE_CACHE_DIR </tt> in your <tt>site.cfg</tt> file. To pre-load this cache with all the available images, open <tt>http://localhost:5010/load-vo-notes-image-cache</tt> in a browser.
|
|
|
|
</div>
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<div id="helptabs-chapterh">
|
|
|
|
<p> It is possible to include Chapter H notes in your VASL scenarios, but since this is copyrighted material, the data files are not included in releases, and you will need to set them up yourself.
|
|
|
|
<a name="setup-chapter-h"></a>
|
|
<h2> Setting up the Chapter H data files </h2>
|
|
|
|
<p> Unpack this <a href="https://github.com/pacman-ghost/vasl-templates/tree/master/chapter-h/">ZIP file</a> somewhere, and configure the location in the <em>Server Settings</em> dialog (or the <tt>CHAPTER_H_NOTES_DIR</tt> setting in <tt>site.cfg</tt>, if you are running from source).
|
|
|
|
<p> The ZIP file contains placeholder files for the Chapter H vehicle/ordnance notes and multi-applicable notes, so all you have to do is update these files with the real content.
|
|
|
|
<p> Multi-applicable notes are stored as HTML, so for example, for German Multi-Applicable Vehicle Note A, change the file <tt>german/vehicles/a.html</tt> as follows:
|
|
<div class="code">
|
|
<p> MA and CMG (if so equipped) have AA capability - signified by "MA:AA" being printed on the counter.
|
|
</div>
|
|
<div class="info"> Because Windows has case-insensitive filenames, the convention is that Multi-Applicable Note "A" is stored in a file called <tt>a.html</tt>, while Multi-Applicable Note "a" is stored in <tt>a_.html</tt> (with a trailing underscore). </div>
|
|
|
|
<p> <img src="images/chapter-h/psw-234.1-note74.png" style="float:left;" class="preview"> The vehicle and ordnance notes themselves are stored as image files, so you need to scan your Chapter H pages, and crop each individual note. For example, an image for the German PSW 234/1 can be seen to the left. Right-click on it, download it, and save it on top of <tt>german/vehicles/74.png</tt> (because it's note #74).
|
|
<br clear="all">
|
|
|
|
<div class="hint"> It is also possible to store the vehicle/ordnance notes as HTML, and while it is significantly more work to set things up this way, it gives much better results. Using the placeholder files from the ZIP above, wherever there is a <tt>.png</tt> file, rename it to have a <tt>.html</tt> extension, and then put the HTML in there.
|
|
<p> Note that the HTML engine used by VASSAL is ancient and doesn't support floating images, which is needed to format this content in the same way as the ASLRB. To work around this, an option is provided (in the User Settings) to show these vehicle/ordnance notes as images. If this is enabled, the vehicle/ordnance notes will be rendered by the <em>VASL Templates</em> program (using a modern browser), and sent to VASSAL as an image, which is slower but gives the expected layout. If you don't use images in your HTML, you can leave this option disabled, and the raw HTML will be inserted into the VASL scenario, where it will be displayed much more quickly by VASSAL.
|
|
</div>
|
|
|
|
<a name="add-chapter-h-labels"></a>
|
|
<h2> Adding Chapter H notes to your VASL scenario </h2>
|
|
|
|
<p> <img src="images/chapter-h/ui.png" style="float:right;" class="preview"> Restart the <em>VASL Templates</em> program, and add a PSW 234/1 to the German OB. You will see some changes in the UI (see screenshot).
|
|
|
|
<p> In the bottom-right, there are new controls for generating an HTML snippet for the multi-applicable notes. Click on the <em>Snippet</em> button, create a label in a VASL scenario, and you see the multi-applicable notes for the vehicles in the OB (the program will only include those that are needed). This content was taken from the <tt>a.html</tt> file you set up earlier.
|
|
|
|
<p> <img src="images/chapter-h/ma-notes-snippet.png" style="margin-left:2em;" class="preview">
|
|
|
|
<br clear="all">
|
|
|
|
<p> Each individual vehicle and ordnance can also now have its own snippet button. Click on the one for the PSW 234/1, transfer the snippet to your VASL scenario, and you will see the image for Note 74 you set up earlier.
|
|
<p> <img src="images/chapter-h/notes-snippet.png" style="margin-left:2em;" class="preview">
|
|
|
|
<div class="hint"> Depending on how you scanned the Chapter H pages, the image may not be the right size, so you can set a scaling factor for these images in the Server Settings dialog. As a guide, I scanned my ASLRB at 300dpi, and a scaling factor of 40% produced images that fit in with the rest of the scenario. However, if you have a lot of these images, there will be a noticeable delay when loading the scenario in VASSAL (because the program has to resize all the images), so you will be better off shrinking the images yourself, then setting the scaling factor to 100, so that no resizing needs to be done. </div>
|
|
<div class="info"> VASSAL caches images (which can't be turned off), so if you're making changes that don't seem to be having any effect, try restarting VASSAL. </div>
|
|
|
|
<a name="cheat-sheet"></a>
|
|
<h2> Creating a scenario reference sheet </h2>
|
|
|
|
<p> If you Shift-click on the Snippet buttons, an <em>image</em> of the snippet will be copied to the clipboard, instead of the raw HTML snippet. You can then copy these into Microsoft Word (or any other editor that can accept images), and print it out, to get a reference sheet with all the Chapter H notes for a scenario. Very handy, even if you're not using VASL!
|
|
<div class="info"> This feature requires a <em>webdriver</em> to be installed. </div>
|
|
|
|
</div>
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<div id="helptabs-templatepacks">
|
|
|
|
<h2 style="margin-top:0;"> How template files work </h2>
|
|
|
|
<p> The HTML snippets are generated from <em>template files</em>, which are simply text files that contain the HTML you want to insert into the VASL labels, but with placeholders for the scenario name, victory conditions, each player's OB, etc. The user enters these details into the program, and when they want to generate a snippet, all the placeholders are replaced in the template with the real values, thus producing an HTML snippet specific to that scenario.
|
|
|
|
<p> The template files can be found in <tt>$/data/default-template-pack/</tt> (where <tt>$</tt> is where you've installed the program).
|
|
|
|
<a name="template-conditionals"></a>
|
|
<h2> Placeholders and template conditionals </h2>
|
|
|
|
<p> <img src="images/ssr-template.png" class="preview" style="width:20em;float:right;">
|
|
We'll take a look at the <tt>ssr.j2</tt> file, which is used to generate snippets for the SSR's.
|
|
|
|
<p> Open the file in a text editor (if you're on Windows, you will probably need to right-click on the file and choose <em>Open with...</em>), and you'll see something like this:
|
|
<div class="code">
|
|
<html> <!-- vasl-templates:id {{SNIPPET_ID}} -->
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
{{CSS:common}}
|
|
ul#ssr { padding: 0 5px 0 13px ; }
|
|
ul#ssr li { margin-top: 2px ; }
|
|
</style>
|
|
</head>
|
|
|
|
<table style="
|
|
{%if SSR_WIDTH%} width: {{SSR_WIDTH}} ; {%endif%}
|
|
">
|
|
|
|
<tr>
|
|
<td style="
|
|
background: #f0f0f0 ;
|
|
border-bottom: 1px solid #c0c0c0 ;
|
|
padding: 2px 5px ;
|
|
font-size: 105% ; font-weight: bold ;
|
|
">
|
|
Scenario Special Rules
|
|
|
|
<tr>
|
|
<td>
|
|
<ul id="ssr">
|
|
{%for ssr in SSR%} <li> {{ssr}} {%endfor%}
|
|
</ul>
|
|
|
|
</table>
|
|
|
|
</html>
|
|
</div>
|
|
|
|
<p> The template looks like normal HTML, but with some extra stuff. Things that look like <tt>{% ... %}</tt> are commands to the template processor. At the top of the file, we see this:
|
|
<div class="code">
|
|
<table style="
|
|
{%if SSR_WIDTH%} width: {{SSR_WIDTH}} ; {%endif%}
|
|
">
|
|
</div>
|
|
This is saying <em>if the user has specified SSR_WIDTH, then insert into the generated HTML snippet everything up to the next <tt>{%endif%}</tt></em>. In this case, that's the following:
|
|
<div class="code">
|
|
width: {{SSR_WIDTH}} ;
|
|
</div>
|
|
Things that look like <tt>{{...}}</tt> are the actual values entered by the user into the UI, in this case, the SSR width.
|
|
|
|
<p> So, if the user has specified a width of, say <em>300px</em>, this is what will be inserted into the final HTML snippet:
|
|
<div class="code">
|
|
<table style="width: 300px ;">
|
|
</div>
|
|
But if the user hasn't specified anything for this field, what's between the <tt>{%if ...%}</tt> and <tt>{%endif%}</tt> will be ignored, and we get this:
|
|
<div class="code">
|
|
<table style="">
|
|
</div>
|
|
|
|
<a name="template-loops"></a>
|
|
<h2> Looping over lists </h2>
|
|
|
|
<p> There will often be multiple SSR's, and near the bottom of the file, we can see how these are handled:
|
|
<div class="code">
|
|
<ul id="ssr">
|
|
{%for ssr in SSR%} <li> {{ssr}} {%endfor%}
|
|
</ul>
|
|
</div>
|
|
This sets up an HTML list (<tt><ul></tt>) and repeats everything between the <tt>{%for ...%}</tt> and <tt>{%endfor%}</tt>, once for each entry in the <tt>SSR</tt> variable, which contains the SSR's entered by the user in the UI. Each time around, <tt>{{ssr}}</tt> will be updated to hold the next entry, which will be inserted into the generated HTML snippet as a <tt><li></tt> node.
|
|
<p> <img src="images/ssr-template2.png" class="preview" style="width:20em;float:right;">
|
|
If the user had entered the SSR's as shown in the screenshot, then we would get the following inserted into the generated HTML snippet:
|
|
<div class="code">
|
|
<ul style="margin:0 0 0 10px;">
|
|
<li> This is an SSR.
|
|
<li> This is <em>also</em> an SSR.
|
|
<li> And one more.
|
|
</ul>
|
|
</div>
|
|
Note that if they enter HTML into the SSR text, it will be inserted verbatim into the HTML snippet, thus allowing them to format the content.
|
|
|
|
<a name="template-packs"></a>
|
|
<h2> Template packs </h2>
|
|
|
|
<p> If you want to customize how the HTML snippets are generated, you could just edit the files directly, but the down-side of doing this is that if you install a new version of the program, you will lose your changes.
|
|
<p><img src="images/load-template-pack.png" class="preview" style="width:10em;float:right;">
|
|
A better way is to create your own set of template files, ZIP them up and load it as a <em>template pack</em>.
|
|
<p> If you're running the desktop application, you can specify the template pack to start with, so that you don't have to manually upload it each time i.e.
|
|
<div class="code">
|
|
vasl-template.exe --template-pack my-template-pack.zip
|
|
</div>
|
|
You can specify a ZIP file, or the directory containing the files (probably easier).
|
|
|
|
<p> <img src="images/edit-template.png" class="preview" style="width:20em;float:left;">
|
|
When you're writing a new template file, it would be painful to have to ZIP up and upload a new template pack every time you made a change, so you can edit templates directly within the program (see screenshot).
|
|
<p> Changes you make are live i.e. they will take effect immediately, but note that there is no way to save your changes, so once you're happy with how the template is working, you need to copy it out and save it somewhere.
|
|
<br clear="all">
|
|
|
|
</div>
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<div id="helptabs-fordevelopers">
|
|
|
|
<a name="dev-setup"></a>
|
|
<h2 style="margin-top:0;"> Setting up </h2>
|
|
|
|
<p> After cloning the repo, install the <em>developer</em> requirements:
|
|
<div class="code">
|
|
pip install --editable .[dev]
|
|
</div>
|
|
You may need to install some pre-requisites first e.g. on Fedora:
|
|
<div class="code">
|
|
sudo dnf install gcc-c++ python3-devel libxml2-devel libxslt-devel
|
|
</div>
|
|
<p> The tests use <a href="http://pytest.org">pytest</a> and <a href="https://www.seleniumhq.org/projects/webdriver/">Selenium WebDriver</a>, so you will need <tt>geckodriver</tt> and/or <tt>chromedriver</tt> somewhere in your PATH. The driver to use can be specified via the <tt>--webdriver</tt> parameter, and you can also run the tests headless e.g
|
|
<div class="code">
|
|
pytest --webdriver chrome --headless
|
|
</div>
|
|
<p> Note that since <tt>pylint</tt> is run as part of these tests, this should be done from the root directory of the repo.
|
|
|
|
<a name="running-tests"></a>
|
|
<h2> Running the test suite</h2>
|
|
|
|
<p> The test suite communicates with the web server being tested using gRPC, which runs over a socket. To configure this port, rename the provided <tt>debug.cfg.example</tt> file to <tt>debug.cfg</tt>, and configure it there (or use -1 to have one automatically assigned.).
|
|
<p> You should also provide at least one installation of VASSAL, and at least one VASL <tt>.vmod</tt> file. If there are multiple installations of VASSAL and/or VASL, the tests will be run against each combination thereof.
|
|
|
|
<a name="compile-vassal-shim"></a>
|
|
<h2> Compiling the VASSAL shim </h2>
|
|
|
|
<p> The program uses VASSAL to update VASL scenarios (<tt>.vsav</tt> files), and since this is written in Java, a helper program has been written in Java to do this.
|
|
<p> To compile the program, go to the <tt>$/vassal-shim</tt> directory and type:
|
|
<div class="code">
|
|
make all VASSAL_DIR=...
|
|
</div>
|
|
where <tt>VASSAL_DIR</tt> points to VASSAL's <tt>lib/</tt> directory (the program needs <tt>Vengine.jar</tt>).
|
|
<p> Since this program doesn't change very often, the resulting artifact (<tt>vassal-shim.jar</tt>) is checked into source control, so that it can be used without needing to install a JDK and compiling it first.
|
|
|
|
<a name="code-linting"></a>
|
|
<h2> Code lint'ing </h2>
|
|
|
|
<p> Python code is checked using <a href="https://pylint.readthedocs.io/en/latest/"><tt>pylint</tt></a> (installed during the <tt>pip install</tt> above), which should be run from the root directory of the repo.
|
|
|
|
<p> Javascript is checked using <a href="http://jshint.com"><tt>jshint</tt></a>, run using <a href="https://www.mozilla.org/rhino">Rhino</a>, both of which need to be installed manually. Then, set the <tt>JSHINT_RHINO</tt> environment variable to point to the script that will run <tt>jshint</tt> using Rhino e.g.
|
|
<div class="code">
|
|
export JSHINT_RHINO=~/bin/jshint-2.6.3/dist/jshint-rhino.js
|
|
</div>
|
|
Note that both of these are run as part of a normal <tt>pytest</tt> run.
|
|
|
|
<a name="freeze"></a>
|
|
<h2> Creating a pre-compiled package </h2>
|
|
|
|
<p> It is possible to compile the desktop application down to a single binary. This is typically done for the benefit of Windows users, but also works for other platforms. From the root directory of the repo:
|
|
<div class="code">
|
|
python freeze.py --output c:\temp\vasl-templates.zip
|
|
</div>
|
|
The script will compile the program, then package it all up with the necessary support files into a single archive file.
|
|
|
|
<div class="hint">
|
|
If you are creating a Windows release, you should apply the <a href="#selenium-fix" onclick="select_tab('installation');">webdriver fix</a> first.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<div id="helptabs-license">
|
|
|
|
<div class="content"></div>
|
|
|
|
</div>
|
|
|
|
<!-- ----------------------------------------------------------------- -->
|
|
|
|
</div> <!-- #helptabs-content -->
|
|
</div> <!-- #helptabs -->
|
|
|
|
</body>
|
|
|
|
<script src="jquery/jquery-3.3.1.min.js"></script>
|
|
<script src="jquery-ui/jquery-ui.min.js"></script>
|
|
<script src="imageZoom/jquery.imageZoom.min.js"></script>
|
|
<script src="main.js"></script>
|
|
|
|
</html>
|
|
|