Commit f194a52a authored by bbaer's avatar bbaer
Browse files

Updated Documentation for Annotation (ex fabric)

parent 27b58ce2
Pipeline #1432 passed with stage
in 2 minutes and 13 seconds
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
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment