liveshot
v1.0.17
Published
LiveShot renderering library for shooting results
Downloads
26
Readme
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>
// create the card
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();
// get a reference to the canvas element
var canvas = document.getElementById('canvas');
// render the card Megalink style in the 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:
// create the range
var range = new LiveShot.RangeBuilder()
.setHost('Rygge SKL')
.setName('300M')
.setRelay('1')
.getRange();
// create the cards
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());
}
// get a reference to the canvas element you want to render in
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
// render the range Megalink style in the 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)