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

Last change on this file since 29608 was 29608, checked in by davidb, 6 years ago

Switch to using JESSIONID as part of the flagname, so everyone visiting the site gets to design their flag in private.

  • Property svn:executable set to *
File size: 5.9 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
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
139
140 //var la_x_dim = $('#enter-name-header').width();
141 //var la_y_dim = $('#enter-name-page').height() - $('#enter-name-header').offset().bottom -20;
142
143 var la_x_dim = $(document).width() * 0.70;
144 var la_y_dim = $(document).height() * 0.67;
145
146 $('#side-by-side').show();
147
148 $('#side-by-side')
149 .liteAccordion(
150 { theme : 'stitch', // 'light',
151 rounded : true,
152 containerWidth : la_x_dim,
153 containerHeight : la_y_dim,
154 onTriggerSlide : function() {
155 console.log("onTriggerSlide: id = " + this[0].id);
156 if (this[0].id == "render-3d-div") {
157 console.log("Triggering SVG-Editor exportPNG()");
158 savePNGAsFile("PNG",null);
159 }
160 }
161 }
162 );
163 }
164
165 function activateSVGEditor() {
166 console.log("activateSVGEditor()");
167 //$('#design-2d-iframe').attr("src", "svg-edit-2.7/svg-editor.html");
168 $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
169 }
170
171 $(document).on("pageload",function(event,data){
172 console.log( "Iterative Design Page: jquerymobile pageload()" );
173 if (!activatedAccordion) {
174 activateAccordion();
175 activatedAccordion = true;
176 }
177 });
178
179
180 $(document).on("pagebeforeshow",function(event,data){
181 var active_page = $.mobile.activePage.attr("id");
182 console.log("Event: pagebeforeshow() for page " + active_page);
183
184 if (!activatedSVGEditorFrame && (active_page == "iterative-design-page")) {
185 activateSVGEditor();
186 activatedSVGEditorFrame = true;
187 }
188
189 });
190
191 </script>
192
193
194 </div><!-- /page -->
195
196
197 </body>
198</html>
Note: See TracBrowser for help on using the repository browser.