Changeset 1996


Ignore:
Timestamp:
Sep 5, 2011, 5:44:05 PM (8 years ago)
Author:
tjeerd@…
Message:

First commit at interface visualization screen

Location:
trunk
Files:
3 added
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/grails-app/views/visualize/index.gsp

    r1991 r1996  
    3232<body>
    3333       
    34         <h1>Visualize your study</h1>
    35        
    36         <g:if test="${flash.error}">
    37                 <div class="errormessage">
    38                         ${flash.error.toString().encodeAsHTML()}
    39                 </div>
    40         </g:if>
    41         <g:if test="${flash.message}">
    42                 <div class="message">
    43                         ${flash.message.toString().encodeAsHTML()}
    44                 </div>
    45         </g:if>
    46        
    47         <div id="ajaxError">
    48         </div> 
    49        
    50         <p class="explanation">
    51                 Choose a study to visualize
    52         </p>
     34    <div id="data">
     35        <div id="menu_container">
     36            <form id="visualizationForm">
     37                <div class="menu_spacer"> </div>
     38                <div class="menu_item menu_item_fill" id="menu_study">
     39                    <div class="menu_item_label">Studies <img src="./images/spinner.gif" class="spinner" /></div>
     40                    <div class="menu_item_info"></div>
     41                    <div class="formulier"><label for="study">Study</label><g:select from="${studies}" optionKey="id" optionValue="title" name="study" onChange="changeStudy();" noSelection="${['':'[SELECT OPTION]']}"/></div>
     42                </div>
     43                <div class="menu_arrow"> </div>
     44                <div class="menu_item" id="menu_row">
     45                    <div class="menu_item_label">Rows <img src="./images/spinner.gif" class="spinner" /></div>
     46                    <div class="menu_item_info"></div>
     47                    <div class="formulier"><label for="rows">Rows</label> <select id="rows" name="rows" onChange="changeFields('menu_row');"></select></div>
     48                </div>
     49                <div class="menu_item" id="menu_column">
     50                    <div class="menu_item_label">Columns <img src="./images/spinner.gif" class="spinner" /></div>
     51                    <div class="menu_item_info"></div>
     52                    <div class="formulier"><label for="columns">Columns</label> <select id="columns" name="columns" onChange="changeFields('menu_column');"></select></div>
     53                </div>
     54                <div class="menu_arrow"> </div>
     55                <div class="menu_item" id="menu_vis">
     56                    <div class="menu_item_label">Type <img src="./images/spinner.gif" class="spinner" /></div>
     57                    <div class="menu_item_info"></div>
     58                    <div class="formulier"><label for="types">Type</label><select id="types" name="types" onChange="changeVis();"></select></div>
     59                </div>
     60                <div class="menu_arrow"> </div>
     61                <div class="menu_item" id="menu_go">
     62                    <input type="button" value="Visualize" onClick="visualize();"/><br /><input type="checkbox" name="autovis" id="autovis" CHECKED/><span style="font-size: small;">auto</span></div>
     63                <div class="menu_spacer"> </div>
     64            </form>
     65        </div>
    5366
    54         <form id="visualizationForm">
    55                 <h3><span class="nummer">1</span>Studies</h3>
    56                 <p>
    57                         <label>Study</label><g:select from="${studies}" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/>
    58                 </p>
    59                
    60                 <div id="step2">
    61                         <h3><span class="nummer">2</span>Variables</h3>
    62                         <p>
    63                                 <label for="rows">Rows</label> <select id="rows" name="rows" onChange="changeFields();"></select><br />
    64                                 <label for="columns">Columns</label> <select id="columns" name="columns" onChange="changeFields();"></select>
    65                         </p>
    66                 </div>
    67        
    68                 <div id="step3">
    69                         <h3><span class="nummer">3</span>Visualization type</h3>
    70                         <p>
    71                                 <label for"types">Type</label><select id="types" name="types"></select>
    72                         </p>
    73                         <p>
    74                                 <label> </label><input type="button" value="Visualize" onClick="visualize();"/>
    75                         </p>
    76                 </div>
    77         </form>
    78        
    79         <div id="visualization">
    80         </div>
     67        <div id="visualization_container">
     68
     69            <h1>Visualize your study</h1>
     70
     71            <div id="messages">
     72                <g:if test="${flash.error}">
     73                    <div class="errormessage">
     74                        ${flash.error.toString().encodeAsHTML()}
     75                    </div>
     76                </g:if>
     77                <g:if test="${flash.message}">
     78                    <div class="message">
     79                        ${flash.message.toString().encodeAsHTML()}
     80                    </div>
     81                </g:if>
     82
     83                <div id="ajaxError">
     84                </div>
     85            </div>
     86
     87            <div id="visualization">
     88            </div>
     89        </div>
     90    </div>
    8191</body>
    8292</html>

  • trunk/web-app/css/visualization.css

    r1991 r1996  
    1212label { display: inline-block; zoom: 1; *display: inline; width: 110px; margin-top: 10px;  }
    1313
    14 #visualizationForm { position: relative; margin: 10px 0; font-size: 11px; }
    15 #visualizationForm h3 { font-size: 13px; }
    16 #visualizationForm h3 .nummer { display: inline-block; zoom: 1; *display: inline; width: 25px; }
     14table.jqplot-table-legend { width: 100px; }
    1715
    18 #visualizationForm p { margin-left: 25px; }
     16#visualization {
     17    width: 100%;
     18}
    1919
    20 table.jqplot-table-legend { width: 100px; }
     20#messages {
     21    width: 840px;
     22    height: 60px;
     23    overflow: hidden;
     24}
     25
     26/** START :: VISUALIZATION MENU **/
     27
     28#data {
     29    position: relative;
     30    width: 960px;
     31}
     32
     33#menu_container {
     34    width : 60px;
     35    background-color: #ddd;
     36    border-top-right-radius: 10px;
     37    -moz-border-radius-topright: 10px;
     38    -webkit-border-top-right-radius: 10px;
     39    border-bottom-right-radius: 10px;
     40    -moz-border-radius-bottomright: 10px;
     41    -webkit-border-bottom-right-radius: 10px;
     42    border-right-style: inset;
     43    border-right-width: 5px;
     44    z-index: 5;
     45}
     46
     47.menu_item {
     48    position: relative;
     49    width : 88px;
     50    margin-right: 4px;
     51    padding: 4px;
     52    border-top-right-radius: 10px;
     53    -moz-border-radius-topright: 10px;
     54    -webkit-border-top-right-radius: 10px;
     55    border-bottom-right-radius: 10px;
     56    -moz-border-radius-bottomright: 10px;
     57    -webkit-border-bottom-right-radius: 10px;
     58    border-style: solid solid solid none;
     59    border-width: 2px;
     60    font-size: medium;
     61    background-color: #AAAAAA;
     62    border-color: #888;
     63    z-index: 10;
     64}
     65
     66.menu_arrow {
     67    background-image: url('../images/visualization/down_arrow.png');
     68    background-repeat: no-repeat;
     69    margin: 6px;
     70    height: 48px;
     71}
     72
     73.menu_spacer {
     74    height: 40px;
     75}
     76
     77.menu_item_done {
     78    background-color: #00CC00;
     79    border-color: green;
     80}
     81
     82.menu_item_error {
     83    background-color: pink;
     84    border-color: red;
     85}
     86
     87.menu_item_warning {
     88    background-color: yellow;
     89    border-color: #ffa07a;
     90}
     91
     92.menu_item_fill {
     93    background-color: #87cefa;
     94    border-color: blue;
     95}
     96
     97.menu_item_info {
     98    font-size: 9px;
     99    width: 80px;
     100    overflow-x: hidden;
     101}
     102
     103.menu_item:hover {
     104    background-color: white;
     105}
     106
     107#visualization_container {
     108    position: absolute;
     109    left: 120px;
     110    width: 840px;
     111    top: 0px;
     112
     113}
     114
     115.formulier {
     116    position: absolute;
     117    display: none;
     118    left: 140px;
     119    top: -2px;
     120    width: 500px;
     121    height: 100px;
     122    border-style: solid;
     123    border-color: inherit;
     124    border-width: 2px;
     125    background: white;
     126    padding: 40px;
     127}
     128
     129.spinner {
     130    display: none;
     131}

  • trunk/web-app/js/visualization.js

    r1991 r1996  
    44var visualization = null;
    55
     6$(document).ready(function() {
     7    $(".menu_item").mouseover(
     8        function() {
     9            $( this ).css("width","150px");
     10            $(this).find("div.formulier").show();
     11                }
     12    ).mouseout(
     13        function() {
     14            $( this ).find("div.formulier").hide();
     15            $( this ).css("width","88px");
     16                }
     17    );
     18});
     19
    620/**
    721 * Retrieve new fields based on the study that the user has selected.
    822 */
    923function changeStudy() {
     24    $( "#menu_study" ).find("div.formulier").hide();
     25    $( "#menu_study" ).find("img.spinner").show();
     26    $( "#menu_study" ).find("div.menu_item_info").html("<br />"+$( '#study option:selected' ).text());
     27
    1028        executeAjaxCall( "getFields", {
    1129                "errorMessage": "An error occurred while retrieving variables from the server. Please try again or contact a system administrator.",
    … …  
    1331                        // Remove all previous entries from the list
    1432                        $( '#rows, #columns' ).empty();
     33            $( '#rows, #columns' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) );
    1534
    1635                        // Add all fields to the lists
    17                         $.each( data, function( idx, field ) {
     36            var returndata = data.returnData;
     37                        $.each( returndata, function( idx, field ) {
    1838                                $( '#rows, #columns' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
    1939                        });
    2040                       
    21                         $( "#step2" ).show();
    22                         $( "#step3" ).hide();
     41            $( "#menu_study" ).find("img.spinner").hide();
     42            $( "#menu_study" ).removeClass("menu_item_fill");
     43            $( "#menu_study" ).addClass("menu_item_done");
     44            $( "#menu_row" ).addClass("menu_item_fill");
     45            $( "#menu_column" ).addClass("menu_item_fill");
    2346                }
    2447        });
    … …  
    2851 * Retrieve the possible visualization types based on the fields that the user has selected.
    2952 */
    30 function changeFields() {
     53function changeFields(divid) {
     54    $( "#"+divid ).find("img.spinner").show();
     55    $( "#"+divid ).find("div.formulier").hide();
     56
     57    var type = "rows";
     58    if(divid=="menu_column") type = "columns";
     59
     60    $( "#"+divid ).find("div.menu_item_info").html("<br />"+$( '#'+type+' option:selected' ).text());
    3161        executeAjaxCall( "getVisualizationTypes", {
    3262                "errorMessage": "An error occurred while retrieving visualization types from the server. Please try again or contact a system administrator.",
    3363                "success": function( data, textStatus, jqXHR ) {
    3464                        // Remove all previous entries from the list
     65            var oldSelect = $( '#types option:selected' ).text();
     66            var intSelect = 0;
     67            var iOptionNum = 0;
    3568                        $( '#types' ).empty();
    3669
     70            $( '#types' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) );
    3771                        // Add all fields to the lists
    38                         $.each( data, function( idx, field ) {
     72            var returndata = data.returnData;
     73
     74                        $.each( returndata, function( idx, field ) {
     75                if(field.name==oldSelect) {
     76                    intSelect = iOptionNum;
     77                }
     78                iOptionNum = iOptionNum + 1;
    3979                                $( '#types' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
    4080                        });
    4181
    42                         $( "#step3" ).show();
     82            $( '#types' ).selectedIndex = intSelect;
     83
     84            $( "#"+divid ).find("img.spinner").hide();
     85            $( "#"+divid ).addClass("menu_item_done");
     86            $( "#"+divid ).removeClass("menu_item_fill");
     87            if(!$( "#menu_vis" ).hasClass("menu_item_done") && $( "#menu_row" ).hasClass("menu_item_done") && $( "#menu_column" ).hasClass("menu_item_done")) {
     88                $( "#menu_vis" ).addClass("menu_item_fill");
     89            }
    4390                }
    4491        });
    4592}
     93
     94/**
     95 *
     96 */
     97function changeVis() {
     98    $( "#menu_vis" ).find("div.formulier").hide();
     99    $( "#menu_vis" ).removeClass("menu_item_fill");
     100    $( "#menu_vis" ).addClass("menu_item_done");
     101    $( "#menu_vis" ).find("div.menu_item_info").html("<br />"+$( '#types option:selected' ).text());
     102    if($("#autovis").attr("checked")=="checked") {
     103        visualize();
     104    }
     105
     106}
     107
    46108
    47109/**
    … …  
    58120
    59121                        // Handle erroneous data
    60                         if( !checkCorrectData( data ) ) {
     122                        if( !checkCorrectData( returndata ) ) {
    61123                                showError( "Unfortunately the server returned data in a format that we did not expect." );
    62124                                return;
    … …  
    67129                        var series = [];
    68130
    69                         $.each(data.series, function(idx, element ) {
     131
     132            var returndata = data.returnData;
     133                        $.each(returndata.series, function(idx, element ) {
    70134                                dataPoints[ dataPoints.length ] = element.y;
    71135                                series[ series.length ] = { "label": element.name };
    72136                        });
     137
     138            var xlabel = returndata[ "xaxis" ].unit=="" ? returndata[ "xaxis" ].title : returndata[ "xaxis" ].title + " (" + returndata[ "xaxis" ].unit + ")";
     139            var ylabel = returndata[ "yaxis" ].unit=="" ? returndata[ "yaxis" ].title : returndata[ "yaxis" ].title + " (" + returndata[ "yaxis" ].unit + ")";
    73140                       
    74141                        // TODO: create a chart based on the data that is sent by the user and the type of chart
    … …  
    92159                                        xaxis: {
    93160                                                        renderer: $.jqplot.CategoryAxisRenderer,
    94                                                         ticks: data.x,
    95                                                         label: data[ "xaxis" ].title + " (" + data[ "xaxis" ].unit + ")",
     161                                                        ticks: returndata.x,
     162                                                        label: xlabel,
    96163                                                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    97164                                        },
    98165                                        yaxis: {
    99                                                 label: data[ "yaxis" ].title + " (" + data[ "yaxis" ].unit + ")",
     166                                                label: ylabel,
    100167                                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    101168                                        }
Note: See TracChangeset for help on using the changeset viewer.