 Thank you. Okay, Sunday afternoon, four o'clock. After this one, still one lighting talk to go. I never expected so many people to show up, so I'm glad you're all here. I hope we can show you something interesting. We're going to talk about UML Canvas. UML Canvas is a little open source project. Kuhn, myself, and some other people in the audience here started some time ago, and we're going to introduce you to it. There you go. The big question in introducing a project, of course, is showing you what it is. Behold, UML Canvas. Okay, there's a title up there, and it has a reason. There is the same UML Canvas on a little blog I'm writing about a little project about autonomous robots. This is the main reason why I started, we started UML Canvas. Okay. We can also use UML Canvas in something fancy like Google Wave. Yeah, sure, right. Or on a website of its own. Right. This is starting to look like a marketing screenshot-like presentation, so I'm going to cut the crap. We're in a developer conference here, so we're going to switch to the real thing. A real browser and the same UML Canvas. Okay, so what's so special about this? This is an image, right? An image taken from a case tool where I draw up a little UML diagram. I copied it and pasted it, and then just in the source, we're going to see that there is an image tag, right? Where's the image tag? There are some interesting things there. JavaScript, the Canvas tag, HTML5, and text. There is no image there. We have created step one JavaScript that looks into your code in your HTML for some textual representation of a UML diagram. It looks for the Canvas tag, and it will render this textual UML representation into what we just saw on the page, which is pretty nice because it eliminates the need to update the diagram in my case tool and copy, paste, upload it to the server. It's all gone. We just have one HTML file containing the textual representation of the UML diagram, and it will render it visually. What, in fact, is of course what you want with UML. Okay, can we go back for a second to the source again? How do we, where is the little magic? Well, we use the ID of the Canvas, which is what UML Canvas is looking for, and then if you add a text area or a predefined, pre-formatted text element, if you reuse that same ID and you add a suffix source, it will match it too. That is, in fact, a way that we actually try to do a lot of things. So, if we go back to the diagram itself, and we go to the next slide. Okay, so there is the same thing, that's the same text area, which now isn't disabled visually from the, that's pretty nice. And, okay, another advantage over static images, a Canvas element, a nice element, which allows us to draw not one image, but continuously updating it, so we can interact with the UML diagram that's in there. That's pretty neat, because UML is a little annoying aspect that the positioning of your classes, et cetera, is pretty meaningful if you want to be able to transfer the idea of the class diagram you're looking at. So, if we want to create this source, it's hard if you don't, if you can't interact with it like we just did. Now, we want to update the source, because now we have edited our UML diagram. How do we get it? Well, I said this was a source, we already had one. We have also created, on the next slide, well, there's no difference there. It's still the same source, or maybe, if you start moving things around, cool. UML Canvas will also re-export any change we visually make to the UML Canvas diagram, which is, if we look quickly at the source, now done using, where is it? Another text area, which is, by default, empty, with the suffix generated. Great. We can copy from there the new source and then paste it into our HTML diagram. Yeah, let's go next. So, here we are. Pretty nice. So, we're back where we started. We now know we have a source, we have a generated element we can use. We have added a few more others, and we're not going to introduce them all one by one. We're going to introduce them to you in one big go. Okay, what just happened? When Kuhn was moving over the diagram with his mouse, he pressed I, the I of our inspector. An inspector combines everything we had before. We had a source, we had a generated source element. Now, we combine those two in, what you see here, our editor. Editor is, in fact, source and generated element at the same time. So, if Kuhn starts dragging around classes, he can see the changes. That was the idea of the generated part, but he can also start editing the text area to change the diagram. And as you can see, the editor, if you're making mistakes, will give you preliminary some basic feedback on what you have done wrong. And there you go. You're textually editing the HTML diagram, and it's visually updated into a synchronization. There are some other tabs out in there. We also have some properties. So, this one was actually the diagram that was on my blog about the little autonomous robot. We also added a console. Console is just giving you feedback on what it is doing. It's pretty verbous right now. But if you look at the top, completely at the top of it, you will see that we also output some information. Rendering this diagram currently takes about 68 milliseconds. It's pretty nice. It's Firefox, of course. There are other browsers out there that perform very, very badly. Mostly because they don't even have the HTML5 element, and we need, or we can tank Google for providing some emulation. Okay. Moving on to the last tab of the inspector, the about tab. And here's some information more about how we deal with things. UML Canvas itself is not the entire project itself. We are also dealing here with an implementation on top of a layer we created before. It was a Canvas 2D implementation, which is a wrapper of the Canvas element, providing us a sort of a shape-oriented way and adds event-drivenness to the basic bitmap drawing device we have. As you can see, it's licensed under a BSD license. And UML Canvas, then, is in fact a library on top of the Canvas 2D implementation, just describing all the elements, all the graphical shapes that we need to display the UML diagrams. There's one more aspect that's of importance. We're our version numbering, so Canvas 2D is at 0.3-31 currently. UML Canvas, 0.3-1, we released the 0.3 release last week. As long as we haven't reached 1.0, we're not committing ourselves to any stability. But at the current pace, we're moving, we think we can reach this pretty much by summer. And from then on, the most APIs will be very solid. Okay. Let's see. What else? Let's go to the source. Wait a minute. There was a lot less than we had before. Now, there's only a Canvas element. Where's my source? Where's my generated? Where's my inspector? Where's everything? Well, we started off with a JavaScript library that allows you to render UML diagrams. We extended it with a server component. Because at a certain point, we were interested in being able to share UML diagrams also. So what did we do? Or what does the UML Canvas do? If it doesn't find the source element, it will take the idea you give to the Canvas element and go request information at our server side. So with this idea, it went to our hosted UML Canvas service and fetched the information. That's pretty neat. And it even gets better. Because if you look at it, we also have now the opportunity to save. We can save the changes Kuhn just made on our hosted UML Canvas site. So there we go. You can log in. I'm going to go into that in a second. It says that you are not logged in and we will generate a random URL for you. That means that because it's loaded already from those two UML Canvas site, we can't reuse the same. So here's a diagram. Below we saw that there was the original. So there are some changes. And if we now commit as an anonymous user, then you fail miserably live demoing. It would have saved us and given us the new URL containing there you go, with a little help from a co-presenter. You now have a public URL with the newly just created UML diagram, which offers you information about you can embed it in any HTML. You can even use it as a wave gadget. You can request it just as JSON information, which is what we do normally ourselves. And ADL is our abstract domain language, our little language that we use to describe UML diagrams. So that was a quick rundown of all features. So if you have an account, just to finalize that one, if you have an account, you can define your own ideas for the URL. The diagrams will remain longer on the site because anonymous diagrams are short lived. Oh, we have three minutes to go. Let's quickly try to add some more things to it. This is what it all started with. We are software architects helping Belgian companies create in-house software and we are faced a lot with UML and the difficulties to collaborate on UML. And we wanted to start the model factory, which we hope will become over time a reference site for UML diagrams, models, et cetera. And therefore, we needed a way to enable the rendering of UML diagrams without the need to constantly upload images and have different styles, et cetera. So this is where it started. Today, the model factory, all diagrams out there are all hosted on UML Canvas, which means you can reuse them in any way, just like we did a few seconds ago. We know that 99.99% of current UML diagrams are not UML Canvas diagrams. They are living in, for example, enterprise architect or any other UML case tool. We can't expect people to jump over to our site and say, okay, we're going to abandon these tools. So what we're also providing and which we'll be releasing for enterprise architect in the next two weeks is a plug-in that allows synchronization of diagrams with the hosted UML Canvas implementation. So it allows you to not only create and use UML diagrams from the web-based solutions, but also to use them in their day-to-day case tools. UML Canvas is a JavaScript implementation on top of a still not finalized HTML5 specification, and it's running in all kinds of browsers. We know this is the web development hell, and we've had a rough year also in bringing it to the web. We currently can use your help if you have some time to spare. Visit testUMLCanvas.org. It takes about 30 seconds to help us out so we can improve UML Canvas on all platforms and all browsers. Finally, UML Canvas is a technical implementation, but it's a reference implementation of an initiative we started, which tries to set UML free. UML currently is locked into the desktop case tools. We want to bring it to the web, and we want to do that. Thank you very much. Three URLs bring you to the things we have discussed, and if you have any questions, we can see you after the talk. Thank you.