From 9d861a65aefa51b086006a6d715e1a3f6924ae3f Mon Sep 17 00:00:00 2001
From: Ben Hsieh <xeiyan@gmail.com>
Date: Fri, 16 Dec 2016 01:31:23 +0800
Subject: [PATCH] Add viewer and editor functions

---
 index.js               | 115 ++++++++++++++++++++++++++++++++++++++---
 package.json           |   4 +-
 public/demo.html       |  46 ++++++++++-------
 public/map-editor.html |  25 ++-------
 public/style.css       |  31 +++++++++++
 public/viewer.js       |  73 ++++++++++++++++++++++++++
 6 files changed, 249 insertions(+), 45 deletions(-)
 create mode 100644 public/style.css
 create mode 100644 public/viewer.js

diff --git a/index.js b/index.js
index 7d4ad54..c4a54b2 100644
--- a/index.js
+++ b/index.js
@@ -7,16 +7,71 @@ var fs = require('fs');
 var util = require('util');
 var mkdirp = require('mkdirp');
 var getDirName = require('path').dirname;
+var enableCache = true;
+var cp = require('child_process').exec;
+var bodyParser = require('body-parser');
+var imgCache = {};
 
 var regions = JSON.parse(require('fs').readFileSync('./regions.json'));
 
 app.set('port', (process.env.PORT || 5000));
 
 app.use('/public', express.static('public'));
+
+app.use(bodyParser.urlencoded({extended: true}));
+app.use(bodyParser.json());
+
 app.listen(app.get('port'), function() {
   console.log('Node app is running on port', app.get('port'));
 });
 
+app.post('/bounds/:region', function(req, res) {
+  var region = req.params.region;
+  console.log(region,req.body)
+  try {
+    fs.writeFileSync('./regions/'+region+'.json', JSON.stringify(req.body));
+  }catch(err) {
+    console.log(err.stack);
+  }
+  res.sendStatus(200);
+})
+
+app.get('/bounds/:region', function(req, res) {
+
+  var region = req.params.region;
+  try {
+    var data = fs.readFileSync('./regions/' + region + '.json');
+    res.send(data);
+  } catch(err) {
+    console.log(err.stack);
+  }
+
+})
+
+app.get('/reset-cache/:region', function(req,res) {
+
+  var region = req.params.region;
+  try {
+    deleteFolderRecursive('./regions/'+region+'/debug/', function() {
+      res.send(200)
+    });
+  } catch(err) {
+    console.log(err.stack);
+  }
+
+})
+
+app.get('/cache/:enable', function(req, res) {
+
+  if(req.params.enable == '1') {
+    enableCache = true;
+  }
+  else
+    enableCache = false;
+  res.send(200);
+
+})
+
 app.get('/lookup/:z/:x/:y', function(req, res) {
   var x = req.params.x,
       y = req.params.y,
@@ -60,6 +115,24 @@ function handleTileRequest(req, res) {
   });
 }
 
+app.get('/base/:z/:x/:y', function(req,res) {
+  var request   = require('request');
+  var x = req.params.x;
+  var y = req.params.y;
+  var z = req.params.z;
+  var pipe      = req.pipe(request.post('http://mt1.google.com/vt/lyrs=m@110&hl=pl&x='+x+'&y='+y+'&z='+ z));
+  var response  = [];
+
+  pipe.on('data',function(chunk) {
+    response.push(chunk);
+  });
+
+  pipe.on('end',function() {
+    var res2 = Buffer.concat(response);
+    res.send(res2);
+  });
+})
+
 app.get('/exps/:id', function(req, res) {
   res.send(dummyExperience(req.params.id));
 });
@@ -126,7 +199,14 @@ function createTileFromRawImage(region, x, y, z, debug, cb) {
       tileToLatLng(x+1,y+1,z),
       tileToLatLng(x,y+1,z)
     ];
-    fs.readFile(`./region-raw-img/${region}.png`, (err, data) => {
+    if(imgCache[region]) {
+      render(null, imgCache);
+    }
+    else {
+      fs.readFile(`./region-raw-img/${region}.png`, render);
+    }
+
+    function render(err, data) {
       if(err)
         throw err;
       let img = new Image;
@@ -179,16 +259,24 @@ function createTileFromRawImage(region, x, y, z, debug, cb) {
       mkdirp(getDirName(dir), function (err) {
         if (err)
           console.log(err);
-        fs.writeFile(dir, bytes, function(err) {
-          if(err)
-          console.log(err)
+
+        if(enableCache) {
+          fs.writeFile(dir, bytes, function(err) {
+            if(err)
+            console.log(err)
+            cb(bytes);
+          });
+        }
+        else {
           cb(bytes);
-        });
+        }
+
       });
 
-    });
+    }
 
   });
