--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/forms/__init__.py Thu Jun 16 12:26:13 2016 +0200
@@ -0,0 +1,8 @@
+from django import forms
+from iconolab.models import Annotation
+
+
+class AnnotationForm(forms.ModelForm):
+ class Meta:
+ model = Annotation
+ fields = ('title', 'description', 'fragment', 'tags',)
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/templates/iconolab/edit_annotation.html Thu Jun 16 12:26:13 2016 +0200
@@ -0,0 +1,169 @@
+{% extends 'iconolab_base.html' %}
+
+{% load staticfiles %}
+
+{% load thumbnail %}
+
+{% block content %}
+ <div id="drawing-zone" class="row" style="padding-top: 10px; border:1px solid red">
+
+ <div v-show='!formView' class="editor-wrapper col-md-12">
+ <div class='col-md-2'>
+ <ul class="form-drawing-wrapper list-inline">
+ <p class='form-drawing pullright'><strong>Type de dessin</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>
+
+ <ul class='form-drawing-wrapper list-inline'>
+ <p class='form-drawing pullright'><strong>Actions</strong></p>
+
+ <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 le fragment</li>
+ </ul>
+ </div>
+
+ <div class="col-md-8">
+ <div v-el:image 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>
+
+ </div>
+
+ <div v-show="formView" class="col-md-12">
+
+ <div class="col-xs-6">
+ <div class="small-image-wrapper" style="position: relative">
+ {% thumbnail annotation.image.media "x300" crop="center" as im %}
+ <img v-el:small-image @click="showEditor" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+
+ <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
+
+ <defs>
+ <mask xmlns="http://www.w3.org/2000/svg" id="smallImage">
+ <rect x="0" y="0" width="{{ im.width }}", height="{{ im.height }}" fill="white"/>
+ <g v-bind:transform="transformMatrix">
+ <path v-bind:d="fragmentPath"></path>
+ </g>
+ </mask>
+ </defs>
+
+ <g v-show="!displayMask" v-bind:transform="transformMatrix">
+ <path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
+ </g>
+
+ <rect v-show="displayMask" v-el:small-mask x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="{{ im.width }}" height="{{ im.height }}"></rect>
+ </svg>
+
+ {% endthumbnail %}
+ </div>
+ <ul class="inline">
+ <a @click="showEditor" class="showPointer"> <i class='fa fa-edit'></i> Editer le fragment</a>
+ <a v-show="!displayMask" @click="highLightZone" class="btn showPointer"> <i class='fa fa-eye-slash'></i> </a>
+ <a v-show="displayMask" @click="highLightZone" class="btn showPointer"> <i class='fa fa-eye-slash'></i> </a>
+
+ </ul>
+ </div>
+
+ <div class='col-xs-6' style="">
+ <form method="POST" class="post-form">
+ {% csrf_token %}
+ {{ form.as_p }}
+ <button type="submit" class="save btn btn-default">Enregister</button>
+ </form>
+ </div>
+
+ </div>
+ </div>
+
+{% endblock %}
+
+{% block footer_js %}
+ <script>
+ var drawingVue = new Vue({
+ el: '#drawing-zone',
+ MODE_RECT: 'RECT',
+ MODE_FREE: 'FREE',
+
+ data: {
+ mode:"",
+ isRect: true,
+ normalizePath: "",
+ readOnly: false,
+ formView: false,
+ useClipPath: false,
+ transformMatrix: "",
+ fragmentPath: "",
+ displayMask: false
+
+ },
+
+ init: function () {
+ //this.mode = this.$options.MODE_RECT;
+ var self = this;
+ self.drawingComponent = iconolab.initCutoutComponent({
+ wrapperId: '#iconolab-image-wrapper',
+ actionWrapper: '#action-wrapper',
+ readOnly: false
+ });
+ },
+
+ methods: {
+
+ setRectangleMode: function () {
+ this.mode = this.$options.MODE_RECT;
+ this.isRect = true;
+ },
+
+ showEditor: function () {
+ this.formView = false;
+ console.log(this.$els.smallImage);
+ },
+
+ highLightZone: function () {
+ if (!this.displayMask) {
+ this.displayMask = true;
+ }
+ else {
+ this.displayMask = false;
+ }
+ //this.maskFill = "orange";
+ //this.fragmentFill = "none";
+ },
+
+ setFreeMode: function () {
+ this.mode = this.$options.MODE_FREE;
+ this.isRect = false;
+ this.drawingComponent.setDrawingMode(this.mode);
+ },
+
+ displayEditedPath: function () {
+ /* path to save */
+ var normalizePath = this.drawingComponent.getPath();
+ },
+
+ save: function () {
+ this.normalizePath = this.drawingComponent.getPath();
+ var smallImage = this.$els.smallImage;
+ this.formView = true;
+ /* 100x = smallImageHeight && 100x=smallImageWidth | 100 = ViewBoxBound */
+ var xRatio = smallImage.width / 100;
+ var yRatio = smallImage.height / 100;
+ var transformMatrix = [xRatio, 0, 0, yRatio, 0, 0].join(',');
+ this.transformMatrix ="matrix(" + transformMatrix + ")";
+ this.fragmentPath = this.normalizePath.split(';')[0];
+ console.log(this.fragmentPath);
+ console.log(this.transformMatrix);
+ },
+
+ clear: function () {
+ this.drawingComponent.clear();
+ }
+ }
+ });
+ </script>
+{% endblock %}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/templates/iconolab/show_annotation.html Thu Jun 16 12:26:13 2016 +0200
@@ -0,0 +1,56 @@
+{% extends 'iconolab_base.html' %}
+
+{% load staticfiles %}
+
+{% load thumbnail %}
+
+{% block content %}
+ <div id="annotation-wrapper" class="row" style="border: 1px solid gray">
+
+ <div v-show="formView" class="col-md-12">
+
+ <div class="col-xs-6">
+ <div class="small-image-wrapper" style="position: relative">
+ {% thumbnail annotation.image.media "x300" crop="center" as im %}
+ <img v-el:small-image @click="showEditor" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+
+ <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
+
+ <defs>
+ <mask xmlns="http://www.w3.org/2000/svg" id="smallImage">
+ <rect x="0" y="0" width="{{ im.width }}", height="{{ im.height }}" fill="white"/>
+ <g v-bind:transform="transformMatrix">
+ <path v-bind:d="fragmentPath"></path>
+ </g>
+ </mask>
+ </defs>
+
+ <g v-show="!displayMask" v-bind:transform="transformMatrix">
+ <path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
+ </g>
+
+ <rect v-show="displayMask" v-el:small-mask x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="{{ im.width }}" height="{{ im.height }}"></rect>
+ </svg>
+
+ {% endthumbnail %}
+ </div>
+ <ul class="inline">
+ <a @click="showEditor" class="showPointer"> <i class='fa fa-edit'></i> Editer le fragment</a>
+ <a v-show="!displayMask" @click="highLightZone" class="showPointer"> <i class='fa fa-eye-slash'></i>Masquer l'image</a>
+ <a v-show="displayMask" @click="highLightZone(1)" class="showPointer"> <i class='fa fa-eye-slash'></i>Afficher la zone</a>
+
+ </ul>
+ </div>
+
+ <div class='col-xs-6' style="">
+ title: {{ annotation.title }}
+ Description: {{ annotation.description }}
+ Tags: {{ annotation.tags }}
+
+ <a href="{% url 'annotation_edit' 1 %}">Editer</a>
+ <a href="{% url 'annotation_edit' annotation.id %}">Proposer une révision</a>
+ </div>
+ </div>
+ </div>
+
+{% endblock %}
--- a/src/iconolab/urls.py Wed Jun 15 18:43:42 2016 +0200
+++ b/src/iconolab/urls.py Thu Jun 16 12:26:13 2016 +0200
@@ -25,7 +25,7 @@
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^home', views.index, name="home"),
- url(r'^annotation/(?P<pk>[0-9]+)/$', views.detail_annotation, name='annotation_detail'),
+ url(r'^annotation/(?P<pk>[0-9]+)/$', views.show_annotation, name='annotation_show'),
url(r'^annotation/(?P<pk>[0-9]+)/fragment', views.draw_fragment, name='annotation_fragment'),
url(r'^annotation/create', views.create_annotation, name='annotation_create'),
url(r'^annotation/(?P<pk>[0-9]+)/edit', views.edit_annotation, name='annotation_edit'),
--- a/src/iconolab/views.py Wed Jun 15 18:43:42 2016 +0200
+++ b/src/iconolab/views.py Thu Jun 16 12:26:13 2016 +0200
@@ -1,7 +1,8 @@
-from django.shortcuts import HttpResponse, get_object_or_404, render
+from django.shortcuts import HttpResponse, get_object_or_404, render, redirect
from iconolab.models import Annotation
from django.http import Http404
from django.contrib.auth.decorators import login_required
+from .forms import AnnotationForm
@login_required
def index(request):
@@ -9,18 +10,38 @@
return HttpResponse("<p>Home</p>");
-def detail_annotation(request, pk):
- pass
-
def draw_fragment(request, pk):
annotation = get_object_or_404(Annotation, pk=pk)
return render(request, 'iconolab/fragment_draw.html', {'annotation': annotation})
def create_annotation(request):
return render(request, 'iconolab/create_annotation.html')
- # reprendre les paths
- # reprendre le ratio
+ pass
+
+def show_annotation(request, pk):
+ annotation = get_object_or_404(Annotation, pk=pk)
+ return render(request, 'iconolab/show_annotation.html', {'annotation': annotation})
+
+
+# save annotation
+# handle revision
+def save_annotation(request):
pass
def edit_annotation(request, pk):
- pass
\ No newline at end of file
+
+ #enregistrer title, description, fragment:nmz
+ annotation = get_object_or_404(Annotation, pk=pk)
+
+ if request.method == 'POST':
+ Annotation_form = AnnotationForm(request.POST, instance=annotation)
+ Annotation_form = AnnotationForm()
+ if Annotation_form.is_valid():
+
+ #redirect to view
+ pass
+ else:
+ Annotation_form = AnnotationForm(instance = annotation)
+
+ return render(request, 'iconolab/edit_annotation.html', {'annotation': annotation, 'form': Annotation_form })
+
\ No newline at end of file