--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/data/test-data.json Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,112 @@
+{
+ "title": "Test Graph",
+ "creation_date": "2012-07-25T11:00:00.0Z",
+ "users": [
+ {
+ "id": "u-cybunk",
+ "title": "Samuel",
+ "uri": "http://twitter.com/cybunk",
+ "color": "#e00000"
+ },
+ {
+ "id": "u-raphv",
+ "title": "Raphael",
+ "uri": "http://twitter.com/raphv",
+ "color": "#00a000"
+ }
+ ],
+ "nodes": [
+ {
+ "id": "n-001",
+ "title": "連環 (Renkan)",
+ "uri": "http://ja.wikipedia.org/wiki/%E7%99%BE%E5%AD%A6%E9%80%A3%E7%92%B0",
+ "created_by": "u-cybunk",
+ "position": {
+ "x": 0,
+ "y": 0
+ }
+ },
+ {
+ "id": "n-002",
+ "title": "Savoir",
+ "uri": "http://fr.wikipedia.org/wiki/Savoir",
+ "created_by": "u-raphv",
+ "position": {
+ "x": 200,
+ "y": 50
+ }
+ },
+ {
+ "id": "n-003",
+ "title": "Connaissance",
+ "uri": "http://fr.wikipedia.org/wiki/Connaissance",
+ "created_by": "u-raphv",
+ "position": {
+ "x": 300,
+ "y": -50
+ }
+ },
+ {
+ "id": "n-004",
+ "title": "graphe",
+ "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes",
+ "created_by": "u-cybunk",
+ "position": {
+ "x": -200,
+ "y": 0
+ }
+ },
+ {
+ "id": "n-005",
+ "title": "nœud",
+ "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes",
+ "created_by": "u-cybunk",
+ "position": {
+ "x": -300,
+ "y": 100
+ }
+ },
+ {
+ "id": "n-006",
+ "title": "lien",
+ "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes",
+ "created_by": "u-cybunk",
+ "position": {
+ "x": -300,
+ "y": -100
+ }
+ }
+ ],
+ "edges": [
+ {
+ "id": "e-001",
+ "from": "n-001",
+ "to": "n-002",
+ "created_by": "u_raphv"
+ },
+ {
+ "id": "e-002",
+ "from": "n-002",
+ "to": "n-003",
+ "created_by": "u_raphv"
+ },
+ {
+ "id": "e-003",
+ "from": "n-001",
+ "to": "n-004",
+ "created_by": "u_cybunk"
+ },
+ {
+ "id": "e-004",
+ "from": "n-004",
+ "to": "n-005",
+ "created_by": "u_cybunk"
+ },
+ {
+ "id": "e-005",
+ "from": "n-004",
+ "to": "n-006",
+ "created_by": "u_cybunk"
+ }
+ ]
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/json-serializer.js Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,42 @@
+Rkns.Serializers.BasicJson = Rkns.Utils.inherit(Rkns.Serializers._Base);
+
+Rkns.Serializers.BasicJson.prototype._init = function() {
+ this.load(this._project._opts.url);
+}
+
+Rkns.Serializers.BasicJson.prototype.load = function(_url) {
+ var _this = this;
+ Rkns.$.getJSON(_url, function(_data) {
+ _this.deserialize(_data);
+ _this.handleCallbacks();
+ });
+}
+
+Rkns.Serializers.BasicJson.prototype.deserialize = function(_serializedData) {
+ if (typeof _serializedData === "string") {
+ _serializedData = JSON.parse(_serializedData);
+ }
+ var _proj = this._project;
+ _proj.title = _serializedData.title || "(untitled project)";
+ if (typeof _serializedData.users === "object" && _serializedData.users) {
+ _proj.users.addElements(
+ Rkns._(_serializedData.users).map(function(_userData) {
+ return new Rkns.Model.User(_proj, _userData);
+ })
+ );
+ }
+ if (typeof _serializedData.nodes === "object" && _serializedData.nodes) {
+ _proj.nodes.addElements(
+ Rkns._(_serializedData.nodes).map(function(_nodeData) {
+ return new Rkns.Model.Node(_proj, _nodeData);
+ })
+ );
+ }
+ if (typeof _serializedData.edges === "object" && _serializedData.edges) {
+ _proj.edges.addElements(
+ Rkns._(_serializedData.edges).map(function(_edgeData) {
+ return new Rkns.Model.Edge(_proj, _edgeData);
+ })
+ );
+ }
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/main.js Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2012 Institut de recherche et d'innovation
+ * contributor(s) : Samuel Huron, Raphael Velt
+ *
+ * contact@iri.centrepompidou.fr
+ * http://www.iri.centrepompidou.fr
+ *
+ * This software is a computer program whose purpose is to show and add annotations on a video .
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software. You can use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+*/
+
+/* Declaring the Renkan Namespace Rkns */
+
+Rkns = {}
+
+Rkns.$ = jQuery;
+
+Rkns._ = _;
+
+Rkns.Serializers = {};
+
+Rkns.Serializers._Base = function(_project) {
+ if (typeof _project !== "undefined") {
+ this._project = _project;
+ this._callbackQueue = [];
+ this._loaded = false;
+ }
+}
+
+Rkns.Serializers._Base.prototype.deserialize = function() {}
+
+Rkns.Serializers._Base.prototype.deferCallback = function(_callback) {
+ var _this = this;
+ Rkns._.defer(function() {
+ _callback.call(_this);
+ });
+}
+
+Rkns.Serializers._Base.prototype.handleCallbacks = function() {
+ this._loaded = true;
+ while (this._callbackQueue.length) {
+ this.deferCallback(this._callbackQueue.splice(0,1)[0]);
+ }
+}
+
+Rkns.Serializers._Base.prototype.onLoad = function(_callback) {
+ if (this._loaded) {
+ this.deferCallback(_callback);
+ } else {
+ this._callbackQueue.push(_callback);
+ }
+}
+
+Rkns.Renderers = {};
+
+Rkns.Renderers._Base = function(_project) {
+ if (typeof _project !== "undefined") {
+ this._project = _project;
+ }
+}
+
+Rkns.Project = function(_opts) {
+ if (typeof _opts.serializer == "undefined") {
+ _opts.serializer = "BasicJson";
+ }
+ if (typeof _opts.renderer == "undefined") {
+ _opts.renderer = "Paper";
+ }
+ this._opts = _opts;
+ this.users = new Rkns.Model.List();
+ this.nodes = new Rkns.Model.List();
+ this.edges = new Rkns.Model.List();
+ this.serializer = new Rkns.Serializers[_opts.serializer](this);
+ this.renderer = new Rkns.Renderers[_opts.renderer](this);
+ var _this = this;
+ this.serializer.onLoad(function() {
+ _this.renderer.draw();
+ })
+}
+
+/* Utility functions */
+
+Rkns.Utils = {
+ _ID_AUTO_INCREMENT : 0,
+ _ID_BASE : (function(_d) {
+ function pad(n){return n<10 ? '0'+n : n}
+ function fillrand(n) {
+ var _res = ''
+ for (var i=0; i<n; i++) {
+ _res += Math.floor(16*Math.random()).toString(16);
+ }
+ return _res;
+ }
+ return _d.getUTCFullYear() + '-'
+ + pad(_d.getUTCMonth()+1) + '-'
+ + pad(_d.getUTCDate()) + '-'
+ + fillrand(16);
+ })(new Date()),
+ getUID : function(_base) {
+ var _n = (++this._ID_AUTO_INCREMENT).toString(16),
+ _base = (typeof _base === "undefined" ? "" : _base + "-" );
+ while (_n.length < 4) {
+ _n = '0' + _n
+ }
+ return _base + this._ID_BASE + '-' + _n;
+ },
+ inherit : function(_baseClass, _callbefore) {
+ var _class = function() {
+ if (typeof _callbefore === "function") {
+ _callbefore.apply(this, Array.prototype.slice.call(arguments, 0));
+ }
+ if (typeof _baseClass.prototype._init !== "function") {
+ _baseClass.prototype._init = function() {}
+ }
+ _baseClass.apply(this, Array.prototype.slice.call(arguments, 0));
+ this._init.apply(this, Array.prototype.slice.call(arguments, 0));
+ }
+ _class.prototype = new _baseClass();
+ return _class;
+ }
+}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/model.js Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,177 @@
+Rkns.Model = {}
+
+Rkns.Model._BaseElement = function(_project, _props) {
+ if (typeof _props !== "undefined") {
+ this._project = _project;
+ this.id = _props.id || Rkns.utils.getUID(this.type);
+ this.title = _props.title || "(untitled " + this.type + ")";
+ this.description = _props.description || "";
+ this.uri = _props.uri || "";
+// this._backRefs = [];
+ }
+}
+
+Rkns.Model._BaseElement.prototype.addReference = function(_propName, _list, _id) {
+ this[ _propName + "_id" ] = _id;
+ var _element = _list.getElement(_id);
+ this[ _propName ] = _element;
+/* if (typeof _element !== "undefined" && typeof _element._backRefs !== "undefined") {
+ _element._backRefs.push({
+ type: this.type,
+ id: this.id,
+ pointing_property: _propName,
+ element: this
+ });
+ } */
+}
+
+/* Element Class Generator */
+
+Rkns.Model._elementClass = function(_type) {
+ return Rkns.Utils.inherit(Rkns.Model._BaseElement, function() {
+ this.type = _type;
+ });
+}
+
+/* User Model */
+
+Rkns.Model.User = Rkns.Model._elementClass("user");
+
+Rkns.Model.User.prototype._init = function(_project, _props) {
+ this.color = _props.color || "#666666";
+}
+
+/* Node Model */
+
+Rkns.Model.Node = Rkns.Model._elementClass("node");
+
+Rkns.Model.Node.prototype._init = function(_project, _props) {
+ this.addReference("created_by", this._project.users, _props.created_by);
+ this.position = _props.position;
+}
+
+/* Edge Model */
+
+Rkns.Model.Edge = Rkns.Model._elementClass("edge");
+
+Rkns.Model.Edge.prototype._init = function(_project, _props) {
+ this.addReference("from", this._project.nodes, _props.from);
+ this.addReference("to", this._project.nodes, _props.to);
+}
+
+/* List Helper Functions */
+
+Rkns.Model.List = function() {
+ Array.call(this);
+ this.idIndex = [];
+}
+
+Rkns.Model.List.prototype = new Array();
+
+Rkns.Model.List.prototype.hasId = function(_id) {
+ return Rkns._(this.idIndex).include(_id);
+}
+
+Rkns.Model.List.prototype.getIds = function(_id) {
+ return this.idIndex;
+}
+
+/* On recent browsers, forEach and map are defined and do what we want.
+ * Otherwise, we'll use the Underscore.js functions
+ */
+if (typeof Array.prototype.forEach === "undefined") {
+ Rkns.Model.List.prototype.forEach = function(_callback) {
+ var _this = this;
+ Rkns._(this).forEach(function(_value, _key) {
+ _callback(_value, _key, _this);
+ });
+ }
+}
+
+if (typeof Array.prototype.map === "undefined") {
+ Rkns.Model.List.prototype.map = function(_callback) {
+ var _this = this;
+ return Rkns._(this).map(function(_value, _key) {
+ return _callback(_value, _key, _this);
+ });
+ }
+}
+
+/* We override Array's filter function because it doesn't return an Rkns.Model.List
+ */
+Rkns.Model.List.prototype.filter = function(_callback) {
+ var _this = this,
+ _res = new Rkns.Model.List();
+ _res.addElements(Rkns._(this).filter(function(_value, _key) {
+ return _callback(_value, _key, _this);
+ }));
+ return _res;
+}
+
+Rkns.Model.List.prototype.slice = function(_start, _end) {
+ var _res = new Rkns.Model.List();
+ _res.addElements(Array.prototype.slice.call(this, _start, _end));
+ return _res;
+}
+
+Rkns.Model.List.prototype.splice = function(_start, _end) {
+ var _res = new Rkns.Model.List();
+ _res.addElements(Array.prototype.splice.call(this, _start, _end));
+ this.idIndex.splice(_start, _end);
+ return _res;
+}
+
+/* Array has a sort function, but it's not as interesting as Underscore.js's sortBy
+ * and won't return a new Rkns.Model.List
+ */
+Rkns.Model.List.prototype.sortBy = function(_callback) {
+ var _this = this,
+ _res = new Rkns.Model.List();
+ _res.addElements(Rkns._(this).sortBy(function(_value, _key) {
+ return _callback(_value, _key, _this);
+ }));
+ return _res;
+}
+
+Rkns.Model.List.prototype.push = function(_el) {
+ if (typeof _el === "undefined" || typeof _el.id === "undefined") {
+ return;
+ }
+ var _index = (Rkns._(this.idIndex).indexOf(_el.id));
+ if (_index === -1) {
+ this.idIndex.push(_el.id);
+ Array.prototype.push.call(this, _el);
+ } else {
+ this[_index] = _el;
+ }
+}
+
+Rkns.Model.List.prototype.addElements = function(_array) {
+ var _this = this;
+ Rkns._(_array).forEach(function(_el) {
+ _this.push(_el);
+ });
+}
+
+Rkns.Model.List.prototype.removeId = function(_id) {
+ var _index = (Rkns._(this.idIndex).indexOf(_id));
+ if (_index !== -1) {
+ this.splice(_index,1);
+ }
+}
+
+Rkns.Model.List.prototype.removeIds = function(_list) {
+ var _this = this;
+ Rkns._(_list).forEach(function(_id) {
+ _this.removeId(_id);
+ });
+}
+
+Rkns.Model.List.prototype.getElement = function(_id) {
+ var _index = Rkns._(this.idIndex).indexOf(_id);
+ if (_index === -1) {
+ return undefined;
+ } else {
+ return this[_index];
+ }
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/paper-renderer.js Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,47 @@
+Rkns.Renderers.Paper = Rkns.Utils.inherit(Rkns.Renderers._Base);
+
+Rkns.Renderers.Paper__Controllers = {}
+
+Rkns.Renderers.Paper__Controllers._Base = function(_renderer, _element) {
+ if (typeof _renderer !== "undefined") {
+ this._renderer = _renderer;
+ this._element = _element;
+ this._element._renderer_controller = this;
+ }
+}
+
+Rkns.Renderers.Paper__Controllers.Node = Rkns.Utils.inherit(Rkns.Renderers.Paper__Controllers._Base);
+
+Rkns.Renderers.Paper__Controllers.Node.prototype._init = function() {
+ this.node_circle = new paper.Path.Circle([0, 0], 20);
+ this.redraw();
+}
+
+Rkns.Renderers.Paper__Controllers.Node.prototype.redraw = function() {
+ var _centerPoint = paper.view.center.add([this._element.position.x, this._element.position.y]);
+ this.node_circle.position = _centerPoint;
+ this.node_circle.strokeColor = this._element.created_by.color;
+}
+
+Rkns.Renderers.Paper__Controllers.Edge = Rkns.Utils.inherit(Rkns.Renderers._Base);
+
+Rkns.Renderers.Paper.prototype._init = function() {
+ paper.setup(document.getElementById(this._project._opts.canvas_id));
+}
+
+Rkns.Renderers.Paper.prototype.draw = function() {
+ var _this = this;
+ this.nodes = this._project.nodes.map(function(_node) {
+ return new Rkns.Renderers.Paper__Controllers.Node(_this, _node);
+ });
+ paper.view.draw();
+ paper.view.onResize = function() {
+ _this.redraw();
+ }
+}
+
+Rkns.Renderers.Paper.prototype.redraw = function() {
+ Rkns._(this.nodes).each(function(_node) {
+ _node.redraw();
+ })
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/render-test.html Wed Jul 25 19:36:31 2012 +0200
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <title>Test de Rendu RENKAN</title>
+ <meta name="description" content="" />
+ <meta name="author" content="Institut de Recherche et d'Innovation" />
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/underscore-min.js"></script>
+ <script src="lib/paper.js"></script>
+ <script src="js/main.js"></script>
+ <script src="js/model.js"></script>
+ <script src="js/json-serializer.js"></script>
+ <script src="js/paper-renderer.js"></script>
+ <script type="text/javascript">
+ var _proj;
+ $(function() {
+ _proj = new Rkns.Project({
+ url: "data/test-data.json",
+ canvas_id: "renkanvas"
+ });
+ });
+ </script>
+ <style type="text/css">
+ #renkanvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
+ </style>
+ </head>
+
+ <body>
+ <canvas id="renkanvas" resize></canvas>
+ </body>
+</html>