Merge branch 'master' into F7783FormElementCodeAnnotation

d8afdaf5 · Carsten Rose · 8a328ce6 · c7b6599e · d8afdaf5 · 8a328ce6
Commit d8afdaf5 authored Jan 30, 2019 by Carsten Rose
--- 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 class="annotate-graphic" 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="annotate-text"
+  * 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, if required
\ 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
--- a/mockup/codeCorrection.html
+++ b/mockup/codeCorrection.html
@@ -42,7 +42,12 @@
        <div class="col-md-2"></div>
        <div class="col-md-8">

-            <div class="codeCorrection" data-uid='{"uid": 1, "name": "Reginald Commenter", "avatar": "http://www"}' data-file="../javascript/src/CodeCorrection.js" data-target="codeCorrection-output1">
+            <div class="codeCorrection"
+                 data-uid='{uid: 5, name: "Definitely not an AI", avatar: "mockData/avatar1.png"}' <!-- logged in user -->
+                 data-file="../javascript/src/CodeCorrection.js" <!-- File to correct -->
+                 data-target="codeCorrection-output1" <!-- input field -->
+                 data-highlight="javascript"
+            >
            </div>
            <input id="codeCorrection-output1" name="correction-data" type="hidden"
                   value='{ "annotations": [