Proper proxying; JS scrolling using arrows; GIF pins as the PNG fixing in

IE caused onLoad never to fire.
author: matthew <matthew> 2006-09-28 11:06:42 +0000
committer: matthew <matthew> 2006-09-28 11:06:42 +0000
commit: 9475220c2f73e604e77e18c9e5f268ed78560a35 (patch)
tree: b86f2a2cb59af4905a5ea3619907638f9e654423
parent: 10a8a2a3a15787f639ccc01550c7d9d5ea0fac11 (diff)
10 files changed, 106 insertions, 183 deletions
diff --git a/conf/httpd.conf b/conf/httpd.conf
index 55a5a8087..625a4ca8a 100644
--- a/conf/httpd.conf
+++ b/conf/httpd.conf
@@ -20,7 +20,7 @@
 # Copyright (c) 2006 UK Citizens Online Democracy. All rights reserved.
 # Email: francis@mysociety.org; WWW: http://www.mysociety.org
 # 
-# $Id: httpd.conf,v 1.4 2006-09-27 23:51:40 matthew Exp $
+# $Id: httpd.conf,v 1.5 2006-09-28 11:06:42 matthew Exp $
 
 DirectoryIndex index.cgi
 
@@ -31,6 +31,9 @@ RewriteEngine on
 RewriteRule ^/[Cc]/([0-9A-Za-z]{16}).*$ /confirm.cgi?type=update;token=$1
 RewriteRule ^/[Pp]/([0-9A-Za-z]{16}).*$ /confirm.cgi?type=problem;token=$1
 
+ProxyPass /tilma/ http://tilma.mysociety.org/
+ProxyPassReverse /tilma/ http://tilma.mysociety.org/
+
 # CGI files can be referred without CGI
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}.cgi -f
 RewriteRule /(.+) /$1.cgi [PT]
diff --git a/perllib/Page.pm b/perllib/Page.pm
index 403f3e4b7..9feccbaa8 100644
--- a/perllib/Page.pm
+++ b/perllib/Page.pm
@@ -6,7 +6,7 @@
 # Copyright (c) 2006 UK Citizens Online Democracy. All rights reserved.
 # Email: matthew@mysociety.org; WWW: http://www.mysociety.org/
 #
-# $Id: Page.pm,v 1.21 2006-09-28 00:01:41 matthew Exp $
+# $Id: Page.pm,v 1.22 2006-09-28 11:06:43 matthew Exp $
 #
 
 package Page;
@@ -65,9 +65,12 @@ sub header ($$%) {
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en-gb">
     <head>
-        <!--[if lt IE 7.]>
-        <script defer type="text/javascript" src="/pngfix.js"></script>
-        <![endif]-->
+EOF
+# Causes onLoad never to fire in IE...
+# <!--[if lt IE 7.]>
+# <script defer type="text/javascript" src="/pngfix.js"></script>
+# <![endif]-->
+    $html .= <<EOF;
 	<link type="text/css" rel="stylesheet" href="yui/build/logger/assets/logger.css">
 	<script type="text/javascript" src="yui/build/yahoo/yahoo-min.js"></script>
 	<script type="text/javascript" src="yui/build/dom/dom-min.js"></script>
diff --git a/web/css.css b/web/css.css
index 74c20748b..ec40801cb 100644
--- a/web/css.css
+++ b/web/css.css
@@ -172,10 +172,15 @@ fieldset div.checkbox label {
     border: solid 1px #000000;
     width: 508px;
     height: 508px;
-    position: relative;
-    dtop: 0;
     overflow: hidden;
     float: right;
+    position: relative;
+}
+
+#drag {
+    position: relative;
+    width: 508px;
+    height: 508px;
 }
 
 #side {
@@ -190,11 +195,12 @@ fieldset div.checkbox label {
     left: 0;
 }
 */
-#map input {
+#drag input {
     cursor: crosshair;
 }
-#map input, #map img {
+#drag input, #drag img {
     position: absolute;
+    background-color: #cccccc;
 }
 
 #compass {