+
 }
 
 function drawText(ctx,param, ox,oy, dx, dy, z) {
@@ -225,3 +313,18 @@ function generateTile(x,y,z) {
   var bytes = canvas.toBuffer(undefined, 3, canvas.PNG_FILTER_NONE);
   return bytes;
 }
+
+var deleteFolderRecursive = function(path, cb) {
+  if( fs.existsSync(path) ) {
+    fs.readdirSync(path).forEach(function(file,index){
+      var curPath = path + "/" + file;
+      if(fs.lstatSync(curPath).isDirectory()) { // recurse
+        deleteFolderRecursive(curPath);
+      } else { // delete file
+        fs.unlinkSync(curPath);
+      }
+    });
+    fs.rmdirSync(path);
+  }
+  cb()
+};
diff --git a/package.json b/package.json
index 1b9c8ff..58d8bda 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,12 @@
     "start": "node index.js"
   },
   "dependencies": {
+    "body-parser": "^1.15.2",
     "canvas": "^1.6.1",
     "express": "4.13.3",
     "mkdirp": "^0.5.1",
-    "moment": "^2.16.0"
+    "moment": "^2.16.0",
+    "request": "^2.79.0"
   },
   "repository": {
     "type": "git"
diff --git a/public/demo.html b/public/demo.html
index 7f709af..bf014bb 100644
--- a/public/demo.html
+++ b/public/demo.html
@@ -3,27 +3,37 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>test</title>
+    <title>Tiles Demo</title>
+    <link rel="stylesheet" href="/public/style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="viewer.js" charset="utf-8"></script>
   </head>
-
   <body>
-    <div>
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3749/2450" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3750/2450" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3751/2450" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3752/2450" alt="">
+    <div id="viewer-panel">
+      <p>Origin</p>
+      <input id="region" type="text" placeholder="region" value="clipsal-500-adelaide"/>
+      <input id="coords" type="text" placeholder="z,x,y" value="17,116005,79122"/>
+      <input id="width" type="text" placeholder="width" value="3"/> x
+      <input id="height" type="text" placeholder="height" value="3"/>
+      <button id="render-btn">render</button>
+      <div>
+        <p>Top left</p>
+        <input id="ub-lat" type="text" placeholder="lat"/>
+        <input id="ub-lng" type="text" placeholder="lng"/>
+        <button class="update-btn">update</button>
+      </div>
+      <div>
+        <p>Bottom right</p>
+        <input id="lb-lat" type="text" placeholder="lat"/>
+        <input id="lb-lng" type="text" placeholder="lng"/>
+        <button class="update-btn">update</button>
+      </div>
     </div>
-    <div>
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3749/2451" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3750/2451" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3751/2451" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3752/2451" alt="">
-    </div>
-    <div>
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3749/2452" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3750/2452" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3751/2452" alt="">
-      <img src="http://192.168.0.11:5000/tiles/debug/test-region1/12/3752/2452" alt="">
+    <button class="move" x="0" y="-1">↑</button>
+    <button class="move" x="-1" y="0">←</button>
+    <button class="move" x="1" y="0">→</button>
+    <button class="move" x="0" y="1">↓</button>
+    <div id="tiles">
     </div>
   </body>
 </html>
diff --git a/public/map-editor.html b/public/map-editor.html
index 2a63f3c..6bab30a 100644
--- a/public/map-editor.html
+++ b/public/map-editor.html
@@ -3,25 +3,9 @@
   <head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
-    <title>Polygon Arrays</title>
+    <title>Map Editor</title>
+    <link rel="stylesheet" href="/public/style.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-    <style>
-      html, body {
-        margin: 0;
-        padding: 0;
-
-      }
-      #map {
-        width: 75%;
-        height: 100vh;
-        display: inline-block;
-      }
-      #tool {
-        display: inline-block;
-        width: 24%;
-        vertical-align: top;
-      }
-    </style>
   </head>
   <body>
     <div id="map"></div>
