Scribble is a generic, extensible framework which brings scribble functionality to any new or existing GEF based diagram editor in the Eclipse ecosystem. It is currently in prototype status but an Eclipse update site is available for those who want to see first results.
Scribble at ICSE 2013
Scribble will be presented at the International Conference on Software Engineering (ICSE) 2013 in San Francisco. Get a glimpse of Scribble with this short teaser video:
- If you don’t have Eclipse already, download a fresh version from here: Eclipse Downloads. A good starting point is the Eclipse Classic bundle. Simply extract the archive and start Eclipse.
- Use the Install Software feature to install Scribble:
- Help -> Install New Software…
- Copy & Paste the Scribble update site URL into the “Work with” field: http://www.se.eecs.uni-kassel.de/fileadmin/se/scribble/update
- Select the Scribble Feature.
- Next -> Next -> Accept license agreement ->Finish
- Restart Eclipse
HowTo Use Scribble
To see Scribble in action, you can either inject Scribble into your own GEF based diagram editor or try out the features using the example editors provided by Eclipse. This HowTo is based on the Shapes diagram editor which comes with the GEF examples. You can skip the first two sections if you have installed the GEF Examples already and if you are familiar with the Shapes diagram editor.
Installing the GEF Examples
- Use the Install Software feature in Eclipse to install the GEF Examples: Help -> Install New Software…
- Select Eclipse Release Update Site from the “Work with:” combo box
- Enter “GEF” into the filter text field and select the feature “Graphical Editing Framework GEF Examples”
- Next -> Next -> Accept license agreement -> Finish
- Restart Eclipse
Shapes diagram warm-up
- Create a new project: File -> New -> Project… -> Project. Enter “Shapes Example” as project name and click “Finish”.
- Create a new Shapes diagram: Right-click on your new project “Shapes Example” -> New -> Other… -> Enter “Shape” in the filter box -> Choose “Shapes Diagram” -> Next -> Finish. The new diagram will automatically be opened.
- Expand the palette by clicking on the small triangle on the right side of the diagram:
- Create a new “Ellipse”:
- Create a new “Rectangle” in the same way.
- Create a “Solid Connection” between the ellipse and the rectangle:
- Select the “Solid Connection” tool
- Click on the ellipse in the diagram
- Click on the rectangle in the diagram
Scribble in Action
Using Scribble in you own editor is really simple. In this HowTo, we will inject Scribble into the Shapes diagram editor.
- Create and open a new Shapes diagram as described above.
- Inject Scribble by clicking the “Attach Scribble Tool” Button (1.) in the toolbar:
As you can see, the Scribble tool was automagically injected into the Shapes diagram editor (2.).
- Select the “Scribble” tool in the palette
Draw a circle on the diagram canvas:Because Scribble doesn’t have any training data yet and thus no recognition can be performed, an overlay appears that let you tell Scribble what you mean with you drawing. Select “Ellipse”.
After you told Scribble to connect your drawing to the “Ellipse” element, a beautified version of your drawing appears immediately.
- Draw another circle. Depending on how similar your second circle compared to your first one is, Scribble automatically recognizes your drawing OR displays the overlay again to ask what you mean. Repeat this step four to five times. Scribble should then have a recognition rate of 80-90%.
Now draw a “Rectangle” on the canvas:Again, Scribble doesn’t know what you mean by this drawing. Tell Scribble to connect this drawing to the “Rectangle” element by clicking on the “Rectangle” button in the overlay menu.
- It might be possible that Scribble recognizes a rectangle as ellipse or vice versa. Don’t panic. Simply click on the element in the diagram an re-assign the correct element:
Last, draw a line from an “Ellipse” to a “Rectangle”:Select “Solid connection” from the overlay menu. Scribble will connect your drawing with the “Solid Connection” element. Draw some more lines between different elements to train Scribble!
- Congratulations! You successfully injected Scribble into the Shapes diagram Editor. Don’t hesitate to inject Scribble into your own editor!