Changeset 29565 for other-projects

Show
Ignore:
Timestamp:
09.12.2014 10:26:28 (5 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
Files:
3 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/index.html

    r29531 r29565  
    4444 
    4545        <p>Welcome ... 
    46            
    47           Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     46          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    4847          sed do eiusmod tempor incididunt ut labore et dolore 
    49           magna aliqua. Ut enim ad minim veniam, quis nostrud 
    50           exercitation ullamco laboris nisi ut aliquip ex ea 
    51           commodo consequat. Duis aute irure dolor in 
    52           reprehenderit in voluptate velit esse cillum dolore eu 
    53           fugiat nulla pariatur. 
     48          magna aliqua. 
    5449        </p> 
    5550 
  • other-projects/nz-flag-design/trunk/main-form/index.html

    r29549 r29565  
    3434    <script src="js/jquery.easing.1.3.js"></script> 
    3535    <script src="js/liteaccordion.jquery.js"></script> 
     36 
     37<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>  
     38<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script> 
     39<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>  
    3640 
    3741    <title>Enter Name</title> 
  • other-projects/nz-flag-design/trunk/main-form/iterative-design.html

    r29549 r29565  
    3434        <li> 
    3535          <h2><span>2D Design</span></h2> 
    36           <div id="design-div" > 
     36          <div id="design-2d-div" > 
    3737 
    3838            <iframe style="width: 100%; height: 100%" 
    39                 id="design-iframe" ></iframe> 
     39                id="design-2d-iframe" ></iframe> 
    4040          </div> 
    4141        </li> 
     
    5353        <li> 
    5454          <h2><span title="Click to Open/Close">Render 3D</span></h2> 
    55           <div id="comparison-3d-div"> 
     55          <div id="render-3d-div"> 
    5656            <iframe src="../render-3d/flag.html"  
    5757                style="width: 100%; height: 100%;" 
    58                 id="comparison-3d-iframe" ></iframe> 
     58                id="render-3d-iframe" ></iframe> 
    5959          </div> 
    6060        </li> 
     
    7575    var activatedSVGEditorFrame = false; 
    7676 
     77 
     78    function savePNGAsFile(imgType, quality) { 
     79 
     80      var design_frame = document.getElementById('design-2d-iframe'); 
     81      var svgCanvas = design_frame.contentWindow.svgCanvas; 
     82      var svgedit = design_frame.contentWindow.svgedit; 
     83 
     84      var mimeType = 'image/' + imgType.toLowerCase(); 
     85      var svg_str = svgCanvas.svgCanvasToString(); 
     86     
     87 
     88        var type = imgType || 'PNG'; 
     89        if (!$('#export_canvas').length) { 
     90            $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body'); 
     91        } 
     92        var c = $('#export_canvas')[0]; 
     93        c.width = svgCanvas.contentW; 
     94        c.height = svgCanvas.contentH; 
     95         
     96        canvg(c, svg_str, {renderCallback: function() { 
     97            var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase(); 
     98            var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType); 
     99 
     100                    $.ajax({ 
     101                        type: "POST", 
     102                        url: "../design-2d/image-data-to-file.jsp", 
     103                        data: { imageData : datauri }, 
     104                        success: function() { console.log("Exported PNG data to file: " + datauri) } 
     105                    }); 
     106              } 
     107            }); 
     108 
     109        } 
     110 
     111        function exportPNG() { 
     112      var design_frame = document.getElementById('design-2d-iframe') 
     113          var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage; 
     114 
     115          var exportWindow = window.open( 
     116              'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'), 
     117              'svg-edit-exportWindow' 
     118          ); 
     119 
     120      design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name); 
     121 
     122          //svgCanvas.rasterExport('PNG', null, exportWindow.name); 
     123        } 
     124 
     125 
    77126        function activateAccordion() { 
    78127 
     
    80129          $('#side-by-side') 
    81130            .liteAccordion( 
    82                { theme           : 'light', 
     131               { theme           : 'stitch', // 'light', 
    83132                 rounded         : true, 
    84133                 containerWidth  : 1000, 
    85                  containerHeight : 600,        
     134                 containerHeight : 600, 
     135             onTriggerSlide : function() { 
     136               console.log("onTriggerSlide: id = " + this[0].id); 
     137                   if (this[0].id == "render-3d-div") { 
     138                 console.log("Triggering SVG-Editor exportPNG()"); 
     139                     savePNGAsFile("PNG",null); 
     140               } 
     141                 } 
    86142               }  
    87143           ); 
     
    90146        function activateSVGEditor() { 
    91147          console.log("activateSVGEditor()"); 
    92       //$('#design-iframe').attr("src", "svg-edit-2.7/svg-editor.html");     
    93           $('#design-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html"); 
     148      //$('#design-2d-iframe').attr("src", "svg-edit-2.7/svg-editor.html");  
     149          $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html"); 
    94150        } 
    95151