- Timestamp:
- 2015-02-13T16:09:07+13:00 (9 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
other-projects/nz-flag-design/trunk/main-form/iterative-design.html
r29633 r29740 1 1 <!DOCTYPE html> 2 2 <html id="story"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1"/> 6 7 <title>Iterative Design</title> 8 9 </head> 10 11 <body> 12 <div data-role="page" id="iterative-design-page" 13 class="demo-page" 14 data-dom-cache="true" 15 data-prev="choose-palette"> 16 17 <div data-role="content"> 18 19 <div data-role="controlgroup" class="control" data-mini="true"> 20 <a href="#" class="next right-button test-fwd" style="right:1%;"></a> 21 <a href="#" class="prev left-button idea-back" style="left:1%;"></a> 22 </div> 23 24 <div class="story-page"> 25 26 <!-- put custom content here --> 27 <span class="left story-icon research" ></span> 28 <h2 id="iterative-design-header">Iterative Design</h2> 29 30 <div> 31 <div id="side-by-side"> 32 <ol> 33 34 <li> 35 <h2><span>2D Design</span></h2> 36 <div id="design-2d-div" > 37 38 <iframe style="width: 100%; height: 100%" 39 id="design-2d-iframe" ></iframe> 40 </div> 41 </li> 42 43 <li> 44 <h2><span title="Click to Open/Close">Flag Similarity</span></h2> 45 46 <div id="similarity-2d-div"> 47 <iframe src="../similarity-2d/display-flags.jsp" 48 style="width: 100%; height: 100%" 49 id="similarity-2d-iframe" ></iframe> 50 </div> 51 52 </li> 53 <li> 54 <h2><span title="Click to Open/Close">Render 3D</span></h2> 55 <div id="render-3d-div"> 56 <iframe src="../render-3d/flag.html" 57 style="width: 100%; height: 100%; overflow: hidden;" 58 id="render-3d-iframe" ></iframe> 59 </div> 60 </li> 61 62 </ol> 63 </div> 64 </div> 65 66 <!-- end of putting custom content --> 67 68 </div> <!-- end story-page--> 69 </div><!-- /content --> 70 71 <script> 72 73 74 var activatedAccordion = false; 75 var activatedSVGEditorFrame = false; 76 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 // Look up jsession id; if not present fall back to use a timestamp 101 var jsession_id = $.cookie('JSESSIONID') || new Date().getTime(); 102 console.log("jsession id = " + jsession_id); 103 var imageFilename = "flag-" + jsession_id + ".png"; 104 105 $.ajax({ 106 type: "POST", 107 url: "../design-2d/image-data-to-file.jsp", 108 data: { imageData: datauri, imageFilename: imageFilename }, 109 success: function() { 110 console.log("Exported PNG data to file "); 111 var render_frame = document.getElementById('render-3d-iframe'); 112 // trigger a reload in the 3D Flag Renderer 113 render_frame.contentWindow.createFlag(imageFilename); 114 } 115 }); 116 } 117 }); 118 119 } 120 121 function exportPNG() { 122 var design_frame = document.getElementById('design-2d-iframe') 123 var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage; 124 125 var exportWindow = window.open( 126 'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'), 127 'svg-edit-exportWindow' 128 ); 129 130 design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name); 131 132 //svgCanvas.rasterExport('PNG', null, exportWindow.name); 133 } 134 135 136 function activateAccordion() { 137 138 var la_x_dim = $(window).width() * 0.70; 139 var la_y_dim = $(window).height() * 0.67; 140 141 142 $('#side-by-side').show(); 143 144 $('#side-by-side') 145 .liteAccordion( 146 { theme : 'stitch', // 'light', 147 rounded : true, 148 //responsive : true, 149 containerWidth : la_x_dim, 150 containerHeight : la_y_dim, 151 onTriggerSlide : function() { 152 console.log("onTriggerSlide: id = " + this[0].id); 153 if (this[0].id == "render-3d-div") { 154 console.log("Triggering SVG-Editor exportPNG()"); 155 savePNGAsFile("PNG",null); 156 } 157 } 158 } 159 ); 160 } 161 162 function activateSVGEditor() { 163 console.log("activateSVGEditor()"); 164 $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html"); 165 } 166 167 $(document).on("pageload",function(event,data){ 168 console.log( "Iterative Design Page: jquerymobile pageload()" ); 169 if (!activatedAccordion) { 170 activateAccordion(); 171 activatedAccordion = true; 172 } 173 }); 174 175 $(window).resize(function() { 176 var la_x_dim = $(window).width() * 0.70; 177 var la_y_dim = $(window).height() * 0.67; 178 179 $('#side-by-side') 180 .liteAccordion('resize', 181 { containerWidth : la_x_dim, 182 containerHeight : la_y_dim 183 } 184 ); 185 186 187 }); 188 189 $(document).on("pagebeforeshow",function(event,data){ 190 var active_page = $.mobile.activePage.attr("id"); 191 console.log("Event: pagebeforeshow() for page " + active_page); 192 193 if (!activatedSVGEditorFrame && (active_page == "iterative-design-page")) { 194 activateSVGEditor(); 195 activatedSVGEditorFrame = true; 196 } 197 198 }); 199 200 </script> 201 202 203 </div><!-- /page --> 204 205 206 </body> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1"/> 6 7 <title>Iterative Design</title> 8 </head> 9 10 <body> 11 <div data-role="page" id="iterative-design-page" 12 class="demo-page" 13 data-dom-cache="true" 14 data-prev="choose-palette"> 15 16 <div data-role="content"> 17 <div data-role="controlgroup" class="control" data-mini="true"> 18 <a href="#" class="next right-button test-fwd" style="right:1%;"></a> 19 <a href="#" class="prev left-button idea-back" style="left:1%;"></a> 20 </div> 21 22 <div class="story-page"> 23 24 <!-- put custom content here --> 25 <span class="left story-icon research" ></span> 26 <h2 id="iterative-design-header">Iterative Design</h2> 27 28 <div> 29 <div id="side-by-side"> 30 <ol> 31 32 <li> 33 <h2><span>2D Design</span></h2> 34 <div id="design-2d-div" > 35 <iframe style="width: 100%; height: 100%" 36 id="design-2d-iframe" ></iframe> 37 </div> 38 </li> 39 40 <li> 41 <h2><span title="Click to Open/Close">Flag Similarity</span></h2> 42 43 <div id="similarity-2d-div"> 44 <iframe src="../similarity-2d/display-flags.jsp" 45 style="width: 100%; height: 100%" 46 id="similarity-2d-iframe" ></iframe> 47 </div> 48 </li> 49 <li> 50 <h2><span title="Click to Open/Close">Render 3D</span></h2> 51 <div id="render-3d-div"> 52 <iframe src="../render-3d/flag.html" 53 style="width: 100%; height: 100%; overflow: hidden;" 54 id="render-3d-iframe" ></iframe> 55 </div> 56 </li> 57 58 </ol> 59 </div> 60 </div> 61 62 <!-- end of putting custom content --> 63 64 </div> <!-- end story-page--> 65 </div><!-- /content --> 66 67 <script> 68 var activatedAccordion = false; 69 var activatedSVGEditorFrame = false; 70 71 function savePNGAsFile(imgType, quality) { 72 var design_frame = document.getElementById('design-2d-iframe'); 73 var svgCanvas = design_frame.contentWindow.svgCanvas; 74 var svgedit = design_frame.contentWindow.svgedit; 75 76 var mimeType = 'image/' + imgType.toLowerCase(); 77 var svg_str = svgCanvas.svgCanvasToString(); 78 79 var type = imgType || 'PNG'; 80 if (!$('#export_canvas').length) { 81 $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body'); 82 } 83 var c = $('#export_canvas')[0]; 84 c.width = svgCanvas.contentW; 85 c.height = svgCanvas.contentH; 86 87 canvg(c, svg_str, {renderCallback: function() { 88 var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase(); 89 var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType); 90 91 // Look up jsession id; if not present fall back to use a timestamp 92 var jsession_id = $.cookie('JSESSIONID') || new Date().getTime(); 93 console.log("jsession id = " + jsession_id); 94 var imageFilename = "flag-" + jsession_id + ".png"; 95 96 $.ajax({ 97 type: "POST", 98 url: "../design-2d/image-data-to-file.jsp", 99 data: { imageData: datauri, imageFilename: imageFilename }, 100 success: function() { 101 console.log("Exported PNG data to file "); 102 var render_frame = document.getElementById('render-3d-iframe'); 103 // trigger a reload in the 3D Flag Renderer 104 render_frame.contentWindow.createFlag(imageFilename); 105 } 106 }); 107 }}); 108 } 109 110 function exportPNG() { 111 var design_frame = document.getElementById('design-2d-iframe') 112 var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage; 113 114 var exportWindow = window.open( 115 'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'), 116 'svg-edit-exportWindow' 117 ); 118 119 design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name); 120 } 121 122 function reconfigureSvgCanvas(settings) { 123 console.log("*** entered reconfigureSvgCanvas"); 124 console.log("*** settings: " + settings.backgroundColor); 125 126 var design_frame = document.getElementById('design-2d-iframe'); 127 var svgCanvas = design_frame.contentWindow.svgCanvas; 128 var svgedit = design_frame.contentWindow.svgedit; 129 130 var widthVar = settings.width; 131 var heightVar = settings.height; 132 133 var canvasWidth = svgCanvas.getResolution().w; 134 var canvasHeight = svgCanvas.getResolution().h; 135 136 var userBackground = settings.backgroundColor; 137 138 // decide if this is the first time we're looking to set the background colour 139 // or not. If it is, then use svgCanvas API to create a suitable layer 140 141 var backRectSvg = svgCanvas.getElem('backgroundRectangle'); 142 143 if (backRectSvg == null) { 144 svgCanvas.createLayer("background"); 145 146 svgCanvas.addSvgElementFromJson({ 147 "element": "rect", 148 "attr": { 149 "id": "backgroundRectangle", 150 "width": canvasWidth, 151 "height": canvasHeight, 152 "x": "0", 153 "y": "0", 154 "fill": userBackground, 155 "opacity": "1.0", 156 "stroke-opacity": "0", 157 "stroke-linecap": "null", 158 "stroke-linejoin": "null", 159 "stroke-dasharray": "null", 160 "stroke-width": "5", 161 "stroke": "#000000" 162 }, 163 "curStyles": true 164 }); 165 svgCanvas.setCurrentLayerPosition(0); 166 167 // Refresh the canvas layers 168 svgCanvas.identifyLayers(); 169 } 170 else { 171 console.log("Background to flag already exists -- changing colour to: " + userBackground); 172 backRectSvg.setAttributeNS(null,"fill",userBackground); 173 // find out how to change width and height directly also? 174 175 console.log("Setting background width and height to: " + widthVar + " and " + heightVar); 176 177 backRectSvg.setAttributeNS(null,"width",canvasWidth); 178 backRectSvg.setAttributeNS(null,"height",canvasHeight); 179 180 //svgCanvas.setResolution(backgroundWidth, backgroundHeight); 181 } 182 // Centres the canvas (somewhat) 183 //svgCanvas.updateCanvas(100, 100); 184 } 185 186 187 function activateAccordion() { 188 var la_x_dim = $(window).width() * 0.70; 189 var la_y_dim = $(window).height() * 0.67; 190 191 $('#side-by-side').show(); 192 193 $('#side-by-side') 194 .liteAccordion({ theme : 'stitch', // 'light', 195 rounded : true, 196 //responsive : true, 197 containerWidth : la_x_dim, 198 containerHeight : la_y_dim, 199 onTriggerSlide : function() { 200 console.log("onTriggerSlide: id = " + this[0].id); 201 if (this[0].id == "render-3d-div") { 202 console.log("Triggering SVG-Editor exportPNG()"); 203 savePNGAsFile("PNG",null); 204 } 205 } 206 }); 207 } 208 209 function activateSVGEditor() { 210 console.log("activateSVGEditor()"); 211 $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html?noStorageOnLoad=1"); 212 $('#design-2d-iframe').load(function() { 213 console.log("*** loaded sgv iframe: " + this); 214 215 var design_frame = document.getElementById('design-2d-iframe'); 216 var svgCanvas = design_frame.contentWindow.svgCanvas; 217 218 console.log("*** svgCanvas should now be initialised: " + svgCanvas); 219 //don't load the previous drawing! 220 reconfigureSvgCanvas(flagCanvasSettings); 221 }); 222 } 223 224 $(document).on("pageload",function(event,data){ 225 console.log( "Iterative Design Page: jquerymobile pageload()" ); 226 if (!activatedAccordion) { 227 activateAccordion(); 228 activatedAccordion = true; 229 } 230 }); 231 232 $(window).resize(function() { 233 var la_x_dim = $(window).width() * 0.70; 234 var la_y_dim = $(window).height() * 0.67; 235 236 $('#side-by-side') 237 .liteAccordion('resize', { 238 containerWidth : la_x_dim, 239 containerHeight : la_y_dim 240 }); 241 242 }); 243 244 $(document).on("pagebeforeshow",function(event,data) { 245 var active_page = $.mobile.activePage.attr("id"); 246 console.log("Event: pagebeforeshow() for page " + active_page); 247 248 if (active_page == "iterative-design-page") { 249 if (!activatedSVGEditorFrame) { 250 activateSVGEditor(); 251 activatedSVGEditorFrame = true; 252 } 253 else { 254 reconfigureSvgCanvas(flagCanvasSettings); 255 } 256 } 257 }); 258 </script> 259 260 </div><!-- /page --> 261 </body> 207 262 </html>
Note:
See TracChangeset
for help on using the changeset viewer.
