--- a/src/egonomy/models.py Wed Feb 27 18:21:48 2013 +0100
+++ b/src/egonomy/models.py Wed Feb 27 18:43:52 2013 +0100
@@ -82,4 +82,70 @@
title = models.CharField(max_length=2048, blank=True, null=True)
description = models.TextField(blank=True, null=True)
tags = models.TextField(blank=True, null=True)
+
+
+ def get_viewbox_info(self):
+ if not self.coordinates:
+ return None,None,None,None
+ # Now we split the coordinates to get the path points's max and min x and y
+ # A typical path is M0.1995 0.1574L0.3718 0.0131L0.7731 0.0597L0.5126 0.2915Z
+ points_str = self.coordinates.strip("M").strip("Z").split("L")
+ points_x = []
+ points_y = []
+ for p in points_str:
+ xy = p.split(" ")
+ points_x.append(float(xy[0]))
+ points_y.append(float(xy[1]))
+ # At this point, values are floats like 19.95, 15.74...
+ min_x = min(points_x)
+ max_x = max(points_x)
+ min_y = min(points_y)
+ max_y = max(points_y)
+ # At this point, values are floats like 19, 15...
+ # Now we build the viewbox, which is min_x min_y (max_x-min_x) (max_y-min_y) with number like 0.19 0.15...
+ # We use floor and +2 for the viewbox to be a bit larger than the strict fragment
+ vb_x = min_x
+ vb_y = min_y
+ vb_w = max_x - min_x
+ vb_h = max_y - min_y
+ return vb_x, vb_y, vb_w, vb_h
+
+ # This property returns a ratio between width and height
+ @property
+ def ratio(self):
+ if not self.coordinates:
+ return 0
+ _, _, vb_w, vb_h = self.get_viewbox_info()
+ return vb_w/vb_h
+
+ # This property returns a viewbox used in the swg xml and enbling to see the fragment only
+ @property
+ def viewbox(self):
+ if not self.coordinates:
+ return "0 0 1 1"
+ vb_x, vb_y, vb_w, vb_h = self.get_viewbox_info()
+ vb = str(vb_x) + " " + str(vb_y) + " " + str(vb_w) + " " + str(vb_h)
+ return vb
+
+ # This property returns a square viewbox used in the swg xml and enbling to see the fragment only
+ @property
+ def viewbox_square(self):
+ if not self.coordinates:
+ return "0 0 1 1"
+ vb_x, vb_y, vb_w, vb_h = self.get_viewbox_info()
+ img_info = self.image.info
+ img_ratio = float(img_info.width) / float(img_info.height)
+ if vb_w > vb_h:
+ # If fragment w > h, we center the fragment on y ...
+ vb_y = max(0, vb_y - (((vb_w * img_ratio) - vb_h) / 2))
+ # ... and resize the viewbox's h with image's ratio
+ vb_h = vb_w * img_ratio
+ else:
+ # If fragment w > h, we center the fragment on x ...
+ vb_x = max(0, vb_x - (((vb_h / img_ratio) - vb_w) / 2))
+ # ... and we resize the viewbox's w with image's ratio
+ vb_w = vb_h / img_ratio
+ vb = str(vb_x) + " " + str(vb_y) + " " + str(vb_w) + " " + str(vb_h)
+
+ return vb
\ No newline at end of file
--- a/src/egonomy/static/egonomy/css/egonomy.css Wed Feb 27 18:21:48 2013 +0100
+++ b/src/egonomy/static/egonomy/css/egonomy.css Wed Feb 27 18:43:52 2013 +0100
@@ -254,6 +254,13 @@
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
+.sub_svg_image {
+ opacity: .3;
+}
+.sub_svg_image:hover {
+ opacity: 1;
+}
+
/* STYLES SPECIFIQUES A home.html */
.homeviz {
--- a/src/egonomy/templates/egonomy_all_fragments.html Wed Feb 27 18:21:48 2013 +0100
+++ b/src/egonomy/templates/egonomy_all_fragments.html Wed Feb 27 18:43:52 2013 +0100
@@ -28,34 +28,75 @@
<li class="subcol subcol-eighth">
<a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
<div class="center-image">
- <div class="image-and-fragment">
+ <div class="image-and-fragment" style="width:110px; height:110px">
{% with frgmt=frg.object|default:frg %}{# frg.object in search case, frg otherwise #}
{% with image=frgmt.image.info.image_file %}
{% if image %}
{% if image|is_portrait %}
{% thumbnail image "x110" format="PNG" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ <!--img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/-->
+ <svg preserveAspectRatio="none" width="110px" height="110px" viewBox="{{ frgmt.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <clipPath id="fragment-clip{{ frgmt.pk }}">
+ <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+ </svg>
{% empty %}
- <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder" />
+ <!--img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder sub_svg_image" /-->
+ <svg preserveAspectRatio="none" width="110" height="110" 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{{ frgmt.pk }}">
+ <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+ </svg>
{% endthumbnail %}
{% else %}
{% thumbnail image "110" format="PNG" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ <!--img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/-->
+ <svg preserveAspectRatio="none" width="110px" height="110px" viewBox="{{ frgmt.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <clipPath id="fragment-clip{{ frgmt.pk }}">
+ <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+ </svg>
{% empty %}
- <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
+ <!--img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder sub_svg_image" /-->
+ <svg preserveAspectRatio="none" width="110" height="110" 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{{ frgmt.pk }}">
+ <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+ </svg>
{% endthumbnail %}
{% endif %}
{% else %}
- <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
+ <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder sub_svg_image" />
+ <svg preserveAspectRatio="none" width="110" height="110" 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{{ frgmt.pk }}">
+ <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+ </svg>
{% endif %}
{% endwith %}
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
- <path d="{{ frgmt.coordinates }}" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
- </svg>
{% endwith %}
</div>
</div>
<h3>{{ frg.highlighted.title|first|safe|default:frg.title }}</h3></a>
+ <p>{{ frg.viewbox }} - {{ frg.viewbox_square }}</p>
<p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=frg.author %}">{{ frg.author }}</a></strong></p>
</li>
{% endfor %}
--- a/src/egonomy/templates/egonomy_view_fragment.html Wed Feb 27 18:21:48 2013 +0100
+++ b/src/egonomy/templates/egonomy_view_fragment.html Wed Feb 27 18:43:52 2013 +0100
@@ -15,21 +15,52 @@
{% with fragment.image.info.image_file as image %}
{% if image|ratio > 0.8 %}
{% thumbnail image "476" format="PNG" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ <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" />
+ <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 "x600" format="PNG" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image 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" />
+ <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">
+ <!--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>
+ </svg-->
</div>
</div>
</div>