LiveShot
Javascript library for canvas-based rendering of shooting targets and results in the browser.
See internals documentation for subclassing notes.
Currently the library supports basic rendering of targets, and Megalink style rendering of cards and ranges. Norwegian DFS-targets are implemented, but the library is designed to be extended with implementations of other targets.
A norwegian 15 meters range with 10 shooters, rendered using the
MegalinkRangeRenderer
.
A single norwegian 15 meters lane, rendered using the MegalinkCardRenderer
.
Getting started
See data format on how cards and ranges are represented.
See rendering for details on how to render these Card
- and Range
objects.
LiveShot is built to be used with npm and Browserify. You can of course also use it directly in javascript by downloading liveshot-min.js (~35kB) directly.
Below is a basic example of how to draw a single lane using LiveShot. See it in action here.
Here's an example of how to render a range using LiveShot:
// create the rangevar range = ; // create the cardsvar cardBuilder = ;var cards = ; for var i = 0; i < 10; ++i cards; // get a reference to the canvas element you want to render invar canvas = document;documentbody; // render the range Megalink style in the canvasvar renderer = ;
List of implemented targets
- DFS 15m target (
NO_DFS_15M
) - DFS 100m target (
NO_DFS_100M
) - DFS 200m target (
NO_DFS_200M
) - DFS 300m target (
NO_DFS_300M
)