Ignore:
Timestamp:
2015-02-13T16:09:07+13:00 (9 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 edited

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>
Note: See TracChangeset for help on using the changeset viewer.