Updated Documentation for Annotation (ex fabric)

f194a52a · bbaer · 27b58ce2 · f194a52a · 27b58ce2
Commit f194a52a authored Jan 30, 2019 by bbaer
--- a/doc/ANNOTATION.md
+++ b/doc/ANNOTATION.md
+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>
+...
+<div id="fabric" data-images='{"images": [{"page": 1, "selector": "qfq-fabric-image-1", "refId": "image.id"}, {"page":2, "selector": "#qfq..."}]}'> 
+...
+</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"
+        }
+    ]
+}
+````
+* Target for rendering, div with class="codeCorrection"
+  * 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"
+    }
+    ````
+  * data-highlight: Name of the language, that needs highlighting
\ No newline at end of file
--- a/doc/FABRIC.md
+++ b/doc/FABRIC.md
-Design / Notes for fabric.js
-==========================================
-
-General
-=======
-
-* grafische Annotierung von PNG, SVG,.... 
-* Fuer die erste Vorstellung noch kein Fullscreen.
-
-Concept
-=======
-
-* Das fabric Element 
-** ist als FormElement implementiert.
-** Wird ganz normal asl FE Element in col-md gewrapped.
-* Server sendet alle vom User hochgeladenen Bilder inline/hidden im HTML Code mit einer HTML-ID.
-* Die Bilder werden als JSON Array an das Element 'fabric' via 'data-images' uebergeben:
-
-<HTML>
-...
-<div id="fabric" data-images='{"images": [{"page": 1, "selector": "qfq-fabric-image-1", "refId": "image.id"}, {"page":2, "selector": "#qfq..."}]}'> 
-...
-</HTML>
-
-* id Selector ohne #
-* Form Submit ist ein regualeres Save.
-* Pro Aufgabe gibt es ein FormElemnt das die Fabric Drwaing JSON Daten enthaelt.
\ No newline at end of file