Changeset 296 for Dev/branches

Timestamp:

02/29/12 16:32:21 (13 years ago)

Author:

cartis

Message:

klaar voor testing

Location:

Dev/branches/Cartis/Tiles preview

Files:

• css/tile1.css (modified) (1 diff)
• js/classes/graphs.js (modified) (4 diffs)
• js/dashboardScripts.js (modified) (3 diffs)
• js/nav.js (modified) (2 diffs)
• pages/dashboardOverview.js (modified) (2 diffs)
• pages/graphSelection.js (modified) (3 diffs)
• pages/login.html (modified) (1 diff)

Dev/branches/Cartis/Tiles preview/css/tile1.css

@@ -254 +254 @@
 .tile:hover {
     background-color: #78abe2;
-    background-image: linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
-    background-image: -o-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
-    background-image: -moz-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
-    background-image: -webkit-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
-    background-image: -ms-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
+    background-image: linear-gradient(bottom, rgb(54,122,195) 44%, rgb(99,159,222) 72%);
+    background-image: -o-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(99,159,222) 72%);
+    background-image: -moz-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(99,159,222) 72%);
+    background-image: -webkit-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(99,159,222) 72%);
+    background-image: -ms-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(99,159,222) 72%);
 
     background-image: -webkit-gradient(
         linear,
         left bottom,
-        left top,
+        right top,
         color-stop(0.44, rgb(54,122,195)),
-        color-stop(0.72, rgb(120,171,226))
+        color-stop(0.72, rgb(99,159,222))
         );
 }

Dev/branches/Cartis/Tiles preview/js/classes/graphs.js

@@ -10 +10 @@
         var _data;
         var _graphObject;
+        var _title;
         this._container = document.getElementById(containerName);
         
-        this.init = function(id, data, type, size) {
+        this.init = function(id, data, type, size, title) {
             // Draw the graph to the element
             _id = id;
@@ -18 +19 @@
             _type = type; 
             _size = size;
+            if (title) _title = title;
 
             var canvas = document.createElement("canvas");
@@ -28 +30 @@
             switch (_type) {
                 case "Pie":
+                    // Hardcoded data
+                    // Participant age
+                    _data = [5,7,9,4];
                     _graphObject = new RGraph.Pie(_id, _data);
+                    _graphObject.Set('chart.labels', ['20-30 (20 participants)', '30-40 (28 participants)', '40-50 (36 participants)', '50+ (16 participants)']);
+                    _graphObject.Set('chart.text.color', '#fff');
                     break;
                 case "Bar":
+                    // Hardcoded data
+                    // Quality of control
+                    _data = [4,20,50,18,8];
                     _graphObject = new RGraph.Bar(_id, _data);
-                    _graphObject.Set('chart.labels', ['Jan', 'Piet', 'Shaniqua']);
+                    _graphObject.Set('chart.labels', ['Bad','Subpar','Average','Above average','Good']);
+                    _graphObject.Set('chart.text.color', '#fff');
                     break;
                 case "Radar":
-                    _graphObject = new RGraph.Radar(_id, _data);
+                    //Hardcoded data
+                    // Gameplay errors
+                    _data = [24,20,26,35,36,29,25,16];
+                    _graphObject = new RGraph.Radar(_id, _data);                                  
+                    _graphObject.Set('chart.labels',['Bram','Paula','Jules','Joel','Tyrone','Henk','Darcy','Frans']);
+                    _graphObject.Set('chart.text.color', '#000');
+                    _graphObject.Set('chart.strokestyle','black');
+
                     break;
                 case "Rose":
                     _graphObject = new RGraph.Rose(_id, _data);
+                    _graphObject.Set('chart.text.color', '#000');
                     break;
             }
             
             // Set standard properties.
-            _graphObject.Set('chart.text.color', '#fff');
             _graphObject.Set('chart.shadow', false);
             _graphObject.Set('chart.colors', ['rgba(240,240,240,0.5)', 'rgba(240,240,240,0.5)', 'rgba(240,240,240,0.5)']);
             _graphObject.Set('chart.axis.color', 'rgba(240,240,240,0.5)');
             _graphObject.Set('chart.strokestyle', 'rgba(240,240,240,1.0)');
+            if (title) {
+                _graphObject.Set('chart.title', title);
+                _graphObject.Set('chart.title.color', 'white');
+            }
             
             //enlarge click event
@@ -91 +113 @@
             */
             var largeGraph = new Graph("largeContainer");
-            largeGraph.init("enlarged", _data, _type, [900,550]);
+            largeGraph.init("enlarged", _data, _type, [900,550], _title);
             var clearDiv = document.createElement("div");
             $(clearDiv).css("float", "left").css("clear", "both");

Dev/branches/Cartis/Tiles preview/js/dashboardScripts.js

@@ -21 +21 @@
 
 var mockupData = {
-    muData1: [1,2,3,4,5,6], //pie charts
-    muData2: [[1,2,3],[4,5,6]], //bar charts
-    muData3: [[1,2],[3,4],[5,6]]    //radar charts
+    muData1: [1,3,5,6,12,6], //pie charts
+    muData2: [[4,12,6],[2,6,15]], //bar charts
+    muData3: [[55,42],[3,4],[5,6]]    //radar charts
 }
 
@@ -62 +62 @@
     gameData: new Array(
     {
-        title: "Veerkracht game session #1",
+        title: "Gameplay errors",
         creator: "Ellemiek Bosman",
         date: "25-5-2012",
-        description: "First play session. Users go into game without instructions."
-    },
-    {
-        title: "Veerkracht game session #2",
+        description: "First play session. Users starting game without any instructions."
+    },
+    {
+        title: "Gameplay errors after feedback",
         creator: "Ellemiek Bosman",
         date: "25-5-2012",
         description: "Second play session. Users have played game before and received feedback on their results."
+    },
+    {
+        title: "Quality of control",
+        creator: "Bruns von Blasuer",
+        date: "18-2-2012",
+        description: "Checking quality of control during gameplay."
+    },
+       {
+        title: "Fault recovery",
+        creator: "Bruns von Blasuer",
+        date: "17-3-2012",
+        description: "Second play session. Checking fault recovery after giving feedback."
     }
     )
@@ -218 +230 @@
     var indexInCart = shoppingCart.contents.uids.indexOf(uid);
     var tempTitle = shoppingCart.contents.titles[indexInCart];
-    var cn = confirm("Are you sure you want to remove: "+tempTitle+"?");
+    var cn = confirm("Are you sure you want to remove: "+tempTitle+ " from the selected data?");
     if (cn == false) return;
     

Dev/branches/Cartis/Tiles preview/js/nav.js

@@ -36 +36 @@
        
        
-       
-       
-       
-       
-       
-       
-       
-       
-       
-       
-       
-       
     mockup = {
         api: {
@@ -70 +58 @@
                     $.getScript("pages/"+name+".js", function(responseText, textStatus, XMLHttpRequest){
                         
-                    })
+                        })
                 });
                 mockup.api.breadcrumbs.navTo(name);
             },
