search

JacobeanRnD / SCHVIZ

SCXML Visualization
Apache License 2.0
6 stars 1 forks source link

readme

SCHVIZ

API

var layout = new forceLayout.Layout({
    parent: document.getElementById('visualization'),
    doc: xmlDocument
});

// see if the simulation initialized correctly using the `initialized` promise
layout.initalized
  .done(null, function(e) { console.log('error!', e); });

// zoom to fit chart in parent bounding box
layout.fit();

// add/remove state highlight
layout.highlightState('state-id', true);
layout.highlightState('state-id', false);
layout.unhighlightAllStates();

// add/remove transition highlight
layout.highlightTransition('src', 'dst', true);
layout.highlightTransition('src', 'dst', false);

// update the visualization with a new scxml; the `update` method returns a
// promise that can be checked for errors.
layout.update(newXmlDocument)
  .done(null, function(e) { console.log('update failed!', e) });

// save state positions
var geometry = layout.saveGeometry();
// pass "geometry" argument to Layout constructor to use the saved geometry
// and skip kieler layout

// export as SVG
var svg = layout.exportSvg({
  css: css // the contents of forceLayout.css, it will be embedded in the SVG
});

Embedding

JavaScript API

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://desm-visualization.herokuapp.com/schviz.js"></script>
<script>
var src = '<?xml version="1.0" encoding="UTF-8"?><scxml xmlns="http://www.w3.org/2005/07/scxml"><state id="a"><transition target="b" event="e1"/></state><state id="b"/></scxml>';
schviz.visualize(document.querySelector('body'), src);
</script>

Image API

<img src="http://desm-visualization.herokuapp.com/render?scxml=https://dl.dropboxusercontent.com/u/103063/static/desm-devel/archive.xml" style="max-width: 600px">