Skip to content

GitLab

Commit d8afdaf5 authored by Carsten Rose's avatar Carsten Rose
Browse files

Merge branch 'master' into F7783FormElementCodeAnnotation

parents 8a328ce6 c7b6599e
Pipeline #1435 passed with stage
in 2 minutes and 8 seconds
Hide whitespace changes
Inline Side-by-side
doc/ANNOTATION.md 0 → 100644
View file @ d8afdaf5
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
doc/FABRIC.md deleted 100644 → 0
View file @ 8a328ce6
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
mockup/codeCorrection.html
View file @ d8afdaf5
......@@ -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": [
......
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