source: other-projects/nz-flag-design/trunk/main-form/iterative-design.html@ 29740

Last change on this file since 29740 was 29740, checked in by davidb, 9 years ago

Development of the page for selecting flag w x h (canvas), and the page for controlling the palette colour.
  • Property svn:executable set to *
File size: 12.0 KB
Line 
1<!DOCTYPE html>
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 </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>
262</html>
Note: See TracBrowser for help on using the repository browser.