@@ -30,10 +14,11 @@
     </div>
   </body>
   <script>
+
   function initMap() {
     map = new google.maps.Map(document.getElementById('map'), {
-      zoom: 12,
-      center: {lat: -33.4486095, lng: 149.5558751},
+      zoom: 16,
+      center: {lat: -34.9270088, lng: 138.6089918},
       mapTypeId: google.maps.MapTypeId.TERRAIN
     });
     handleMap(map);
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..5ba4c91
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,31 @@
+html, body {
+  margin: 0;
+  padding: 0;
+
+}
+#map {
+  width: 75%;
+  height: 100vh;
+  display: inline-block;
+}
+#tool {
+  display: inline-block;
+  width: 24%;
+  vertical-align: top;
+}
+#viewer-panel {
+  margin : 1rem;
+  display: block;
+}
+.tile-wrapper {
+  position: relative;
+  display:inline-block;
+  height : 128px;
+  width:128px;
+}
+
+.overlay-tile {
+  position:  absolute;
+  top : 0;
+  left : 0;
+}
diff --git a/public/viewer.js b/public/viewer.js
new file mode 100644
index 0000000..24caec9
--- /dev/null
+++ b/public/viewer.js
@@ -0,0 +1,73 @@
+$(function() {
+
+  $('#render-btn').click(function() {
+    var region = $('#region').val()
+    $.get('/bounds/'+region, function(data) {
+      var bounds = JSON.parse(data).bounds;
+      console.log('bounds=', bounds)
+      $('#ub-lat').val(bounds[0].lat);
+      $('#ub-lng').val(bounds[0].lng);
+      $('#lb-lat').val(bounds[2].lat);
+      $('#lb-lng').val(bounds[2].lng);
+    })
+    renderTiles()
+  })
+
+  $('.update-btn').click(function() {
+    // {"bounds":[{"lat":"-34.921073745369675","lng":"138.6085581777948"},{"lat":"-34.921073745369675","lng":"138.6272251304265"},{"lat":"-34.93560465273544","lng":"138.6272251304265"},{"lat":"-34.93560465273544","lng":"138.6085581777948"}]}
+    var xhr = new XMLHttpRequest();
+    var c1 = { lat : $('#ub-lat').val(), lng : $('#ub-lng').val() };
+    var c2 = { lat : $('#lb-lat').val(), lng : $('#lb-lng').val() };
+    var region = $('#region').val()
+    var body = {
+      bounds : [
+        c1,
+        { lat : c1.lat, lng : c2.lng },
+        c2,
+        { lat : c2.lat, lng : c1.lng },
+      ]
+    };
+    console.log('body', body)
+    xhr.open('POST', '/bounds/'+region);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.send(JSON.stringify(body));
+  })
+
+  $('.move').click(function() {
+    var dx = $(this).attr('x') || 0
+    var dy = $(this).attr('y') || 0
+    var coords = $('#coords').val()
+    var x = (+String(coords).split(',')[1])+Math.floor(dx)
+    var z = String(coords).split(',')[0]
+    var y = (+String(coords).split(',')[2])+Math.floor(dy)
+    $('#coords').val([z,x,y].join(','));
+    renderTiles()
+  })
+
+  function renderTiles() {
+    var region = $('#region').val()
+    var coords = $('#coords').val()
+    var height = $('#height').val()
+    var width = $('#width').val()
+    console.log('render ',region, 'coords:', coords, 'height=', height, 'width=', width)
+    $('#tiles').empty()
+    for(var i = 0; i < height; i++) {
+      var row = $('<div style="line-height:0"></div>')
+      for(var j = 0; j < width; j++) {
+        var id = String(coords).split(',')
+        var z = id[0]
+        var x = (+id[1]) + j
+        var y = (+id[2]) + i
+        var res = [z,x, y].join('/')
+        var wrapper = $('<div class="tile-wrapper"></div>')
+        var tile = $('<img class="overlay-tile" height="128" width="128" src="/tiles/debug/'+region+'/'+res+'?v='+Date.now()+'"/>')
+        var tilebg = $('<img class="overlay-tile" height="128" width="128" src="/base/'+[z,x,y].join('/')+'"/>')
+        wrapper.append(tilebg)
+        wrapper.append(tile)
+        row.append(wrapper)
+      }
+      $('#tiles').append(row)
+    }
+  }
+
+})