tsvw-algorithm
v0.3.9
Published
Algorihtm visualization widget
Downloads
6
Maintainers
Readme
tsvw-algorithm
##Algorithm visualization and editing widget (jQuery+KnockoutJS)## ##Live demo at: http://tsv2013.github.io/algorithm/##
##How to visualize algorithm
Add the following markup to your page:
<div data-bind="algorithm: { value: algorithm }"></div>
Define algorithm via JSON, for instance:
var model = { algorithm: { items: [ { id: 9, text: "finish" }, { id: 6, text: "is condition true?" }, { id: 3, text: "block is in progress", state: "inprogress" }, { id: 7, text: "this block has a number", num: 1 }, { id: 2, text: "this is a simple block with a very very content string" }, { id: 1, text: "start", comment: "This is the start block." }, { id: 4, text: "this block is completed", state: "completed" }, { id: 5, text: "an intermediate block" }, { id: 8, text: "pre-end simple block" }, ], transitions: [ { iid: 1, exit1: 2, exit2: null }, { iid: 2, exit1: 3, exit2: null }, { iid: 2, exit1: 5, exit2: null }, { iid: 3, exit1: 4, exit2: null }, { iid: 4, exit1: 6, exit2: null }, { iid: 5, exit1: 6, exit2: null }, { iid: 6, exit1: 7, exit2: 8 }, { iid: 7, exit1: 9, exit2: null }, { iid: 8, exit1: 9, exit2: null }, ] } };
Bind model via KnockoutJS:
ko.applyBindings(model);
##How to modify algorithm
While hovering mouse over algorithm blocks you will see control points to add blocks above and below, delete block and drag to link this block with other one.
##Building tsvw-algorithm from sources
Clone the repo from GitHub
git clone https://github.com/tsv2013/algorithm.git cd algorithm
Acquire build dependencies. Make sure you have Node.js installed on your workstation. This is only needed to build algorithm from sources.
npm install -g karma-cli npm install
Build the library
npm run build
After that you should have the library at 'dist' directory.
Run unit tests
karma start
This command will run unit tests usign Karma