Home
FlowEngine is a visualization development kit for developing HTML5 & Javascript based visualizable projcets.
For Industry, Economy, Transportation, Media and anything that contains flow, like an image editor.
Download compressed file directly: FlowEngine FlowEngine-mini.js file (zip)
Download source files from: FlowEngine source
Following code can be found in example/example-1-quickStart.html
- Include the FlowEngine-mini.js fisrt.
<script src="./{your folder}/FlowEngine-mini.js"></script>- And you need a canvas to rend the amazing graphics which FlowEngine generated.
<body bgcolor="#777777">
<canvas id="canvas1" style="cursor:default;
position: absolute;
top: 0;
left: 0;">
The browser does not support HTML5
</canvas>
</body>- Rend the canvas when browser window loaded.
<script>
window.onload = function(){
// create render object and rend start rend
var render = new Render("canvas1",800,600);
render.rend();
// button
var btn = new ButtonRec();
btn.setText("test");
btn.onClick=function(){
console.log("clicked");
};
// label for output
var labelOut = new Label();
labelOut.text = "out";
// label for input
var labelIn = new Label();
labelIn.text = "in";
// panel
var pnl = new PanelRec();
pnl.setTitle("FlowEngine Panel");
pnl.setTitleColor("#222222");
pnl.x = 100;
pnl.y = 200;
// add items into panel
pnl.addItem(pnl.paramInOut.IN,labelIn);
pnl.addItem(pnl.paramInOut.OUT,labelOut);
pnl.addItem(pnl.paramInOut.NON,btn);
// rend panel on canvas
render.addElement(pnl);
}
</script>Now the result of above codes will show you like below, a panel in browser with a button, when you click the button it will show message in console.
Following code can be found in example/example-2-morePanels.html
<script>
var value = 1;
// button
var btn = new ButtonRec();
btn.setText("toggle value");
// label for output
var labelOut = new Label();
labelOut.text = "out:"+value;
// label for input
var labelIn = new Label();
labelIn.text = "";
// panel
var pnlA = new PanelRec();
pnlA.setTitle("Panel A");
pnlA.setTitleColor("#222222");
pnlA.x = 100;
pnlA.y = 200;
var pnlB = new PanelCyc();
pnlB.setTitle("Panel B");
pnlB.setTitleColor("#222222");
pnlB.x = 300;
pnlB.y = 200;
// add items into panel
pnlA.addItem(pnlA.paramInOut.OUT,labelOut);
pnlA.addItem(pnlA.paramInOut.NON,btn);
btn.onClick=function(){
value *= -1;
};
pnlA.doSomethingInLoop=function(){
pnlA.getParamOuts()[0].value = value;
labelOut.text = "out:"+value;
};
pnlB.addItem(pnlB.paramInOut.IN,labelIn);
pnlB.doSomethingInLoop=function(){
labelIn.text = this.getParamIns()[0].value;
};
// rend panel on canvas
render.addElement(pnlA);
render.addElement(pnlB);
render.doSomethingInLoop=function(){
pnlB.getParamIns()[0].value = pnlA.getParamOuts()[0].value;
};
</script>
As the code rend two panels, you can click down the output point of panel A then drag & drop to the input point of panel B. Value shown on panel B will depends on the value in panel A.
Following code can be found in example/example-3-fullFeature.html
<script>
window.onload = function(){
// create render object and rend start rend
var render = new Render("canvas1",800,600);
render.rend();
var value = 1;
// button
var btnPlus = new ButtonRec();
btnPlus.setText("+");
btnPlus.onClick=function(){
value++;
if(value>9){value = 0;}
};
var btnMinus = new ButtonRec();
btnMinus.setText("-");
btnMinus.onClick=function(){
value--;
if(value<0){value = 9;}
};
// label for output
var labelShow = new Label();
// label for input
var labelIn1 = new Label();
labelIn1.text = "Method";
var labelIn2 = new Label();
labelIn2.text = "Value";
// numeric value
var dn = new DigiNum();
dn.colorOn = "#66ff99";
// add selector
var sel = new Selector();
var method = [
{display:"Square",value:"sq"},
{display:"Cube",value:"cu"}
];
for(var i=0;i<method.length;i++){
sel.addOption(method[i].value,method[i].display);
}
sel.setDefaultOption(0);
// register event for detect change
sel.setEvtName("selChanged-"+this.id);
var selChanged = false;
addEventListener("selChanged-"+this.id, function(e){
selChanged = true;
done = false;
});
// panel
var pnlA = new PanelCyc();
pnlA.setTitle("Panel A");
pnlA.setTitleColor("#222222");
pnlA.x = 50;
pnlA.y = 100;
var pnlB = new PanelCyc();
pnlB.setTitle("Panel B");
pnlB.setTitleColor("#222222");
pnlB.x = 200;
pnlB.y = 100;
var pnlC = new PanelCyc();
pnlC.setTitle("Panel C");
pnlC.setTitleColor("#222222");
pnlC.x = 200;
pnlC.y = 200;
pnlC.w = 200;
// add items into panel
pnlA.addItem(pnlA.paramInOut.NON,btnPlus);
pnlA.addItem(pnlA.paramInOut.OUT,dn);
pnlA.addItem(pnlA.paramInOut.NON,btnMinus);
pnlA.doSomethingInLoop=function(){
dn.setNum(value);
pnlA.getOutParam(0).value = value;
};
pnlB.addItem(pnlB.paramInOut.OUT,sel);
pnlB.doSomethingInLoop=function(){
pnlB.getOutParam(0).value = sel.getValue();
};
pnlC.addItem(pnlC.paramInOut.IN,labelIn1);
pnlC.addItem(pnlC.paramInOut.IN,labelIn2);
pnlC.addItem(pnlC.paramInOut.NON,labelShow);
pnlC.doSomethingInLoop=function(){
var pMethod = pnlC.getInParam(0).value;
var pValue = pnlC.getInParam(1).value;
if((pMethod!="sq" && pMethod!="cu") || !parseInt(pValue)){
labelShow.text = "no parameter or input error";
}else{
if(pMethod=="sq"){
labelShow.text = pValue*pValue;
}else if(pMethod=="cu"){
labelShow.text = pValue*pValue*pValue;
}
}
};
// rend panel on canvas
render.addElement(pnlA);
render.addElement(pnlB);
render.addElement(pnlC);
render.doSomethingInLoop=function(){
pnlB.getParamIns()[0].value = pnlA.getParamOuts()[0].value;
};
}
</script>You can connect the three panels to check the result like the screenshot:
new ButtonRec(); will create a button rounded edge
getText() return string shown on button
setText(txt) set string shown on button, txt : string shown on button
setDisable(flag) set button disable or not, flag : true/false
isDisabled() return true: button disabled; false: button enabled
onClick() function for define what to do when button clicked
new Label(); will create a label
text set/get string value
color set/get string color
getWidth() return width of label
getHeight() return height of label
new Selector(); will create a selector with options
setDisable(flag) set selector disable or not, flag : true/false
getWidth() return width of selector
getHeight() return height of selector
setOption(opt) set options, structure is an array should like
[{
value: Object,
display: "displaying string"
}];
addOption (optVal,optDis) add single option into options array, optVal: value of the option; optDis: string for displaying
clearOption() clear all options
setDefaultOption(n) set default selected item, n: index of options(start from 0)
getValue() return current selected option's value
setEvtName(name) set event name for detect changing
new DigiNum(); will create a digital number
setNum(n) set the number which want to shown
new PanelRec(); will create a rectangle panel
new PanelCyc(); will create a panel with rounded rectangle
paramInOut indicate the item added into panel is for input or output
paramInOut.NON : not for input neither for output
paramInOut.IN : input, will show an input point and the item align left
paramInOut.OUT : output, will show an output point and the item align right
setTitle(txt) set panel title, txt : string for showing title
getTitle() return panel title
setTitleColor(color) set pnel title background color, color : value of color like "#222222"
getInParam(index) return input point object, index : the index of input parameters(start from 0)
getOutParam(index) return output point object, index : the index of output parameters(start from 0)
doSomethingInLoop() function for define what to do during rend the panel
addItem(inout,item) add items onto panel for showing, inout : paramInOut.NON/IN/OUT; item : the item like label, button, selector and digital number
removeItem(item) remove item from panel
new Render(canvasId,width,height); will create a render to rend canvas for drawing items, also drive the flow with special processing
canvasId : the id of element <canvas>
width,height : size of canvas for rending
addElement(obj) add item into canvas, currently only support Panel(PanelRec/PanelCyc)
removeElement(obj) remove item(Panel) from canvas
rend() rend the canvas