new demos

toorshia · Apr 18, 2013 · e95e999 · e95e999
1 parent 343a501
commit e95e999
Show file tree

Hide file tree

Showing 6 changed files with 318 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/R&D/.DS_Store b/R&D/.DS_Store
diff --git a/R&D/counter/index.html b/R&D/counter/index.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8"/>
+  <title>Counter</title>
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="../lib/style.css">
+
+  <script src="../lib/jquery-1.7.2.min.js"></script>
+  <script type="text/javascript" src="../lib/raphael.2.1.0.min.js"></script>
+  <script type="text/javascript" src="../../justgage.js"></script>
+
+  <style>
+  .container {
+    width: 450px;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .gauge {
+    width: 450px;
+    height: 450px;
+  }
+
+  a:link.button,
+  a:active.button,
+  a:visited.button,
+  a:hover.button {
+    margin: 30px 5px 0 2px;
+    padding: 7px 13px;
+  }
+
+  </style>
+
+</head>
+
+
+<body>
+
+  <div class="container">
+    <div id="gg1" class="gauge"></div>
+    <a href="#" id="gg1_refresh" class="button grey">Random Refresh</a>
+  </div>
+
+  <script>
+  var gg1 = new JustGage({
+    id: "gg1",
+    value : 72,
+    min: 0,
+    max: 100,
+    donut: true,
+    gaugeWidthScale: 0.6,
+    counter: true
+  });
+  $(document).ready(function(){
+    $('#gg1_refresh').bind('click', function() {
+      gg1.refresh(getRandomInt(0, 100));
+      return false;
+    });
+  });
+  </script>
+</body>
+</html>
diff --git a/R&D/custom-node/index.html b/R&D/custom-node/index.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Custom Node</title>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="../lib/style.css">
+
+  <script src="../lib/jquery-1.7.2.min.js"></script>
+  <script type="text/javascript" src="../lib/raphael.2.1.0.min.js"></script>
+  <script type="text/javascript" src="../../justgage.js"></script>
+
+  <style>
+    .container {
+      width: 450px;
+      margin: 50px auto 0 auto;
+      text-align: center;
+    }
+
+    .gauge {
+      width: 150px;
+      height: 150px;
+      display: inline-block;
+      border: 1px solid #ccc;
+      margin: 5px;
+    }
+
+    .clear {
+      clear: both;
+      font-size: 0;
+      line-height: 0;
+      height: 0;
+    }
+
+    a:link.button,
+    a:active.button,
+    a:visited.button,
+    a:hover.button {
+      margin: 30px 5px 0 2px;
+      padding: 7px 13px;
+    }
+  </style>
+
+</head>
+
+<body>
+
+  <div id="cont" class="container">
+    <div id="g2" class="gauge"></div>
+    <div class="clear"></div>
+    <a href="#" id="g1_refresh" class="button grey">Refresh G1</a>
+    <a href="#" id="g1_show" class="button grey">Show G1</a>
+  </div>
+
+  <script>
+
+    var div = document.createElement('div');
+    div.setAttribute("class","gauge");
+
+    $(document).ready(function(){
+      var g1 = new JustGage({
+        parentNode: div,
+        width: 150,
+        height: 150,
+        title: "gauge #1",
+        value: 52,
+        label: "label",
+        min: 0,
+        max: 100,
+        decimals: 0,
+        gaugeWidthScale: 0.8,
+        counter: true
+      });
+
+      var g2 = new JustGage({
+        id: "g2",
+        title: "gauge #2",
+        value: 75,
+        label: "label",
+        min: 0,
+        max: 100,
+        humanFriendly: false,
+        decimals: 0,
+        gaugeWidthScale: 0.8,
+        counter: true
+      });
+
+      $('#g1_refresh').bind('click', function() {
+        g1.refresh(getRandomInt(0, 100));
+        return false;
+      });
+
+      $('#g1_show').bind('click', function() {
+        var container = document.getElementById("cont");
+        container.insertBefore(div, container.childNodes[0]);
+        container = null;
+        return false;
+      });
+
+    });
+  </script>
+</body>
+</html>
diff --git a/R&D/custom-sectors/index.html b/R&D/custom-sectors/index.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8"/>
+  <title>Custom Sectors</title>
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="../lib/style.css">
+
+  <script src="../lib/jquery-1.7.2.min.js"></script>
+  <script type="text/javascript" src="../lib/raphael.2.1.0.min.js"></script>
+  <script type="text/javascript" src="../../justgage.js"></script>
+
+  <style>
+  .container {
+    width: 450px;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .gauge {
+    width: 450px;
+    height: 450px;
+  }
+
+  a:link.button,
+  a:active.button,
+  a:visited.button,
+  a:hover.button {
+    margin: 30px 5px 0 2px;
+    padding: 7px 13px;
+  }
+
+  </style>
+
+</head>
+
+
+<body>
+
+  <div class="container">
+    <div id="gg1" class="gauge"></div>
+    <p>0-25 is red, 26-50 is green, 51-100 is blue</p>
+    <a href="#" id="gg1_refresh" class="button grey">Random Refresh</a>
+  </div>
+
+  <script>
+  var gg1 = new JustGage({
+    id: "gg1",
+    value : 72,
+    min: 0,
+    max: 100,
+    gaugeWidthScale: 0.6,
+    customSectors: [{
+      color : "#ff0000",
+      lo : 0,
+      hi : 25
+    },{
+      color : "#00ff00",
+      lo : 25,
+      hi : 50
+    }, {
+      color : "#0000ff",
+      lo : 50,
+      hi : 100
+    }],
+    counter: true
+  });
+  $(document).ready(function(){
+    $('#gg1_refresh').bind('click', function() {
+      gg1.refresh(getRandomInt(0, 100));
+      return false;
+    });
+  });
+  </script>
+</body>
+</html>
diff --git a/R&D/refreshmax/index.html b/R&D/refreshmax/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8"/>
+  <title>Donuts, baby!</title>
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="../lib/style.css">
+
+  <script src="../lib/jquery-1.7.2.min.js"></script>
+  <script type="text/javascript" src="../lib/raphael.2.1.0.min.js"></script>
+  <script type="text/javascript" src="../../justgage.js"></script>
+
+  <style>
+  .container {
+    width: 450px;
+    margin: 50px auto 0 auto;
+    text-align: center;
+  }
+
+  .gauge {
+    width: 450px;
+    height: 450px;
+  }
+
+  a:link.button,
+  a:active.button,
+  a:visited.button,
+  a:hover.button {
+    margin: 30px 5px 0 2px;
+    padding: 7px 13px;
+  }
+
+  </style>
+
+</head>
+
+
+<body>
+
+  <div class="container">
+    <div id="g1" class="gauge"></div>
+    <a href="#" id="g1_refresh" class="button grey">Random Refresh</a>
+    <a href="#" id="g1_refreshmax" class="button grey">Refresh Maximum</a>
+  </div>
+
+  <script>
+  var g1 = new JustGage({
+    id: "g1",
+    value : 50,
+    min: 0,
+    max: 100,
+    decimals: 0,
+    gaugeWidthScale: 0.6
+  });
+  $(document).ready(function(){
+    $('#g1_refresh').bind('click', function() {
+      g1.refresh(getRandomInt(0, 100));
+      return false;
+    });
+
+    $('#g1_refreshmax').bind('click', function() {
+      g1.refresh(50, 200);
+      return false;
+    });
+  });
+  </script>
+</body>
+</html>