add dataurl example

zenozeng · Sep 14, 2015 · 1181460 · 1181460
1 parent fc789f2
commit 1181460
Show file tree

Hide file tree

Showing 20 changed files with 70 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,7 +12,7 @@ [email protected] (requires [email protected])
 
 - add p5.prototype.registerSVGFilter
 
-- add p5.prototype.getSerializedSVG
+- add p5.prototype.getDataURL
 
 ## v0.4.3
 

diff --git a/dist/p5.svg.js b/dist/p5.svg.js
@@ -2025,13 +2025,16 @@ module.exports = function(p5) {
             // so that it won't make preload mess
             setTimeout(function() {
                 if (path.indexOf(';base64,') > -1) {
-                    successCallback(atob(svg));
+                    svg = atob(svg);
                 } else {
-                    successCallback(decodeURIComponent(svg));
+                    svg = decodeURIComponent(svg);
                 }
+                successCallback(svg);
             }, 1);
+            return svg;
         } else {
             this.httpGet(path, successCallback);
+            return null;
         }
     };
 
@@ -2064,7 +2067,7 @@ module.exports = function(p5) {
     // cause preload to wait
     p5.prototype._preloadMethods.loadSVG = p5.prototype;
 
-    p5.prototype.getSerializedSVG = function() {
+    p5.prototype.getDataURL = function() {
         return this._graphics.elt.toDataURL('image/svg+xml');
     };
 };
@@ -2187,9 +2190,9 @@ module.exports = function(p5) {
         }
         this._setGCFlag(element);
         var g = this.drawingContext.__closestGroupOrSvg();
-        console.log(g, element);
         g.appendChild(element);
-        console.log(g);
+        // window.g = g;
+        // window.x = element;
     };
 
     /**

diff --git a/doc/reference/RendererSVG.html b/doc/reference/RendererSVG.html
@@ -616,7 +616,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/SVGElement.html b/doc/reference/SVGElement.html
@@ -1400,7 +1400,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/element.js.html b/doc/reference/element.js.html
@@ -256,7 +256,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/filters.js.html b/doc/reference/filters.js.html
@@ -103,7 +103,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/index.html b/doc/reference/index.html
@@ -60,7 +60,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/index.js.html b/doc/reference/index.js.html
@@ -59,7 +59,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/io.js.html b/doc/reference/io.js.html
@@ -273,13 +273,16 @@ <h1 class="page-title">Source: io.js</h1>
             // so that it won't make preload mess
             setTimeout(function() {
                 if (path.indexOf(';base64,') > -1) {
-                    successCallback(atob(svg));
+                    svg = atob(svg);
                 } else {
-                    successCallback(decodeURIComponent(svg));
+                    svg = decodeURIComponent(svg);
                 }
+                successCallback(svg);
             }, 1);
+            return svg;
         } else {
             this.httpGet(path, successCallback);
+            return null;
         }
     };
 
@@ -312,7 +315,7 @@ <h1 class="page-title">Source: io.js</h1>
     // cause preload to wait
     p5.prototype._preloadMethods.loadSVG = p5.prototype;
 
-    p5.prototype.getSerializedSVG = function() {
+    p5.prototype.getDataURL = function() {
         return this._graphics.elt.toDataURL('image/svg+xml');
     };
 };
@@ -332,7 +335,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/p5.RendererSVG.js.html b/doc/reference/p5.RendererSVG.js.html
@@ -143,9 +143,9 @@ <h1 class="page-title">Source: p5.RendererSVG.js</h1>
         }
         this._setGCFlag(element);
         var g = this.drawingContext.__closestGroupOrSvg();
-        console.log(g, element);
         g.appendChild(element);
-        console.log(g);
+        // window.g = g;
+        // window.x = element;
     };
 
     /**
@@ -197,7 +197,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/p5.SVGFilters.js.html b/doc/reference/p5.SVGFilters.js.html
@@ -283,7 +283,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/p5.html b/doc/reference/p5.html
@@ -568,7 +568,7 @@ <h4 class="name" id="loadSVG"><span class="type-signature"></span>loadSVG<span c
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="io.js.html">io.js</a>, <a href="io.js.html#line258">line 258</a>
+        <a href="io.js.html">io.js</a>, <a href="io.js.html#line261">line 261</a>
     </li></ul></dd>
 
 
@@ -1574,7 +1574,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/reference/rendering.js.html b/doc/reference/rendering.js.html
@@ -135,7 +135,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RendererS
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 21:59:52 GMT+0800 (CST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Mon Sep 14 2015 22:45:00 GMT+0800 (CST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/examples/examples/click.js b/examples/examples/click.js
diff --git a/examples/examples/dataurl.js b/examples/examples/dataurl.js
@@ -0,0 +1,31 @@
+var graphics;
+function setup() {
+    graphics = createCanvas(600, 200, SVG); // Create SVG Canvas
+    fill('#ED225D');
+    noStroke();
+    window.mouseClickedFlag = false;
+}
+
+function draw() {
+    if (window.mouseClickedFlag) {
+        var dataURL = getDataURL();
+        // Note that because draw is in setTimeout, if we call noLoop inside mouseClicked, draw will still be called one more time
+        noLoop();
+        // draw the dataurl
+        var svg = loadSVG(dataURL, function(svg) {
+            image(svg, 50, 50, 600, 200);
+        });
+    } else {
+        clear();
+        var a = min(frameCount, 1200);
+        var b = min(frameCount, 400);
+        ellipse(0, 0, a, b);
+        if (frameCount > 1200) {
+            noLoop();
+        }
+    }
+}
+
+function mouseClicked() {
+    window.mouseClickedFlag = true;
+}
diff --git a/examples/index.html b/examples/index.html
@@ -16,7 +16,7 @@ <h1>Examples for p5.SVG</h1>
         <li><a href="#graphics">SVG Graphics</a></li>
         <li><a href="#exporting">Exporting SVG</a></li>
         <li><a href="#manipulating">Manipulating Existing SVG</a></li>
-        <li><a href="#click">Open Current SVG dataURL onclick</a></li>
+        <li><a href="#dataurl">Convert to dataURL and draw dataURL</a></li>
     </ul>
     <h2>The SVG Canvas</h2>
     <div id="canvas"></div>

diff --git a/examples/lib/demo.js b/examples/lib/demo.js
@@ -1,7 +1,7 @@
 var route = function() {
     var section = window.location.hash;
     section = section.replace(/#/g, "");
-    if (["basic", "element", "manipulating", "filters", "graphics", "exporting", "click"].indexOf(section) === -1) {
+    if (["basic", "element", "manipulating", "filters", "graphics", "exporting", "dataurl"].indexOf(section) === -1) {
         window.location.hash = "basic";
         return;
     }
@@ -37,7 +37,6 @@ var route = function() {
 route();
 
 window.onhashchange = function() {
-    route();
-    window.noLoop && window.noLoop();
+    window.location.reload();
 };
 
diff --git a/src/io.js b/src/io.js
@@ -245,13 +245,16 @@ module.exports = function(p5) {
             // so that it won't make preload mess
             setTimeout(function() {
                 if (path.indexOf(';base64,') > -1) {
-                    successCallback(atob(svg));
+                    svg = atob(svg);
                 } else {
-                    successCallback(decodeURIComponent(svg));
+                    svg = decodeURIComponent(svg);
                 }
+                successCallback(svg);
             }, 1);
+            return svg;
         } else {
             this.httpGet(path, successCallback);
+            return null;
         }
     };
 
@@ -284,7 +287,7 @@ module.exports = function(p5) {
     // cause preload to wait
     p5.prototype._preloadMethods.loadSVG = p5.prototype;
 
-    p5.prototype.getSerializedSVG = function() {
+    p5.prototype.getDataURL = function() {
         return this._graphics.elt.toDataURL('image/svg+xml');
     };
 };
diff --git a/src/p5.RendererSVG.js b/src/p5.RendererSVG.js
@@ -115,9 +115,7 @@ module.exports = function(p5) {
         }
         this._setGCFlag(element);
         var g = this.drawingContext.__closestGroupOrSvg();
-        console.log(g, element);
         g.appendChild(element);
-        console.log(g);
     };
 
     /**

diff --git a/test/bower_components/p5.js/p5.js b/test/bower_components/p5.js/p5.js
@@ -27071,4 +27071,4 @@ p5.prototype.year = function() {
 module.exports = p5;
 
 },{"../core/core":47}]},{},[38])(38)
-});
+});