Changeset 29740 for other-projects/nz-flag-design/trunk
- Timestamp:
- 2015-02-13T16:09:07+13:00 (9 years ago)
- Location:
- other-projects/nz-flag-design/trunk/main-form
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
r29631 r29740 32 32 <p>If you hover the mouse over a flag size, you will be able to see some countries that currently use that ratio!</p> 33 33 <div class="centredDiv"> 34 <div class="ratioDiv flagHover" id="ratio23" onclick=" setRatio(2, 3)" title="2:3"></div>35 <div class="ratioDiv flagHover" id="ratio12" onclick="setRatio(1, 2)" title="1:2"></div>36 <div class="ratioDiv flagHover" id="ratio35" onclick="setRatio(3, 5)" title="3:5"></div>34 <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimentions(2, 3)" title="2:3"></div> 35 <div class="ratioDiv" id="ratio12" onclick="updateCanvasDimentions(1, 2)" title="1:2"></div> 36 <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimentions(3, 5)" title="3:5"></div> 37 37 <div style="clear: both"></div> 38 38 </div> … … 40 40 41 41 <div class="centredDiv"> 42 <div class="ratioDiv flagHover" id="ratio1019" onclick="setRatio(10, 19)" title="10:19"></div>43 <div class="ratioDiv flagHover" id="ratio58" onclick="setRatio(5, 8)" title="5:8"></div>44 <div class="ratioDiv flagHover" id="ratio811" onclick="setRatio(8, 11)" title="8:11"></div>42 <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimentions(10, 19)" title="10:19"></div> 43 <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimentions(5, 8)" title="5:8"></div> 44 <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimentions(8, 11)" title="8:11"></div> 45 45 <div style="clear: both"></div> 46 46 </div> … … 49 49 50 50 <script> 51 function setRatio(height, width) { 52 var constant = 100; 53 var h = constant; 54 var w = (constant / height) * width; 55 document.getElementById("svginfo_width").value = w; 56 document.getElementById("svginfo_height").value = h; 57 alert("Height: " + h + ", Width: " + w); 58 } 51 // Variable for the currently selected flag ratio 52 var currentRatio = "ratio12"; 53 54 function updateCanvasDimentions(height, width) { 55 // Show feedback by highlighting the chosen square 56 document.getElementById(currentRatio).style.borderColor = 'black'; 57 currentRatio = "ratio" + height + width; 58 document.getElementById(currentRatio).style.borderColor = 'white'; 59 60 var design_frame = document.getElementById('design-2d-iframe'); 61 var svgCanvas = design_frame.contentWindow.svgCanvas; 62 63 // Changing the value of sizeConstant will change the size of the svg canvas without affecting the width/height ratios 64 var sizeConstant = 400; 65 66 var h = sizeConstant; 67 var w = (sizeConstant / height) * width; 68 69 flagCanvasSettings.width = w; 70 flagCanvasSettings.height = h; 71 72 // Set the new canvas size 73 svgCanvas.setResolution(w, h); 74 } 59 75 </script> 60 76 -
other-projects/nz-flag-design/trunk/main-form/choose-palette.html
r29549 r29740 25 25 <span class="left story-icon research" ></span> 26 26 <h2>Choose Colour Palette</h2> 27 <p> 28 ... 29 </p> 27 <h3 style="font-size: large; position: relative">Click on a palette circle to select it, and change it's colour using the colour picker to the right</h3> 28 <p> 29 <div id="palette"> 30 <img src="images/palette/palette2.png" id="paletteImage" height="500" alt="Palette"></img> 31 32 <div onclick="newSelectedCircle('circleBackground')" id="paletteCircleBackground" class="paletteCircle"> 33 <svg height="104" width="104"> 34 <circle id="circleBackground" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#000066"/> 35 <text id="circleText1" x="32" y="35" fill="white" font-size="15">FLAG</text> 36 <text id="circleText2" x="5" y="55" fill="white" font-size="13">BACKGROUND</text> 37 <text id="circleText3" x="22" y="75" fill="white" font-size="15">COLOUR</text> 38 </svg> 39 </div> 40 41 <div onclick="newSelectedCircle('circle1')" id="paletteCircle1" class="paletteCircle"> 42 <svg height="104" width="104"> 43 <circle id="circle1" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#CC0000"/> 44 </svg> 45 </div> 46 47 <div onclick="newSelectedCircle('circle2')" id="paletteCircle2" class="paletteCircle"> 48 <svg height="104" width="104"> 49 <circle id="circle2" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 50 </svg> 51 </div> 52 53 <div onclick="newSelectedCircle('circle3')" id="paletteCircle3" class="paletteCircle"> 54 <svg height="104" width="104"> 55 <circle id="circle3" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 56 </svg> 57 </div> 58 59 <div onclick="newSelectedCircle('circle4')" id="paletteCircle4" class="paletteCircle"> 60 <svg height="104" width="104"> 61 <circle id="circle4" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 62 </svg> 63 </div> 64 65 <div onclick="newSelectedCircle('circle5')" id="paletteCircle5" class="paletteCircle"> 66 <svg height="104" width="104"> 67 <circle id="circle5" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 68 </svg> 69 </div> 70 71 <div onclick="newSelectedCircle('circle6')" id="paletteCircle6" class="paletteCircle"> 72 <svg height="104" width="104"> 73 <circle id="circle6" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 74 </svg> 75 </div> 76 77 <div onclick="newSelectedCircle('circle7')" id="paletteCircle7" class="paletteCircle"> 78 <svg height="104" width="104"> 79 <circle id="circle7" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 80 </svg> 81 </div> 82 83 <!-- The Spectrum colour picker --> 84 <div id="pickerDiv"><input type='text' id="picker" value='#fffff0'/></div> 85 </div> 86 87 <h2>Use this slider to change the number of colours that will be used in your flag!</h2> 88 89 <input id="numColoursSlider" type="range" min="0" max="7" value="2" steps="7" onchange="showCircles(this.value)"/> 90 <h2>Advice for flag design!</h2> 91 </p> 92 93 <script> 94 // Flag settings - used to initialise the svg canvas to the user's preferences 95 var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 }; 96 97 // Visibly toggle between which palette circle is currently selected 98 var selectedCircle = "circle1"; 99 function newSelectedCircle(circleName) 100 { 101 document.getElementById(selectedCircle).style.stroke = 'black'; 102 document.getElementById(selectedCircle).style.strokeWidth = 1; 103 104 selectedCircle = circleName; 105 106 document.getElementById(selectedCircle).style.stroke = 'white'; 107 document.getElementById(selectedCircle).style.strokeWidth = 2; 108 } 109 110 // Fill the currently selected circle when a colour is selected using the colour picker 111 $("#picker").on('change.spectrum', function(e, colour) { 112 document.getElementById(selectedCircle).style.fill = colour; 113 114 if (selectedCircle == "circleBackground") 115 { 116 // If white is chosen, change the background palette circle text to be black 117 if(colour == '#ffffff') 118 { 119 document.getElementById("circleText1").style.fill = "#000000"; 120 document.getElementById("circleText2").style.fill = "#000000"; 121 document.getElementById("circleText3").style.fill = "#000000"; 122 } 123 else 124 { 125 document.getElementById("circleText1").style.fill = "#ffffff"; 126 document.getElementById("circleText2").style.fill = "#ffffff"; 127 document.getElementById("circleText3").style.fill = "#ffffff"; 128 } 129 130 // Set the canvas background setting to the user's choice 131 flagCanvasSettings.backgroundColor = colour; 132 } 133 }); 134 135 // Update the number of circles shown on the palette 136 function showCircles(newValue) 137 { 138 for (i = 1; i <= newValue; i++) 139 { 140 var circle = "paletteCircle" + i; 141 document.getElementById(circle).style.display = 'block'; 142 } 143 144 if (newValue < 7) 145 { 146 for (i = 7; i > newValue; i--) 147 { 148 var circle = "paletteCircle" + i; 149 document.getElementById(circle).style.display = 'none'; 150 } 151 } 152 } 153 154 // Colour picker documentation at https://bgrins.github.io/spectrum 155 $("#picker").spectrum({ 156 flat: true, 157 showInput: true, 158 showInitial: true, 159 allowEmpty: false, 160 showAlpha: false, 161 showPalette: true, 162 togglePaletteOnly: false, 163 showSelectionPalette: true, 164 clickoutFiresChange: false, 165 cancelText: "Cancel", 166 chooseText: "Choose", 167 preferredFormat: "hex", 168 maxSelectionSize: 10, 169 palette: [ 170 ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"], 171 ["000066", "#CC0000", "000066", "#CC0000", "000066", "#CC0000", "000066", "#CC0000"], 172 ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"], 173 ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"], 174 ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"], 175 ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], 176 ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] 177 ] 178 //selectionPalette: [string] 179 }); 180 </script> 30 181 <!-- end of putting custom content --> 31 182 -
other-projects/nz-flag-design/trunk/main-form/css/styles.css
r29631 r29740 951 951 } 952 952 953 /*Jojo's changes*/ 953 /* Jojo's changes */ 954 955 /* CSS for the choose-canvas page */ 954 956 .centredDiv { 955 957 margin: 0 auto; … … 967 969 968 970 #ratio23 { width: 300px } 969 #ratio12 { width: 400px }971 #ratio12 { width: 400px; border-color: white } 970 972 #ratio35 { width: 333.3px } 971 973 #ratio1019 { width: 380px } … … 980 982 } 981 983 982 .flagHover:hover 983 { 984 985 /* Ideally the different flags shown will be dynamic in the future, and flagHover will no longer be necessary */ 986 .flagHover:hover { 984 987 position: relative; 985 988 } 986 989 987 .flagHover:hover:after 988 { 990 .flagHover:hover:after { 989 991 content: url(ratio23.png); 990 992 display: block; … … 993 995 top: 10px; 994 996 } 997 998 /* CSS for choose-palette page */ 999 .paletteCircle { 1000 position: absolute; 1001 } 1002 1003 #palette { 1004 padding: 0 0 0 50px; 1005 position: relative; 1006 } 1007 1008 /* The orange palette image */ 1009 #paletteImage { 1010 position: relative; 1011 top: 0; 1012 left: 0 1013 } 1014 1015 /* Positions of the palette circles on the palette */ 1016 #paletteCircleBackground { top: 75px; left: 150px } 1017 #paletteCircle1 { top: 35px; left: 295px } 1018 #paletteCircle2 { top: 50px; left: 450px } 1019 #paletteCircle3 { top: 105px; left: 585px; display: none } 1020 #paletteCircle4 { top: 210px; left: 700px; display: none } 1021 #paletteCircle5 { top: 330px; left: 625px; display: none } 1022 #paletteCircle6 { top: 355px; left: 480px; display: none } 1023 #paletteCircle7 { top: 345px; left: 335px; display: none } 1024 1025 #pickerDiv { 1026 float:right; 1027 position: relative; 1028 padding: 0 50px 0 0; 1029 } -
other-projects/nz-flag-design/trunk/main-form/index.html
r29619 r29740 37 37 <script type="text/javascript" src="lib/canvg/StackBlur.js"></script> 38 38 <script type="text/javascript" src="lib/canvg/canvg.js"></script> 39 39 40 <!-- spectrum for colour palette --> 41 <script src='bgrins-spectrum/spectrum.js'></script> 42 <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' /> 43 44 <!-- css for choose-palette --> 45 <style> 46 .ui-slider-track { 47 background-color: #ECECEC; 48 } 49 .ui-slider-handle { 50 background-color: #E7924B; 51 } 52 </style> 53 40 54 <title>Enter Name</title> 41 55 -
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.