diff --git a/web/i/grey.gif b/web/i/grey.gif
new file mode 100644
index 000000000..98eee7d12
--- /dev/null
+++ b/web/i/grey.gif
diff --git a/web/i/pin_red.gif b/web/i/pin_red.gif
new file mode 100644
index 000000000..70a8c469c
--- /dev/null
+++ b/web/i/pin_red.gif
diff --git a/web/i/pin_yellow.gif b/web/i/pin_yellow.gif
new file mode 100644
index 000000000..829c7afda
--- /dev/null
+++ b/web/i/pin_yellow.gif
diff --git a/web/index.cgi b/web/index.cgi
index 88d8091e0..c918d0843 100755
--- a/web/index.cgi
+++ b/web/index.cgi
@@ -6,7 +6,7 @@
 # Copyright (c) 2006 UK Citizens Online Democracy. All rights reserved.
 # Email: matthew@mysociety.org. WWW: http://www.mysociety.org
 #
-# $Id: index.cgi,v 1.31 2006-09-27 23:51:45 matthew Exp $
+# $Id: index.cgi,v 1.32 2006-09-28 11:06:43 matthew Exp $
 
 # TODO
 # Nothing is done about the update checkboxes - not stored anywhere on anything!
@@ -261,15 +261,15 @@ EOF
             $northing = $input_h{northing};
         }
         # XXX: How to do this for not London?
-	# And needs to use polygon, not box
 	# Needs to return all council types, so passing in an array of types would be good
 	# And then display choice to user
-        my $council = mySociety::MaPit::get_voting_area_by_location_en($easting, $northing, 'box', 'LBO');
+        my $council = mySociety::MaPit::get_voting_area_by_location_en($easting, $northing, 'polygon', 'LBO');
         my $areas_info = mySociety::MaPit::get_voting_areas_info($council);
 	$council = join(', ', map { $areas_info->{$_}->{name} } @$council);
         $out .= display_map($q, $input{x}, $input{y}, 1, 0);
         $out .= '<h1>Reporting a problem</h1>';
-        $out .= '<p>You have located the problem at the location marked with a yellow pin on the map, which is in the bounding box of '.$council.'. If this is not the correct location, simply click on the map again.</p>
+        $out .= '<p>You have located the problem at the location marked with a yellow pin on the map, which is within '
+	    . $council . '. If this is not the correct location, simply click on the map again.</p>
 <p>Please fill in details of the problem below. Your council won\'t be able
 to help unless you leave as much detail as you can, so please describe the
 exact location of the problem (ie. on a wall or the floor), and so on.</p>';
