Changeset 29565 for other-projects/nz-flag-design/trunk/main-form

Timestamp:

2014-12-09T10:26:28+13:00 (9 years ago)

Author:

davidb

Message:

Next round of changes: these ones export the design-2d SVG as a PNG to the file system (through a JSP script) when the 'render 3d' accordion bar is clicked on

Location:

other-projects/nz-flag-design/trunk/main-form

Files:

• index.html (modified) (1 diff)
• iterative-design.html (modified) (5 diffs)

other-projects/nz-flag-design/trunk/main-form/index.html

@@ -34 +34 @@
     <script src="js/jquery.easing.1.3.js"></script>
     <script src="js/liteaccordion.jquery.js"></script>
+
+<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script> 
+<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
+<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script> 
 
     <title>Enter Name</title>

other-projects/nz-flag-design/trunk/main-form/iterative-design.html

@@ -34 +34 @@
         <li>
           <h2><span>2D Design</span></h2>
-          <div id="design-div" >
+          <div id="design-2d-div" >
 
             <iframe style="width: 100%; height: 100%"
-                id="design-iframe" ></iframe>
+                id="design-2d-iframe" ></iframe>
           </div>
         </li>
@@ -53 +53 @@
         <li>
           <h2><span title="Click to Open/Close">Render 3D</span></h2>
-          <div id="comparison-3d-div">
+          <div id="render-3d-div">
             <iframe src="../render-3d/flag.html" 
                 style="width: 100%; height: 100%;"
-                id="comparison-3d-iframe" ></iframe>
+                id="render-3d-iframe" ></iframe>
           </div>
         </li>
@@ -75 +75 @@
     var activatedSVGEditorFrame = false;
 
+
+    function savePNGAsFile(imgType, quality) {
+
+      var design_frame = document.getElementById('design-2d-iframe');
+      var svgCanvas = design_frame.contentWindow.svgCanvas;
+      var svgedit = design_frame.contentWindow.svgedit;
+
+      var mimeType = 'image/' + imgType.toLowerCase();
+      var svg_str = svgCanvas.svgCanvasToString();
+    
+
+        var type = imgType || 'PNG';
+        if (!$('#export_canvas').length) {
+            $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
+        }
+        var c = $('#export_canvas')[0];
+        c.width = svgCanvas.contentW;
+        c.height = svgCanvas.contentH;
+        
+        canvg(c, svg_str, {renderCallback: function() {
+            var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
+            var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
+
+                    $.ajax({
+                        type: "POST",
+                        url: "../design-2d/image-data-to-file.jsp",
+                        data: { imageData : datauri },
+                        success: function() { console.log("Exported PNG data to file: " + datauri) }
+                    });
+              }
+            });
+
+        }
+
+        function exportPNG() {
+      var design_frame = document.getElementById('design-2d-iframe')
+          var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
+
+          var exportWindow = window.open(
+              'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
+              'svg-edit-exportWindow'
+          );
+
+      design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name);
+
+          //svgCanvas.rasterExport('PNG', null, exportWindow.name);
+        }
+
+
         function activateAccordion() {
 
@@ -80 +129 @@
           $('#side-by-side')
             .liteAccordion(
-               { theme           : 'light',
+               { theme           : 'stitch', // 'light',
                  rounded         : true,
                  containerWidth  : 1000,
-                 containerHeight : 600,       
+                 containerHeight : 600,
+             onTriggerSlide : function() {
+               console.log("onTriggerSlide: id = " + this[0].id);
+                   if (this[0].id == "render-3d-div") {
+                 console.log("Triggering SVG-Editor exportPNG()");
+                     savePNGAsFile("PNG",null);
+               }
+                 }
                } 
            );
@@ -90 +146 @@
         function activateSVGEditor() {
           console.log("activateSVGEditor()");
-      //$('#design-iframe').attr("src", "svg-edit-2.7/svg-editor.html");    
-          $('#design-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
+      //$('#design-2d-iframe').attr("src", "svg-edit-2.7/svg-editor.html"); 
+          $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
         }