Our talk at this year's Google I/O is available on YouTube. Check it out! The presentation of our processWave.org Editor starts at minute 25.
Try it out now!
Try the processWave.org Editor inside Google Wave or watch the Screencast to find out more about the editor!
Check out our MIT-licensed source code at Google Code!
June 1, 2010
Google I/O 2010 Wrap-up
We are back from Google I/O 2010. It was an awesome experience for us! We got a lot of valuable feedback and had many interesting conversations. Thanks to all of you who joined us in the sandbox or during our talk.
PS: For those of you, who could not attend the I/O: Starting next week you will be able to watch our talk on YouTube.
May 18, 2010
The processWave.org Editor
We are happy to announce the release of the processWave.org Editor, a fully collaborative diagram editor for Google Wave.
The processWave.org Editor is a new approach to modeling tools, aiming to make the creation of diagrams an inherently collaborative process.
Try it out now!
Try the processWave.org Editor now by using the installer in this Wave.
Watch the screencast
Real-time collaboration
The processWave.org Editor utilizes the technology of Google Wave: No matter how many people are editing one diagram, changes will be propagated in near real-time.
To make keeping track of changes easy, a changelog lists all actions that were performed on the diagram. Additionally, the changelog doubles as a time machine. With it you can revert the diagram to any previous state it was in at some point of time.
To communicate with other modelers you can annotate the diagram by simply drawing on it. This way you point out modeling errors and suggest improvements. You can also use this feature for real-time communication, e.g. to support a point you make via voice chat.
Extensibility
The processWave.org Editor is open sourced under the terms of the MIT license. It offers a powerful plugin system which makes it easy to add new features as well as modeling languages. You can check out the code on http://code.google.com/p/processwave/
The processWave.org Editor is based on the mature web-based diagram editor ORYX. We currently support five modeling languages:
The processWave.org Editor is a new approach to modeling tools, aiming to make the creation of diagrams an inherently collaborative process.
Try it out now!
Try the processWave.org Editor now by using the installer in this Wave.
Watch the screencast
Real-time collaboration
The processWave.org Editor utilizes the technology of Google Wave: No matter how many people are editing one diagram, changes will be propagated in near real-time.To make keeping track of changes easy, a changelog lists all actions that were performed on the diagram. Additionally, the changelog doubles as a time machine. With it you can revert the diagram to any previous state it was in at some point of time.
To communicate with other modelers you can annotate the diagram by simply drawing on it. This way you point out modeling errors and suggest improvements. You can also use this feature for real-time communication, e.g. to support a point you make via voice chat.
Extensibility
The processWave.org Editor is open sourced under the terms of the MIT license. It offers a powerful plugin system which makes it easy to add new features as well as modeling languages. You can check out the code on http://code.google.com/p/processwave/
Five modeling languages
The processWave.org Editor is based on the mature web-based diagram editor ORYX. We currently support five modeling languages:
- Unified Modelling Language (UML) class diagrams
- Business Process Modelling Notation (BPMN)
- Fundamental Modelling Concepts (FMC) block diagrams
- Petri nets
- Event-driven Process Chains (EPC)
April 19, 2010
Screencast of Modelling Tool for Google Wave
We've created a screencast to show you an early beta version of our collaborative modelling tool for Google Wave. Enjoy!
The modelling language seen in the video is the "Business Process Modelling Notation" (BPMN). To suit your modelling needs, our editor also supports
- Unified Modelling Language (UML) class diagrams
- Petri nets
- Event-driven Process Chains (EPC)
- Fundamental Modelling Concepts (FMC) block diagrams
- Business Process Modelling Notation (BPMN)
April 16, 2010
It's alive! Real time collaborative modeling in Google Wave
We are currently working full time on our project of integrating the ORYX editor into Google Wave. We aim to provide a fully featured real-time collaborative diagram editor. Here's a quick rundown of what we have accomplished so far:
Real-time collaboration
Your diagram is kept in sync over all of the connected clients which means that you can see the actions of remote users just as they are being performed. Adding new users to a modeling session in progress is a breeze: Just invite them to your current Wave.
Distributed Undo and Redo
Users expect modern applications to provide undo and redo functionality. Though this is significantly harder to implement for a collaborative and distributed application, we have found a reliable and intuitive way to make undo work just as you would expect it to do in a single-user application.
Farbrausch - easy user identification by colors
To make tracking changes easy, all model elements cast colored shadows. Because each user has a unique color associated with them, it is very easy to see which shape was edited by whom. If you want to know more, a tool tip will provide you with further information.
February 11, 2010
The big picture
So far we've blogged about robots, gadgets and a JavaScript library. Maybe it will suprise you that all of these form the foundation of a very ambitious project: We are working on integrating a large open source software into Google Wave to make it fully collaborative.
Wave is great for creating documents collaboratively. Our vision is to enable all these break-through collaborating features in a modeling tool (think: web-based Visio). Therefore, we are working on the integration of a process model editor called "Oryx" into Google Wave. Never heard of Oryx? Well, let's hear some facts: Oryx is a graphical process model editor that runs in the browser. The Oryx project has been started in 2006 and is fully open sourced under the MIT license. It was initially designed for the creation of business process models using the Business Process Model Notation (BPMN), Event-driven Process Chains (EPC) or Petri Nets. However, because Oryx is extensible via plugins the technology can be used to create all sorts of different models such as UML class diagrams and even GUI prototypes.
We want to make Oryx collaborative in a way that enables multiple users to edit a model simultaneously. Imagine seeing other people dragging shapes around in real-time or an awesome playback feature that shows you how the model evolved.
We are very excited about this project because it is to our knowledge the only endeavour to integrate a large software product into Google Wave.
We'll keep you posted.
Wave is great for creating documents collaboratively. Our vision is to enable all these break-through collaborating features in a modeling tool (think: web-based Visio). Therefore, we are working on the integration of a process model editor called "Oryx" into Google Wave. Never heard of Oryx? Well, let's hear some facts: Oryx is a graphical process model editor that runs in the browser. The Oryx project has been started in 2006 and is fully open sourced under the MIT license. It was initially designed for the creation of business process models using the Business Process Model Notation (BPMN), Event-driven Process Chains (EPC) or Petri Nets. However, because Oryx is extensible via plugins the technology can be used to create all sorts of different models such as UML class diagrams and even GUI prototypes.We want to make Oryx collaborative in a way that enables multiple users to edit a model simultaneously. Imagine seeing other people dragging shapes around in real-time or an awesome playback feature that shows you how the model evolved.
We are very excited about this project because it is to our knowledge the only endeavour to integrate a large software product into Google Wave.
We'll keep you posted.
February 4, 2010
syncro: Real collaboration in Google Wave gadgets
When Google Wave was first announced, excitement was high among developers. For the first time there would be a platform to enable real-time collaboration not only when editing text but also in all kinds of embedded applications. Google called them gadgets.
Disappointment ensued when it became obvious that the great collaborative text editing features were not available inside of gadgets. Instead Google provided a shared gadget state, a simple key-value storage that is kept in sync across all clients. While this model of a shared state is very easy to pick up, it does not lend itself to creating complex applications. Let's have a look at a simple example: Imagine we want to create a simple application that allows us to create shapes on a canvas and move them around.
The gadget state for this application could look like this:
There is a problem to this approach widely known as "lost update": When two users create a shape at the same time, they are likely to do so using the same key. If this happens, the update from the user with higher latency will overwrite the other update. Similarly if a user with high latency changes the position of a shape, this update might reach the server with a high delay, causing another position update which actually happened afterwards to be overwritten.
To address this issue we could encapsulate each change to the model (e.g. shape creation, position change) in a single command object which is stored under a unique key in a unambiguous chronological order in the gadget state. This allows the commands to be applied after another so every client has the same view on the model state. This is a fairly common design pattern known as the command pattern. However, this raises two new problems:
1) How do we generate unique keys within the gadget?
2) How do we maintain a chronologically ascending order of commands which is the same on all participating clients without a central coordinator, i.e. in a distributed way?
We have written syncro, JavaScript library for Google Wave gadgets to solve these problems. Syncro provides an interface to a
command stack stored in the gadget state. The library ensures unambiguous chronological order of all commands pushed to this stack.
The interface to syncro is dead easy. The library has to be initialized with two callbacks:
Gadget url: http://static.processwave.org/syncro/example/example.xml
Gadget installer url: http://static.processwave.org/syncro/example/syncro_example_installer.xml
crashes while using the provided example, the command stack may have exceeded the granted memory.
Disappointment ensued when it became obvious that the great collaborative text editing features were not available inside of gadgets. Instead Google provided a shared gadget state, a simple key-value storage that is kept in sync across all clients. While this model of a shared state is very easy to pick up, it does not lend itself to creating complex applications. Let's have a look at a simple example: Imagine we want to create a simple application that allows us to create shapes on a canvas and move them around.
The gadget state for this application could look like this:
"next_object_index" : "3"
"0": "{'type': 'rectangle', 'x': 128, 'y': 256}"
"1": "{'type': 'rectangle', 'x': 512, 'y': 0}"
"2": "{'type': 'circle', 'x': 256, 'y': 0}"Each time a user wants to create a new shape, they insert a new key-value pair to the gadget state using the value of next_object_index as the key. Afterwards, the value of next_object_index has to be incremented. If the position of a shape changes, the user updates the according attributes in the key-value pair representing the object.There is a problem to this approach widely known as "lost update": When two users create a shape at the same time, they are likely to do so using the same key. If this happens, the update from the user with higher latency will overwrite the other update. Similarly if a user with high latency changes the position of a shape, this update might reach the server with a high delay, causing another position update which actually happened afterwards to be overwritten.
To address this issue we could encapsulate each change to the model (e.g. shape creation, position change) in a single command object which is stored under a unique key in a unambiguous chronological order in the gadget state. This allows the commands to be applied after another so every client has the same view on the model state. This is a fairly common design pattern known as the command pattern. However, this raises two new problems:
1) How do we generate unique keys within the gadget?
2) How do we maintain a chronologically ascending order of commands which is the same on all participating clients without a central coordinator, i.e. in a distributed way?
Introducing syncro
We have written syncro, JavaScript library for Google Wave gadgets to solve these problems. Syncro provides an interface to acommand stack stored in the gadget state. The library ensures unambiguous chronological order of all commands pushed to this stack.
The interface to syncro is dead easy. The library has to be initialized with two callbacks:
syncro.initialize(initializeCallback, newCommandCallback);The initializeCallback is executed when the gadget is loaded. It receives all commands on the command stack as a parameter in the order they must be applied in.
function initializeCallback(commands) {
for (var i = 0; i < commands.length; i++) {
apply(commands[i]);
}
}ThenewCommandCallback is executed every time a new command is pushed to the command stack. It receives three arguments: the new command, an array of commands that need to be reverted because of delayed updates as described in the example above and an array of the commands that have to be applied after reverting. function newCommandCallback(newCommand, revertCommands, applyCommands) {
for (var i = 0; i < revertCommands.length; i++) {
revert(revertCommands[i]);
}
for (var i = 0; i < applyCommands.length; i++) {
apply(applyCommands[i]);
}
}newCommand is always identical toapplyCommands[0] and just passed for convenience. Finally, you are able to push new commands to the command stack with the following function: syncro.pushCommand(command);
Example
There is a little collaborative drag and drop gadget demonstrating the capabilities of syncro. You can use it as an entry point to start writing your own gadget with syncro. Try it out in our public syncro wave in the Wave Sandbox.Gadget url: http://static.processwave.org/syncro/example/example.xml
Gadget installer url: http://static.processwave.org/syncro/example/syncro_example_installer.xml
Get the code
The library itself and the example are licensed under the terms of the MIT license. You can get it from our bitbucket repository: http://bitbucket.org/processwave/syncroKnown issues
Google currently limits the gadget state size to 100 kilobytes. If your Wavecrashes while using the provided example, the command stack may have exceeded the granted memory.
Subscribe to:
Posts (Atom)
