shakey implementation of FIO

frederickk · Aug 20, 2014 · 4ada59a · 4ada59a
1 parent f62d4cb
commit 4ada59a
Show file tree

Hide file tree

Showing 14 changed files with 502 additions and 85 deletions.
diff --git a/component.json b/component.json
@@ -1,7 +1,7 @@
 {
   "name": "folio.js",
   "filename": "folio",
-  "version": "0.7.3.",
+  "version": "0.7.4.",
   "author": {
     "name": "Ken Frederick",
     "url": "http://blog.kennethfrederick.de/"

diff --git a/distribution/paper.folio.js b/distribution/paper.folio.js
@@ -1,10 +1,10 @@
 /**!
  *
  * folio.js
- * 0.7.3
+ * 0.7.4
  * https://github.com/frederickk/folio.js
  *
- * 18. August 2014
+ * 20. August 2014
  *
  * Ken Frederick
  * ken.frederick@gmx.de
@@ -95,8 +95,8 @@ var onKeyUp = function(event){};
 var container = document.createElement('div');
 container.id = 'container';
 container.style.position = 'absolute';
-container.style.width = '100%';
-container.style.height = '100%';
+container.style.width = document.body.offsetWidth + 'px'; // '100%';
+container.style.height = document.body.offsetHeight + 'px'; // '100%';
 document.body.appendChild( container );
 
 var canvases = document.getElementsByTagName('canvas');
@@ -192,7 +192,7 @@ window.onload = function() {
 
     // ------------------------------------------------------------------------
     view.draw(); // draw the screen
-
+    view.update();
 
 
     // ------------------------------------------------------------------------
@@ -4333,14 +4333,81 @@ folio.FIO = {
      * @param {String} fname
      *          the name of the file to save to
      */
-    saveFile: function(str, fname) {
-        var file = new File(script.file.parent, fname);
-        if (file.exists()) file.remove();
-        file.open();
-        file.write( Json.encode(str) );
-        file.close();
+    saveFile: function(str, filename) {
+       filename = filename || 'foliojs_fio_file.file';
+
+        try {
+            // scriptographer
+            var file = new File(script.file.parent, fname);
+            if (file.exists()) file.remove();
+            file.open();
+            file.write( Json.encode(str) );
+            file.close();
+
+            return true;
+        }
+        catch(err) {
+        }
+
+        try {
+            // paper.js
+
+            // a bit shaky...
+            var link = document.createElement('a');
+            link.download = filename;
+            link.href = str;
+            link.click();
+
+            return true;
+        }
+        catch(err) {
+        }
+
+        return false;
     },
 
+    // TODO:
+    // ------------------------------------------------------------------------
+    // window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
+    //  fs.root.getFile(
+    //      'SnowFlake.svg',
+    //      {
+    //          create: true
+    //      },
+    //      function(fileEntry) {
+    //          fileEntry.createWriter(function(fileWriter) {
+    //              var blob = new Blob(flake.exportSVG());
+
+    //              fileWriter.addEventListener('writeend', function() {
+    //                  location.href = fileEntry.toURL();
+    //              },
+    //              false);
+    //              fileWriter.write(blob);
+    //          });
+    //      }
+    //  );
+
+    // });
+
+    // window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
+    //     fs.root.getFile('test.bin', {create: true}, function(fileEntry) {
+    //         fileEntry.createWriter(function(fileWriter) {
+    //             var blob = new Blob(flake.exportSVG());
+
+    //             fileWriter.addEventListener("writeend", function() {
+    //                 // navigate to file, will download
+    //                 location.href = fileEntry.toURL();
+    //             }, false);
+
+    //             fileWriter.write(blob);
+    //         },
+    //         function() {});
+    //     },
+    //     function() {});
+    // },
+    // function() {});
+
+
     /**
      * @param {String} fname
      *          the name of the file to open

diff --git a/distribution/paper.folio.min.js b/distribution/paper.folio.min.js
diff --git a/distribution/scriptographer.folio.js b/distribution/scriptographer.folio.js
@@ -1,10 +1,10 @@
 /**!
  *
  * folio.js
- * 0.7.3
+ * 0.7.4
  * https://github.com/frederickk/folio.js
  *
- * 18. August 2014
+ * 20. August 2014
  *
  * Ken Frederick
  * ken.frederick@gmx.de
@@ -4281,14 +4281,81 @@ folio.FIO = {
      * @param {String} fname
      *          the name of the file to save to
      */
-    saveFile: function(str, fname) {
-        var file = new File(script.file.parent, fname);
-        if (file.exists()) file.remove();
-        file.open();
-        file.write( Json.encode(str) );
-        file.close();
+    saveFile: function(str, filename) {
+       filename = filename || 'foliojs_fio_file.file';
+
+        try {
+            // scriptographer
+            var file = new File(script.file.parent, fname);
+            if (file.exists()) file.remove();
+            file.open();
+            file.write( Json.encode(str) );
+            file.close();
+
+            return true;
+        }
+        catch(err) {
+        }
+
+        try {
+            // paper.js
+
+            // a bit shaky...
+            var link = document.createElement('a');
+            link.download = filename;
+            link.href = str;
+            link.click();
+
+            return true;
+        }
+        catch(err) {
+        }
+
+        return false;
     },
 
+    // TODO:
+    // ------------------------------------------------------------------------
+    // window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
+    //  fs.root.getFile(
+    //      'SnowFlake.svg',
+    //      {
+    //          create: true
+    //      },
+    //      function(fileEntry) {
+    //          fileEntry.createWriter(function(fileWriter) {
+    //              var blob = new Blob(flake.exportSVG());
+
+    //              fileWriter.addEventListener('writeend', function() {
+    //                  location.href = fileEntry.toURL();
+    //              },
+    //              false);
+    //              fileWriter.write(blob);
+    //          });
+    //      }
+    //  );
+
+    // });
+
+    // window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
+    //     fs.root.getFile('test.bin', {create: true}, function(fileEntry) {
+    //         fileEntry.createWriter(function(fileWriter) {
+    //             var blob = new Blob(flake.exportSVG());
+
+    //             fileWriter.addEventListener("writeend", function() {
+    //                 // navigate to file, will download
+    //                 location.href = fileEntry.toURL();
+    //             }, false);
+
+    //             fileWriter.write(blob);
+    //         },
+    //         function() {});
+    //     },
+    //     function() {});
+    // },
+    // function() {});
+
+
     /**
      * @param {String} fname
      *          the name of the file to open

diff --git a/distribution/scriptographer.folio.min.js b/distribution/scriptographer.folio.min.js
diff --git a/examples/paper.folio/FIOExample.html b/examples/paper.folio/FIOExample.html
@@ -1,60 +1,62 @@
 
 <!-- DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" -->
 <html>
-	<head>
-		<!-- META -->
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <head>
+        <!-- META -->
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
-		<title>FIO Example</title>
+        <title>FIO Example</title>
 
 
-		<!-- CSS -->
-		<link href="css/Folio.css" rel="stylesheet" type="text/css" />
+        <!-- CSS -->
+        <link href="css/Folio.css" rel="stylesheet" type="text/css" />
+        <style>
+            input {
+                font-size: 15px;
+            }
+            #redraw {
+                border-color: rgb(0, 255, 170);
+                background-color: rgb(0, 255, 170);
+            }
+        </style>
 
 
-		<meta http-equiv="x-dns-prefetch-control" content="off"/>
-	</head>
-	<body>
+        <meta http-equiv="x-dns-prefetch-control" content="off"/>
+    </head>
+    <body>
 
 
-		<!-- JAVASCRIPT -->
-		<script type="text/javascript" src="js/paper-core.js"></script>
-		<script type="text/javascript" src="../../distribution/paper.folio.js"></script>
+        <!-- JAVASCRIPT -->
+        <script type="text/javascript" src="js/paper-core.js"></script>
+        <script type="text/javascript" src="../../distribution/paper.folio.js"></script>
 
-		<!-- LOAD PAPER SCRIPT -->
-		<script type="text/javascript" src="scripts/FIOExample.js"></script>
+        <!-- LOAD PAPER SCRIPT -->
+        <script type="text/javascript" src="scripts/FIOExample.js"></script>
 
 
-		<!-- TEXT -->
-		<div id="text-container">
-			FIO Example<br />
-			<a href="http://paperjs.org/" target="new">paperjs</a> experiment by <a href="http://kennnethfrederick.de/" target="new">kenfrederick</a>
-		</div>
+        <!-- TEXT -->
+        <div id="text-container">
+            FIO Example<br />
+            <a href="http://paperjs.org/" target="new">paperjs</a> experiment by <a href="http://kennnethfrederick.de/" target="new">kenfrederick</a>
+        </div>
 
-		<div id="manual">
-		</div>
+        <div id="manual">
+        </div>
 
 
-		<!-- INPUTS -->
-		<div id="input-container">
-			<form method="POST" name="Form">
+        <!-- INPUTS -->
+        <div id="input-container">
+            <input id="saveSVG" type="button" value="Export SVG" onclick="saveSVG();" />
+        </div>
 
-				<div class="input-component" style="width: 450px;">
-					<div class="left"><b>Image</b></div>
-					<input type="text" id="image" name="image" onChange="Setup()" value="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="black-dark-gray" />
-				</div>
 
-			</form>
-		</div>
+        <!-- IMAGES -->
+        <div id="rasters">
+            <!-- <img id="raster" src="images/tumblr_mtoxg3eqCv1qbl3i2o1_500.gif" /> -->
+        </div>
 
 
-		<!-- IMAGES -->
-		<div id="rasters">
-			<!-- <img id="raster" src="images/tumblr_mtoxg3eqCv1qbl3i2o1_500.gif" /> -->
-		</div>
 
-
-
-	</body>
+    </body>
 </html>
diff --git a/examples/paper.folio/css/Folio.css b/examples/paper.folio/css/Folio.css
@@ -767,7 +767,7 @@ input {
   font-weight: bold;
   font-size: 30px;
   text-align: center;
-  width: 100%;
+  /*width: 100%;*/
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;

diff --git a/examples/paper.folio/index.html b/examples/paper.folio/index.html
@@ -51,7 +51,8 @@
 					<p>&nbsp;
 				</div>
 				<div class="col-sm-2">
-					FIO
+					FIO<br />
+					<a href="FIOExample.html">FIO Example</a><br />
 				</div>
 				<div class="col-sm-2">
 					FColor<br />
@@ -115,8 +116,8 @@
 
 			<div class="row">
 				<div class="col-sm-2">
-					FNoise<br/>
-					<a href="FNoiseExample.html">FNoise Example</a><br/>
+					FNoise<br />
+					<a href="FNoiseExample.html">FNoise Example</a><br />
 				</div>
 			</div>