dynatiler testing

README.md

@@ -20,8 +20,8 @@ map.addLayer(layer);
 
 Live examples
 ==================
-* http://observatory.constantvzw.org/images/gallery.html
-* http://images.constantvzw.org/Techno-Galactic-Software-Observatory/gallery.html
+* <http://observatory.constantvzw.org/images/gallery.html>
+* <http://images.constantvzw.org/Techno-Galactic-Software-Observatory/gallery.html>
 
 
 Documentation

dynatiler.config.js

+const path = require('path');
+// const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
+module.exports = {
+    entry: "./src/dynatiler.js",
+    mode: "development",
+    output: {
+        filename: "dynatiler.js",
+        path: path.resolve(__dirname, 'dist'),
+        library: "dynatiler"
+    }
+    // plugins: [
+    //     new UglifyJSPlugin()
+    // ]
+}
\ No newline at end of file

makefile

@@ -20,14 +20,11 @@ now_folder:
 
 # Implicit rule to know how to make .html from .md
 %.html: %.md
-	include.py $< | \
 	pandoc --from markdown \
 		--to html \
 		--standalone \
-		--css styles.css | \
-	html5tidy \
-	  --alternate /$<?edit "Edit source" "text/html" \
-	  --script /__makeserver__/links.js > $@
+		--css styles.css \
+		-i $< $@
 
 %.320x.jpg: %.png
 	convert -resize 320x $< $@
@@ -39,14 +36,16 @@ print-%:
 dist/leafygal.js: src/leafygal.js
 	node_modules/.bin/webpack
 
+dist/dynatiler.js: src/dynatiler.js
+	node_modules/.bin/webpack --config dynatiler.config.js
+
 %.html: %.md
-	scripts/include.py $< | \
 	pandoc --from markdown \
 		--to html \
 		--standalone \
 		--listings \
 		--css styles.css \
-		-o $@
+		$< -o $@
 
 %.pdf: %.md
 	scripts/include.py $< | \

package.json

@@ -12,5 +12,11 @@
   "license": "ISC",
   "devDependencies": {
     "uglifyjs-webpack-plugin": "^1.0.0-beta.3"
+  },
+  "dependencies": {
+    "async": "^3.1.0",
+    "leaflet": "^1.5.1",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10"
   }
 }

src/leafygal.js

@@ -50,6 +50,37 @@ function tiler (item) {
     }
 }
 
+// dynamic tiler?!
+// given an image at high res, dynamically tile it
+function dynatiler (url, cell_width, cell_height) {
+    if (cell_width == undefined) { cell_width = 256; }
+    if (cell_height == undefined) { cell_height = 256; }
+    return function (coords, done) {
+        var img = document.createElement("img"),
+            retimg = document.createElement("img"),
+            canvas = document.createElement("canvas"),
+            ctx = canvas.getContext("2d");
+        canvas.width = cell_width;
+        canvas.height = cell_height;
+        img.crossOrigin = "Anonymous";      
+        img.src = url;
+        img.addEventListener("load", function () {
+            // draw the image to the canvas
+            // using coordinates (todo)
+            ctx.drawImage(img, 0, 0, cell_width, cell_height);
+            retimg.src = canvas.toDataURL();
+            retimg.addEventListener("load", function () {
+                done();
+
+            })
+        });
+        if (coords.x == 0 && coords.y == 0 && coords.z == 0) {
+
+        }
+        return retimg;
+    }
+}
+
 function gridlayer (L, tiler, opts) {
     var klass = L.GridLayer.extend({ createTile: tiler });
     return new klass(opts);
@@ -194,7 +225,7 @@ function gridlayout (items, cell_width, cell_height) {
     if (cell_width == undefined) { cell_width = 256; }
     if (cell_height == undefined) { cell_height = 256; }
     if (items.length == 1) {
-        return tiler(items[0]);
+        return items[0].tiles ? tiler(items[0]) : dynatiler(items[0]);
     } else {
         var l = items.length;
         var p = Math.ceil(Math.log(l) / Math.log(4));
@@ -254,7 +285,7 @@ function layout (positioneditems, left, top, right, bottom, level, cell_width, c
     }
     if (size == 1 && positioneditems.length == 1) {
         // console.log("base case");
-        return tiler(positioneditems[0].item);
+        return positioneditems[0].item.tiles ? tiler(positioneditems[0].item) : dynatiler(positioneditems[0].item);
     }
 
     // Create 4 new positioned element cells, each hsize x hsize
@@ -290,6 +321,7 @@ function layout (positioneditems, left, top, right, bottom, level, cell_width, c
     );
 }
 
+
 module.exports = {
     gridlayout: gridlayout,
     gridlayer: gridlayer,