ANNOTATION.md 2.21 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Design / Notes for fabric.js
==========================================

General
-------

* graphical annotation of PNG, SVG,.... 
* For the first version, no fullscreen

Concept
-------

* The fabric element:
** is implemented as a form element
** is wrapped in col-md
* Server may send all the user images as inline/hidden HTML element with an HTML-ID.
* The images will be given to fabric using a json element as seen here::

````
<html>
...
22
<div class="annotate-graphic" data-images='{"images": [{"page": 1, "selector": "qfq-fabric-image-1", "refId": "image.id"}, {"page":2, "selector": "#qfq..."}]}'> 
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
...
</html>
````

* id Selector without #
* Form Submit is a regular Save.
* Per Exercise exists one Form Element which contain the Fabric Drawing JSON Data.

Design / Notes for Code Annotation
==================================

General
-------

* Highlighting Code Syntax
* Write comments to code lines

Concept
-------

* Use a form Element
* Hidden field, value with annotation json:

````
{ 
    "annotations": [
                { "lineNumber": ##,
                  "comments": [
                    { "uid": ##,
                      "comment": "Text / HTML Blob",
                      "dateTime": "Formatted Date"
                    }]
                }, { "lineNumber": ###,
                     "comments": [
                      { "uid": ##,
                        "comment": "2 Comment for one line, first",
                        "dateTime": "2018-05-12 09:45:00"
                    },
                    { "uid": ##,
                        "comment": "second",
                        "dateTime": "0000-00-00 00:00:00"
                    }]
            }
    ],
    "users": [
        { "uid": ##,
        "name": "Displayed Username",
        "avatar": "Gravatar, Standard Picture, Photo"
        }
    ]
}
````
75
* Target for rendering, div with class="annotate-text"
76
77
78
79
80
81
82
83
84
85
  * data-target: Referencing hidden input form from above
  * data-file: Script or Textfile to be read and displayed
  * data-uid: JSON of logged in user, like:
    ````
    {
        uid: 5, 
        name: "Definitely not an AI", 
        avatar: "mockData/avatar1.png"
    }
    ````
86
  * data-highlight: Name of the language, that needs highlighting, if required