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.
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();
NO_DFS_15M)NO_DFS_100M)NO_DFS_200M)NO_DFS_300M)FAQs
LiveShot renderering library for shooting results
The npm package liveshot receives a total of 3 weekly downloads. As such, liveshot popularity was classified as not popular.
We found that liveshot demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.
Security News
Research
Noxia, a new dark web bulletproof host, offers dirt cheap servers for Python, Node.js, Go, and Rust, enabling cybercriminals to distribute malware and execute supply chain attacks.
Company News
Socket safeguards companies from software supply chain attacks by detecting and preventing threats in open source code and empowering developers to secure their applications and critical services against malware and other security risks.