Skip to content

Whiteboard

Jump to bottom
Martin Grigorov edited this page Sep 22, 2013 · 2 revisions

Wicket 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.

Whiteboard Image

Background

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.

Documentation

Including in your Maven project

 <dependency>
     <groupId>org.wicketstuff</groupId>
     <artifactId>wicketstuff-whiteboard</artifactId>
     <version>6.11</version>
 </dependency>

How to use in your Wicket Application

  • 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);

Example Wicket Application

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.

Remarks

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.

License

Whiteboard is licensed under Apache 2.0.

Developers

Clone this wiki locally