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

Revision 29767, 12.3 KB (checked in by davidb, 6 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 *
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 browser.