Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
typo3
qfq
Commits
f194a52a
Commit
f194a52a
authored
Jan 30, 2019
by
bbaer
Browse files
Updated Documentation for Annotation (ex fabric)
parent
27b58ce2
Pipeline
#1432
passed with stage
in 2 minutes and 13 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
doc/ANNOTATION.md
0 → 100644
View file @
f194a52a
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
doc/FABRIC.md
deleted
100644 → 0
View file @
27b58ce2
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment