From 94d4d384db7fc06e1dcba42bec9d09cbd51f33cb Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Sat, 11 Aug 2012 15:52:15 +0200
Subject: added speedgraph

---
 module/web/templates/default/base.html | 64 ++++++++++++++++++++++++++++++++--
 1 file changed, 61 insertions(+), 3 deletions(-)

(limited to 'module/web/templates')

diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 879faa0bd..48dee84af 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -9,6 +9,7 @@
     <link href="static/css/default/style.css" rel="stylesheet" type="text/css" media="screen"/>
 
     <script type="text/javascript" src="static/js/libs/jquery-1.8.0.min.js"></script>
+    <script type="text/javascript" src="static/js/libs/jquery.flot.min.js"></script>
 
     <title>{% block title %}pyLoad {{ _("Webinterface") }}{% endblock %}</title>
 
@@ -19,8 +20,9 @@
 <div id="wrap">
     <header>
         <div class="center">
-            <img class="logo" alt="" src="static/img/default/logo.png">
-            <a href="/en/Start"><span class="title">pyLoad</span></a>
+            <img class="logo" alt="" src="static/img/default/logo.png" width="120px" height="120px">
+            <span class="title">pyLoad</span>
+            <div id="speedgraph"></div>
         </div>
     </header>
     <div id="push"></div>
@@ -37,7 +39,7 @@
 </div>
 <footer>
     <div class="center">
-        <img class="logo" src="static/img/default/logo_grey.png"/>
+        <img class="logo" src="static/img/default/logo_grey.png" width="60px" height="60px"/>
         <div class="block copyright">
             © 2008-2012<br>
             The pyLoad Team<br>
@@ -72,6 +74,62 @@
         </div>
     </div>
 </footer>
+<script type="text/javascript">
+    $(function () {
+        var totalPoints = 100;
+        var data = [];
+        function getRandomData() {
+            if (data.length > 0)
+                data = data.slice(1);
+
+            // do a random walk
+            while (data.length < totalPoints) {
+                var prev = data.length > 0 ? data[data.length - 1] : 50;
+                var y = prev + Math.random() * 10 - 5;
+                if (y < 0)
+                    y = 0;
+                if (y > 100)
+                    y = 100;
+                data.push(y);
+            }
+
+            // zip the generated y values with the x values
+            var res = [];
+            for (var i = 0; i < data.length; ++i)
+                res.push([i, data[i]])
+            return res;
+        }
+
+    var updateInterval = 1500;
+
+    var speedgraph = $.plot($("#speedgraph"), [getRandomData()], {
+        series: {
+            lines: { show: true, lineWidth: 2 },
+            shadowSize: 0
+        },
+        xaxis: { ticks: [], mode: "time" },
+        yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
+        grid: {
+            borderColor: "#757575",
+            labelMargin: 0,
+            axisMargin: 0,
+            minBorderMargin: 0
+        }
+    });
+
+    function update() {
+        speedgraph.setData([ getRandomData() ]);
+        // since the axes don't change, we don't need to call plot.setupGrid()
+        speedgraph.draw();
+
+        setTimeout(update, updateInterval);
+    }
+
+    update();
+
+    });
+
+</script>
 {% block deferred %}
 {% endblock deferred %}
 </body>
-- 
cgit v1.2.3