Get involved
We believe that the Archer Runtime is a great basis for the development of interactive SVG graphics and would love to see the library grow. If you want to participtae in the development of Archer Runtime take a look into the code at Github …
Make your svg reactive with a single line of code
Archer is able to control multiple transformations based on a single variable. It's remarkably easy to build complex transformation sets that are tailored specifically to your needs. In the following example you can see how the setValue function of the Archer Runtime is filled with a value based on the slider's position. Based upon this, the runtime executes the previously defined transformations.
Archer project integration
Integrating an Archer graphic in your project is as simple as it could be. With just a few lines of code you get your graphic up and running:
<html>
…
<div id="instrumentgraphic"></div>
…
<script src='export/libs/archer.min.js'></script>
<script language='javascript' type='text/javascript'>
var instrumentgraphicUrl = 'export/archer.graphic.svg';
var instrumentconfigUrl = 'export/archer.config.json';
var instrumentcontainer = document.getElementById('instrumentgraphic');
var instrumentgraphic = archer.create(instrumentcontainer);
instrumentgraphic.loadUrl(instrumentgraphicUrl, instrumentconfigUrl);
instrumentgraphic.on('ready', function () {
instrumentgraphic.view.zoomToFit(true);
instrumentgraphic.view.enableMouse(false, false);
instrumentgraphic.setValue('fuel', 100);
instrumentgraphic.setValue('rpm', 0);
});
</script>
</body>
</html>
Configuration of the needle's rotation:
All configurational data is stored in a JSON-file. The JSON file is created when you publish your project from the Archer Editor Pro.
"transformations": [
{
"name": "rotate_needle",
"type": "rotate",
"element": "needle",
"variable": "rpm",
"frames": {
"$min": {
"name": "$min",
"value": -29.9,
"transition": "linear"
},
"$max": {
"name": "$max",
"value": 210,
"transition": "step"
}
},
"transition": null,
"priority": 120,
"center": {
"x": 174.4,
"y": 180.8
}
},
…
