Mercurial Mercurial > egonomy / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | zip | gz | bz2 | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
enhance view fragment with new svg display
authorcavaliet
Thu, 28 Feb 2013 17:56:27 +0100
changeset 78 67d3fb0e54a6
parent 77 48296e8d046a
child 79 2a51570e986b
enhance view fragment with new svg display
src/egonomy/static/egonomy/css/egonomy.css file | annotate | diff | comparison | revisions
src/egonomy/templates/egonomy_view_fragment.html file | annotate | diff | comparison | revisions
src/egonomy/views.py file | annotate | diff | comparison | revisions 
--- a/src/egonomy/static/egonomy/css/egonomy.css	Wed Feb 27 18:59:14 2013 +0100
+++ b/src/egonomy/static/egonomy/css/egonomy.css	Thu Feb 28 17:56:27 2013 +0100
@@ -246,6 +246,10 @@
     height: 110px; width: 110px;
 }
 
+.large_square_fragment {
+    height: 476px; width: 476px;
+}
+
 .center-image img {
     display: inline-block;
 }
--- a/src/egonomy/templates/egonomy_view_fragment.html	Wed Feb 27 18:59:14 2013 +0100
+++ b/src/egonomy/templates/egonomy_view_fragment.html	Thu Feb 28 17:56:27 2013 +0100
@@ -11,6 +11,33 @@
                     <div class="column column-half">
                         <h2>{{ fragment.title }}</h2>
                         <div class="center-image">
+                          {% if fragment_only %}
+                            <div class="image-and-fragment large_square_fragment">
+                             {% with fragment.image.info.image_file as image %}
+                             {% if image %}
+                                  <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="{{ fragment.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                    <defs>
+                                        <clipPath id="fragment-clip{{ fragment.pk }}">
+                                            <path d="{{ fragment.coordinates }}" />
+                                        </clipPath>
+                                    </defs>
+                                    <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
+                                    <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+                                  </svg>
+                             {% else %}
+                                  <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                    <defs>
+                                        <clipPath id="fragment-clip{{ fragment.pk }}">
+                                            <path d="{{ fragment.coordinates }}" />
+                                        </clipPath>
+                                    </defs>
+                                    <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
+                                    <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+                                  </svg>
+                             {% endif %}
+                             {% endwith %}
+                            </div>
+                          {% else %}
 	                        <div class="image-and-fragment">
 	                          {% with fragment.image.info.image_file as image %}
 	                          {% if image|ratio > 0.8 %}
@@ -37,7 +64,7 @@
 	                           {% endthumbnail %}
 	                          {% else %}
 	                           {% thumbnail image "x600" format="PNG" crop="center" as im %}
-	                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image sub_svg_image"/>
+	                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
                                 <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                   <defs>
                                       <clipPath id="fragment-clip{{ fragment.pk }}">
@@ -62,6 +89,7 @@
 	                                <path d="{{ fragment.coordinates }}" stroke="red" stroke-width=".002" fill="red" fill-opacity=".3" />
 	                            </svg-->
 	                        </div>
+                          {% endif %}
 	                    </div>
                     </div>
                     <div class="column column-half">
@@ -94,6 +122,93 @@
                         <div class="fullwidth">
                             <a href="{% url 'create_fragment' image_id=fragment.image.id %}" class="big-button">{% trans "Create a fragment" %}</a>
                         </div>
+                        <div class="fullwidth">
+                          {% if fragment_only %}
+                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}?fragment_only=0">
+                                {% trans "See the fragment in its full picture" %} :<br/>
+	                            <div class="image-and-fragment">
+	                              {% with fragment.image.info.image_file as image %}
+	                              {% if image|is_portrait %}
+	                               {% thumbnail image "110" format="PNG" crop="center" as im %}
+	                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
+	                                <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	                                  <defs>
+	                                      <clipPath id="fragment-clip{{ fragment.pk }}">
+	                                          <path d="{{ fragment.coordinates }}" />
+	                                      </clipPath>
+	                                  </defs>
+	                                  <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+	                                </svg>
+	                               {% empty %}
+	                                <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder sub_svg_image" />
+	                                <svg preserveAspectRatio="none" width="476" height="476" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	                                  <defs>
+	                                      <clipPath id="fragment-clip{{ fragment.pk }}">
+	                                          <path d="{{ fragment.coordinates }}" />
+	                                      </clipPath>
+	                                  </defs>
+	                                  <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+	                                </svg>
+	                               {% endthumbnail %}
+	                              {% else %}
+	                               {% thumbnail image "x110" format="PNG" crop="center" as im %}
+	                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
+	                                <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	                                  <defs>
+	                                      <clipPath id="fragment-clip{{ fragment.pk }}">
+	                                          <path d="{{ fragment.coordinates }}" />
+	                                      </clipPath>
+	                                  </defs>
+	                                  <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+	                               {% empty %}
+	                                <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder sub_svg_image" />
+	                                <svg preserveAspectRatio="none" width="476" height="476" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	                                  <defs>
+	                                      <clipPath id="fragment-clip{{ fragment.pk }}">
+	                                          <path d="{{ fragment.coordinates }}" />
+	                                      </clipPath>
+	                                  </defs>
+	                                  <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+	                                </svg>
+	                               {% endthumbnail %}
+	                              {% endif %}
+	                              {% endwith %}
+	                                <!--svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+	                                    <path d="{{ fragment.coordinates }}" stroke="red" stroke-width=".002" fill="red" fill-opacity=".3" />
+	                                </svg-->
+	                            </div>
+                            </a>
+                          {% else %}
+                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
+                                {% trans "See the fragment only" %} :<br/>
+                                <div class="image-and-fragment little_square_fragment">
+                                 {% with image=fragment.image.info.image_file %}
+                                 {% if image %}
+                                      <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="{{ fragment.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                        <defs>
+                                            <clipPath id="fragment-clip{{ fragment.pk }}">
+                                                <path d="{{ fragment.coordinates }}" />
+                                            </clipPath>
+                                        </defs>
+                                        <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
+                                        <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+                                      </svg>
+                                 {% else %}
+                                      <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                        <defs>
+                                            <clipPath id="fragment-clip{{ fragment.pk }}">
+                                                <path d="{{ fragment.coordinates }}" />
+                                            </clipPath>
+                                        </defs>
+                                        <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
+                                        <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+                                      </svg>
+                                 {% endif %}
+                                 {% endwith %}
+                                </div>
+                            </a>
+                          {% endif %}
+                        </div>
                     </div>
                 </div>
                 <div class="fullwidth">
--- a/src/egonomy/views.py	Wed Feb 27 18:59:14 2013 +0100
+++ b/src/egonomy/views.py	Thu Feb 28 17:56:27 2013 +0100
@@ -51,8 +51,10 @@
     frg = get_object_or_404(Fragment.objects.select_related('image', 'image__info', 'image__metadata','author'), pk=fragment_pk)
     frg_list = Fragment.objects.filter(image=frg.image).select_related('image', 'image__info', 'image__metadata','author')
     
+    fragment_only = {'true': True, 'false': False, "0": False, "1": True}.get((request.GET.get("fragment_only") or "1").lower())
+    
     return render_to_response("egonomy_view_fragment.html",
-                              {'fragment': frg, 'fragment_list': frg_list},
+                              {'fragment': frg, 'fragment_list': frg_list, 'fragment_only':fragment_only},
                               context_instance=RequestContext(request))
 
 @login_required
egonomy