-
Carsten Rose authoredCarsten Rose authored
ANNOTATION.md 2.21 KiB
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