# HG changeset patch
# User cavaliet
# Date 1391773835 -3600
# Node ID 163b59b3e50b87d4ebc7e79315696b34f1e7edb0
# Parent  ea459415fdc9047af246d9c8e94b1d4aaef2fe8b
update writable demo and read me.

diff -r ea459415fdc9 -r 163b59b3e50b client/README.md
--- a/client/README.md	Fri Feb 07 10:58:26 2014 +0100
+++ b/client/README.md	Fri Feb 07 12:50:35 2014 +0100
@@ -27,7 +27,8 @@
 
 Your Renkan should be displayed. Now let's see more specifically the 2 displays possibilities : in body 100% or in a div with set width and height.
 
-N.B. : renkan.js is the concatenation of those js files : header.js main.js models.js defaults.js i18n.js paper-renderer.js full-json.js ldtjson-bin.js list-bin.js wikipedia-bin.js. 
+N.B. : renkan.js is the concatenation of those js files : header.js main.js models.js defaults.js i18n.js paper-renderer.js full-json.js ldtjson-bin.js list-bin.js wikipedia-bin.js.
+It is built with the script available in sbin/build/compil.sh. 
 
 ### In body 100%
 
@@ -113,13 +114,169 @@
     </script>
 
 
+## Search and bins
+
+On the right of your renkan interface, you can add some search engine and data bins.
+
+Search engine can be the current [IRI's Lignes de temps platform](http://ldt.iri.centrepompidou.fr/) and wikipedia in any available language. 
+Here is an example of configuration :
+
+    _renkan = new Rkns.Renkan({
+        search: [
+                {
+                    type: "Ldt"
+                },
+                {
+                    type: "Wikipedia",
+                    lang: "fr"
+                },
+                {
+                    type: "Wikipedia",
+                    lang: "ja"
+                }
+        ]
+    });
+    Rkns.jsonIO(_renkan, {
+        url: "data/simple-persist.php"
+    });
+
+You can also define data bins : annotations loaded from IRI's Lignes de temps projects, and any resources which can be drag and dropped into the renkan.
+Resources can be simple texts, links or objects with title, description, url and image. Here is an example of configuration :
+
+    _renkan = new Rkns.Renkan({
+        search: [
+            ...
+        ],
+        bins: [
+            {
+                title: "To be or not to be on Lignes de Temps",
+                type: "Ldt",
+                ldt_type: "Project",
+                project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
+                ldt_platform: "http://ldt.iri.centrepompidou.fr/"
+            },
+            {
+                type: "ResourceList",
+                title: "Ressources",
+                list: [
+                    {
+                        url: "http://www.google.com/",
+                        title: "Google",
+                        description: "Search engine",
+                        image: "http://www.google.fr/images/srpr/logo4w.png"
+                    },
+                    "Polemic Tweet http://www.polemictweet.com",
+                    "Twitter http://www.twitter.com/"
+                ]
+            }
+        ]
+    });
+    Rkns.jsonIO(_renkan, {
+        url: "data/simple-persist.php"
+    });
 
 
-## Data bins
+## More configuration
+
+You can configure several things :
+* the language of your interface, english (default) or french
+* you can fill your nodes with black color instead of transparent.
+* thanks to an external file, you can define properties for links between node.
+
+
+    _renkan = new Rkns.Renkan({
+        ...
+        property_files: [ "data/properties.json" ],
+        node_fill_color: true,
+        language: "fr"
+    });
+
+Here is an example of properties file :
 
-More to come...
+    [
+        {
+            "label": "Dublin Core Metadata",
+            "base-uri": "http://purl.org/dc/elements/1.1/",
+            "properties": [
+                {
+                    "uri": "creator",
+                    "label": "created by"
+                }, {
+                    "uri": "date",
+                    "label": "has date"
+                }, {
+                    "uri": "subject",
+                    "label": "has subject"
+                }
+            ]
+        }, {
+            "label": "SKOS Semantic relations",
+            "base-uri": "http://www.w3.org/2004/02/skos/core#",
+            "properties": [
+                {
+                    "uri": "broader",
+                    "label": "has broader"
+                }, {
+                    "uri": "narrower",
+                    "label": "has narrower"
+                }, {
+                    "uri": "related",
+                    "label": "has related"
+                }
+            ]
+        }
+    ]
 
 
 
+Finally, here is an example of full configuration :
 
-
+    <script type="text/javascript">
+        var _renkan;
+        $(function() {
+            _renkan = new Rkns.Renkan({
+                search: [
+                    {
+                        type: "Ldt"
+                    },
+                    {
+                        type: "Wikipedia",
+                        lang: "fr"
+                    },
+                    {
+                        type: "Wikipedia",
+                        lang: "ja"
+                    }
+                ],
+                bins: [
+                    {
+                        title: "Projet Lignes de Temps",
+                        type: "Ldt",
+                        ldt_type: "Project",
+                        project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
+                        ldt_platform: "http://ldt.iri.centrepompidou.fr/"
+                   },
+                    {
+                        type: "ResourceList",
+                        title: "Ressources",
+                        list: [
+                            {
+                                url: "http://www.google.com/",
+                                title: "Google",
+                                description: "Search engine",
+                                image: "http://www.google.fr/images/srpr/logo4w.png"
+                            },
+                            "Polemic Tweet http://www.polemictweet.com",
+                            "Twitter http://www.twitter.com/"
+                        ]
+                    }
+                ],
+                property_files: [ "data/properties.json" ],
+                node_fill_color: false,
+                language: "fr"
+            });
+            Rkns.jsonIO(_renkan, {
+                url: "data/simple-persist.php"
+            });
+        });
+    </script>
\ No newline at end of file
diff -r ea459415fdc9 -r 163b59b3e50b client/test-readonly-body.html
--- a/client/test-readonly-body.html	Fri Feb 07 10:58:26 2014 +0100
+++ b/client/test-readonly-body.html	Fri Feb 07 12:50:35 2014 +0100
@@ -18,7 +18,7 @@
             $(function() {
                 _renkan = new Rkns.Renkan({
                     editor_mode: false,
-                    show_bins: false,
+                    show_bins: false
                 });
                 Rkns.jsonIO(_renkan, {
                     url: "data/example-cinema.json"
diff -r ea459415fdc9 -r 163b59b3e50b client/test-readonly-div.html
--- a/client/test-readonly-div.html	Fri Feb 07 10:58:26 2014 +0100
+++ b/client/test-readonly-div.html	Fri Feb 07 12:50:35 2014 +0100
@@ -18,7 +18,7 @@
             $(function() {
                 _renkan = new Rkns.Renkan({
                     editor_mode: false,
-                    show_bins: false,
+                    show_bins: false
                 });
                 Rkns.jsonIO(_renkan, {
                     url: "data/example-cinema.json"
diff -r ea459415fdc9 -r 163b59b3e50b client/test-writable-bins.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/test-writable-bins.html	Fri Feb 07 12:50:35 2014 +0100
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>RENKAN test in read-only mode : body 100%</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/jquery.mousewheel.min.js"></script>
+        <script src="lib/underscore-min.js"></script>
+        <script src="lib/backbone.js"></script>
+        <script src="lib/backbone-relational.js"></script>
+        <script src="lib/paper.js"></script>
+        <script src="../build/renkan.js"></script>
+    <script type="text/javascript">
+        var _renkan;
+        $(function() {
+			_renkan = new Rkns.Renkan({
+			    search: [
+			        {
+			            type: "Ldt"
+			        },
+			        {
+			            type: "Wikipedia",
+			            lang: "fr"
+			        },
+			        {
+			            type: "Wikipedia",
+			            lang: "ja"
+			        }
+			    ],
+			    bins: [
+			        {
+			            title: "Projet Lignes de Temps",
+			            type: "Ldt",
+			            ldt_type: "Project",
+			            project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
+			            ldt_platform: "http://ldt.iri.centrepompidou.fr/"
+			       },
+			        {
+			            type: "ResourceList",
+			            title: "Ressources",
+			            list: [
+			                {
+			                    url: "http://www.google.com/",
+			                    title: "Google",
+			                    description: "Search engine",
+			                    image: "http://www.google.fr/images/srpr/logo4w.png"
+			                },
+			                "Polemic Tweet http://www.polemictweet.com",
+			                "Twitter http://www.twitter.com/"
+			            ]
+			        }
+			    ],
+			    /*property_files: [ "data/properties.json" ],
+			       node_fill_color: false*/
+			    language: "fr"
+			});
+			Rkns.jsonIO(_renkan, {
+			    url: "data/simple-persist.php"
+			});
+        });
+    </script>
+        <link rel="stylesheet" href="css/renkan.css" />
+        <style type="text/css">
+        </style>
+    </head>
+
+    <body>
+        <div id="renkan"></div>
+    </body>
+</html>