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.
<html>
<head>
<script type="text/javascript" src="liveshot-min.js>"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var card = new LiveShot.CardBuilder()
.setLane('1')
.setName('Martin V. Larsen')
.setClub('Rygge')
.setClassName('4')
.setCategory('A')
.setSeriesName('Ligg')
.addShotData(.1, 0, 'X.0')
.addShotData(-.1, 0, 'X.0')
.addShotData(0, .1, 'X.0')
.addShotData(0, -.1, 'X.0')
.addShotData(0, 0, '*.9')
.setSeriesSum('50')
.setTotalSum('150')
.setMarking(true)
.setGaugeSize(.00533)
.setTargetID('NO_DFS_300M')
.getCard();
var canvas = document.getElementById('canvas');
var renderer = new LiveShot.MegalinkCardRenderer()
.setContext(canvas.getContext('2d'))
.setRect({x: 0, y: 0, width: 300, height: 600})
.setCard(card)
.render();
</script>
</body>
</html>
Here's an example of how to render a range using LiveShot:
var range = new LiveShot.RangeBuilder()
.setHost('Rygge SKL')
.setName('300M')
.setRelay('1')
.getRange();
var cardBuilder = new LiveShot.CardBuilder();
var cards = [];
for (var i = 0; i < 10; ++i) {
cards.push(new LiveShot.CardBuilder()
.setLane(i)
.setName('Martin V. Larsen')
.setClub('Rygge')
.setClassName('4')
.setCategory('A')
.setSeriesName('Ligg')
.setSeriesSum('0')
.setTotalSum('0')
.setMarking(false)
.setGaugeSize(.00533)
.setTargetID('NO_DFS_300M')
.getCard());
}
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var renderer = new LiveShot.MegalinkRangeRenderer()
.setContext(canvas.getContext('2d'))
.setRect({x: 0, y: 0, width: 1200, height: 800})
.setRange(range)
.setCards(cards)
.render();
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
)