Introducing UmlCanvas
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 97 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/45767 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 20108 / 97
1
2
4
5
6
8
14
15
16
17
23
29
38
41
42
44
46
47
48
50
53
54
62
63
64
65
66
71
74
75
77
78
79
80
82
84
85
94
00:00
DiagramHill differential equationProjective planeOpen sourceMultiplication signComputer animationXMLLecture/Conference
00:43
Computer-generated imageryProjective planeComputer animation
00:59
Menu (computing)Projective planeBlogWebsiteRight angleRoboticsAutonomic computingWaveComputer animation
01:25
Group actionSoftware developerPresentation of a groupWeb browserDiagramCASE <Informatik>Medical imagingRight angleSource codeLecture/ConferenceComputer animation
02:01
Color managementExecution unitDiagramRepresentation (politics)CASE <Informatik>CodeMedical imagingComputer fileWeb pageServer (computing)Source codeComputer animation
03:10
Execution unitWechselseitige InformationEmailLink (knot theory)Class diagramDefault (computer science)DiagramFluid staticsElectric generatorSource codeElement (mathematics)MathematicsSlide ruleInteractive televisionAreaDifferent (Kate Ryan album)Position operatorMedical imagingSocial classComputer animation
06:02
Annihilator (ring theory)Execution unitInterior (topology)Cantor setChi-squared distributionMaxima and minimaThumbnailComputer-generated imageryDiagramGamma functionLibrary (computing)MereologyRevision controlOnline helpMathematicsFunction (mathematics)Shape (magazine)Element (mathematics)Uniform resource locatorThomas KuhnRaster graphicsDemo (music)InformationRoboticsDiagramFeedbackEvent-driven programmingMultiplication signSource codeRandomizationVideo game consoleQuicksort2 (number)Wrapper (data mining)ImplementationProblemorientierte ProgrammierspracheText editorBlogCategory of beingEmulatorWeb browserConnectivity (graph theory)SynchronizationArtistic renderingServer (computing)Domain nameService (economics)AreaWaveOcean currentSolid geometrySocial classWebsiteFormal languageAbstractionLoginShared memoryPoint (geometry)Projective planeVolumenvisualisierungElectric generatorComputer animation
12:14
Group actionWebsiteDiagramComputer animationLecture/Conference
12:37
Annulus (mathematics)Hidden Markov modelWebsiteEndliche ModelltheorieDiagramMedical imagingSoftwareArtistic renderingMultiplication signFactory (trading post)Computer animation
13:30
DisintegrationSynchronizationEnterprise architectureDiagramOcean currentImplementationCASE <Informatik>WebsitePlug-in (computing)Computer animationLecture/Conference
14:20
Web-DesignerWeb browserOnline helpImplementationComputing platform2 (number)Multiplication signLatent heatWeb 2.0Computer animation
14:55
Sign (mathematics)Group actionComputing platformFreewareImplementationCASE <Informatik>FreewareUniform resource locatorWeb 2.0Set (mathematics)Lecture/Conference
15:27
XML
Transcript: English(auto-generated)
00:08
Thank you. OK, Sunday afternoon, 4 o'clock. After this one, still one lightning talk to go. And I never expected so many people to show up,
00:20
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. Coon, myself, and some other people in the audience here started some time ago. And we're going to introduce you to it.
00:42
Next. There you go. The big question in introducing a project, of course, is showing you what it is. Behold, UML Canvas. OK. There's a title up there, and it has a reason.
01:00
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 we started UML Canvas. OK. We can also use UML Canvas in something fancy like Google Wave. Yeah, sure, right.
01:22
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.
01:43
OK. 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.
02:01
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
02:25
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
02:44
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
03:01
the textual representation of the UML diagram, and it will render it visually. What, in fact, is, of course, what you want with UML. OK. Can we go back for a second to the source again? How do we, what is a little magic?
03:20
Well, we use the idea 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 idea and you add a suffix source, it will match the two. And that is, in fact, a way that we actually
03:42
try to do a lot of things. So if we go back to the diagram itself, and we go to the next slide. OK, so there is the same thing. That's the same text area, which now isn't disabled visually from the, that's pretty nice.
04:05
And OK. 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.
04:21
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,
04:44
it's hard 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,
05:02
well, there's no difference there. It's still the same source, or maybe, if we 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,
05:23
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.
05:42
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 gonna introduce them all one by one. We're gonna introduce them to you in one big go.
06:03
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,
06:24
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. So, that was the idea of the generated part. But he can also start editing the text area
06:41
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.
07:01
You're textually editing the OML diagram, and it's visually updated into a synchronization. There are some other tabs on there. We also have some properties. So, this one was actually the diagram that was on my blog about the little autonomous robot.
07:21
We also added a console. Console is just giving you feedback on what it is doing. It's pretty verbose 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.
07:40
That'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 thank Google for providing some emulation. Okay, moving on to the last tab of the Inspector,
08:02
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,
08:21
providing us in 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,
08:41
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.
09:03
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 ourself to any stability. But at the current pace, we're moving.
09:21
We think we can reach this pretty much by summer. And from then on, most APIs will be very solid. Okay. Let's see. What else? Let's go to the source.
09:41
Ooh, 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.
10:01
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 do 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
10:21
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.
10:42
We can save the changes Kuhn just made on our hosted UML Canvas site. So there we go. You can log in. I'm gonna go into that in a second. It says that you're not logged in and we will generate a random URL for you.
11:05
That means that because it's loaded already from those 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,
11:26
then you fail miserably live demoing. That would have saved us and given us the new URL containing. There you go, with a little help from a co-presenter.
11:41
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 in the Wave gadget. You can request it just as JSON information, which is what we do normally ourselves.
12:03
And ADL is our abstract domain language, our little language that we use to describe UML diagrams. Okay, 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
12:22
for the URL. The diagrams will remain longer on the site because anonymous diagrams are short-lived. Oh, we have three minutes to go? Okay, let's quickly try to add some more things to it. This is what it all started with.
12:40
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.
13:04
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
13:20
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
13:43
or any other UML case tool. We can't expect people to jump over to our site and say, okay, we're gonna abandon these tools. So what we're also providing, and which we'll be releasing for enterprise architects in next two weeks, is a plugin
14:01
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 your day-to-day case tools.
14:22
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.
14:41
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
15:01
of an initiative we started, which tries to set UML free. UML currently is locked into the desktop case tools. We wanna 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,
15:21
and if you have any questions, we can see you after a talk. Thank you.