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

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

Further awesome additions to the visualization interface

File size: 4.5 KB
Line 
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       
11        <!-- jqPlot plugins -->
12        <g:javascript src="jqplot/plugins/jqplot.barRenderer.min.js" />
13        <g:javascript src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js" />
14        <g:javascript src="jqplot/plugins/jqplot.pointLabels.min.js" />
15        <g:javascript src="jqplot/plugins/jqplot.canvasTextRenderer.min.js" /> 
16        <g:javascript src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js" />     
17
18        <g:javascript src="visualization.js" />
19        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='visualization.css' />" />
20    <style type="text/css">
21        /** NEEDED FOR RESOURCES PLUGIN **/
22        .menu_arrow {background-image: url(${resource(dir: 'images/visualization', file: 'down_arrow.png')}); }
23        .error { background: #ffe0e0 url(${fam.icon( name: 'exclamation' )}) 10px 10px no-repeat; }
24        .warning{ background: #eee url(${fam.icon( name: 'information' )}) 10px 10px no-repeat; }
25    </style>
26       
27        <script type="text/javascript">
28                // We store urls here because they depend on the grails configuration.
29                // This way, the URLs are always correct
30                var visualizationUrls = {
31                        "getStudies": "<g:createLink action="getStudies" />",
32                        "getFields": "<g:createLink action="getFields" />",
33                        "getVisualizationTypes": "<g:createLink action="getVisualizationTypes" />",
34                        "getData": "<g:createLink action="getData" />"
35                };
36        </script>
37</head>
38<body>
39       
40    <div id="data">
41        <div id="menu_container">
42            <form id="visualizationForm">
43                <div class="menu_spacer"> </div>
44                <div class="menu_item menu_item_fill" id="menu_study">
45                    <div class="menu_item_label">Studies <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
46                    <div class="menu_item_info"></div>
47                    <div class="formulier"><g:render template="formStudy" /></div>
48                </div>
49                <div class="menu_arrow"> </div>
50                <div class="menu_item" id="menu_column">
51                    <div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
52                    <div class="menu_item_info"></div>
53                    <div class="formulier"><g:render template="formColumns" /></div>
54                </div>
55                <div class="menu_item" id="menu_row">
56                    <div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
57                    <div class="menu_item_info"></div>
58                    <div class="formulier"><g:render template="formRows" /></div>
59                </div>
60                <div class="menu_arrow"> </div>
61                <div class="menu_item" id="menu_vis">
62                    <div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
63                    <div class="menu_item_info"></div>
64                    <div class="formulier"><g:render template="formType" /></div>
65                </div>
66                <div class="menu_arrow"> </div>
67                <div class="menu_item" id="menu_go">
68                    <button id="button_visualize" onClick="visualize(); return false;" >
69                        Visualize<br />
70                        <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" />
71                        <span style="height: 16px;">&nbsp;</span>
72                    </button>
73                    <input type="checkbox" name="autovis" id="autovis" CHECKED/><span style="font-size: small;">auto</span></div>
74                <div class="menu_spacer"> </div>
75            </form>
76        </div>
77
78        <div id="visualization_container">
79
80            <h1>Visualize your study</h1>
81
82            <div id="message" class="error">
83                <g:if test="${flash.error}">
84                    ${flash.error.toString().encodeAsHTML()}
85                </g:if>
86                <g:if test="${flash.message}">
87                    ${flash.message.toString().encodeAsHTML()}
88                </g:if>
89            </div>
90
91            <div id="visualization">
92            </div>
93        </div>
94    </div>
95</body>
96</html>
97
98
99
Note: See TracBrowser for help on using the repository browser.