-
Notifications
You must be signed in to change notification settings - Fork 298
Whiteboard
This project provides a Whiteboard which can be integrated in any wicket application. On the Whiteboard user can do,
- Draw basic geometric shapes like point, lines, circles, rectangles, curves, arrows
- Insert pictures & background images
- Basic manipulations like zooming, moving, undo
- Save/Load content
All the whiteboard drowning, action will be synchronized between all the whiteboard viewers. That feature gives a collaborative drawing environment for whiteboard users. Also the whiteboard is facilitated with localizations.
This project was initiated at Apache OpenMeetings project. This was done as a Google Summer of Code project in 2013. The project proposal and the related details can be found here in http://www.google-melange.com/gsoc/project/google/gsoc2013/andunslg/34001. The whiteboard is implemented on top of the Google Closure Library based whiteboard implemented in here https://github.com/bay73/whiteboard by Andrey Bogdanov.
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>wicketstuff-whiteboard</artifactId>
<version>6.11</version>
</dependency>
- Create a markup container like this,
<div wicket:id="whiteboardContainer"></div>
- Add Whiteboard to your page like this,
Whiteboard whiteboard = new Whiteboard("Unique Id for Whiteboard","whiteboardContainer", "JSON String representing a saved Whiteboard. Can be null", "Location of the Pictures Folder. Relative to Context Root. Can be null", "Location of the Background Images Folder. Relative to Context Root. Can be null");
add(whiteboard);
Html Page,
<html>
<body>
<div>
<div style="font-style: oblique;text-align: center">Whiteboard</div>
<div wicket:id="whiteboardContainer" style="width:100%; height:100%;"></div>
</div>
</body>
</html>
Java code for the page,
package org.wicketstuff.whiteboard.sample;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.request.mapper.parameter.PageParameters;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.wicketstuff.whiteboard.Whiteboard;
import org.wicketstuff.whiteboard.WhiteboardBehavior;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
public class HomePage extends WebPage {
private static final Logger log = LoggerFactory.getLogger(HomePage.class);
public HomePage(final PageParameters parameters) {
super(parameters);
//Reading a json file which represent a previously saved whiteboard
String content = "";
InputStream savedWhiteboard = this.getClass().getResourceAsStream("Whiteboard_Example.json");
BufferedReader reader = null;
try {
reader = new BufferedReader(new InputStreamReader(savedWhiteboard));
String line = reader.readLine();
while (line != null) {
content += line;
line = reader.readLine();
}
} catch (Exception e) {
log.error("Unexpected error: ", e);
} finally {
if (reader != null) {
try {
reader.close();
} catch (Exception e) {
// noop
}
}
Whiteboard whiteboard = new Whiteboard("whiteboard_example_1","whiteboardContainer", content, "ClipArts", "Documents");
add(whiteboard);
}
}
}
Example for Saved Whiteboard,
{"background": {
"height": 326,
"width": 595.0481927710844,
"left": -297.5240963855422,
"type": "Background",
"url": "http://localhost:8080/Documents/gmaps.jpg",
"top": 163
}, "elements": [
{
"id": 5,
"p2": 4,
"color": "",
"p1": 3,
"trace": false,
"hidden": false,
"label": "",
"type": "PencilCircle"
},
{
"id": 0,
"color": "",
"trace": false,
"hidden": false,
"label": "",
"type": "PointFree",
"y": 105,
"x": -527
},
{
"id": 2,
"p2": 1,
"color": "",
"p1": 0,
"trace": false,
"hidden": false,
"label": "",
"type": "PencilRect"
},
{
"id": 1,
"color": "",
"trace": false,
"hidden": false,
"label": "",
"type": "PointFree",
"y": -100,
"x": -157
},
{
"id": 3,
"color": "",
"trace": false,
"hidden": false,
"label": "",
"type": "PointFree",
"y": 96,
"x": 61
},
{
"id": 4,
"color": "",
"trace": false,
"hidden": false,
"label": "",
"type": "PointFree",
"y": 78,
"x": 88
}
]}
Detailed application can be found in here https://github.com/wicketstuff/core/tree/master/jdk-1.6-parent/whiteboard-parent/whiteboard-examples.
When you use the save function of the whiteboard. It will save the whiteboard content as a JSON file in a folder called Saved_Whiteboards in your web application.
Whiteboard is licensed under Apache 2.0.
- Andun S.L. Gunawardana - https://github.com/andunslg
- Maxim Solodovnik - https://github.com/solomax - Mentor of the GSOC Project