Show
Ignore:
Timestamp:
13.02.2015 16:09:07 (5 years ago)
Author:
davidb
Message:

Development of the page for selecting flag w x h (canvas), and the page for controlling the palette colour.

Location:
other-projects/nz-flag-design/trunk/main-form
Files:
5 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/main-form/choose-canvas.html

    r29631 r29740  
    3232            <p>If you hover the mouse over a flag size, you will be able to see some countries that currently use that ratio!</p> 
    3333            <div class="centredDiv"> 
    34                 <div class="ratioDiv flagHover" id="ratio23" onclick="setRatio(2, 3)" title="2:3"></div> 
    35                 <div class="ratioDiv flagHover" id="ratio12" onclick="setRatio(1, 2)" title="1:2"></div> 
    36                 <div class="ratioDiv flagHover" id="ratio35" onclick="setRatio(3, 5)" title="3:5"></div> 
     34                <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimentions(2, 3)" title="2:3"></div> 
     35                <div class="ratioDiv" id="ratio12" onclick="updateCanvasDimentions(1, 2)" title="1:2"></div> 
     36                <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimentions(3, 5)" title="3:5"></div> 
    3737                <div style="clear: both"></div> 
    3838            </div> 
     
    4040 
    4141            <div class="centredDiv"> 
    42                 <div class="ratioDiv flagHover" id="ratio1019" onclick="setRatio(10, 19)" title="10:19"></div> 
    43                 <div class="ratioDiv flagHover" id="ratio58" onclick="setRatio(5, 8)" title="5:8"></div> 
    44                 <div class="ratioDiv flagHover" id="ratio811" onclick="setRatio(8, 11)" title="8:11"></div> 
     42                <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimentions(10, 19)" title="10:19"></div> 
     43                <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimentions(5, 8)" title="5:8"></div> 
     44                <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimentions(8, 11)" title="8:11"></div> 
    4545                <div style="clear: both"></div> 
    4646            </div>             
     
    4949         
    5050        <script> 
    51             function setRatio(height, width) { 
    52                 var constant = 100; 
    53                 var h = constant; 
    54                 var w = (constant / height) * width; 
    55                 document.getElementById("svginfo_width").value = w; 
    56                 document.getElementById("svginfo_height").value = h; 
    57                 alert("Height: " + h + ", Width: " + w); 
    58             }             
     51            // Variable for the currently selected flag ratio 
     52            var currentRatio = "ratio12";        
     53             
     54            function updateCanvasDimentions(height, width) { 
     55                // Show feedback by highlighting the chosen square 
     56                document.getElementById(currentRatio).style.borderColor = 'black'; 
     57                currentRatio = "ratio" + height + width; 
     58                document.getElementById(currentRatio).style.borderColor = 'white'; 
     59                 
     60                var design_frame = document.getElementById('design-2d-iframe'); 
     61                var svgCanvas = design_frame.contentWindow.svgCanvas; 
     62                 
     63                // Changing the value of sizeConstant will change the size of the svg canvas without affecting the width/height ratios 
     64                var sizeConstant = 400; 
     65                 
     66                var h = sizeConstant; 
     67                var w = (sizeConstant / height) * width;                 
     68                 
     69                flagCanvasSettings.width = w; 
     70                flagCanvasSettings.height = h; 
     71                 
     72                // Set the new canvas size 
     73                svgCanvas.setResolution(w, h); 
     74            } 
    5975        </script> 
    6076         
  • other-projects/nz-flag-design/trunk/main-form/choose-palette.html

    r29549 r29740  
    2525      <span class="left story-icon research" ></span> 
    2626      <h2>Choose Colour Palette</h2> 
    27       <p> 
    28         ... 
    29       </p> 
     27      <h3 style="font-size: large; position: relative">Click on a palette circle to select it, and change it's colour using the colour picker to the right</h3> 
     28    <p>         
     29        <div id="palette"> 
     30            <img src="images/palette/palette2.png" id="paletteImage" height="500" alt="Palette"></img> 
     31 
     32            <div onclick="newSelectedCircle('circleBackground')" id="paletteCircleBackground" class="paletteCircle"> 
     33                <svg height="104" width="104"> 
     34                    <circle id="circleBackground" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#000066"/> 
     35                    <text id="circleText1" x="32" y="35" fill="white" font-size="15">FLAG</text> 
     36                    <text id="circleText2" x="5" y="55" fill="white" font-size="13">BACKGROUND</text> 
     37                    <text id="circleText3" x="22" y="75" fill="white" font-size="15">COLOUR</text> 
     38                </svg>  
     39            </div> 
     40 
     41            <div onclick="newSelectedCircle('circle1')" id="paletteCircle1" class="paletteCircle"> 
     42                <svg height="104" width="104"> 
     43                    <circle id="circle1" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#CC0000"/> 
     44                </svg>  
     45            </div> 
     46 
     47            <div onclick="newSelectedCircle('circle2')" id="paletteCircle2" class="paletteCircle"> 
     48                <svg height="104" width="104"> 
     49                    <circle id="circle2" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 
     50                </svg>  
     51            </div> 
     52 
     53            <div onclick="newSelectedCircle('circle3')" id="paletteCircle3" class="paletteCircle"> 
     54                <svg height="104" width="104"> 
     55                    <circle id="circle3" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 
     56                </svg>  
     57            </div> 
     58 
     59            <div onclick="newSelectedCircle('circle4')" id="paletteCircle4" class="paletteCircle"> 
     60                <svg height="104" width="104"> 
     61                    <circle id="circle4" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 
     62                </svg>  
     63            </div> 
     64 
     65            <div onclick="newSelectedCircle('circle5')" id="paletteCircle5" class="paletteCircle"> 
     66                <svg height="104" width="104"> 
     67                    <circle id="circle5" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 
     68                </svg>  
     69            </div>         
     70 
     71            <div onclick="newSelectedCircle('circle6')" id="paletteCircle6" class="paletteCircle"> 
     72                <svg height="104" width="104"> 
     73                    <circle id="circle6" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 
     74                </svg>  
     75            </div> 
     76 
     77            <div onclick="newSelectedCircle('circle7')" id="paletteCircle7" class="paletteCircle"> 
     78                <svg height="104" width="104"> 
     79                    <circle id="circle7" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 
     80                </svg>  
     81            </div> 
     82 
     83            <!-- The Spectrum colour picker --> 
     84            <div id="pickerDiv"><input type='text' id="picker" value='#fffff0'/></div> 
     85        </div> 
     86 
     87        <h2>Use this slider to change the number of colours that will be used in your flag!</h2> 
     88 
     89        <input id="numColoursSlider" type="range" min="0" max="7" value="2" steps="7" onchange="showCircles(this.value)"/> 
     90        <h2>Advice for flag design!</h2>    
     91    </p> 
     92         
     93    <script> 
     94        // Flag settings - used to initialise the svg canvas to the user's preferences 
     95        var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 }; 
     96 
     97        // Visibly toggle between which palette circle is currently selected 
     98        var selectedCircle = "circle1"; 
     99        function newSelectedCircle(circleName) 
     100        { 
     101            document.getElementById(selectedCircle).style.stroke = 'black'; 
     102            document.getElementById(selectedCircle).style.strokeWidth = 1; 
     103 
     104            selectedCircle = circleName; 
     105 
     106            document.getElementById(selectedCircle).style.stroke = 'white'; 
     107            document.getElementById(selectedCircle).style.strokeWidth = 2; 
     108        } 
     109         
     110        // Fill the currently selected circle when a colour is selected using the colour picker 
     111        $("#picker").on('change.spectrum', function(e, colour) {  
     112            document.getElementById(selectedCircle).style.fill = colour; 
     113 
     114            if (selectedCircle == "circleBackground") 
     115            { 
     116                // If white is chosen, change the background palette circle text to be black 
     117                if(colour == '#ffffff')                 
     118                { 
     119                    document.getElementById("circleText1").style.fill = "#000000"; 
     120                    document.getElementById("circleText2").style.fill = "#000000"; 
     121                    document.getElementById("circleText3").style.fill = "#000000"; 
     122                } 
     123                else 
     124                { 
     125                    document.getElementById("circleText1").style.fill = "#ffffff"; 
     126                    document.getElementById("circleText2").style.fill = "#ffffff"; 
     127                    document.getElementById("circleText3").style.fill = "#ffffff"; 
     128                } 
     129 
     130                // Set the canvas background setting to the user's choice 
     131                flagCanvasSettings.backgroundColor = colour; 
     132            } 
     133        }); 
     134         
     135        // Update the number of circles shown on the palette 
     136        function showCircles(newValue) 
     137        {             
     138            for (i = 1; i <= newValue; i++) 
     139            { 
     140                var circle = "paletteCircle" + i; 
     141                document.getElementById(circle).style.display = 'block'; 
     142            } 
     143 
     144            if (newValue < 7) 
     145            { 
     146                for (i = 7; i > newValue; i--) 
     147                { 
     148                    var circle = "paletteCircle" + i; 
     149                    document.getElementById(circle).style.display = 'none'; 
     150                } 
     151            } 
     152        }         
     153         
     154        // Colour picker documentation at https://bgrins.github.io/spectrum 
     155        $("#picker").spectrum({ 
     156            flat: true, 
     157            showInput: true, 
     158            showInitial: true, 
     159            allowEmpty: false, 
     160            showAlpha: false, 
     161            showPalette: true, 
     162            togglePaletteOnly: false, 
     163            showSelectionPalette: true, 
     164            clickoutFiresChange: false, 
     165            cancelText: "Cancel", 
     166            chooseText: "Choose", 
     167            preferredFormat: "hex", 
     168            maxSelectionSize: 10, 
     169            palette: [ 
     170                ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"], 
     171                ["000066", "#CC0000", "000066", "#CC0000", "000066", "#CC0000", "000066", "#CC0000"], 
     172                ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"], 
     173                ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"], 
     174                ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"], 
     175                ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], 
     176                ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] 
     177            ] 
     178            //selectionPalette: [string] 
     179        });           
     180    </script> 
    30181      <!-- end of putting custom content -->         
    31182 
  • other-projects/nz-flag-design/trunk/main-form/css/styles.css

    r29631 r29740  
    951951} 
    952952 
    953 /*Jojo's changes*/ 
     953/* Jojo's changes */ 
     954 
     955/* CSS for the choose-canvas page */ 
    954956.centredDiv { 
    955957    margin: 0 auto;    
     
    967969 
    968970#ratio23 { width: 300px } 
    969 #ratio12 { width: 400px } 
     971#ratio12 { width: 400px; border-color: white } 
    970972#ratio35 { width: 333.3px } 
    971973#ratio1019 { width: 380px } 
     
    980982} 
    981983 
    982 .flagHover:hover 
    983 { 
     984 
     985/* Ideally the different flags shown will be dynamic in the future, and flagHover will no longer be necessary */ 
     986.flagHover:hover { 
    984987    position: relative; 
    985988} 
    986989 
    987 .flagHover:hover:after 
    988 { 
     990.flagHover:hover:after { 
    989991    content: url(ratio23.png); 
    990992    display: block; 
     
    993995    top: 10px; 
    994996} 
     997 
     998/* CSS for choose-palette page */ 
     999.paletteCircle { 
     1000    position: absolute;    
     1001} 
     1002 
     1003#palette { 
     1004    padding: 0 0 0 50px;  
     1005    position: relative; 
     1006} 
     1007 
     1008/* The orange palette image */ 
     1009#paletteImage { 
     1010    position: relative; 
     1011    top: 0;  
     1012    left: 0 
     1013} 
     1014 
     1015/* Positions of the palette circles on the palette */ 
     1016#paletteCircleBackground { top: 75px; left: 150px } 
     1017#paletteCircle1 { top: 35px; left: 295px } 
     1018#paletteCircle2 { top: 50px; left: 450px } 
     1019#paletteCircle3 { top: 105px; left: 585px; display: none } 
     1020#paletteCircle4 { top: 210px; left: 700px; display: none } 
     1021#paletteCircle5 { top: 330px; left: 625px; display: none } 
     1022#paletteCircle6 { top: 355px; left: 480px; display: none } 
     1023#paletteCircle7 { top: 345px; left: 335px; display: none } 
     1024 
     1025#pickerDiv { 
     1026    float:right;  
     1027    position: relative; 
     1028    padding: 0 50px 0 0; 
     1029} 
  • other-projects/nz-flag-design/trunk/main-form/index.html

    r29619 r29740  
    3737    <script type="text/javascript" src="lib/canvg/StackBlur.js"></script> 
    3838    <script type="text/javascript" src="lib/canvg/canvg.js"></script>  
    39  
     39       
     40    <!-- spectrum for colour palette --> 
     41    <script src='bgrins-spectrum/spectrum.js'></script> 
     42    <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' /> 
     43       
     44    <!-- css for choose-palette --> 
     45    <style> 
     46        .ui-slider-track { 
     47            background-color: #ECECEC; 
     48        } 
     49        .ui-slider-handle { 
     50            background-color: #E7924B;    
     51        } 
     52    </style> 
     53       
    4054    <title>Enter Name</title> 
    4155 
  • other-projects/nz-flag-design/trunk/main-form/iterative-design.html

    r29633 r29740  
    11<!DOCTYPE html>   
    22<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       var la_x_dim = $(window).width() * 0.70; 
    139       var la_y_dim = $(window).height() * 0.67; 
    140  
    141  
    142           $('#side-by-side').show(); 
    143  
    144           $('#side-by-side') 
    145             .liteAccordion( 
    146                { theme           : 'stitch', // 'light', 
    147                  rounded         : true, 
    148                  //responsive      : true, 
    149                  containerWidth  : la_x_dim, 
    150                  containerHeight : la_y_dim, 
    151              onTriggerSlide : function() { 
    152                console.log("onTriggerSlide: id = " + this[0].id); 
    153                    if (this[0].id == "render-3d-div") { 
    154                  console.log("Triggering SVG-Editor exportPNG()"); 
    155                      savePNGAsFile("PNG",null); 
    156                } 
    157                  } 
    158                }  
    159            ); 
    160         } 
    161  
    162         function activateSVGEditor() { 
    163           console.log("activateSVGEditor()"); 
    164           $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html"); 
    165         } 
    166  
    167         $(document).on("pageload",function(event,data){ 
    168           console.log( "Iterative Design Page: jquerymobile pageload()" ); 
    169           if (!activatedAccordion) { 
    170         activateAccordion();         
    171         activatedAccordion = true; 
    172       } 
    173         }); 
    174  
    175     $(window).resize(function() { 
    176       var la_x_dim = $(window).width() * 0.70; 
    177       var la_y_dim = $(window).height() * 0.67; 
    178  
    179           $('#side-by-side') 
    180             .liteAccordion('resize', 
    181                { containerWidth  : la_x_dim, 
    182                  containerHeight : la_y_dim 
    183            } 
    184         ); 
    185  
    186  
    187     }); 
    188  
    189         $(document).on("pagebeforeshow",function(event,data){ 
    190       var active_page = $.mobile.activePage.attr("id"); 
    191       console.log("Event: pagebeforeshow() for page " + active_page); 
    192  
    193       if (!activatedSVGEditorFrame && (active_page == "iterative-design-page")) { 
    194         activateSVGEditor(); 
    195         activatedSVGEditorFrame = true; 
    196       } 
    197  
    198         }); 
    199  
    200       </script> 
    201  
    202  
    203     </div><!-- /page --> 
    204  
    205          
    206   </body> 
     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> 
    207262</html>