+            auth: function(target, destination) {
+                debugger;
+                var name = document.getElementById("loginForm_name");
+                var pw = document.getElementById("loginForm_password");
+                
+                if (name.value.length > 0 && pw.value.length > 0) {
+                    mockup.api.clickTile(target, destination);
+                }
+                
+            },
             breadcrumbs: new (function() {
-                var _crumbs = ["Home"];
+                var _crumbs = [];
                 var _element = document.getElementById('breadcrumbs');
                 this.init = function() {

Dev/branches/Cartis/Tiles preview/pages/dashboardOverview.js

@@ -2 +2 @@
    
     mockup.api.drawGraph = function(input) {
+        debugger;
         var graph = new Graph("graphsContainer");
         debugger;
@@ -12 +13 @@
         }
        
-        graph.init(input[0], input[1], input[2], input[3]);       
+        graph.init(input[0], input[1], input[2], input[3], input[4]);       
        
         mockup.api.graphs.graphObjects.push(graph);

Dev/branches/Cartis/Tiles preview/pages/graphSelection.js

@@ -17 +17 @@
     mockup.api.drawGraphPreview = function(type) {
         
-        var selected = false, el = document.getElementById("select_selectData");
+        var selected = false, el = document.getElementById("select_selectData"), title;
         for (var n = 0; n < el.options.length; n++) {
             if (el.options[n].selected == true) {
                 selected = true;
+                title = el.options[n].innerHTML;
             }
         }
@@ -27 +28 @@
         mockup.api.graphs.previewGraph = new Graph("graphContainer");
         mockup.api.graphs.previewGraph._container.innerHTML = "";
-        mockup.api.graphs.previewGraph.init("previewGraph", [40,50,60], type, [459,250]);
+        mockup.api.graphs.previewGraph.init("previewGraph", [40,50,60,70], type, [459,250], title);
     }
    
@@ -89 +90 @@
         
         //Write settings to dashboard array.
-        mockup.api.graphs.dashboard.push([name, [40,50,60], type, [459,250]]);
+        mockup.api.graphs.dashboard.push([name, [40,50,60], type, [459,250], option.innerHTML]);
         
     }

Dev/branches/Cartis/Tiles preview/pages/login.html

@@ -6 +6 @@
             <label for="loginForm_password" style="display: block; clear: left; width: 100px;">Password</label><input type="password" id="loginForm_password" onclick="event.stopPropagation();" />
             <div class="tileText" style="margin-top: 115px;">
-                <input type="button" class="smallButton" value="Log in" id="btnLogin" onclick="mockup.api.clickTile(this, 'dataSelection');" />
-                <input type="button" class="smallButton" value="Register" id="btnRegister" onclick="mockup.api.clickTile(this, 'dataSelection');" />
+                <input type="button" class="smallButton" value="Log in" id="btnLogin" onclick="mockup.api.auth(this, 'dataSelection');" />
+                <input type="button" class="smallButton" value="Register" id="btnRegister" onclick="mockup.api.auth(this, 'dataSelection');" />
                 </div></div>
         <div id="tile2" class="staticTile"><div class="tileText"></div></div>