source: trunk/grails-app/views/visualize/index.gsp @ 2072

Last change on this file since 2072 was 2072, checked in by tjeerd@…, 11 years ago

VIS-50, added study-codes, made the study-select wider and added visual cue to the different steps

File size: 11.0 KB
RevLine 
[1981]1<html>
2<head>
3        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
4        <meta name="layout" content="main"/>
5        <title>Visualization</title>
6       
7        <!--[if lt IE 9]><g:javascript src="jqplot/excanvas.js" /><![endif]-->
8        <g:javascript src="jqplot/jquery.jqplot.min.js" />
9        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='jquery.jqplot.min.css' />" />
10       
[1983]11        <!-- jqPlot plugins -->
12        <g:javascript src="jqplot/plugins/jqplot.barRenderer.min.js" />
13        <g:javascript src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js" />
[1991]14        <g:javascript src="jqplot/plugins/jqplot.pointLabels.min.js" />
15        <g:javascript src="jqplot/plugins/jqplot.canvasTextRenderer.min.js" /> 
[2034]16        <g:javascript src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js" />
[2070]17    <g:javascript src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js" />
[2034]18    <g:javascript src="jqplot/plugins/jqplot.ohlcRenderer.min.js" />
19    <g:javascript src="jqplot/plugins/jqplot.highlighter.min.js" />
[1991]20
21        <g:javascript src="visualization.js" />
22        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='visualization.css' />" />
[2003]23    <style type="text/css">
24        /** NEEDED FOR RESOURCES PLUGIN **/
[2051]25        .menu_seperator {background-image: url(${resource(dir: 'images/visualization', file: 'seperator.gif')}); }
[2017]26        .message_error { background: #ffe0e0 url(${fam.icon( name: 'exclamation' )}) 10px 5px no-repeat; }
27        .message_warning { background: #eee url(${fam.icon( name: 'information' )}) 10px 5px no-repeat; }
[2003]28    </style>
[1983]29       
[1981]30        <script type="text/javascript">
31                // We store urls here because they depend on the grails configuration.
32                // This way, the URLs are always correct
33                var visualizationUrls = {
34                        "getStudies": "<g:createLink action="getStudies" />",
35                        "getFields": "<g:createLink action="getFields" />",
36                        "getVisualizationTypes": "<g:createLink action="getVisualizationTypes" />",
37                        "getData": "<g:createLink action="getData" />"
38                };
39        </script>
40</head>
41<body>
[2051]42
[1996]43    <div id="data">
[2051]44        <form id="visualizationForm">
45            <div id="top_container">
46
47                <span class="menu_seperator">&nbsp;</span>
48
49                <span class="topmenu_item" id="menu_study">
[2055]50                    <div class="topmenu_item_label"><img src="${fam.icon( name: 'report' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;Study<img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" />:</div>
51                    <div class="topmenu_item_info">no study selected</div>
[2051]52                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
[2072]53                    <div class="formulier" style="display: block">
54                        <div class="menu_item_label_count">1</div><div class="menu_item_label">Study</div>
[2051]55                        <p class="info">Select a study from the list below.</p>
[2071]56                        <p style="margin-bottom: 0px;">
[2072]57                            <g:select from="${studies}" size="6" optionKey="id" name="study" onChange="changeStudy();"/>
[2071]58                            <div class="block_search">
59                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>:
60                                <input type="text" onKeyUp="doSearch('menu_study');" />
61                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_study');" alt="clear search"/>
62                            </div>
[2051]63                        </p>
[2019]64                    </div>
[2051]65                </span>
66
[2055]67                <span class="menu_seperator">&nbsp;</span>
[2051]68
[2055]69                <span class="topmenu_item" id="menu_aggregation">
70                    <span class="topmenu_item_label"><img src="${fam.icon( name: 'server_chart' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;Aggregation:</span>
71                    <span class="topmenu_item_info">AVERAGE</span>
72                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
73                    <div class="formulier">
74                        <p class="info">Select a way to aggregate the data.</p>
75                        <p>
76                            <select name="aggregation" size="5" onchange="$('#menu_aggregation').children('.topmenu_item_info').html($(this).val().toUpperCase()); changeVis();">
77                                <option value="average" SELECTED>Average</option>
78                                <option value="count">Count</option>
79                                <option value="median">Median</option>
80                                <option value="none" disabled>No aggregation</option>
81                                <option value="sum">Sum</option>
82                            </select>
83                        </p>
84                    </div>
85                </span>
86
[2051]87                <span class="menu_seperator">&nbsp;</span>
88
89                <span class="topmenu_item" id="menu_advanced">
90                    <span class="topmenu_item_label"><img src="${fam.icon( name: 'cog' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;Advanced settings</span>
91                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
[2019]92                    <div class="formulier">
[2055]93                        <table>
94                            <tr>
[2061]95                                <td><label for="autovis">Visualize the data as soon as enough parameters are known.</label></td>
[2055]96                                <td><input type="checkbox" name="autovis" id="autovis" CHECKED/></td>
97                            </tr>
98                            <tr>
[2062]99                                <td><label for="showvalues">Always show values in the graph.<br />(if this box is unchecked, value's are only shown when you hover over a datapoint. Note that hover on a barchart with value 0 isn't possible)</label></td>
100                                <td><input type="checkbox" name="showvalues" id="showvalues" CHECKED onClick="changeVis();"/></td>
[2061]101                            </tr>
[2070]102                            <tr>
103                                <td><label for="anglelabels">Angle labels on the x-axis.<br />(if this box is checked, labels are shown at a 45&deg; angle)</label></td>
104                                <td><input type="checkbox" name="anglelabels" id="anglelabels" CHECKED onClick="changeVis();"/></td>
105                            </tr>
[2055]106                        </table>
[2019]107                    </div>
[2051]108                </span>
109
110                <span class="menu_seperator">&nbsp;</span>
111
112                <span class="topmenu_item" id="message_counter" onClick="; return false;">
113                    <span class="topmenu_item_label"><img src="${fam.icon( name: 'email_error' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;Messages:</span>
114                    <span class="topmenu_item_info">0</span>
115                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
[2019]116                    <div class="formulier">
[2051]117                        <p class="info">Messages:</p>
118                        <div id="message_container">
119                        <g:if test="${flash.error}">
120                            <div class="message_box message_error">
121                                ${flash.error.toString().encodeAsHTML()}
122                            </div>
123                        </g:if>
124                        <g:if test="${flash.message}">
125                            <div class="message_box message_warning">
126                                ${flash.message.toString().encodeAsHTML()}
127                            </div>
128                        </g:if>
129                        </div>
[2019]130                    </div>
[2051]131                </span>
[1983]132
[2051]133                <span class="menu_seperator">&nbsp;</span>
134                   
135            </div>
[1996]136
[2051]137            <div id="bottom_container">
[1996]138
[2051]139                <div id="menu_container">
140                    <div class="menu_item" id="menu_column">
[2072]141                        <div class="menu_item_label_count"><span>2</span></div><div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
[2051]142                        <p class="info">Select a field for the X-Axis from the list below. This field will be visible as columns in the table visualization.</p>
143                        <p>
144                            <select id="columns" name="columns" size="6" onChange="changeFields('menu_column');"></select>
[2071]145                            <div class="block_search">
146                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>:
147                                <input type="text" onKeyUp="doSearch('menu_column');" />
148                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_column');" alt="clear search"/>
149                            </div>
[2051]150                        </p>
[2017]151                    </div>
[2051]152                    <div class="menu_item" id="menu_row">
[2072]153                        <div class="menu_item_label_count">3</div><div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
[2051]154                        <p class="info">Select a field for the Y-Axis from the list below. This field will be visible as rows in the table visualization.</p>
155                        <p>
156                            <select id="rows" name="rows" size="6" onChange="changeFields('menu_row');"></select>
[2071]157                            <div class="block_search">
158                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>:
159                                <input type="text" onKeyUp="doSearch('menu_row');" />
160                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_row');" alt="clear search"/>
161                            </div>
[2051]162                        </p>
[2017]163                    </div>
[2051]164                    <div class="menu_item" id="menu_vis">
[2072]165                        <div class="menu_item_label_count">4</div><div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
[2051]166                        <p class="info">Select visualization type.</p>
167                        <p>
168                            <select id="types" name="types"  size="3" onChange="changeVis();"></select>
169                        </p>
170                    </div>
171                    <div class="menu_item" id="menu_go">
172                        <button id="button_visualize" onClick="visualize(); return false;" >
173                            VISUALIZE
174                        </button>
175                    </div>
176                </div>
177               
178                <div id="visualization_container">
[2072]179                    <div id="visualization"><div style="padding: 30px">Click on the study menu and select a study to start.</div>
[2051]180                    </div>
181                </div>
[1996]182
[2051]183                <br clear="all"/>
184
[1996]185            </div>
[2051]186        </form>
[1996]187    </div>
[1981]188</body>
189</html>
190
191
192
Note: See TracBrowser for help on using the repository browser.