Oryx

Antoine Toulme

Manager

Dog lover

Hacker

BPM

Take arrows, boxes, and make them run.

Robbing a bank with BPM

Oryx

2005

Berlin,Hassno Plattner

Institute

A graphical web editor

Requirements

• Standards

• SVG

• RDF

• Research!

• Metamodels

• Producing models for BPM

SVGScalable Vector Graphics

2001

XML representation for your model

<g id="user" transform="scale(0.7,0.7) translate(8,8)"> <path oryx:anchors="top left" style="opacity:1;fill:#F4F6F7;stroke:#000000" d="M0.585,24.167h24.083v-7.833c0,0-2.333-3.917-7.083-5.167h-9.25 c-4.417,1.333-7.833,5.75-7.833,5.75L0.585,24.167z"/> <path oryx:anchors="top left" style="opacity:1;fill:none;stroke:#000000" d="M 6 20 L 6 24" /> <path oryx:anchors="top left" style="opacity:1;fill:none;stroke:#000000" d="M 20 20 L 20 24" /> <circle oryx:anchors="top left" fill="#000000" stroke="#000000" cx="13.002" cy="5.916" r="5.417"/> <path oryx:anchors="top left" style="opacity:1;fill:#F0EFF0;stroke:#000000" d="M8.043,7.083c0,0,2.814-2.426,5.376-1.807s4.624-0.693,4.624-0.693 c0.25,1.688,0.042,3.75-1.458,5.584c0,0,1.083,0.75,1.083,1.5s0.125,1.875-1,3s-5.5,1.25-6.75,0S8.668,12.834,8.668,12 s0.583-1.25,1.25-1.917C8.835,9.5,7.419,7.708,8.043,7.083z"/></g>

JSON metamodel

• Home grown model

• File-based and readable

• Not easy to internationalize :(

Example of metamodel{ "title":"Tree Graph", "namespace":"http://b3mn.org/stencilset/treeGraph#", "description":"This is the specification of a tree graph (mainly for workshop purpose).", "stencils" : [ { "type" : "node", "id" : "Diagram", "title" : "Diagram", "groups" : ["Tree Graph"], "description":"A Diagram", "view" : "node.diagram.svg", "icon" : "new_diagram.png", "mayBeRoot" : true, "roles" : [], "properties": [ { "id" : "title", "type" : "String", "title" : "Title", "value" : "", "description":"", "tooltip" : "", "readonly": false, "optional": true, "refToView" : "", "length" : "", "wrapLines" : true } ] }, { "type" : "node", "id" : "Node", "title" : "Node", "groups" : ["Tree Graph"], "description":"A node.", "view" :"node.place.svg", "icon" :"new_place.png", "intersectionType":"ellipse", "roles" : [ "node" ], "properties": [ { "id" : "title", "type" : "String", "title" : "Title", "value" : "", "description":"", "tooltip" : "", "readonly": false, "optional": true, "refToView" : "text", "length" : "" } ] }, { "type" : "edge", "id" : "Edge", "title" : "Edge", "description":"", "groups" : ["Tree Graph"], "view" : "connection.flow.svg", "icon" : "new_flow.png", "roles": [ "edge" ], "properties": [ { "id" : "label", "type" : "String", "title" : "Label", "value" : "", "description":"", "tooltip" : "", "readonly": false, "optional": true, "refToView" : "text", "length" : "" } ] } ], "rules": { "cardinalityRules": [ { "role" : "node", "outgoingEdges": [ { "role":"edge", "maximum":2 } ], "incomingEdges": [ { "role":"edge", "maximum":1 } ] } ], "connectionRules": [ { "role":"edge", "connects": [ { "from":"node", "to":["node"] } ] } ], "containmentRules": [ { "role":"Diagram", "contains": [ "edge", "node" ] } ] }}

Success !

• The editor loads complex models and shows nice diagrams.

• Demo time ?

Problems !

• Integration

• Authentication

• Project management

2010

• The project is still very active

• Students work

• Complex build system

• Backend based on Postgresql

• Feature creep and deprecation

Process Designer

• A simple take on Oryx

June 2010

• Take the most relevant bits from the Oryx code base

• Ditch 80% of the code

• Adopt a better development environment (debug your javascript without restarting!)

• Build system

Process Designer

• Going 1.0 this January.

• Join us!

http://www.github.com/intalio/process-designer

Questions ?

• toulmean on irc.freenode.net

• antoine@lunar-ocean.com