first stuff for showing the route on the site

src/c3nav/site/static/site/css/c3nav.css

@@ -90,3 +90,22 @@ body {
 .tt-suggestion p {
 	margin: 0;
 }
+
+svg {
+    width:100%;
+    height:auto;
+    vertical-align:bottom;
+}
+line {
+    stroke:#FF0000;
+    stroke-width:2.5px;
+}
+marker path {
+     fill: #FF0000;
+     stroke: 0;
+}
+circle.pos {
+    fill:#3399FF;
+    stroke-width:10px;
+    stroke:rgba(51, 153, 255, 0.2);
+}

src/c3nav/site/templates/site/main.html

@@ -2,6 +2,7 @@
 
 {% load static %}
 {% load i18n %}
+{% load route_render %}
 
 {% block content %}
 <form>
@@ -12,6 +13,34 @@
         {% trans "Destination" as heading %}
         {% include 'site/fragment_location.html' with name='destination' location=destination heading=heading %}
     </div>
-
 </form>
+
+    {% if route %}
+        <h2>Your Route</h2>
+        <div class="routeparts">
+            {% for routepart in route.routeparts %}
+                <svg xmlns="http://www.w3.org/2000/svg" class="map" data-level="{{ routepart.level_name }}"
+                     viewBox="0 0 {{ routepart.width }} {{ routepart.height }}"
+                     style="max-height:{% if routepart.height > 300 %}300{% else %}{{ routepart.height }}{% endif %}px">
+                    <defs>
+                        <marker id="arrow-{{ forloop.counter0 }}" markerWidth="4" markerHeight="4" refX="2.5" refY="2" orient="auto">
+                            <path d="M0,0 L3,2 L0,4 L0,0" style="fill: #FF0000; stroke: 0;"></path>
+                        </marker>
+                    </defs>
+
+                    <image width="{{ svg_width }}" height="{{ svg_height }}" x="{{ routepart.min_x | negate }}" y="{{ routepart.min_y | negate }}" xlink:href="/map/{{ routepart.level_name }}.png"></image>
+
+                    <g class="connections">
+                        {% for c in routepart.connections %}
+                            <line x1="{{ c.from_point.svg_x | subtract:routepart.min_x }}"
+                                  y1="{{ c.from_point.svg_y | subtract:routepart.min_y }}"
+                                  x2="{{ c.to_point.svg_x | subtract:routepart.min_x }}"
+                                  y2="{{ c.to_point.svg_y | subtract:routepart.min_y }}"
+                                  marker-end="url(#arrow-{{ forloop.parentloop.counter0 }})"></line>
+                        {% endfor %}
+                    </g>
+                </svg>
+            {% endfor %}
+        </div>
+    {% endif %}
 {% endblock %}

src/c3nav/site/templatetags/route_render.py

@@ -0,0 +1,13 @@
+from django import template
+
+register = template.Library()
+
+
+@register.filter
+def negate(value):
+    return -value
+
+
+@register.filter
+def subtract(value, arg):
+    return value - arg

src/c3nav/site/urls.py

@@ -1,8 +1,9 @@
 from django.conf.urls import url
 
-from c3nav.site.views import main
+from c3nav.site.views import level_image, main
 
 urlpatterns = [
+    url(r'^map/(?P<level>[a-z0-9-_:]+).png$', level_image, name='site.level_image'),
     url(r'^(?P<origin>[a-z0-9-_:]+)/$', main, name='site.main'),
     url(r'^_/(?P<destination>[a-z0-9-_:]+)/$', main, name='site.main'),
     url(r'^(?P<origin>[a-z0-9-_:]+)/(?P<destination>[a-z0-9-_:]+)/$', main, name='site.main'),

src/c3nav/site/views.py

@@ -1,7 +1,16 @@
-from django.shortcuts import redirect, render
+import os
 
+from django.conf import settings
+from django.http import HttpResponse
+from django.shortcuts import get_object_or_404, redirect, render
+from PIL import Image, ImageDraw
+
+from c3nav.mapdata.models import Level
 from c3nav.mapdata.models.locations import get_location
+from c3nav.mapdata.render.compose import composer
+from c3nav.mapdata.utils.misc import get_dimensions
 from c3nav.routing.graph import Graph
+from c3nav.routing.utils.draw import _line_coords
 
 
 def main(request, origin=None, destination=None):
@@ -30,13 +39,39 @@ def main(request, origin=None, destination=None):
 
         redirect(new_url)
 
+    route = None
     if origin and destination:
         graph = Graph.load()
         route = graph.get_route(origin, destination)
+        route = route.split()
+        print(route)
 
-    print(route)
+        if False:
+            filename = os.path.join(settings.RENDER_ROOT, 'base-level-0.png')
+
+            im = Image.open(filename)
+            height = im.size[1]
+            draw = ImageDraw.Draw(im)
+            for connection in route.connections:
+                draw.line(_line_coords(connection.from_point, connection.to_point, height), fill=(255, 100, 100))
+
+            response = HttpResponse(content_type="image/png")
+            im.save(response, "PNG")
+            return response
+
+    width, height = get_dimensions()
 
     return render(request, 'site/main.html', {
         'origin': origin,
-        'destination': destination
+        'destination': destination,
+        'route': route,
+        'width': width,
+        'height': height,
+        'svg_width': width*6,
+        'svg_height': height*6,
     })
+
+
+def level_image(request, level):
+    level = get_object_or_404(Level, name=level, intermediate=False)
+    return composer.get_level_image(request, level)