# HG changeset patch # User veltr # Date 1346944871 -7200 # Node ID db991a7570152e7a54ec9e2023e4d8e4a1084f0e # Parent d249d36ecc376789f63ec26bc62e3425ebbb0c1a Added images diff -r d249d36ecc37 -r db991a757015 client/css/renkan.css --- a/client/css/renkan.css Wed Sep 05 14:49:33 2012 +0200 +++ b/client/css/renkan.css Thu Sep 06 17:21:11 2012 +0200 @@ -182,14 +182,14 @@ } .Rk-Editor label { - display: inline-block; width: 80px; + display: inline-block; width: 70px; } a.Rk-Edit-Goto { display: block; float: right; width: 18px; height: 17px; margin: 1px 0; border: none; background: url(../img/goto.png); } -.Rk-Edit-Title { +.Rk-Edit-Title, .Rk-Edit-URI, .Rk-Edit-Image { font-size: 12px; width: 225px; } @@ -197,6 +197,11 @@ font-size: 12px; width: 205px; } +.Rk-Edit-ImgPreview { + border: 1px solid #666; margin: 5px 0; min-height: 10px; display: block; + max-width: 100% !important; max-height: 100px !important; +} + .Rk-Editor textarea { width: 225px; height: 120px; resize: none; } @@ -414,7 +419,7 @@ } .Rk-Wikipedia-Icon { - float: left; width: 52px; height: 47px; background: url(../img/wikipedia.png); + float: left; margin: 3px; } .Rk-Wikipedia-Title-Icon { @@ -441,18 +446,14 @@ margin-left: 54px; } -.Rk-Ldt-Icon { - float: left; width: 49px; background: url(../img/ldt-elements.png); -} - -.Rk-Ldt-TagIcon { - height: 19px; +.Rk-Ldt-Tag-Icon { + float: left; margin: 0 2px 0 0; } -.Rk-Ldt-PointIcon { - height: 29px; background-position: 0 -19px; +.Rk-Ldt-Annotation-Icon { + float: left; margin: 3px; } -.Rk-Ldt-SegmentIcon { - height: 29px; background-position: 0 -48px; +.Rk-Clear { + clear: both; } diff -r d249d36ecc37 -r db991a757015 client/data/test-data.json --- a/client/data/test-data.json Wed Sep 05 14:49:33 2012 +0200 +++ b/client/data/test-data.json Thu Sep 06 17:21:11 2012 +0200 @@ -1,19 +1,19 @@ { "users": [ { - "id": "u-anonymous", + "_id": "u-anonymous", "title": "anonymous", "uri": "", "description": "", "color": "#dd00dd" }, { - "id": "u-cybunk", + "_id": "u-cybunk", "title": "Samuel", "uri": "http://twitter.com/cybunk", "description": "", "color": "#e00000" }, { - "id": "u-raphv", + "_id": "u-raphv", "title": "Raphael", "uri": "http://twitter.com/raphv", "description": "", @@ -22,7 +22,7 @@ ], "nodes": [ { - "id": "node-2012-08-22-9da6eef6c6391d05-0001", + "_id": "node-2012-08-22-9da6eef6c6391d05-0001", "title": "Chocs technologiques et tâches de l’université...", "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=s_6C326EED-B91A-AEDF-032D-40D9A60AAD7E", "description": "Bernard Stiegler:\nChocs technologiques et tâches de l’université. L'époque des digital studies\nベルナール・スティグレールによるプレゼンテーション『テクノロジーの衝撃と大学の諸課題――デジタル・スタディーズの時代』 (langue française フランス語)", @@ -30,39 +30,43 @@ "x": 35.50145330596697, "y": -79.8809523809524 }, + "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-segment.png", "created_by": "u-cybunk" }, { - "id": "node-2012-08-22-9da6eef6c6391d05-0002", + "_id": "node-2012-08-22-9da6eef6c6391d05-0002", "title": "Wiki: ベルナール・スティグレール", "uri": "http://ja.wikipedia.org/wiki/%E3%83%99%E3%83%AB%E3%83%8A%E3%83%BC%E3%83%AB%E3%83%BB%E3%82%B9%E3%83%86%E3%82%A3%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%AB", "description": "|image_name = Bernard-Stiegler.jpg\n'''ベルナール・スティグレール'''（'''Bernard Stiegler''',[[1952年]][[4月1日]] - ）は、[[フランス]]の[[哲学者]]。\n", "position": { - "x": -196.21861947454883, - "y": -149.00697345010028 + "x": -212.89325104742056, + "y": -142.05921029473706 }, + "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png", "created_by": "u-raphv" }, { - "id": "node-2012-08-22-9da6eef6c6391d05-0003", + "_id": "node-2012-08-22-9da6eef6c6391d05-0003", "title": "Wiki: Bernard Stiegler", "uri": "http://fr.wikipedia.org/wiki/Bernard_Stiegler", "description": "Bernard Stiegler, né le 1 | avril | 1952, est un philosophe français qui axe sa réflexion sur les enjeux des mutations actuelles — ... ", "position": { - "x": -203.78187077358191, - "y": -298.3662919065874 + "x": -199.613212880364, + "y": -297.6715155910511 }, + "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png", "created_by": "u-raphv" }, { - "id": "node-2012-08-22-9da6eef6c6391d05-0004", + "_id": "node-2012-08-22-9da6eef6c6391d05-0004", "title": "Tag: Stiegler", "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/search/?search=Stiegler&field=all", "description": "Tag 'Stiegler'", "position": { - "x": -82.30326393358813, - "y": -220.3518547582561 + "x": -68.40773762286169, + "y": -205.76155213199334 }, + "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-tag.png", "created_by": "u-raphv" }, { - "id": "node-2012-08-22-9da6eef6c6391d05-0009", + "_id": "node-2012-08-22-9da6eef6c6391d05-0009", "title": "Wiki: Humanités numériques", "uri": "http://fr.wikipedia.org/wiki/Humanit%C3%A9s_num%C3%A9riques", "description": "une proposition de définition a été élaborée lors du THATCamp des 18 et 19 mai 2010 sous la forme d'un « Manifeste des digital humanities : ... ", @@ -70,9 +74,10 @@ "x": -227.84295519248332, "y": 91.1816115015538 }, + "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png", "created_by": "u-raphv" }, { - "id": "node-2012-08-22-9da6eef6c6391d05-000a", + "_id": "node-2012-08-22-9da6eef6c6391d05-000a", "title": "Wiki: デジタル・ヒューマニティーズ", "uri": "http://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%83%BB%E3%83%92%E3%83%A5%E3%83%BC%E3%83%9E%E3%83%8B%E3%83%86%E3%82%A3%E3%83%BC%E3%82%BA", "description": "...（digital humanities）は、コンピューティングと人文科学（humanities）諸分野と間の接点に関して調査、研究、教育、および�\n* Centre for Computing in the Humanities\n", @@ -80,19 +85,20 @@ "x": -221.48701615763574, "y": 242.80740052545508 }, + "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png", "created_by": "u-raphv" }, { - "id": "node-2012-08-22-9da6eef6c6391d05-000b", + "_id": "node-2012-08-22-9da6eef6c6391d05-000b", "title": "Digital studies", "uri": "", "description": "", "position": { - "x": -55.85113246487888, - "y": 51.55194408866958 + "x": -62.798895620242085, + "y": 32.09820725365255 }, "created_by": "u-raphv" }, { - "id": "node-2012-08-22-9da6eef6c6391d05-000c", + "_id": "node-2012-08-22-9da6eef6c6391d05-000c", "title": "Digital Humanities", "uri": "", "description": "", @@ -102,7 +108,7 @@ }, "created_by": "u-raphv" }, { - "id": "node-2012-08-22-b778a9fc31296d6b-0008", + "_id": "node-2012-08-22-b778a9fc31296d6b-0008", "title": "Les rétentions (Tweet)", "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=a924b90c-46a1-4f0a-9e13-bcf69f7b5de0-127750274034049024", "description": "Tweet by Vincent Puig: #tfcem Les rétentions primaires (perception) s'aggrégent et forment des rétentions secondaires (mémoire), gravées sur rétentions tertiaires", @@ -110,52 +116,57 @@ "x": 186.15055288633457, "y": -184.66836073709257 }, + "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg", "created_by": "u-cybunk" }, { - "id": "node-2012-08-22-b778a9fc31296d6b-0009", + "_id": "node-2012-08-22-b778a9fc31296d6b-0009", "title": "L'origine de la géométrie (Tweet)", "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=5b34ae61-ffb1-4535-a479-007cb0ef57e8-127752118743474177", "description": "Tweet by Vincent Puig: #tfcem L'origine de la géométrie: l'écriture est processus long de transindividuation. Nos tweets quasi temps réel sont de même nature++", "position": { - "x": 109.36171738186508, - "y": -322.7405203211109 + "x": 87.82365160023906, + "y": -280.3591650733953 }, + "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg", "created_by": "u-cybunk" }, { - "id": "node-2012-08-22-b778a9fc31296d6b-000a", + "_id": "node-2012-08-22-b778a9fc31296d6b-000a", "title": "Polemictweet : un outil Digital Studies (Tweet)", "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=4b34e895-221b-467b-a0f2-8ff4ae87cae4-127758736415666177", "description": "Tweet by Vincent Puig:\n#tfcem Polemictweet : un outil Digital Studies pensé à l'IRI comme rétention tertiaire numérique avec les même armes que l'industrie", "position": { - "x": 174.8441677339912, - "y": 69.79052957489553 + "x": 168.59118089416432, + "y": 57.97933221077804 }, + "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg", "created_by": "u-cybunk" }, { - "id": "node-2012-08-22-b778a9fc31296d6b-000f", + "_id": "node-2012-08-22-b778a9fc31296d6b-000f", "title": "Rétention (Définition AI)", "uri": "http://arsindustrialis.org/vocabulaire-ars-industrialis/r%C3%A9tention", "description": "Les rétentions sont ce qui est retenu ou recueilli par la conscience. Ce terme est emprunté à Husserl ; mais les rétentions tertiaires sont propres à la philosophie de Bernard Stiegler.\n\nLes rétentions sont des sélections : dans le flux de conscience que vous êtes vous ne pouvez pas tout retenir, ce que vous retenez est ce que vous êtes, mais ce que vous retenez dépend ce que vous avez déjà retenu.\n\nL’espèce humaine, étant originairement constituée par sa prothéticité, dispose d’une troisième mémoire, ni génétique, ni épigénétique : le milieu épiphylogénétique, comme ensemble des rétentions tertiaires formant des dispositifs rétentionels.", "position": { - "x": 240.98461723225768, - "y": -53.794373087027985 + "x": 276.41820932461013, + "y": -62.82646518900019 }, + "image": "http://www.arsindustrialis.org/sites/default/files/userfiles/user3/Logovocabulairenoir.JPG", "created_by": "u-cybunk" }, { - "id": "node-2012-08-22-5b349e49066c1b01-0001", + "_id": "node-2012-08-22-5b349e49066c1b01-0001", "title": "Polemic Tweet", "uri": "http://polemictweet.com/", "description": "Polemic Tweet Web Site", "position": { - "x": 220.27339862010322, - "y": 209.95821750254615 + "x": 220.96817493563964, + "y": 196.75746750735607 }, + "image": "http://www.polemictweet.com/images/ENMI_2010_logo.gif", "created_by": "u-cybunk" } ], "edges": [ { - "id": "edge-2012-08-22-9da6eef6c6391d05-0005", + "_id": "edge-2012-08-22-9da6eef6c6391d05-0005", "title": "is about", "uri": "", "description": "", @@ -163,7 +174,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-0004", "created_by": "u-raphv" }, { - "id": "edge-2012-08-22-9da6eef6c6391d05-0006", + "_id": "edge-2012-08-22-9da6eef6c6391d05-0006", "title": "is about", "uri": "", "description": "", @@ -171,7 +182,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-0004", "created_by": "u-raphv" }, { - "id": "edge-2012-08-22-9da6eef6c6391d05-0007", + "_id": "edge-2012-08-22-9da6eef6c6391d05-0007", "title": "speech by", "uri": "", "description": "", @@ -179,7 +190,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-0004", "created_by": "u-raphv" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-0001", + "_id": "edge-2012-08-22-b778a9fc31296d6b-0001", "title": "is about", "uri": "", "description": "", @@ -187,7 +198,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-000b", "created_by": "u-raphv" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-0002", + "_id": "edge-2012-08-22-b778a9fc31296d6b-0002", "title": "Are related to", "uri": "", "description": "", @@ -195,7 +206,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-000c", "created_by": "u-raphv" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-0003", + "_id": "edge-2012-08-22-b778a9fc31296d6b-0003", "title": "is about", "uri": "", "description": "", @@ -203,7 +214,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-000c", "created_by": "u-raphv" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-0004", + "_id": "edge-2012-08-22-b778a9fc31296d6b-0004", "title": "is about", "uri": "", "description": "", @@ -211,7 +222,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-000c", "created_by": "u-raphv" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-000b", + "_id": "edge-2012-08-22-b778a9fc31296d6b-000b", "title": "is about", "uri": "", "description": "", @@ -219,7 +230,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-000b", "created_by": "u-raphv" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-000c", + "_id": "edge-2012-08-22-b778a9fc31296d6b-000c", "title": "tweeted during", "uri": "", "description": "", @@ -227,7 +238,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-0001", "created_by": "u-cybunk" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-000d", + "_id": "edge-2012-08-22-b778a9fc31296d6b-000d", "title": "tweeted during", "uri": "", "description": "", @@ -235,7 +246,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-0001", "created_by": "u-cybunk" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-000e", + "_id": "edge-2012-08-22-b778a9fc31296d6b-000e", "title": "tweeted during", "uri": "", "description": "", @@ -243,7 +254,7 @@ "to": "node-2012-08-22-9da6eef6c6391d05-0001", "created_by": "u-cybunk" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-0011", + "_id": "edge-2012-08-22-b778a9fc31296d6b-0011", "title": "is about", "uri": "", "description": "", @@ -251,7 +262,7 @@ "to": "node-2012-08-22-b778a9fc31296d6b-000f", "created_by": "u-cybunk" }, { - "id": "edge-2012-08-22-b778a9fc31296d6b-0012", + "_id": "edge-2012-08-22-b778a9fc31296d6b-0012", "title": "is about", "uri": "", "description": "", @@ -259,13 +270,29 @@ "to": "node-2012-08-22-b778a9fc31296d6b-000f", "created_by": "u-cybunk" }, { - "id": "edge-2012-08-22-5b349e49066c1b01-0002", + "_id": "edge-2012-08-22-5b349e49066c1b01-0002", "title": "is about", "uri": "", "description": "", "from": "node-2012-08-22-b778a9fc31296d6b-000a", "to": "node-2012-08-22-5b349e49066c1b01-0001", "created_by": "u-cybunk" + }, { + "_id": "edge-2012-09-06-70cc0c2d5e1112d3-0001", + "title": "is an example of", + "uri": "", + "description": "", + "from": "node-2012-08-22-b778a9fc31296d6b-000a", + "to": "node-2012-08-22-9da6eef6c6391d05-000b", + "created_by": "u-anonymous" + }, { + "_id": "edge-2012-09-06-70cc0c2d5e1112d3-0002", + "title": "tool used", + "uri": "", + "description": "", + "from": "node-2012-08-22-5b349e49066c1b01-0001", + "to": "node-2012-08-22-b778a9fc31296d6b-000a", + "created_by": "u-anonymous" } ] } \ No newline at end of file diff -r d249d36ecc37 -r db991a757015 client/img/ldt-elements.png Binary file client/img/ldt-elements.png has changed diff -r d249d36ecc37 -r db991a757015 client/img/ldt-point.png Binary file client/img/ldt-point.png has changed diff -r d249d36ecc37 -r db991a757015 client/img/ldt-segment.png Binary file client/img/ldt-segment.png has changed diff -r d249d36ecc37 -r db991a757015 client/img/ldt-tag.png Binary file client/img/ldt-tag.png has changed diff -r d249d36ecc37 -r db991a757015 client/js/i18n.js --- a/client/js/i18n.js Wed Sep 05 14:49:33 2012 +0200 +++ b/client/js/i18n.js Thu Sep 06 17:21:11 2012 +0200 @@ -7,6 +7,7 @@ edit_description: "Description:", edit_from: "From:", edit_to: "To:", + edit_image: "Image:", full_screen: "Full Screen", add_node: "Add Node", add_edge: "Add Edge", @@ -26,11 +27,12 @@ fr: { edit_node: "Édition d’un nœud", edit_edge: "Édition d’un lien", - edit_title: "Titre:", - edit_uri: "URI:", + edit_title: "Titre :", + edit_uri: "URI :", edit_description: "Description :", - edit_from: "De:", - edit_to: "Vers:", + edit_from: "De :", + edit_to: "Vers :", + edit_image: "Image :", full_screen: "Mode plein écran", add_node: "Ajouter un nœud", add_edge: "Ajouter un lien", diff -r d249d36ecc37 -r db991a757015 client/js/ldtjson-bin.js --- a/client/js/ldtjson-bin.js Wed Sep 05 14:49:33 2012 +0200 +++ b/client/js/ldtjson-bin.js Thu Sep 06 17:21:11 2012 +0200 @@ -3,13 +3,13 @@ Rkns.Ldt.ProjectBin = Rkns.Utils.inherit(Rkns._BaseBin); Rkns.Ldt.ProjectBin.prototype.tagTemplate = Rkns._.template( - '
  • ' - + '

    <%-title%>

    • ' + '
  • ' + + '

    <%-title%>

    • ' ); Rkns.Ldt.ProjectBin.prototype.annotationTemplate = Rkns._.template( - '
  • ' - + '

    <%-title%>

    <%-description%>

    Start: <%=start%>, End: <%=end%>, Duration: <%=duration%>

    • ' + '
  • ' + + '

    <%-title%>

    <%-description%>

    Start: <%=start%>, End: <%=end%>, Duration: <%=duration%>

    • ' ); Rkns.Ldt.ProjectBin.prototype._init = function(_renkan, _opts) { @@ -54,7 +54,12 @@ _html += Rkns._(_data.annotations).map(function(_annotation) { var _description = _annotation.content.description, _title = _annotation.content.title.replace(_description,""), - _duration = _annotation.end - _annotation.begin; + _duration = _annotation.end - _annotation.begin, + _img = ( + (_annotation.content && _annotation.content.img && _annotation.content.img.src) + ? _annotation.content.img.src + : ( _duration ? "img/ldt-segment.png" : "img/ldt-point.png" ) + ); return _this.annotationTemplate({ ldt_platform: _this.ldt_platform, title: _title, @@ -64,7 +69,7 @@ duration: convertTC(_duration), mediaid: _annotation.media, annotationid: _annotation.id, - type: _duration ? "Segment" : "Point" + image: _img }); }).join(""); diff -r d249d36ecc37 -r db991a757015 client/js/main.js --- a/client/js/main.js Wed Sep 05 14:49:33 2012 +0200 +++ b/client/js/main.js Thu Sep 06 17:21:11 2012 +0200 @@ -166,7 +166,8 @@ _this.selected_bin_item = { uri : $(_t).attr("data-uri"), title : $(_t).attr("data-title"), - description : $(_t).attr("data-description") + description : $(_t).attr("data-description"), + image: $(_t).attr("data-image") } return false; } diff -r d249d36ecc37 -r db991a757015 client/js/models.js --- a/client/js/models.js Wed Sep 05 14:49:33 2012 +0200 +++ b/client/js/models.js Thu Sep 06 17:21:11 2012 +0200 @@ -87,6 +87,7 @@ uri: this.get("uri"), description: this.get("description"), position: this.get("position"), + image: this.get("image"), created_by: this.get("created_by").get("_id") }; }, diff -r d249d36ecc37 -r db991a757015 client/js/paper-renderer.js --- a/client/js/paper-renderer.js Wed Sep 05 14:49:33 2012 +0200 +++ b/client/js/paper-renderer.js Thu Sep 06 17:21:11 2012 +0200 @@ -2,9 +2,9 @@ _MARGIN_X: 80, _MARGIN_Y: 50, _MIN_DRAG_DISTANCE: 2, - _NODE_RADIUS: 15, - _NODE_BUTTON_INNER: 16, - _NODE_BUTTON_OUTER: 50, + _NODE_RADIUS: 25, + _NODE_BUTTON_INNER: 26, + _NODE_BUTTON_OUTER: 60, _EDGE_BUTTON_INNER: 1, _EDGE_BUTTON_OUTER: 40, _NODE_FONT_SIZE: 10, @@ -205,7 +205,6 @@ this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, {}); this.link_button.node_representation = this; this.title.paragraphStyle.justification = 'center'; - this.title.__representation = this; } Rkns.Renderer.Node.prototype.redraw = function() { @@ -213,11 +212,43 @@ this.paper_coords = this.renderer.toPaperCoords(_model_coords); this.circle.position = this.paper_coords; this.title.content = this.model.get("title"); - this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]); + this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]); this.circle.strokeColor = this.model.get("created_by").get("color"); this.edit_button.moveTo(this.paper_coords); this.remove_button.moveTo(this.paper_coords); this.link_button.moveTo(this.paper_coords); + var _img = this.model.get("image"); + if (_img && _img !== this.img) { + var _image = new Image(), + _this = this; + _image.onload = function() { + if (_this.node_image) { + _this.node_image.remove(); + } + _this.renderer.node_layer.activate(); + var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height ); + var _raster = new paper.Raster(_image); + var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS); + _raster.scale(_ratio); + _this.node_image = new paper.Group(_clip, _raster); + _this.node_image.opacity = .9; + /* This is a workaround to allow clipping at group level */ + _this.node_image.clipped = true; + _this.node_image.position = _this.paper_coords; + _this.node_image.__representation = _this; + paper.view.draw(); + } + _image.src = _img; + } + this.img = _img; + if (this.node_image) { + if (!this.img) { + this.node_image.remove(); + delete this.node_image; + } else { + this.node_image.position = this.paper_coords; + } + } } Rkns.Renderer.Node.prototype.paperShift = function(_delta) { @@ -236,7 +267,7 @@ this.renderer.removeRepresentationsOfType("editor"); var _editor = this.renderer.addRepresentation("NodeEditor",null); _editor.node_representation = this; - _editor.redraw(); + _editor.draw(); } Rkns.Renderer.Node.prototype.select = function() { @@ -264,11 +295,17 @@ } Rkns.Renderer.Node.prototype.highlight = function() { - this.circle.fillColor = "#ffffc0"; + this.circle.fillColor = "#ffff80"; + if (this.node_image) { + this.node_image.opacity = .5; + } } Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) { this.circle.fillColor = "#ffffff"; + if (this.node_image) { + this.node_image.opacity = .9; + } } Rkns.Renderer.Node.prototype.mouseup = function(_event) { @@ -285,6 +322,9 @@ this.link_button.destroy(); this.circle.remove(); this.title.remove(); + if (this.node_image) { + this.node_image.remove(); + } } /* */ @@ -309,7 +349,6 @@ fillColor: 'black' }; this.text.paragraphStyle.justification = 'center'; - this.text.__representation = this; this.text_angle = 0; this.arrow_angle = 0; this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, {}); @@ -360,7 +399,7 @@ this.renderer.removeRepresentationsOfType("editor"); var _editor = this.renderer.addRepresentation("EdgeEditor",null); _editor.edge_representation = this; - _editor.redraw(); + _editor.draw(); } Rkns.Renderer.Edge.prototype.select = function() { @@ -503,41 +542,51 @@ + '

    ' + '

    ' + '

    ' + + '

    ' + '

    <%=node.created_by_title%>

    ' ); -Rkns.Renderer.NodeEditor.prototype.redraw = function() { - var _coords = this.node_representation.paper_coords, - _model = this.node_representation.model; +Rkns.Renderer.NodeEditor.prototype.draw = function() { + var _model = this.node_representation.model; this.editor_$ .html(this.template({ node: { title: _model.get("title"), uri: _model.get("uri"), description: _model.get("description"), + image: _model.get("image") || "", created_by_color: _model.get("created_by").get("color"), created_by_title: _model.get("created_by").get("title") }, l10n: this.renderer.renkan.l10n - })) - .show(); - Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$); + })); + this.redraw(); var _this = this; this.editor_$.find(".Rk-CloseX").click(function() { _this.renderer.removeRepresentation(_this); paper.view.draw(); }); this.editor_$.find("input, textarea").bind("keyup change", function() { - _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val()); + var _uri = _this.editor_$.find(".Rk-Edit-URI").val(), + _image = _this.editor_$.find(".Rk-Edit-Image").val(); + _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image); + _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri); var _data = { title: _this.editor_$.find(".Rk-Edit-Title").val(), description: _this.editor_$.find(".Rk-Edit-Description").val(), - uri: _this.editor_$.find(".Rk-Edit-URI").val() + uri: _uri, + image: _image } _model.set(_data); - paper.view.draw(); + _this.redraw(); }); this.editor_$.find(".Rk-Edit-Title")[0].focus(); +} + +Rkns.Renderer.NodeEditor.prototype.redraw = function() { + var _coords = this.node_representation.paper_coords; + Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$); + this.editor_$.show(); paper.view.draw(); } @@ -578,9 +627,8 @@ + '

    <%=edge.created_by_title%>

    ' ); -Rkns.Renderer.EdgeEditor.prototype.redraw = function() { - var _coords = this.edge_representation.paper_coords, - _model = this.edge_representation.model; +Rkns.Renderer.EdgeEditor.prototype.draw = function() { + var _model = this.edge_representation.model; this.editor_$ .html(this.template({ edge: { @@ -595,9 +643,8 @@ created_by_title: _model.get("created_by").get("title") }, l10n: this.renderer.renkan.l10n - })) - .show(); - Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$); + })); + this.redraw(); var _this = this; this.editor_$.find(".Rk-CloseX").click(function() { _this.renderer.removeRepresentation(_this); @@ -610,8 +657,13 @@ uri: _this.editor_$.find(".Rk-Edit-URI").val() } _model.set(_data); - paper.view.draw(); + _this.redraw(); }); +} +Rkns.Renderer.EdgeEditor.prototype.redraw = function() { + var _coords = this.edge_representation.paper_coords; + Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$); + this.editor_$.show(); paper.view.draw(); } @@ -1288,6 +1340,7 @@ uri: _newEl.uri, title: _newEl.title, description: _newEl.description, + image: _newEl.image, position: { x: _coords.x, y: _coords.y diff -r d249d36ecc37 -r db991a757015 client/js/renkan-publish.js --- a/client/js/renkan-publish.js Wed Sep 05 14:49:33 2012 +0200 +++ b/client/js/renkan-publish.js Thu Sep 06 17:21:11 2012 +0200 @@ -125,6 +125,7 @@ uri: this.get("uri"), description: this.get("description"), position: this.get("position"), + image: this.get("image"), created_by: this.get("created_by").get("_id") } }, @@ -291,7 +292,7 @@ _MARGIN_X: 80, _MARGIN_Y: 50, _MIN_DRAG_DISTANCE: 2, - _NODE_RADIUS: 15, + _NODE_RADIUS: 20, _NODE_FONT_SIZE: 10, _EDGE_FONT_SIZE: 9, _NODE_MAX_CHAR: 30, @@ -408,6 +409,38 @@ this.title.content = Rkns.Renderer.Utils.shortenText(this.model.get("title"), Rkns.Renderer._NODE_MAX_CHAR); this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]); this.circle.strokeColor = this.model.get("created_by").get("color"); + var _img = this.model.get("image"); + if (_img && _img !== this.img) { + var _image = new Image(), + _this = this; + _image.onload = function() { + if (_this.node_image) { + _this.node_image.remove(); + } + _this.renderer.node_layer.activate(); + var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height ); + var _raster = new paper.Raster(_image); + var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS); + _raster.scale(_ratio); + _this.node_image = new paper.Group(_clip, _raster); + _this.node_image.opacity = .9; + /* This is a workaround to allow clipping at group level */ + _this.node_image.clipped = true; + _this.node_image.position = _this.paper_coords; + _this.node_image.__representation = _this; + paper.view.draw(); + } + _image.src = _img; + } + this.img = _img; + if (this.node_image) { + if (!this.img) { + this.node_image.remove(); + delete this.node_image; + } else { + this.node_image.position = this.paper_coords; + } + } } Rkns.Renderer.Node.prototype.paperShift = function(_delta) { @@ -420,18 +453,24 @@ this.renderer.removeRepresentationsOfType("tooltip"); var _tooltip = this.renderer.addRepresentation("NodeTooltip",null); _tooltip.node_representation = this; - _tooltip.redraw(); + _tooltip.draw(); } Rkns.Renderer.Node.prototype.select = function() { this.circle.strokeWidth = 3; - this.circle.fillColor = "#ffffc0"; + this.circle.fillColor = "#ffff80"; + if (this.node_image) { + this.node_image.opacity = .5; + } paper.view.draw(); } Rkns.Renderer.Node.prototype.unselect = function() { this.circle.strokeWidth = 1; this.circle.fillColor = "#ffffff"; + if (this.node_image) { + this.node_image.opacity = .9; + } paper.view.draw(); } @@ -441,6 +480,9 @@ Rkns.Renderer.Node.prototype.destroy = function(_event) { this.circle.remove(); this.title.remove(); + if (this.node_image) { + this.node_image.remove(); + } } /* */ @@ -510,7 +552,7 @@ this.renderer.removeRepresentationsOfType("tooltip"); var _tooltip = this.renderer.addRepresentation("EdgeTooltip",null); _tooltip.edge_representation = this; - _tooltip.redraw(); + _tooltip.draw(); } Rkns.Renderer.Edge.prototype.select = function() { @@ -571,9 +613,8 @@ + '

    <%=description%>

    ' ); -Rkns.Renderer.NodeTooltip.prototype.redraw = function() { - var _coords = this.node_representation.paper_coords, - _model = this.node_representation.model, +Rkns.Renderer.NodeTooltip.prototype.draw = function() { + var _model = this.node_representation.model, _title = _model.get("title"), _uri = _model.get("uri"); this.tooltip_$ @@ -581,17 +622,18 @@ a: (_uri ? '' : '' ) + _title + (_uri ? '' : '' ), description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…') })) - .show(); - Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 15, this.tooltip_$); + this.redraw(); var _this = this; this.tooltip_$.find(".Rk-CloseX").click(function() { _this.renderer.removeRepresentation(_this); paper.view.draw(); }); - this.tooltip_$.find("input, textarea").bind("keyup change", function() { - _this.tooltip_$.find(".Rk-Edit-Goto").attr("href",_this.tooltip_$.find(".Rk-Edit-URI").val()); - }); - paper.view.draw(); +} + +Rkns.Renderer.NodeTooltip.prototype.redraw = function() { + var _coords = this.node_representation.paper_coords; + Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 10, this.tooltip_$); + this.tooltip_$.show(); } Rkns.Renderer.NodeTooltip.prototype.destroy = function() { @@ -627,23 +669,27 @@ + '

    <%=description%>

    ' ); -Rkns.Renderer.EdgeTooltip.prototype.redraw = function() { - var _coords = this.edge_representation.paper_coords, - _model = this.edge_representation.model, +Rkns.Renderer.EdgeTooltip.prototype.draw = function() { + var _model = this.edge_representation.model, _title = _model.get("title"), _uri = _model.get("uri"); this.tooltip_$ .html(this.template({ a: (_uri ? '' : '' ) + _title + (_uri ? '' : '' ), description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…') - })) - .show(); - Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$); + })); + this.redraw(); var _this = this; this.tooltip_$.find(".Rk-CloseX").click(function() { _this.renderer.removeRepresentation(_this); paper.view.draw(); }); +} + +Rkns.Renderer.EdgeTooltip.prototype.redraw = function() { + var _coords = this.edge_representation.paper_coords; + Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$); + this.tooltip_$.show(); paper.view.draw(); } diff -r d249d36ecc37 -r db991a757015 client/js/twitter-bin.js --- a/client/js/twitter-bin.js Wed Sep 05 14:49:33 2012 +0200 +++ b/client/js/twitter-bin.js Thu Sep 06 17:21:11 2012 +0200 @@ -26,7 +26,7 @@ Rkns.Twitter.Bin.prototype.tweetTemplate = Rkns._.template( '
  • ' + + 'data-title="Tweet by @<%=tweet.from_user%>" data-description="<%-tweet.text%>" data-image="<%=tweet.profile_image_url%>">' + '' + '

    @<%=tweet.from_user%> (<%=tweet.from_user_name%>)

    ' + '

    <%=date%>

    ' diff -r d249d36ecc37 -r db991a757015 client/js/wikipedia-bin.js --- a/client/js/wikipedia-bin.js Wed Sep 05 14:49:33 2012 +0200 +++ b/client/js/wikipedia-bin.js Thu Sep 06 17:21:11 2012 +0200 @@ -27,8 +27,8 @@ Rkns.Wikipedia.Bin.prototype.resultTemplate = Rkns._.template( '
  • ' - + '

    <%=highlightedtitle%>

    ' + + 'data-title="Wikipedia: <%=result.title%>" data-description="<%=wpdesc%>" data-image="img/wikipedia.png">' + + '

    <%=highlightedtitle%>

    ' + '

    <%=result.snippet%>

    • ' ); diff -r d249d36ecc37 -r db991a757015 client/render-test.html --- a/client/render-test.html Wed Sep 05 14:49:33 2012 +0200 +++ b/client/render-test.html Thu Sep 06 17:21:11 2012 +0200 @@ -46,7 +46,7 @@ title: "LDT Project", bin: Rkns.Ldt.ProjectBin, project_id: "67280b1c-ff30-11e0-a82d-00145ea49a02", - ldt_platform: "http://capsicum/pf/" + ldt_platform: "http://ldt.iri.centrepompidou.fr/" } ], search: [