Content annotation

This project is developed to read and annotate texts. It provides a rich annotation tools and ability to store your annotations in Json format.

Json data structure

This project reads Json files to store annotation information and data along with some meta-data. Fields data and title saved for text informations. For the annotation hierarchy, tree structure is used and jsTree package is chosen for the visualization. Json format for the tree is determined by jsTree package. Users annotations are stored in annotations field. It contains timestamp and users comment about chosen text. All other informations can be stored in meta_data field.

            
              {
                "title": "Lorem Ipsum",
                "data": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
                "tree":[
                     { "id" : "entities", "parent" : "#", "text" : "Entities" },
                     { "id" : "notes", "parent" : "#", "text" : "Notes" },
                     { "id" : "temp", "parent" : "#", "text" : "Latest" },
                     { "id" : "j1_1", "parent" : "entities", "text" : "ipsum" },
                     { "id" : "j1_2", "parent" : "notes", "text" : "amet" }
                  ],
                "annotations": {
                  "j1_1": {
                    "id": "j1_1",
                    "type": "annotation",
                    "label": "#ff0000",
                    "created_at": 1432149588867,
                    "user_comment": "ipsum data",
                    "annotation": "<span style='color:#ff0000;'>ipsum</span>"
                    },
                  "j1_2": {
                    "id": "j1_2",
                    "type": "note",
                    "label": "#00ff00",
                    "created_at": 1432149605160,
                    "user_comment": "newtest",
                    "annotation": "<span style='color:#00ff00;'>amet</span>"
                    }
                  },
                "meta_data": {
                  "last_opened": 1432233529902,
                  "last_saved": 1432233534715,
                  "versions": [
                      {
                        "opened": 1432230550149,
                        "closed": 1432230570220
                      },
                      {
                        "opened": 1432233529902,
                        "closed": 1432233534715
                      }
                    ],
                  "author": "Onur Varol"
                  }
              }
            
          

If page crashes ...

Unfortunate events can happen all the time. If your page unexpectedly gives warnign, do not panic!. All annotation and information continuously stored in localStorage of the browser. You can always download your latest data manually.

To download your localStorage copy on Chrome,

• right-click and choose "inspect element"
• Go to resources panel and find "Local Storage" option for that website
• Copy the value of annotationData and save as json file

Known issues and future improvements

• Encapsulating span elements
• Auto saving
• ...