tag:blogger.com,1999:blog-74995343957049495882024-03-05T17:45:50.723+01:00processWaveprocessWavehttp://www.blogger.com/profile/03884112907021436994noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-7499534395704949588.post-36870341384526030782011-10-06T17:24:00.003+02:002015-03-14T20:18:46.057+01:00Diagram Editor for Google+ HangoutsThe processWave.org Diagram Editor is back - on Google+!<br /><br />The Diagram Editor for Google+ Hangouts enables you to collaboratively create diagrams with your friends while you videochat with them in a Google+ Hangout: Everyone can contribute to the diagram and everyone sees your edit in realtime. It feels like all your friends are hanging out in the same conference room editing the diagram on a giant whiteboard without the need for being in the same physical location. It basically brings all the advantages of collaborative diagram editing you are used to from Google Wave to Google+ Hangouts. Watch the screencast to learn more:<br /><br /><iframe src="http://www.youtube.com/embed/W6U8L3lhAek?rel=0&hd=1" allowfullscreen="" frameborder="0" height="315" width="560"></iframe><br /><br />Unfortunately, Google has not yet released Hangouts API to the general public. Once they do, you’ll be able to take the Diagram Editor for Google+ Hangouts for a test spin and I will tell you on this very blog how to do that. Stay tuned!<br /><br />Meanwhile, you can check out the code of the project on <a href="http://code.google.com/p/diagram-editor-for-google-plus/">Google Code</a> or learn more about the diagram editor on <a href="https://plus.google.com/107095911821801860568/posts/bH1obxmdrg7">Google+</a>.
<b>Update:</b> The project has been moved to <a href="https://github.com/goderbauer/diagram-editor-for-google-plus">GitHub</a>.Michael Goderbauerhttp://www.blogger.com/profile/00926607934552098621noreply@blogger.com3tag:blogger.com,1999:blog-7499534395704949588.post-61689832294078976472010-12-23T20:32:00.011+01:002011-10-15T16:40:55.315+02:00Hello, Shared Spaces!<span style="" lang="EN-US"><span style="font-weight: bold; font-style: italic;">Update (Oct 15, 2011):</span><span style="font-style: italic;"> Google has discontinued Shared Spaces and integrated its technology into Google+ Hangouts. The processWave.org Editor for Shared Spaces is no longer available, but you should check out its integration into</span><a style="font-style: italic;" href="http://www.processwave.org/2011/10/diagram-editor-for-google-hangouts.html"> Google+ Hangouts</a><span style="font-style: italic;">!</span><br /><br />Google has created a new home for Wave gadgets: <a href="http://sharedspaces.googlelabs.com/">Google Shared Spaces</a>. Google <a href="http://googleblog.blogspot.com/2010/12/latest-from-lab.html">says</a> it is an “easy way for you to share mini-collaborative applications, like scheduling tools or games, with your friends or colleagues”. Of course, you can also include our very own <a href="http://sharedspaces.googlelabs.com/gallery/app?app_id=81002">processWave.org Editor</a> in a Shared Space. To get started with a new Space, just click <a href="http://sharedspaces.googlelabs.com/gallery/app?app_id=81002">here</a> and send the link to your friends inviting them to a collaborative modeling session! To participate, they just need a Google, Twitter or Yahoo account.</span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmiw7KLIx84L1iAwIJdWK1cR7XgCnvWtwn-HhiKv2oSlUwlNvPv4J7zcVpiTuPkipz3tDJK0ph-YIePlld6ahyphenhyphenht01c8zNOsk24wVmE1szGWoWjvXDs34H37d2rsFljGTVUuF8iftmNk/s1600/sharedSpaces.png"><br /></a><br /><span style="" lang="EN-US"><span>PS:</span> Are you planning on developing your own gadget for Shared Spaces? Check out our <a href="http://www.processwave.org/2010/02/syncro-real-collaboration-in-google.html">syncro</a> library for concurrent editing.<br /><br /></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmiw7KLIx84L1iAwIJdWK1cR7XgCnvWtwn-HhiKv2oSlUwlNvPv4J7zcVpiTuPkipz3tDJK0ph-YIePlld6ahyphenhyphenht01c8zNOsk24wVmE1szGWoWjvXDs34H37d2rsFljGTVUuF8iftmNk/s1600/sharedSpaces.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 357px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmiw7KLIx84L1iAwIJdWK1cR7XgCnvWtwn-HhiKv2oSlUwlNvPv4J7zcVpiTuPkipz3tDJK0ph-YIePlld6ahyphenhyphenht01c8zNOsk24wVmE1szGWoWjvXDs34H37d2rsFljGTVUuF8iftmNk/s400/sharedSpaces.png" alt="" id="BLOGGER_PHOTO_ID_5553966186545777538" border="0" /></a>Michael Goderbauerhttp://www.blogger.com/profile/00926607934552098621noreply@blogger.com2tag:blogger.com,1999:blog-7499534395704949588.post-15112515473925971652010-08-08T10:44:00.000+02:002010-08-08T10:44:25.622+02:00Good Bye, Wave!Some days ago, <a href="http://googleblog.blogspot.com/2010/08/update-on-google-wave.html">Google announced</a> that it will stop working on the Wave project. That made us kind of sad as we had fun working with this awesome product and we enjoyed talking to the Wave developers at the Google I/O 2010. We are now wondering, what crazy project the guys from the Wave team will start up next...<br />
<br />
By the way, if you want to learn more about our development experience with Google Wave, you should check out our bachelor theses. They are available for <a href="http://bpt.hpi.uni-potsdam.de/Oryx/ProcessWave">download</a> and also cover some interesting technical details of the processWave.org editor.<br />
<br />
It was fun working together with you all and thanks a lot for your valuable feedback! If you have any further questions about the processWave.org team or our editor do not hesitate to drop us an <a href="mailto:processwave@gmail.com">email</a>.<br />
<br />
Good bye!<br />
the processWave.org team<br />
<br />
PS: If you need to get your models off the Wave before Google shuts off the Wave servers, check out our new <a href="http://www.processwave.org/2010/08/new-features-export-and-import-of.html">export feature</a>.Michael Goderbauerhttp://www.blogger.com/profile/00926607934552098621noreply@blogger.com1tag:blogger.com,1999:blog-7499534395704949588.post-4717508493154052862010-08-06T21:44:00.001+02:002010-08-07T23:55:17.595+02:00New Features: Export and Import of ModelsThe most requested features for the processWave.org editor are the export and import of models. We listened to our users and are pleased to announce the integration of those most requested features. From today on you can export your models from the processWave.org Editor to the web-based <a href="http://oryx-project.org/backend/poem/repository">ORYX editor</a>, where the models can be further processed and saved in various formats (including PDF). In addition to that, you can also import your models from the ORYX editor repository to share them with your fiends in the Wave. Read on to learn, how you can use those two brand-new features of the processWave.org editor.<br /><br /><span style="font-weight: bold;">Export of Models</span><ol><li>Add our gadget to a wave, choose one of our six modeling languages and create a model of your choice.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwkTgU5oo3l9jDhyphenhyphenWl1XxxwXOl9l0NKvNlAdVkIqKnMYwA19NPcFlIoFY2u3JaqrpHCmpcTorlyKA2lsZyqUCHzvmz1zetFkVVttT6KOIW_OkWp2UrHhd6y6zDD_B5MG3i8F2JZ8E33Y0/s1600/1.png"><img style="float: right; margin: 0pt 0pt 10px 10px; cursor: pointer; width: 231px; height: 62px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwkTgU5oo3l9jDhyphenhyphenWl1XxxwXOl9l0NKvNlAdVkIqKnMYwA19NPcFlIoFY2u3JaqrpHCmpcTorlyKA2lsZyqUCHzvmz1zetFkVVttT6KOIW_OkWp2UrHhd6y6zDD_B5MG3i8F2JZ8E33Y0/s400/1.png" alt="" id="BLOGGER_PHOTO_ID_5501827434313456930" border="0" /></a><br /></li><li>Click on the new "Export to the Oryx editor" button in the toolbar.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPtH_TkiXppCvPvDR8j1rOwjCbY6-2bK2SDshu_boipsOuOP2KGjJe4fjfNY-8wllErByYK-jGi9uw8mITlKg__ZGMX2piO-qrTWAwWa9_hcyvS32KzTirUNCkKJWb-mdgYNP7IVivzw/s1600/2.png"><img style="float: right; margin: 0pt 0pt 10px 10px; cursor: pointer; width: 230px; height: 217px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPtH_TkiXppCvPvDR8j1rOwjCbY6-2bK2SDshu_boipsOuOP2KGjJe4fjfNY-8wllErByYK-jGi9uw8mITlKg__ZGMX2piO-qrTWAwWa9_hcyvS32KzTirUNCkKJWb-mdgYNP7IVivzw/s400/2.png" alt="" id="BLOGGER_PHOTO_ID_5501829284917035810" border="0" /></a><br /></li><li>A new tab opens that should show the created model inside the Oryx editor. At this time, you are able to export the model in various data formats: XPDL, RDF, ERDF, BPMN 2.0 DI XML or JSON. The options that are available are shown in the export menu in the Oryx toolbar on the right.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQYl-2h0RkFxIzz_Q-kFX0z854hmyrjQliI9dkse9wRHmOk2tfJ16PhBZjvW-rpfOBEgkGGSC187LR3I2_znGT4N0olXqA4iqW8c0kDFgRXLNAvzW7ulhzxPL3TX7vrk49x6KgF6MvJk/s1600/2.png"><br /></a><br /></li><li>For more export formats like PDF or PNG, you need to save the model into your personal model repository, first. However, saving via the save button only works for logged in users. Therefore, please open a new browser tab and visit <a href="http://oryx-project.org/backend/poem/repository">http://oryx-project.org/backend/poem/repository</a>. You will see the global repository with public models created by Oryx users and shared with the world. To log in, enter your OpenID in the top right corner of the page. If you don't have an OpenID yet, you can get a free one here: <a href="http://www.blogger.com/www.getopenid.com">www.getopenid.com</a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYk1EvaPS4WhaycQNllDbGoHZHLBilxHJwzzCkG1cRvDVEoetbUXTxPoijKVwNaVgPC0V2-HahgVvQ1fC2iuUQHB-R7b6z5VMzBWrJNR4U5136PcEP9-uwPitrTRRs4EPcCntFCr0LiJ4/s1600/3.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 551px; height: 246px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYk1EvaPS4WhaycQNllDbGoHZHLBilxHJwzzCkG1cRvDVEoetbUXTxPoijKVwNaVgPC0V2-HahgVvQ1fC2iuUQHB-R7b6z5VMzBWrJNR4U5136PcEP9-uwPitrTRRs4EPcCntFCr0LiJ4/s800/3.png" alt="" id="BLOGGER_PHOTO_ID_5501830675863030290" border="0" /></a><br /></li><li>Once you are logged in, return to the tab with your model from 3. Now, you can click the save button, enter a name for the model, and save it to your personal process repository. When you return to<a href="http://oryx-project.org/backend/poem/repository"> http://oryx-project.org/backend/poem/repository</a> and refresh the site, it should now show your new model. Of course, your model is by default not shared with anyone else and can only be accessed from your OpenID account.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWp_MAG6yh4ulfaD1f1l72CMyklDN56t99qmHOmr9A5iHR1gxMVPiaYpHnVg_DzbNIsbDzMJl0Yc8lLun-g6PCsJArAnDDD5FqoE27qhHSVOVVYvl-kqwaWmVEB45Cb1Ms-TtEZzP9X8/s1600/4.png"><img style="float: right; margin: 0pt 0pt 10px 10px; cursor: pointer; width: 176px; height: 198px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWp_MAG6yh4ulfaD1f1l72CMyklDN56t99qmHOmr9A5iHR1gxMVPiaYpHnVg_DzbNIsbDzMJl0Yc8lLun-g6PCsJArAnDDD5FqoE27qhHSVOVVYvl-kqwaWmVEB45Cb1Ms-TtEZzP9X8/s400/4.png" alt="" id="BLOGGER_PHOTO_ID_5501832652972141186" border="0" /></a><br /></li><li>If you now select your model by clicking on it, you can find various export options at the bottom left corner of the site. Click on one of the links, like SVG, PDF, PNG to export your diagram in these graphics formats.<br /></li></ol><span style="font-weight: bold;"><br /><br />Import of Models</span><br /><ol><li>Go to <a href="http://oryx-project.org/backend/poem/repository">http://oryx-project.org/backend/poem/repository</a> and login with your OpenID. Now, you can see all models that you have access to.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2RtMulW8y_gfg1JSkKL9HBp6EgQ3gIDxFraAIMu6GJc2A2XnQ78MTHespvPgnQIDXVp9yJ06yLaskKzGi2jv0AKGG5eZdz86KePj32wXcTqGFODeBnpPxrZ8vwIPUv1TkWIbfBZe1uDY/s1600/5.png"><img style="float: right; margin: 0pt 0pt 10px 10px; cursor: pointer; width: 193px; height: 168px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2RtMulW8y_gfg1JSkKL9HBp6EgQ3gIDxFraAIMu6GJc2A2XnQ78MTHespvPgnQIDXVp9yJ06yLaskKzGi2jv0AKGG5eZdz86KePj32wXcTqGFODeBnpPxrZ8vwIPUv1TkWIbfBZe1uDY/s400/5.png" alt="" id="BLOGGER_PHOTO_ID_5501834119589358530" border="0" /></a><br /></li><li>Click on the model you want to import to the processWave.org editor. Make sure that the model is public by checking the access rights in the top right corner. At the moment, it is only possible to import public models to the Wave, so if your model is not public yet, click on the publishing icon.<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQhjgBXRG4vSsrMNX0U0bnD0zB7wlnznptWrtSvPig_fvI37a0G0kkEVrXlIoYiUUDtAKI3_MeRX131kEzhMZRpBwM4iL6_zPIl6poh6ssjfYkIoe69_oUYwrUPcbNTyiUMOSI8GHiIoc/s1600/6.png"><img style="float: right; margin: 0pt 0pt 10px 10px; cursor: pointer; width: 193px; height: 210px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQhjgBXRG4vSsrMNX0U0bnD0zB7wlnznptWrtSvPig_fvI37a0G0kkEVrXlIoYiUUDtAKI3_MeRX131kEzhMZRpBwM4iL6_zPIl6poh6ssjfYkIoe69_oUYwrUPcbNTyiUMOSI8GHiIoc/s400/6.png" alt="" id="BLOGGER_PHOTO_ID_5501835368717039778" border="0" /></a><br /></li><li>When you are sure the model is public, double-click on the model to open it in the Oryx editor. Look for the export menu in the Oryx toolbar and choose "ProcessWave This!".<br /><br /></li><li>A new window opens that asks for permission to create a new wave. Click "continue".<br /><br /></li><li>The new wave with the title "Oryx Model Export" is shown and contains a processWave.org editor gadget with your model. You can now rename the wave, invite friends to model collaboratively or even export the model back to your Oryx repository via the export button.</li></ol>We hope the tutorials above cover every aspect and you enjoy getting your models exported or imported. If you have any further questions about the new features, please leave a comment or send us an e-mail.Michael Goderbauerhttp://www.blogger.com/profile/00926607934552098621noreply@blogger.com0tag:blogger.com,1999:blog-7499534395704949588.post-75782850193591254452010-07-26T17:15:00.004+02:002010-07-26T17:23:37.470+02:00Our Google I/O presentation on YouTubeOur talk at this year's Google I/O is available on YouTube. <a href="http://www.youtube.com/watch?v=tXKidPYCEzQ">Check it out</a>! The presentation of our processWave.org Editor starts at minute 25.<br /><br /><object width="520" height="317"><param name="movie" value="http://www.youtube.com/v/tXKidPYCEzQ&hl=de_DE&fs=1?rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/tXKidPYCEzQ&hl=de_DE&fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="520" height="317"></embed></object>Michael Goderbauerhttp://www.blogger.com/profile/00926607934552098621noreply@blogger.com1tag:blogger.com,1999:blog-7499534395704949588.post-34964524934239237912010-06-01T11:30:00.007+02:002010-06-01T14:14:57.542+02:00Google I/O 2010 Wrap-up<div style="text-align: left;"><span style="" lang="EN-US">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 </span><span lang="EN-US"><a href="http://code.google.com/intl/de-DE/events/io/2010/sessions/wave-api-design-extensions.html" target="_blank">talk</a></span><span style="" lang="EN-US">.</span></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjKW7e5IeRPqmzjD7Mh36wIXd1oJdEwPS0gQsS3Nn1hDUW-ul_-Ywyt15kisP9mw4CseJwX9L_0AnLAbfbquH7-83fZm9W7-eeF_vR-4sykwYPdbwiI8Id0JzH0rYtaPMHBthyovDsr-g/s1600/DSC00634.JPG"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjKW7e5IeRPqmzjD7Mh36wIXd1oJdEwPS0gQsS3Nn1hDUW-ul_-Ywyt15kisP9mw4CseJwX9L_0AnLAbfbquH7-83fZm9W7-eeF_vR-4sykwYPdbwiI8Id0JzH0rYtaPMHBthyovDsr-g/s400/DSC00634.JPG" alt="" id="BLOGGER_PHOTO_ID_5477777095769909554" border="0" /></a><br /><span style="" lang="EN-US">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.</span>Michael Goderbauerhttp://www.blogger.com/profile/00926607934552098621noreply@blogger.com2tag:blogger.com,1999:blog-7499534395704949588.post-20103681263240765932010-05-18T20:32:00.016+02:002010-05-20T03:28:03.975+02:00The processWave.org EditorWe are happy to announce the release of the processWave.org Editor, a fully collaborative diagram editor for Google Wave.<br />
The processWave.org Editor is a new approach to modeling tools, aiming to make the creation of diagrams an inherently collaborative process.<br />
<br />
<b><span class="Apple-style-span" style="font-size: x-large;">Try it out now!</span></b><br />
<a href="https://wave.google.com/wave/#minimized:nav,minimized:contact,minimized:search,restored:wave:googlewave.com!w%252BkLecqOufA"><span class="Apple-style-span">Try the processWave.org Editor now by using the </span><span class="Apple-style-span">installer in </span><span class="Apple-style-span">this Wave</span><span class="Apple-style-span">.</span></a><br />
<br />
<b>Watch the screencast</b><br />
<object height="313" width="520"><param name="movie" value="http://www.youtube.com/v/SaHlTyA7Fgk&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/SaHlTyA7Fgk&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="520" height="313"></embed></object><br />
<br />
<b>Real-time collaboration</b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JqcOqrUIeDM0599lAyxlDuygG8o-j19pDXLQmY1XtA_NMwtxrF44ZNDBRQv2zGZ4xyOX6rTGaRRi8RKU3TXYFFREchC-zcDXw1AWl4Q27NGr8V49wDiffNRZYaNPgUcd7jk3enzbGPs_/s1600/screenshot_changelog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JqcOqrUIeDM0599lAyxlDuygG8o-j19pDXLQmY1XtA_NMwtxrF44ZNDBRQv2zGZ4xyOX6rTGaRRi8RKU3TXYFFREchC-zcDXw1AWl4Q27NGr8V49wDiffNRZYaNPgUcd7jk3enzbGPs_/s200/screenshot_changelog.png" width="143" /></a>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.<br />
<br />
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.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqo0uFGcRiWBRxllqdDJ8epC_-OWoqIAi5GPjY5LhrvxtaC1LlqJLp7SIO_tUFwxWanc5MfdOLloTxTAt1eZw2WV-koWClCV-DdrCshs59IfCu2s5OEL-xhSjKVOjndFCy_vPDcKFNXxB/s1600/screenshot_paint.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqo0uFGcRiWBRxllqdDJ8epC_-OWoqIAi5GPjY5LhrvxtaC1LlqJLp7SIO_tUFwxWanc5MfdOLloTxTAt1eZw2WV-koWClCV-DdrCshs59IfCu2s5OEL-xhSjKVOjndFCy_vPDcKFNXxB/s200/screenshot_paint.png" width="200" /></a><br />
<br />
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. <br />
<br />
<b>Extensibility</b><br />
<br />
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/<br />
<b><span class="Apple-style-span" style="font-weight: normal;"><br />
</span></b><br />
<div style="text-align: left;"><b>Five modeling languages</b></div><br />
The processWave.org Editor is based on the mature web-based diagram editor ORYX. We currently support five modeling languages: <br />
<ul><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYO18F0BA5dvUeOG8mlisrZSMQZMXgJHCwtNC75khfJ6bVOZZCLOxkz_PgmJJwVu2gGlAhiPRv2b46eZEb4G6BY5C0Uv10HV8tG9Oi-gnqeWyQflQnXep69Gkm0kc_Uo4cci8D2UzDeio/s1600/screenshot_full.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYO18F0BA5dvUeOG8mlisrZSMQZMXgJHCwtNC75khfJ6bVOZZCLOxkz_PgmJJwVu2gGlAhiPRv2b46eZEb4G6BY5C0Uv10HV8tG9Oi-gnqeWyQflQnXep69Gkm0kc_Uo4cci8D2UzDeio/s200/screenshot_full.png" width="200" /></a>
<li><a href="http://www.uml.org/">Unified Modelling Language</a> (UML) class diagrams</li>
<li><a href="http://www.bpmn.org/">Business Process Modelling Notation</a> (BPMN)</li>
<li><a href="http://www.fmc-modeling.org/">Fundamental Modelling Concepts</a> (FMC) block diagrams</li>
<li><a href="http://en.wikipedia.org/wiki/Petri_nets">Petri nets</a></li>
<li><a href="http://en.wikipedia.org/wiki/Event-driven_process_chain">Event-driven Process Chains</a> (EPC)</li>
</ul>processWavehttp://www.blogger.com/profile/03884112907021436994noreply@blogger.com3tag:blogger.com,1999:blog-7499534395704949588.post-69224803884872448992010-04-19T13:06:00.006+02:002010-05-11T00:45:07.613+02:00Screencast of Modelling Tool for Google WaveWe've created a screencast to show you an early beta version of our <a href="http://www.processwave.org/2010/04/its-alive-real-time-collaborative.html">collaborative modelling tool</a> for Google Wave. Enjoy!<div><div><br />
</div><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/oa1GSOuPqN0&hl=en_US&fs=1&rel=0&hd=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/oa1GSOuPqN0&hl=en_US&fs=1&rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object><div><br />
</div><div>The modelling language seen in the video is the "Business Process Modelling Notation" (BPMN). To suit your modelling needs, our editor also supports</div><div><ul><li><a href="http://www.uml.org/">Unified Modelling Language</a> (UML) class diagrams</li>
<li><a href="http://en.wikipedia.org/wiki/Petri_nets">Petri nets</a></li>
<li><a href="http://en.wikipedia.org/wiki/Event-driven_process_chain">Event-driven Process Chains</a> (EPC)</li>
<li><a href="http://www.fmc-modeling.org/">Fundamental Modelling Concepts</a> (FMC) block diagrams</li>
<li><a href="http://www.bpmn.org/">Business Process Modelling Notation</a> (BPMN)</li>
</ul>Right now we are working on some exciting new features and optimizations (like improving the loading time). So stay tuned and watch out for our public release at the end of May 2010!</div></div>Michael Goderbauerhttp://www.blogger.com/profile/00926607934552098621noreply@blogger.com1tag:blogger.com,1999:blog-7499534395704949588.post-73316629082967581182010-04-16T11:07:00.008+02:002010-04-16T14:40:19.190+02:00It's alive! Real time collaborative modeling in Google Wave<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKXYN-1fehg_wZo4F1H1KwzqDnDNRrYwhEe59eH44ivJhmY8cRSkgkAd_HPcCHRBtZx5urCnlJGtKe_bsKxmagrB4JdftTPVeatdueDliVg2LhZjT5wrygtW5DKkVz6YtPOuKY-5-Vl4zj/s1600/screenshot_overview.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 370px; height: 153px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKXYN-1fehg_wZo4F1H1KwzqDnDNRrYwhEe59eH44ivJhmY8cRSkgkAd_HPcCHRBtZx5urCnlJGtKe_bsKxmagrB4JdftTPVeatdueDliVg2LhZjT5wrygtW5DKkVz6YtPOuKY-5-Vl4zj/s320/screenshot_overview.png" alt="" id="BLOGGER_PHOTO_ID_5460662215121407986" border="0" /></a><br />
We are currently working full time on <a href="http://www.processwave.org/2010/02/big-picture.html">our project</a> of integrating the <a href="http://www.oryx-project.org">ORYX editor</a> 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:<br />
<br />
<p><span style="font-weight: bold;">Real-time collaboration</span></p><p style="text-align: left;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJegXBpYAJppAGeK1CTh6oLR_qRsomsm7_26P8ZkyQrgZh4xU7oxTuQh_k5HPRpltZUfbOAmc5b3PxBS9OU6XI6-fU7ZqIBhX3K0320LuINSEfzQrjtf3-B2P-wKsdW8TryQ4sh9w9o33Y/s1600/screeny1.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 230px; height: 99px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJegXBpYAJppAGeK1CTh6oLR_qRsomsm7_26P8ZkyQrgZh4xU7oxTuQh_k5HPRpltZUfbOAmc5b3PxBS9OU6XI6-fU7ZqIBhX3K0320LuINSEfzQrjtf3-B2P-wKsdW8TryQ4sh9w9o33Y/s320/screeny1.png" alt="" id="BLOGGER_PHOTO_ID_5460661050521962210" border="0" /></a>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.</p><p style="text-align: left;"><br />
</p><p><span style="font-weight: bold;">Distributed Undo and Redo</span></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4w95JPFmUdvd2xaWHZWUUYN49AYQKQxazQI0XVYcj1j_Ee4MiLagCylGojMqkgGelKeBtOT7mqsZxHLCMVmyyBUI10rT7K-XCa7S3ajiL0_tLDGCvPSP3iN7Ybm-bhtHVhVSwLA08Kwj/s1600/screeny2.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 226px; height: 118px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4w95JPFmUdvd2xaWHZWUUYN49AYQKQxazQI0XVYcj1j_Ee4MiLagCylGojMqkgGelKeBtOT7mqsZxHLCMVmyyBUI10rT7K-XCa7S3ajiL0_tLDGCvPSP3iN7Ybm-bhtHVhVSwLA08Kwj/s320/screeny2.png" alt="" id="BLOGGER_PHOTO_ID_5460661917346196818" border="0" /></a>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.</p><p><br />
</p><p><span style="font-weight: bold;">Farb</span><span style="font-weight: bold;">rausch - easy user identification by colors</span></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB2TLktVFXhRnqKWr_E0bgh36djaZDGbtqy14ZeUqXs9KjGHFDfmaQnBYBFEYZeOP-JMt3GYr9f0ESptZucEbWwSbcNevn7D0heojWWBc272V5y9pm9pC_DOEMD4cisBui5QLdGMPPIZWF/s1600/screeny3.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 215px; height: 137px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB2TLktVFXhRnqKWr_E0bgh36djaZDGbtqy14ZeUqXs9KjGHFDfmaQnBYBFEYZeOP-JMt3GYr9f0ESptZucEbWwSbcNevn7D0heojWWBc272V5y9pm9pC_DOEMD4cisBui5QLdGMPPIZWF/s320/screeny3.png" alt="" id="BLOGGER_PHOTO_ID_5460661148407307890" border="0" /></a>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.<span><br />
</span></p>Marvin Killinghttp://www.blogger.com/profile/02092757326545171385noreply@blogger.com0tag:blogger.com,1999:blog-7499534395704949588.post-26952325578192653362010-02-11T13:34:00.000+01:002010-02-11T13:34:45.479+01:00The big pictureSo 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.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXIH_OPAeCKoraZ-Sye1gWm2WmKFnsCniC50fSb-qdJGh4xA65U2OSTozAin-gzWB4dqjrFVtPfOj9eP9Bd8u3zBhiLBPKGVBwc-H3osXB47WPe_LM8gfE0_-PJ_zMWbAp9Epp0APYEIrg/s1600-h/blog.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXIH_OPAeCKoraZ-Sye1gWm2WmKFnsCniC50fSb-qdJGh4xA65U2OSTozAin-gzWB4dqjrFVtPfOj9eP9Bd8u3zBhiLBPKGVBwc-H3osXB47WPe_LM8gfE0_-PJ_zMWbAp9Epp0APYEIrg/s320/blog.png" /></a>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 "<a href="http://oryx-editor.org/"><span style="border-bottom: 1px dotted rgb(255, 0, 0);">Oryx</span></a>" 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 <a href="http://code.google.com/p/oryx-editor/">fully open sourced</a> 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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
We'll keep you posted.<span __wave_annotations="" __wave_xml="<line></line>So far we've blogged about robots, gadgets and a JS 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.<line></line><line></line>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.<line></line><line></line>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. <line></line><line></line>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." class="__wave_paste"></span>processWavehttp://www.blogger.com/profile/03884112907021436994noreply@blogger.com2tag:blogger.com,1999:blog-7499534395704949588.post-35449222197716212252010-02-04T21:32:00.032+01:002012-09-23T17:54:30.006+02:00syncro: Real collaboration in Google Wave gadgetsWhen 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.<br />
<br />
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL176Ugd323A-HHPddfNcoJUexsdNBNeDjzyImjww40bsvVYND_QgXBGjiL4z58LGP5YXxb8kxEJfeUrzSJ04nb9A3YYYNA8L3fcofi__FfxTF_nfzMHBR7IikroPuMqrKZqH4Wf_M6sI9/s1600/example-screenshot.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="321" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL176Ugd323A-HHPddfNcoJUexsdNBNeDjzyImjww40bsvVYND_QgXBGjiL4z58LGP5YXxb8kxEJfeUrzSJ04nb9A3YYYNA8L3fcofi__FfxTF_nfzMHBR7IikroPuMqrKZqH4Wf_M6sI9/s400/example-screenshot.png" /></a></div>
<br />
The gadget state for this application could look like this: <br />
<pre class="brush:js">"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}"</pre>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 <span style="font-family: monospace;" x="y">next_object_index</span> as the key. Afterwards, the value of <span style="font-family: monospace;" x="y">next_object_index</span> 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.<br />
<br />
There is a problem to this approach widely known as "<a href="http://en.wikipedia.org/wiki/Write-Write_conflict">lost update</a>": 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.<br />
<br />
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 <a href="http://en.wikipedia.org/wiki/Command_pattern">command pattern</a>. However, this raises two new problems: <br />
1) How do we generate unique keys within the gadget? <br />
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?<br />
<br />
<h4>Introducing syncro</h4><a href="http://m-goderbauer.de/processPlus/syncro200.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://m-goderbauer.de/processPlus/syncro200.png" style="border: 0px none;" /></a>We have written syncro, JavaScript library for Google Wave gadgets to solve these problems. Syncro provides an interface to a<br />
command stack stored in the gadget state. The library ensures unambiguous chronological order of all commands pushed to this stack.<br />
<br />
The interface to syncro is dead easy. The library has to be initialized with two callbacks:<br />
<pre class="brush: js">syncro.initialize(initializeCallback, newCommandCallback);</pre>The <span style="font-family: monospace;" x="y">initializeCallback</span> 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.<br />
<pre class="brush: js">function initializeCallback(commands) {
for (var i = 0; i < commands.length; i++) {
apply(commands[i]);
}
}</pre>The<span style="font-family: monospace;" x="y">newCommandCallback</span> 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. <br />
<pre class="brush: js">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]);
}
}</pre><span style="font-family: monospace;" x="y">newCommand</span> is always identical to<span style="font-family: monospace;" x="y">applyCommands[0]</span> and just passed for convenience. Finally, you are able to push new commands to the command stack with the following function: <br />
<pre class="brush: js">syncro.pushCommand(command);</pre><h4>Example</h4>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 <a href="https://wave.google.com/a/wavesandbox.com/#restored:wave:wavesandbox.com!w%252B4ksVN0R0A">public syncro wave</a> in the Wave Sandbox.<br />
Gadget url: <a href="http://static.processwave.org/syncro/example/example.xml">http://static.processwave.org/syncro/example/example.xml</a> <br />
Gadget installer url: <a href="http://static.processwave.org/syncro/example/syncro_example_installer.xml">http://static.processwave.org/syncro/example/syncro_example_installer.xml</a><br />
<h4>Get the code</h4>The library itself and the example are licensed under the terms of the MIT license. You can get it from our bitbucket repository: <a href="http://bitbucket.org/processwave/syncro">http://bitbucket.org/processwave/syncro</a><br />
<h4>Known issues</h4>Google currently limits the gadget state size to 100 kilobytes. If your Wave<br />
crashes while using the provided example, the command stack may have exceeded the granted memory.Martinhttp://www.blogger.com/profile/01489172459702904444noreply@blogger.com3tag:blogger.com,1999:blog-7499534395704949588.post-663920252102544072009-12-04T00:39:00.012+01:002009-12-04T01:04:27.196+01:00GoogleFight!<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHyKPb-4q0purKnQ-Wma-iEKp0vW_Ti5Bw-6HSdIff9ycUzaeOlJehes8h1vMYMzJDe1f85Bjch-_wfZIW7iouS3e2bH91CblwtAxTNOmhIGfPTccxuc-jIyb_8Iydr5LaS3IR6jetGZg/s1600-h/fight_thumb.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5411158450575000530" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHyKPb-4q0purKnQ-Wma-iEKp0vW_Ti5Bw-6HSdIff9ycUzaeOlJehes8h1vMYMzJDe1f85Bjch-_wfZIW7iouS3e2bH91CblwtAxTNOmhIGfPTccxuc-jIyb_8Iydr5LaS3IR6jetGZg/s400/fight_thumb.png" style="cursor: pointer; float: right; height: 124px; margin: 0pt 0pt 10px 10px; width: 124px;" /></a>Did you ever wonder if it is spelled misbehavior or mis<span style="color: #e53333;">s</span>behavior? Now there is an gadget for that! Just punch in both possible spellings into Google Fight and hit Fight! The word with the most Google hits will win and is the correct spelling - probably.But that's not all! There are endless use cases for Google Fight:<br />
<ul><li><span style="font-weight: bold;">Who is more popular?</span> Michael or Peter? Just ask Google Fight.</li>
<li><span style="font-weight: bold;">Which place is nicer?</span> Berlin or Potsdam? Google Fight knows the answer!</li>
<li><span style="font-weight: bold;">What should we eat for lunch?</span> Pizza or Burger? Hit the Fight-Button and know what is good for you!</li>
<li><span style="font-weight: bold;">Should I cheat on my girlfriend?</span> Yes or No?</li>
</ul>Try it out for yourself and visit our<a href="https://wave.google.com/wave/?pli=1#restored:wave:googlewave.com%21w%252BKR_k4-ogB.1"> public wave</a>, where we provide an installer for this gadget. It's as easy as 1-2-3.<br />
<br />
We would also like to point out, that Google Fight is fully collaborative. You see when other participants of the wave edit the words in the gadget just as you would expect from Google Wave.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-ND7JKrrrfDlWx_daL1HiKSfdV7DD4hHSVhcZmGX2o6UjrOsadEI9fsJUwIJDNLlb2BrMS2WRoOaupu2pGGiTuJEoEiSto2mknFYrTj_dlim93tsyMudCdQCy0g4xPGPPx6NZt2JM_3G/s1600-h/fight.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-ND7JKrrrfDlWx_daL1HiKSfdV7DD4hHSVhcZmGX2o6UjrOsadEI9fsJUwIJDNLlb2BrMS2WRoOaupu2pGGiTuJEoEiSto2mknFYrTj_dlim93tsyMudCdQCy0g4xPGPPx6NZt2JM_3G/s640/fight.png" /></a><br />
</div><span style="font-weight: bold;">Warning:</span> If your life depends on it, do not depend on Google Fight!<br />
<br />
Interested? <a href="https://wave.google.com/wave/?pli=1#restored:wave:googlewave.com%21w%252BKR_k4-ogB.1">Try and install gadget!</a> Your feedback is very welcome!Michael Goderbauerhttp://www.blogger.com/profile/00926607934552098621noreply@blogger.com4tag:blogger.com,1999:blog-7499534395704949588.post-8155956461077903112009-12-02T12:34:00.011+01:002012-09-23T17:58:59.710+02:00Invity - Behind the ScenesWe hope you enjoyed <a href="http://www.processwave.org/2009/11/invity-group-management-in-wave.html">Invity</a>, our group management robot for Google Wave. Now we want to reveal the code behind our robot and share our thoughts and problems with you.<br />
<br />
<a href="http://m-goderbauer.de/processPlus/Invity.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://m-goderbauer.de/processPlus/Invity.png" /></a>At first, we developed Invity as a pure robot without any sophisticated user interface. One had to type something like "#groups.save myFriends" in a Blip to save a group. However, we quickly realized it would be cool to have a gadget that allows more comfortable user interaction. But as gadgets are not able to invite people, it was obvious to us that the robot has in some way to interact with the gadget. The reason is that the gadget has to delegate the user input to the robot and the robot has to push the info about a user's groups to the gadget.<br />
<br />
We use the <a href="http://code.google.com/intl/de-DE/apis/wave/extensions/gadgets/reference.html">state</a> of the gadget to save the input of a user.<br />
When someone clicks on "Invite!", we do the following:<br />
<pre class="brush: js">var state = wave.getState();
var viewer = wave.getViewer().getId();
var value = gadgets.json.stringify({ 'action' : action, 'groupName' : groupName, 'viewer' : viewer });
state.submitValue('command', value); </pre>On the robot side, we parse and execute the action the user specified like this:<br />
<pre class="brush: java">JSONObject json = new JSONObject(command);
String action = json.getString("action");
String groupName = json.getString("groupName");
String viewer = json.getString("viewer");
if (action.equals("save")) {
saveGroup(event, groupName, viewer);
} </pre>The saveGroup method look like this:<br />
<pre class="brush: java">private void saveGroup(RobotMessageBundle bundle, String groupName, String viewer) {
PersistenceManager db = PMF.get().getPersistenceManager();
List<String> participants = bundle.getWavelet().getParticipants();
List<Group> groups = fetchGroupByName(groupName, viewer, db);
if (groups.isEmpty()) {
participants.remove("pw-invity@appspot.com");
Group group = new Group(groupName, participants, viewer);
db.makePersistent(group);
}
db.close();
}
</pre>We were quite impressed how easy and reliable this saving of groups in the Data Viewer works. However, from the robot to the gadget, the communication does not work quite that well. When we tried to display the current groups of a user in the gadget, we encountered a strange behaviour:<br />
<br />
We use the setProperty method in the following way to save the groups of all participants of a wave in the gadget state:<br />
<pre class="brush: java">String allGroups = createJSONFromGroups(participants);
gadget.setProperty("allGroups", allGroups);
</pre>We expected that this call would trigger the updateState callback as specified on the gadget side:<br />
<pre class="brush: js">wave.setStateCallback(displayState);
</pre>Unfortunately, the displayState method is <b>not </b>called when the robot changes the gadget state. So we had to build an ugly workaround which deletes the gadget and reinserts it after the robot commits a change: <br />
<pre class="brush: java">private void reinsertGadget(RobotMessageBundle bundle) {
List<Blip> allBlips = bundle.getWavelet().getRootBlip().getChildren();
Blip gadgetBlip = deleteGadgetFromBlips(allBlips);
Gadget newGadget = new Gadget(gadgetURL);
updateGadgetState(bundle, newGadget);
gadgetBlip.getDocument().getGadgetView().append(newGadget);
}
</pre>We're not really happy with this solution, but as Google knows about this issue, we hope we can delete it soon.<br />
<h4>Sources</h4>You can get the full source code for the Robot and for the Gadget at <a href="http://wave-samples-gallery.appspot.com/about_app?app_id=77015">http://wave-samples-gallery.appspot.com/about_app?app_id=77015</a>. Feel free to modify and reuse under the terms of the MIT License (<a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>).<br />
<br />
If you have not tried out Invity yet, just add <b>pw-invity@appspot.com</b> to one of your waves.processWavehttp://www.blogger.com/profile/03884112907021436994noreply@blogger.com5tag:blogger.com,1999:blog-7499534395704949588.post-21443408702914236462009-11-23T16:07:00.004+01:002012-09-23T18:00:51.886+02:00Invity: Group Management in the Wave<b>Update: </b>We've released the source code in <a href="http://www.processwave.org/2009/12/invity-behind-scenes.html">our new blog post highlighting the technical details of Invity.</a> <br />
<br />
Have you ever come across the situation of inviting many people at once to a wave? For instance, assume you want to share a wave with all your friends or colleagues that are already participants of another wave. As of today, you would have to invite everyone separately to the new wave. In our project, we often found it annoying to invite the same group of people to lots of different waves. We would love to have some kind of group management, which is announced by Google but not yet implemented. However, as a workaround we developed our own solution, which we want to share with you today.<br />
<h4>Invity the Inviter</h4><div style="float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://m-goderbauer.de/processPlus/Invity.png" /><br />
</div>We are happy to present<b> Invity</b> <b>(pw-invity@appspot.com)</b>, a Google Wave robot that you can add to your waves. It can save all current participants of the wave as a named group. When you create a new wave and invite Invity, you are able to select a group and Invity automatically adds all members to the wave.<br />
<br />
<h4 style="clear: both;">Invity in two simple steps:</h4>1. Create the group<br />
<div class="separator" style="clear: both;"><img border="0" src="http://m-goderbauer.de/processPlus/invity1.png" /><br />
</div><br />
2. Invite the group to a new wave<br />
<div class="separator" style="clear: both;"><img border="0" src="http://m-goderbauer.de/processPlus/invity3.png" /><br />
</div><br />
Please try it out and give us feedback!<br />
<br />
Later this week, we will publish some insights we gained during the development process in a more technical post. We also plan to publish Invity's source code.<br />
<div style="background-color: black; display: none; height: 1160px; left: 0px; opacity: 0.618; position: absolute; top: 0px; width: 692px; z-index: 2147483646;"></div><div style="display: none; position: absolute; z-index: 2147483647;"><img style="bottom: 0px; left: 0px; margin: auto; position: absolute; right: 0px; top: 0px;" /><br />
<div style="background-color: black; color: white; display: none; opacity: 0.618; position: absolute; text-align: left; white-space: pre;"></div></div>processWavehttp://www.blogger.com/profile/03884112907021436994noreply@blogger.com2tag:blogger.com,1999:blog-7499534395704949588.post-22451592856649449752009-11-17T15:34:00.002+01:002009-11-17T17:02:28.652+01:00Hello, Wave!Half a year ago Google announced <a href="http://wave.google.com">Wave</a>, an online tool for real-time communication and collaboration. While it already provides excellent features for live collaborative editing, communication in the Wave tends to be unstructured and chaotic. We are working on a project to support the execution of business processes inside Google Wave and provide guidance to users. In particular we are looking at two use cases: publishing an online newspaper and modelling business processes in the Wave.<br />
<br />
We are seven software engineering students at <a href="http://www.hpi.uni-potsdam.de/welcome.html?L=1">Hasso Plattner Institute</a> in <a href="http://maps.google.com/maps?ie=UTF8&ll=52.393293,13.130443&spn=0.003516,0.011362&t=h&z=17">Potsdam, Germany</a>. This project is part of our bachelor's degree and we are supervised by the <a href="http://bpt.hpi.uni-potsdam.de/">Business Technology Group</a> of <a href="http://bpt.hpi.uni-potsdam.de/Public/MathiasWeske">Professor Weske</a> at Hasso Plattner Institute. We are excited to work with Google Wave and in this blog we will share our experiences. During our project we will also create a number of gadgets and robots we would like to share with you to get your feedback.<br />
<br />
Stay tuned!processWavehttp://www.blogger.com/profile/03884112907021436994noreply@blogger.com0