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

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