parent
85a0085a8a
commit
089e43f31e
@ -0,0 +1,7 @@ |
||||
If you have set up your vehicle/ordnance notes using HTML, and have configured <em>"Show Chapter H vehicle/ordnance notes as images"</em> in the Settings, you will find that scenarios can be slow to open in VASSAL, since converting each note to an image takes time. |
||||
|
||||
<p> This process can be optimized by configuring a directory to cache the generated images, and this page will pre-load the cache with all the available vehicle/ordnance notes. |
||||
|
||||
{%if NO_CACHE_DIR %} |
||||
<p> Configure <tt>VO_NOTES_IMAGE_CACHE_DIR</tt> in your <tt>site.cfg</tt>, restart the server, then reload this page. |
||||
{%endif%} |
@ -0,0 +1,136 @@ |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title> Load the vehicle/ordnance notes image cache </title> |
||||
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='jquery-ui/jquery-ui.min.css')}}" /> |
||||
<style> |
||||
#progress { position: relative ; margin-bottom: 5px ; } |
||||
#progress .caption { position: absolute ; top: 7px ; left: 49% ; color: #666 ; } |
||||
#status { color: #333 ; } |
||||
img#vo-note { max-width: 95% ; border: 1px dotted #666 ; border-radius: 5px ; padding: 8px ; display: none ; } |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
<div style="width:49%;float:left;"> |
||||
{%include "configure-vo-notes-image-cache.html" %} |
||||
<p> <button id="start"> Go </button> |
||||
<div id="progress"> <div class="caption"></div> </div> |
||||
<div id="status"></div> |
||||
</div> |
||||
<div style="width:49%;float:right;"> |
||||
<img id="vo-note"> |
||||
</div> |
||||
</body> |
||||
|
||||
<script src="{{url_for('static',filename='jquery/jquery-3.3.1.min.js')}}"></script> |
||||
<script src="{{url_for('static',filename='jquery-ui/jquery-ui.min.js')}}"></script> |
||||
<script src="{{url_for('static',filename='snippets.js')}}"></script> |
||||
<script src="{{url_for('static',filename='vo.js')}}"></script> |
||||
<script src="{{url_for('static',filename='utils.js')}}"></script> |
||||
|
||||
<script> |
||||
|
||||
gAppConfig = {} ; |
||||
gTemplatePack = {} ; |
||||
gVehicleOrdnanceNotes = {} ; |
||||
gTotalEntries = 0 ; |
||||
|
||||
$( document ).ready( function () { |
||||
|
||||
// initialize |
||||
var startup = 3 ; |
||||
$( "#start" ).attr( "disabled", true ).on( "click", main ) ; |
||||
|
||||
// get the template pack |
||||
$.getJSON( "{{url_for( 'get_template_pack' )}}", function( resp ) { |
||||
gTemplatePack = resp ; |
||||
-- startup ; |
||||
} ).fail( function( xhr, status, errorMsg ) { |
||||
alert( "Can't get the nationalities:\n\n" + errorMsg ) ; |
||||
} ) ; |
||||
|
||||
// get the vehicle/ordnance notes |
||||
function get_vo_notes( vo_type, url ) { |
||||
$.getJSON( url, function( resp ) { |
||||
gVehicleOrdnanceNotes[ vo_type ] = resp ; |
||||
if ( --startup == 0 ) |
||||
$( "#start" ).attr( "disabled", false ) ; |
||||
} ).fail( function( xhr, status, errorMsg ) { |
||||
alert( "Can't get the " + vo_type + " notes:\n\n" + errorMsg ) ; |
||||
} ) ; |
||||
} |
||||
get_vo_notes( "vehicles", "{{url_for('get_vehicle_notes')}}" ) ; |
||||
get_vo_notes( "ordnance", "{{url_for('get_ordnance_notes')}}" ) ; |
||||
|
||||
} ) ; |
||||
|
||||
function main() { |
||||
|
||||
// generate all the requests we need to make |
||||
var requests = [] ; |
||||
[ "vehicles", "ordnance" ].forEach( function( vo_type ) { |
||||
for ( var nat in gVehicleOrdnanceNotes[ vo_type ] ) { |
||||
for ( var key in gVehicleOrdnanceNotes[ vo_type ][ nat ] ) { |
||||
if ( key == "multi-applicable" ) |
||||
continue ; |
||||
var rc = make_vo_note_image_url( vo_type, nat, key ) ; |
||||
var url = rc[0] ; |
||||
if ( ! url ) |
||||
continue ; |
||||
var nat_info = gTemplatePack.nationalities[ nat ] ; |
||||
var nat_name = nat_info ? nat_info.display_name : nat ; |
||||
var caption = vo_type + ": " + nat_name + " #" + key ; |
||||
requests.push( [ url, caption ] ) ; |
||||
} |
||||
} |
||||
} ) ; |
||||
var nRequests = requests.length ; |
||||
if ( nRequests == 0 ) { |
||||
alert( "No vehicle/ordnance notes were found." ) ; |
||||
return ; |
||||
} |
||||
|
||||
// initialize |
||||
$( "#start" ).hide() ; |
||||
var $img = $( "img#vo-note" ).on( "load", function() { |
||||
// the vehicle/ordnance note finished loading - request the next one |
||||
$(this).show() ; |
||||
processNextRequest() ; |
||||
} ) ; |
||||
var $status = $( "#status" ) ; |
||||
var $progress = $( "#progress" ).progressbar( { |
||||
change: function( ) { |
||||
var val = $progress.progressbar( "value" ) ; |
||||
$progress.find( ".caption" ).text( val + "%" ) ; |
||||
}, |
||||
complete: function() { |
||||
$progress.find( ".caption" ).text( "" ) ; |
||||
}, |
||||
} ) ; |
||||
|
||||
// fetch each vehicle/ordnance note image |
||||
function processNextRequest() { |
||||
if ( requests.length == 0 ) { |
||||
$progress.progressbar( { value: 100 } ) ; |
||||
$progress.find( ".caption" ).text( "100%" ) ; |
||||
$status.text( "All done." ) ; |
||||
return ; |
||||
} |
||||
var req = requests.shift() ; |
||||
var val = Math.floor( 100 * requests.length / nRequests ) ; |
||||
$progress.progressbar( { |
||||
value: Math.min( 100-val, 99 ) |
||||
} ) ; |
||||
$status.text( "Generating " + req[1] ) ; |
||||
// NOTE: We show the generated the image to the user for visual feedback, which will trigger |
||||
// a "load" event when it has finished loading, which will invoke processNextRequest() to get |
||||
// the next image, until they're all done. |
||||
$img.attr( "src", req[0] ) ; |
||||
} |
||||
processNextRequest() ; |
||||
} |
||||
|
||||
</script> |
Loading…
Reference in new issue