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

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

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