1. Oryx

2. Antoine Toulme

3. Hacker
Manager
Dog lover

6. BPM
Take arrows, boxes, and make them run.

7. Robbing a bank with
BPM

8. Oryx

9. 2005

10. Berlin,
Hassno Plattner
Institute

11. A graphical web editor

12. Requirements
• Standards
• SVG
• RDF
• Research!
• Metamodels
• Producing models for BPM

13. SVG
Scalable Vector Graphics
2001

14. 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>

15. JSON metamodel
• Home grown model
• File-based and readable
• Not easy to internationalize :(

16. {
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"

17. Success !
• The editor loads complex models and
shows nice diagrams.
• Demo time ?

18. Problems !
• Integration
• Authentication
• Project management

19. 2010
• The project is still very active
• Students work
• Complex build system
• Backend based on Postgresql
• Feature creep and deprecation

20. Process Designer
• A simple take on Oryx

21. 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

22. Process Designer
• Going 1.0 this January.
• Join us!
http://www.github.com/intalio/process-designer

23. Questions ?
• toulmean on irc.freenode.net
• antoine@lunar-ocean.com