@@ -424,8 +424,8 @@ EOF
 sub display_pin {
     my ($px, $py, $col) = @_;
     $col = 'red' unless $col;
-    return '' if ($px<0 || $px>508 || $py<0 || $py>508);
-    return '<img class="pin" src="/i/pin_'.$col.'.png" alt="Problem" style="top:' . ($py-20) . 'px; right:' . ($px-6) . 'px; position: absolute;">';
+    # return '' if ($px<0 || $px>508 || $py<0 || $py>508);
+    return '<img class="pin" src="/i/pin_'.$col.'.gif" alt="Problem" style="top:' . ($py-20) . 'px; right:' . ($px-6) . 'px; position: absolute;">';
 }
 
 sub display_problem {
@@ -631,6 +631,7 @@ sub tile_to_os {
 sub click_to_tile {
     my ($pin_tile, $pin, $invert) = @_;
     $pin -= 254 while $pin > 254;
+    $pin += 254 while $pin < 0;
     $pin = 254 - $pin if $invert; # image submits measured from top down
     return $pin_tile + $pin / 254;
 }
diff --git a/web/js.js b/web/js.js
index 2f85cd7ef..1d1c7acc4 100644
--- a/web/js.js
+++ b/web/js.js
@@ -27,20 +27,6 @@ function Map(m) {
     this.map.onclick = associateObjWithEvent(this, 'add_pin');
     document.onmouseout = associateObjWithEvent(this, 'drag_end_out');
 
-    function image_rotate(img, x, y) {
-        if (x) {
-            img.style.left = (img.offsetLeft + x*254) + 'px';
-            img.xx += x;
-        }
-        if (y) {
-            img.style.top = (img.offsetTop + y*254) + 'px';
-            img.yy += y;
-        }
-        var url = img.xx + '.' + img.yy + '.png';
-        url = 't/' + url;
-        img.src = url;
-    }
-
     // Moving the map, loading more tiles as necessary
     this.update = function(dx, dy, noMove) {
         drag_x += dx;
@@ -51,43 +37,6 @@ function Map(m) {
             this.drag.style.left = drag_x + 'px';
             this.drag.style.top = drag_y + 'px';
         }
-
-        for (var i=0; i<6; i++) {
-            for (var j=0; j<6; j++) {
-                var id = i+'.'+j;
-                var xx = x+i-2;
-                var yy = y+j-2;
-                var img = document.getElementById(id);
-                if (img) {
-                    if (!img.xx) { img.xx = xx; }
-                    if (!img.yy) { img.yy = yy; }
-                    if (!img.galleryimg) { img.galleryimg = false; }
-                    if (drag_x + img.offsetLeft > 762) {
-                        image_rotate(img, -6, 0);
-                    } else if (drag_x + img.offsetLeft < -508) {
-                        image_rotate(img, 6, 0);
-                    } else if (drag_y + img.offsetTop > 762) {
-                        image_rotate(img, 0, -6);
-                    } else if (drag_y + img.offsetTop < -508) {
-                        image_rotate(img, 0, 6);
-                    }
-                    continue;
-                }
-                img = document.createElement('img');
-                img.id = id;
-                img.style.position = 'absolute';
-                img.style.width = this.tilewidth + 'px';
-                img.style.height = this.tileheight + 'px';
-                img.style.left = ((i-2)*self.tilewidth) + 'px';
-                img.style.top = ((j-2)*self.tileheight) + 'px';
-                img.galleryimg = false;
-                img.xx = xx;
-                img.yy = yy;
-                image_rotate(img, 0, 0);
-                img.alt = 'Loading...';
-                this.drag.appendChild(img);
-            }
-        }
         return false;
     };
     this.update(0,0);
@@ -115,13 +64,6 @@ Map.prototype = {
         this.pan(x,y);
     },
 
-    pan : function(x,y) {
-        if (!this.myAnim || !this.myAnim.isAnimated()) {
-            this.update(x,y, true);
-            this.myAnim = new YAHOO.util.Motion('drag', {points: { by:[x,y] } }, 0.5, YAHOO.util.Easing.easeBoth);
-            this.myAnim.animate();
-        }
-    },
     drag_move : function(e, point){
         this.in_drag = true;
         this.last_mouse_pos = this.mouse_pos;
diff --git a/web/js2.js b/web/js2.js
index ca80c9b7b..ccc89b687 100644
--- a/web/js2.js
+++ b/web/js2.js
@@ -3,27 +3,26 @@
  * Neighbourhood Fix-It JavaScript
  * 
  * TODO
- * Updating tiles from server as they rotate around, can't seem to think of this straight...
  * Get pins to disappear when they're not over the map!
- * Try and put back dragging, I suppose
+ * Try and put back dragging? Not sure.
  * Selection of pin doesn't really need a server request, but I don't really care
- * Add callback to tileserver JSON, so don't have to use proxy
  * 
  */
 
 
 window.onload = onLoad;
 
+// I love the global
 var x, y;
+var tile_x, tile_y;
 var tilewidth = 254;
 var tileheight = 254;
 
 function onLoad() {
     //var Log = new YAHOO.widget.LogReader();
-
     var compass = document.getElementById('compass');
     if (compass) {
-        var points = document.getElementById('compass').getElementsByTagName('a');
+        var points = compass.getElementsByTagName('a');
         points[1].onclick = function() { pan(0, tileheight); return false; };
         points[3].onclick = function() { pan(tilewidth, 0); return false; };
         points[4].onclick = function() { pan(-tilewidth, 0); return false; };
@@ -37,56 +36,20 @@ function onLoad() {
     var form = document.getElementById('mapForm');
     x = parseInt(form.x.value, 10) - 2; /* Bottom left corner X,Y */
     y = parseInt(form.y.value, 10) - 2;
-
-// Load 6x6 grid of tiles around current 2x2
-var urls_loaded = {
-    success: function(o) {
-        var tiles = eval(o.responseText);
-	var drag = document.getElementById('drag');
-	for (var i=0; i<6; i++) {
-	    for (var j=0; j<6; j++) {
-	        var id = i+'.'+j;
-		var xx = x+j;
-		var yy = y+5-i;
-		var img = document.getElementById(id);
-		if (img) {
-		    if (!img.xx) img.xx = xx;
-		    if (!img.yy) img.yy = yy;
-		    if (!img.galleryimg) { img.galleryimg = false; }
-		    continue;
-		}
-		img = document.createElement('input');
-		img.type = 'image';
-                img.src = 'http://tilma.mysociety.org/tileserver/10k-full-london/' + tiles[i][j];
-		img.name = 'tile_' + xx + '.' + yy;
-		img.id = id;
-		img.style.position = 'absolute';
-		img.style.width = tilewidth + 'px';
-		img.style.height = tileheight + 'px';
-		img.style.top = ((i-2)*tileheight) + 'px';
-		img.style.left = ((j-2)*tilewidth) + 'px';
-		img.galleryimg = false;
-		img.xx = xx;
-		img.yy = yy;
-		img.alt = 'Loading...';
-		drag.appendChild(img);
-	    }
-	}
-    }
-
-}
-    var url = '/proxy.cgi?x=' + x + ';xm=' + (x+5) + ';y=' + y + ';ym=' + (y+5);
+    tile_x = 0;
+    tile_y = 0;
+    var url = '/tilma/tileserver/10k-full-london/' + x + '-' + (x+5) + ',' + y + '-' + (y+5) + '/JSON?';
     var req = YAHOO.util.Connect.asyncRequest('GET', url, urls_loaded, null);
 }
 
 function image_rotate(img, x, y) {
     if (x) {
         img.style.left = (img.offsetLeft + x*tilewidth) + 'px';
-	img.xx += x;
+	//img.xx += x;
     }
     if (y) {
         img.style.top = (img.offsetTop + y*tileheight) + 'px';
-	img.yy += y;
+	//img.yy += y;
     }
 }
 
@@ -107,57 +70,101 @@ function pan(x, y) {
 var drag_x = 0;
 var drag_y = 0;
 function update_tiles(dx, dy) {
-    // XXX Ugh, so that the server gets sent the right map co-ords. Needs more thinking about!
-/*    var form = document.getElementById('mapForm');
-    form.x.value += floor(x/tilewidth);
-    form.y.value += floor(y/tileheight);
-*/
-
     drag_x += dx;
     drag_y += dy;
 
     var newcols = {};
+    var horizontal = 0;
+    var vertical = 0;
     for (var i=0; i<6; i++) {
         for (var j=0; j<6; j++) {
 	    var id = i+'.'+j;
-	    var xx = x+j;
-	    var yy = y+5-i;
 	    var img = document.getElementById(id);
             if (drag_x + img.offsetLeft > 762) {
+                //img.src = '/i/grey.gif';
 	        image_rotate(img, -6, 0);
+		horizontal--;
 	    } else if (drag_x + img.offsetLeft < -508) {
+                img.src = '/i/grey.gif';
 	        image_rotate(img, 6, 0);
-	    } else if (drag_y + img.offsetTop > 762) {
+		horizontal++;
+	    }
+	    if (drag_y + img.offsetTop > 762) {
+                img.src = '/i/grey.gif';
 	        image_rotate(img, 0, -6);
+		vertical--;
 	    } else if (drag_y + img.offsetTop < -508) {
+                img.src = '/i/grey.gif';
 	        image_rotate(img, 0, 6);
+		vertical++;
 	    }
 	}
     }
+    var horizontal = floor(horizontal/6);
+    x += horizontal;
+    tile_x = mod((tile_x + horizontal), 6);
+    var vertical = floor(vertical/6);
+    y -= vertical;
+    tile_y = mod((tile_y + vertical), 6);
 
-// XXX: Now has to fetch correct tiles from tileserver and overwrite
-// correct images... Perhaps this is not right way to do it?
+    var form = document.getElementById('mapForm');
+    form.x.value = x + 2;
+    form.y.value = y + 2;
 
-/*
-    for (j in newcols) {
-	var new_column = {
-	    success: function(o) {
-	        var tiles = eval(o.responseText);
-		for (var i=0; i<6; i++) {
-		    var tile = tiles[i][0];
-		    alert(tile);
+    var url = '/tilma/tileserver/10k-full-london/' + x + '-' + (x+5) + ',' + y + '-' + (y+5) + '/JSON';
+    var req = YAHOO.util.Connect.asyncRequest('GET', url, urls_loaded, null);
+}
+
+// Load 6x6 grid of tiles around current 2x2
+var urls_loaded = {
+    success: function(o) {
+        var tiles = eval(o.responseText);
+	var drag = document.getElementById('drag');
+	for (var i=0; i<6; i++) {
+	    var ii = (i + tile_y) % 6;
+	    for (var j=0; j<6; j++) {
+	        var jj = (j + tile_x) % 6;
+	        var id = ii+'.'+jj;
+		var xx = x+j;
+		var yy = y+5-i;
+		var img = document.getElementById(id);
+		if (img) {
+		    if (!img.galleryimg) { img.galleryimg = false; }
+                    img.src = 'http://tilma.mysociety.org/tileserver/10k-full-london/' + tiles[i][j];
+		    img.name = 'tile_' + xx + '.' + yy;
+		    //if (!img.xx) img.xx = xx;
+		    //if (!img.yy) img.yy = yy;
+		    continue;
 		}
+		img = document.createElement('input');
+		img.type = 'image';
+                img.src = 'http://tilma.mysociety.org/tileserver/10k-full-london/' + tiles[i][j];
+		img.name = 'tile_' + xx + '.' + yy;
+		img.id = id;
+		img.style.position = 'absolute';
+		img.style.width = tilewidth + 'px';
+		img.style.height = tileheight + 'px';
+		img.style.top = ((ii-2)*tileheight) + 'px';
+		img.style.left = ((jj-2)*tilewidth) + 'px';
+		img.galleryimg = false;
+		//img.xx = xx;
+		//img.yy = yy;
+		img.alt = 'Loading...';
+		drag.appendChild(img);
 	    }
-	};
-        var url = '/proxy.cgi?x=' + xx + ';xm=' + xx + ';y=' + y + ';ym=' + (y+5);
-        var req = YAHOO.util.Connect.asyncRequest('GET', url, new_column, null);
+	}
     }
-*/
-
 }
 
 // Floor always closer to 0
 function floor(n) {
     if (n>=0) return Math.floor(n);
-    else return Math.ceil(n);
+    return Math.ceil(n);
+}
+
+// Mod always to positive result
+function mod(m, n) {
+    if (m>=0) return m % n;
+    return (m % n) + n;
 }
+
diff --git a/web/proxy.cgi b/web/proxy.cgi
deleted file mode 100755
index 44763dd5c..000000000
--- a/web/proxy.cgi
+++ /dev/null
@@ -1,39 +0,0 @@
-#!/usr/bin/perl -w
-
-# proxy.cgi:
-# I hate everthing.
-#
-# Copyright (c) 2006 UK Citizens Online Democracy. All rights reserved.
-# Email: matthew@mysociety.org. WWW: http://www.mysociety.org
-#
-# $Id: proxy.cgi,v 1.1 2006-09-28 00:01:42 matthew Exp $
-
-use strict;
-require 5.8.0;
-# Horrible boilerplate to set up appropriate library paths.
-use FindBin;
-use lib "$FindBin::Bin/../perllib";
-use lib "$FindBin::Bin/../../perllib";
-use LWP::Simple;
-use Page;
-use mySociety::Config;
-
-BEGIN {
-    mySociety::Config::set_file("$FindBin::Bin/../conf/general");
-}
-
-sub main {
-    my $q = shift;
-    print $q->header('text/javascript');
-    my $x = $q->param('x') || 0; $x += 0;
-    my $y = $q->param('y') || 0; $y += 0;
-    my $xm = $q->param('xm') || 0; $xm += 0;
-    my $ym = $q->param('ym') || 0; $ym += 0;
-    return unless $x && $y && $xm && $ym;
-    
-    my $url = mySociety::Config::get('TILES_URL');
-    my $tiles_url = "$url$x-$xm,$y-$ym/JSON";
-    my $tiles = LWP::Simple::get($tiles_url);
-    print $tiles;
-}
-Page::do_fastcgi(\&main);
author	matthew <matthew>	2006-09-28 11:06:42 +0000
committer	matthew <matthew>	2006-09-28 11:06:42 +0000
commit	9475220c2f73e604e77e18c9e5f268ed78560a35 (patch)
tree	b86f2a2cb59af4905a5ea3619907638f9e654423
parent	10a8a2a3a15787f639ccc01550c7d9d5ea0fac11 (diff)