From 692ee500c2140137026db1844102ec3e43146556 Mon Sep 17 00:00:00 2001 From: Taka Date: Mon, 15 Feb 2021 21:45:10 +1100 Subject: [PATCH] Added anchors to the help. --- vasl_templates/webapp/static/help/index.html | 26 ++++++++++++++++++++ vasl_templates/webapp/static/help/main.js | 5 ++++ 2 files changed, 31 insertions(+) diff --git a/vasl_templates/webapp/static/help/index.html b/vasl_templates/webapp/static/help/index.html index 02fd691..5969f5b 100644 --- a/vasl_templates/webapp/static/help/index.html +++ b/vasl_templates/webapp/static/help/index.html @@ -42,12 +42,14 @@

VASL Templates 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.

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. +

Installing on Windows

If you're using Windows, you should get the pre-built version from Github, unpack it somewhere, then run vasl-templates.exe. Note that it can be a bit slow to start, so please give it a few seconds.

If the program won't start because a DLL is missing from your computer, install the VC2015 runtime (get the 32-bit version, vc_redist.x86.exe, even if you are running 64-bit Windows).

If you don't see anything in the main window, check the notes below about configuring OpenGL. +

Running from source

If you're on a Mac or Linux, you can run the program directly from the source code. Get a copy from Github in the usual way, by git clone'ing it, or downloading a ZIP and unpacking it somewhere. @@ -75,6 +77,7 @@ python vasl_templates/webapp/run_server.py and then connect to it in a browser at http://localhost:5010. +

Running a Docker container

If you have Docker installed, the webapp can be run in a container e.g. @@ -91,6 +94,7 @@ and then connect to it in a browser at http://localhost:5010.

chcon -Rt svirt_sandbox_file_t /home/pacman-ghost/vasl/
+

Installing a webdriver

Some features require a webdriver to be installed. You can use either: @@ -101,6 +105,7 @@ and then connect to it in a browser at http://localhost:5010.

Unpack the download ZIP file somewhere (it will contain a single executable file), and configure the location in the Server Settings dialog (or set WEBDRIVER_PATH in site.cfg, if you are running from source). +

I'm having problems running the desktop application

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. @@ -126,6 +131,7 @@ The program will then not attempt to create the embedded browser, and will just

+

Configuring the program @@ -151,6 +157,7 @@ For the webdriver, download and unpack one of the following:
Make sure to download the version that corresponds to the version of Chrome you are running.
+

Setting up a scenario

@@ -172,6 +179,7 @@ We now want to create labels in the VASL scenario for all this information. Choo
In particular, note the data tables for the vehicles, which contain useful information that will need during your game. +

Including pictures in the labels

@@ -197,6 +205,7 @@ We can pretty-up the labels by including pictures in them. Open the User Set

You can find more examples here, with files that you can load into the program, together with the generated VASL scenarios.
+

Adding the scenario details

@@ -225,6 +234,7 @@ Once you have a label in VASL, copy the HTML snippet generated above into it.
+

Adding victory conditions and SSR's

@@ -243,6 +253,7 @@ To add SSR's, click on the green plus button in the SSR section and add the SSR

Once they're all in, click on the Snippet button to get a nicely formatted bullet list. +

Adding each player's OB

@@ -267,11 +278,13 @@ Finally, if special support weapons such as PF and BAZ are in play, snippets are

If you have already set up the VASL scenario, you can choose Analyze VASL scenario from the menu, and the program will scan the .vsav 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. +

Extra templates

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. +

Including your own images

@@ -291,6 +304,7 @@ or a width and/or height parameter to explicitly set the image

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.
+

Suggested workflow

+

Adding Chapter H notes to your VASL scenario

Restart the VASL Templates program, and add a PSW 234/1 to the German OB. You will see some changes in the UI (see screenshot). @@ -396,6 +414,7 @@ The report also calculates "hotness", which is a measure of how hot you

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.
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.
+

Creating a scenario reference sheet

If you Shift-click on the Snippet buttons, an image 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! @@ -413,6 +432,7 @@ The report also calculates "hotness", which is a measure of how hot you

The template files can be found in $/data/default-template-pack/ (where $ is where you've installed the program). +

Placeholders and template conditionals

@@ -476,6 +496,7 @@ But if the user hasn't specified anything for this field, what's between the +

Looping over lists

There will often be multiple SSR's, and near the bottom of the file, we can see how these are handled: @@ -496,6 +517,7 @@ If the user had entered the SSR's as shown in the screenshot, then we would get 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. +

Template packs

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. @@ -518,6 +540,7 @@ When you're writing a new template file, it would be painful to have to ZIP up a

Note that since pylint is run as part of these tests, this should be done from the root directory of the repo. +

Compiling the VASSAL shim

The program uses VASSAL to update VASL scenarios (.vsav files), and since this is written in Java, a helper program has been written in Java to do this. @@ -544,6 +568,7 @@ make all VASSAL_DIR=... where VASSAL_DIR points to VASSAL's lib/ directory (the program needs Vengine.jar).

Since this program doesn't change very often, the resulting artifact (vassal-shim.jar) is checked into source control, so that it can be used without needing to install a JDK and compiling it first. +

Code lint'ing

Python code is checked using pylint (installed during the pip install above), which should be run from the root directory of the repo. @@ -554,6 +579,7 @@ export JSHINT_RHINO=~/bin/jshint-2.6.3/dist/jshint-rhino.js Note that both of these are run as part of a normal pytest run. +

Creating a pre-compiled package

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: diff --git a/vasl_templates/webapp/static/help/main.js b/vasl_templates/webapp/static/help/main.js index 5c8b1ab..444e17d 100644 --- a/vasl_templates/webapp/static/help/main.js +++ b/vasl_templates/webapp/static/help/main.js @@ -71,6 +71,11 @@ $(document).ready( function() { var tab_id = getUrlParam( "tab" ) ; if ( tab_id ) $( "a[href='#helptabs-" + tab_id + "']" ).click() ; + + // check if we should scroll to an anchor + var anchor = window.location.hash.substring( 1 ) ; + if ( anchor ) + $( "a[name='" + anchor + "']" )[0].scrollIntoView() ; } ) ; // --------------------------------------------------------------------