--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/readme.md Mon Jun 13 17:33:11 2016 +0200
@@ -0,0 +1,29 @@
+# How to start?
+
+1. Make sure PIP is installed then install Django and others dependencies with
+
+```
+pip install -r requirements.txt
+
+```
+
+2. Move to src/iconolab/static/js to install js dependencies.
+Make sure your have installed nodejs then run the command bellow
+
+```
+npm install
+
+```
+3. To recreate the bundle file that lives in dist/
+
+```
+npm build
+
+```
+
+4. To add a new js module, you can add it to the js/components folder and then run
+
+```
+npm start
+```
+
--- a/requirements.txt Fri Jun 10 17:07:14 2016 +0200
+++ b/requirements.txt Mon Jun 13 17:33:11 2016 +0200
@@ -1,9 +1,16 @@
diff-match-patch==20121119
-Django==1.9.6
+Django==1.9.7
django-model-utils==2.5
django-notifications-hq==1.1
+django-reversion==2.0.1
+django-reversion-compare==0.6.2
+django-revision==0.1.6
djangorestframework==3.3.3
+gitdb==0.6.4
+GitPython==2.0.5
jsonfield==1.0.3
Pillow==3.2.0
+psycopg2==2.6.1
pytz==2016.4
+smmap==0.9.0
sorl-thumbnail==12.4a1
--- a/src/iconolab/admin.py Fri Jun 10 17:07:14 2016 +0200
+++ b/src/iconolab/admin.py Mon Jun 13 17:33:11 2016 +0200
@@ -1,6 +1,4 @@
from django.contrib import admin
-from reversion_compare.admin import CompareVersionAdmin
-
# Register your models here.
from iconolab.models import (Tag, Annotation, Collection, Image,
@@ -16,14 +14,11 @@
inlines = [CommentAttachmentInline]
-class AnnotationAdmin(CompareVersionAdmin):
- history_latest_first = True
-
#reversion
admin.site.register(Image)
admin.site.register(Collection)
admin.site.register(Tag)
-admin.site.register(Annotation, AnnotationAdmin)
+admin.site.register(Annotation)
admin.site.register(MetaCategory)
admin.site.register(Comment, CommentAdmin)
admin.site.register(Activity)
--- a/src/iconolab/settings/__init__.py Fri Jun 10 17:07:14 2016 +0200
+++ b/src/iconolab/settings/__init__.py Mon Jun 13 17:33:11 2016 +0200
@@ -54,7 +54,7 @@
'django.contrib.staticfiles',
'notifications',
'reversion',
- 'reversion_compare',
+ #'reversion_compare',
'iconolab.apps.IconolabApp',
'sorl.thumbnail',
]
@@ -101,14 +101,6 @@
# Database
# https://docs.djangoproject.com/en/1.9/ref/settings/#databases
-
-DATABASES = {
- 'default': {
- 'ENGINE': 'django.db.backends.sqlite3',
- 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
- }
-}
-
CACHES = {
'default': {
'BACKEND': 'django.core.cache.backends.filebased.FileBasedCache',
--- a/src/iconolab/static/iconolab/js/components/cutout/index.js Fri Jun 10 17:07:14 2016 +0200
+++ b/src/iconolab/static/iconolab/js/components/cutout/index.js Mon Jun 13 17:33:11 2016 +0200
@@ -17,11 +17,15 @@
var paper = null;
var pointData = [];
var config = null;
+var readOnly = false;
var startPoint = null;
var drawing_path = null;
var canDraw = false;
var rectZone = null;
var PATH_COLOR = "#ff00ff";
+var READ_ONLY_STOKE = "";
+var READ_ONLY_FILL = "";
+
var SELECTED_COLOR = "#ffff00";
var FIRST_NODE_COLOR = "#FF0000";
var HANDLE_SIZE = 6;
@@ -32,6 +36,7 @@
var RECT_MODE ='RECT';
var drawingMode = RECT_MODE; //free
var FREE_MODE = 'FREE';
+var availableModes = [RECT_MODE, FREE_MODE];
var getId = (function () {
var cpt = 0;
@@ -43,10 +48,56 @@
}
}());
+
+
var pathToPoint = function (path) {
- if (typeof path === "string") { return false; }
+
+};
+
+var handleRectPath = function (path) {
+ if (readOnly) {
+ paper.path(path).attr({ stroke:'red', opacity: 0.6});
+ return;
+ }
+
+ var pathInfos = Snap.parsePathString(path);
+ drawing_path = paper.path(path);
+ drawing_path.attr({stroke:'white', opacity: 0.4});
+ handlePathClosed();
};
+var handlePathClosed = function () {
+ if (drawing_path) {
+ drawing_path.drag();
+ }
+}
+
+var handleFreePath = function (path) {
+
+ if (readOnly) {
+
+ paper.path(path).attr({
+ stoke: 'orange',
+ fill: 'orange',
+ opacity: 0.5,
+ });
+
+ return;
+ }
+
+ var pathInfos = Snap.parsePathString(path);
+ pathInfos.map(function (pathData) {
+ if(pathData[0] !== 'Z') {
+ createPoint(paper, pathData[1], pathData[2], pointData);
+ } else {
+ pathIsClosed = true;
+ updatePath(paper, onClosePath);
+ }
+ });
+
+ /* replay the path here */
+
+};
//transform point to path
var updatePath = function (paper, updateCallback) {
var path = "M";
@@ -55,10 +106,6 @@
return;
}
- /*if (pathIsClosed) {
- pointData.pop();
- }*/
-
path += pointData[0].x + ',' + pointData[0].y;
for (var i=0; i < pointData.length; i++) {
@@ -210,6 +257,8 @@
var attachRectEvents = function (paper) {
+ if (readOnly) { return false; }
+
var startPosition = {};
var currentPosition = {};
/* add resizer */
@@ -267,13 +316,14 @@
paper.mouseup(function () {
if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
rectZone.drag();
+ drawing_path = rectZone;
canDraw = false;
pathIsClosed = true;
});
};
var attachPointEvents = function (paper) {
-
+ if (readOnly) { return; }
paper.click( function(e) {
if (drawingMode === RECT_MODE) {
return true;
@@ -286,10 +336,32 @@
var API = {
- setMode: function (mode) {
- var availableMode = ['RECT', 'FREE'];
- console.log("undefined", mode);
- if (availableMode.indexOf(mode) !== -1) {
+ setPath: function (pathString) {
+ /* redraw the path */
+ var pathInfos = pathString.split(';');
+ if( availableModes.indexOf(pathInfos[1]) === -1) {
+ new Error("drawing mode: [" + pathInfos[1] + "] is not available");
+ }
+
+ this.setDrawingMode(pathInfos[1]);
+ if (pathInfos.length === 1) {
+ new Error("A drawing mode must be provided");
+ }
+
+ if (pathInfos.length >= 2) {
+ var path = pathInfos[0];
+ if (pathInfos[1] === RECT_MODE) {
+ handleRectPath(path);
+ }
+
+ if (pathInfos[1] === FREE_MODE) {
+ handleFreePath(path);
+ }
+ }
+ },
+
+ setDrawingMode: function (mode) {
+ if (availableModes.indexOf(mode) !== -1) {
drawingMode = mode;
}
this.clear();
@@ -305,12 +377,19 @@
/*clear path is exists*/
if (drawing_path) {
- drawing_path.remove();
- }
- if (rectZone) {
- rectZone.remove();
- }
+ console.log(drawingMode);
+ alert("rads");
+ if (drawingMode === RECT_MODE) {
+ alert("radical ... ");
+ console.log("radical ... ");
+ console.log(drawing_path.getBBox().path.toString());
+ }
+ //drawing_path.getBBox().path.toString()
+ drawing_path.remove();
+ }
+
+
pointData = [];
startPoint = null;
@@ -319,13 +398,36 @@
enablePoint = true;
pathIsClosed = false;
ENABLE_NEW_NODE = true;
- /* clear path */
-
},
getPath: function () {
/* retourne le chemin */
- console.log();
+ /* send path and BBox | implement edit and load path */
+ var path = "";
+ if (drawing_path) {
+ if (drawingMode === RECT_MODE) {
+ path = Snap.path.toAbsolute(drawing_path.getBBox().path).toString();
+ }
+ else {
+ path = drawing_path.attr('d');
+ }
+ }
+ /* save path should be normalized */
+ //taille/10
+ var xRatio = 1/7;
+ var yRatio = 1/4.3;
+ var transformMatrix = Snap.matrix(xRatio.toFixed(2), 0, 0, yRatio.toFixed(2), 0, 0);
+ console.log(transformMatrix);
+ console.log(path);
+ newPath = Snap.path.map(path,transformMatrix).toString();
+ console.log(newPath);
+ test = paper.path(newPath);
+ console.log(test);
+ //should be normalize
+
+ //[sx 0 0 sy 0 0]. One unit in the X and Y directions in the new coordinate system equals sx and sy units in the previous coordinate system, respectively.
+
+ return path;
}
};
@@ -350,6 +452,7 @@
if (!mainImage) {
new Error(config.wrapperId + "Can't be found ...");
}
+
cutCanvas.css({
position: 'absolute',
top: '0px',
@@ -357,9 +460,14 @@
marginLeft: 'auto',
marginRight: 'auto',
width: mainImage.width(),
- height: mainImage.height()
+ height: mainImage.height(),
+ viewBox: '0 0 100 100'
});
+ if (typeof config.readOnly === 'boolean' && config.readOnly === true) {
+ readOnly = true;
+ }
+
paper = new Snap(cutCanvas.get(0));
/* handle drawin here */
--- a/src/iconolab/templates/iconolab/fragment_draw.html Fri Jun 10 17:07:14 2016 +0200
+++ b/src/iconolab/templates/iconolab/fragment_draw.html Mon Jun 13 17:33:11 2016 +0200
@@ -15,7 +15,7 @@
<p class="pullright"><a href='javascript:;'>Retour</a></p>
<div class='col-md-2'>
<ul class='form-drawing-wrapper list-inline'>
- <p class='form-drawing pullright'><strong>Sélection</strong></p>
+ <p class='form-drawing pullright'><strong>Type de sélection</strong></p>
<li @click="setRectangleMode" v-bind:class="{ 'selected': isRect }" class='pull-md-left drawingModeBtn'>Rect.</li>
<li @click="setFreeMode" v-bind:class="{ 'selected': !isRect }" class='pull-md-left drawingModeBtn'>Libre</li>
</ul>
@@ -23,18 +23,55 @@
<ul class='form-drawing-wrapper list-inline'>
<p class='form-drawing pullright'><strong>Actions</strong></p>
- <li @click="clear" class='pull-md-left drawingModeBtn'>Effacer</li>
+ <li @click="clear" class='pull-md-left drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li>
+
+ <li @click="save" class='pull-md-left drawingModeBtn'><i class='fa fa-plus'></i> Créer une annotation</li>
+ <li @click="showPreview" class='pull-md-left drawingModeBtn'><i class='fa fa-eye'></i> Prévisualiser</li>
+ </ul>
- <li @click="save" class='pull-md-left drawingModeBtn'><i class='fa fa-plus'></i>Enregister</li>
- </ul>
+ <form v-el:form-fragment id='fragment-form' method='GET' target="{% url 'annotation_create' %}">
+ {% csrf_token %}
+ <input name="fragmentPath" type="hidden" v-model="normalizePath"></input>
+ </form>
+
</div>
<div class="col-md-8">
+
<div id="iconolab-image-wrapper">
{% thumbnail annotation.image.media "x800" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
</div>
+
+ <div class='row' style='padding-top:10px'>
+
+ <div class='image-item col-xs-4'>
+ {% thumbnail annotation.image.media "x100" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+ {% endthumbnail %}
+ </div>
+
+ <div class='image-item col-xs-4'>
+ {% thumbnail annotation.image.media "x150" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+ {% endthumbnail %}
+ </div>
+
+ <div class='image-item col-xs-4'>
+ {% thumbnail annotation.image.media "x200" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+ {% endthumbnail %}
+ </div>
+
+ <div class='image-item col-xs-4'>
+ {% thumbnail annotation.image.media "x250" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+ {% endthumbnail %}
+ </div>
+
+ </div>
+
</div>
<div class='col-md-2'>
@@ -57,18 +94,25 @@
data: {
mode:"",
isRect: true,
+ normalizePath: "",
+ readOnly: false
},
init: function () {
- this.mode = this.$options.MODE_RECT;
+ //this.mode = this.$options.MODE_RECT;
this.drawingComponent = iconolab.initCutoutComponent({
wrapperId: '#iconolab-image-wrapper',
- actionWrapper: '#action-wrapper'
+ actionWrapper: '#action-wrapper',
+ readOnly: false
});
-
- console.log("mode", this.mode);
- this.drawingComponent.setMode(this.mode);
+ this.drawingComponent.setDrawingMode(this.mode);
+ //var rectPath = "M173,101L319,101L319,224L173,224Z;RECT";
+ //var relPath = 'M137,62 L155,67 L163,77 L166,99 L161,113 L142,119 L129,114 L120,95 L116,79 L120,64 Z;FREE';
+ //var zonePath = "M236,111 L268,112 L293,146 L293,182 L280,215 L254,220 L229,212 L205,198 L210,175 L207,143 L215,123 Z;FREE";
+ //var transformMatrix = [];//en fonction de l'échelle
+
+ //this.drawingComponent.setPath(relPath);
},
methods: {
@@ -76,18 +120,23 @@
setRectangleMode: function () {
this.mode = this.$options.MODE_RECT;
this.isRect = true;
- this.drawingComponent.setMode(this.mode);
- console.log("mode", this.mode);
+ },
+
+ showPreview: function () {
+
},
setFreeMode: function () {
this.mode = this.$options.MODE_FREE;
this.isRect = false;
- this.drawingComponent.setMode(this.mode);
+ this.drawingComponent.setDrawingMode(this.mode);
},
save: function () {
console.log('drawingPath', this.drawingComponent.getPath());
+ this.normalizePath = this.drawingComponent.getPath();
+ console.log(this.normalizePath)
+ //this.$els.formFragment.submit();
},
clear: function () {