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

Revision 29572, 5.6 KB (checked in by davidb, 5 years ago)

Change to call createFlag() to force Render-3d to show the new image

  • 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
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/index.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%;"
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                    $.ajax({
101                        type: "POST",
102                        url: "../design-2d/image-data-to-file.jsp",
103                        data: { imageData : datauri },
104                        success: function() {
105                      console.log("Exported PNG data to file ");
106                  var render_frame = document.getElementById('render-3d-iframe');
107                  render_frame.contentWindow.createFlag(); // triggers reload
108                }
109                    });
110              }
111            });
112
113        }
114
115        function exportPNG() {
116      var design_frame = document.getElementById('design-2d-iframe')
117          var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
118
119          var exportWindow = window.open(
120              'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
121              'svg-edit-exportWindow'
122          );
123
124      design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name);
125
126          //svgCanvas.rasterExport('PNG', null, exportWindow.name);
127        }
128
129
130        function activateAccordion() {
131
132
133
134      //var la_x_dim = $('#enter-name-header').width();
135      //var la_y_dim = $('#enter-name-page').height() - $('#enter-name-header').offset().bottom -20;
136
137      var la_x_dim = $(document).width() * 0.70;
138      var la_y_dim = $(document).height() * 0.67;
139
140          $('#side-by-side').show();
141
142          $('#side-by-side')
143            .liteAccordion(
144               { theme           : 'stitch', // 'light',
145                 rounded         : true,
146                 containerWidth  : la_x_dim,
147                 containerHeight : la_y_dim,
148             onTriggerSlide : function() {
149               console.log("onTriggerSlide: id = " + this[0].id);
150                   if (this[0].id == "render-3d-div") {
151                 console.log("Triggering SVG-Editor exportPNG()");
152                     savePNGAsFile("PNG",null);
153               }
154                 }
155               }
156           );
157        }
158
159        function activateSVGEditor() {
160          console.log("activateSVGEditor()");
161      //$('#design-2d-iframe').attr("src", "svg-edit-2.7/svg-editor.html");
162          $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
163        }
164
165        $(document).on("pageload",function(event,data){
166          console.log( "Iterative Design Page: jquerymobile pageload()" );
167          if (!activatedAccordion) {
168        activateAccordion();       
169        activatedAccordion = true;
170      }
171        });
172
173
174        $(document).on("pagebeforeshow",function(event,data){
175      var active_page = $.mobile.activePage.attr("id");
176      console.log("Event: pagebeforeshow() for page " + active_page);
177
178      if (!activatedSVGEditorFrame && (active_page == "iterative-design-page")) {
179        activateSVGEditor();
180        activatedSVGEditorFrame = true;
181      }
182
183        });
184
185      </script>
186
187
188    </div><!-- /page -->
189
190       
191  </body>
192</html>
Note: See TracBrowser for help on using the browser.