Initial commit

hydna · Apr 13, 2012 · 501507a · 501507a
commit 501507a
Show file tree

Hide file tree

Showing 7 changed files with 621 additions and 0 deletions.
diff --git a/README b/README
@@ -0,0 +1 @@
+Visualising visitors in real-time
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,91 @@
+html,
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  background: #222;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0;
+  margin: 0;
+}
+
+#shader {
+  position: absolute;
+  background: black;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.6;
+}
+
+#shader {
+  display: none;
+  position: absolute;
+  background: black;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.6;
+}
+
+#intro {
+  display: none;
+  color: white;
+  position: absolute;
+  font-size: 1.2em;
+  text-align: center;
+  top: 400px;
+  left: 50%;
+  width: 400px;
+  margin: -200px;
+}
+
+#intro a {
+  color: white;
+}
+
+.intro #shader,
+.intro #intro {
+  display: block;
+}
+
+#legend {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  margin-left: -145px;
+}
+
+#legend li {
+  float: left;
+  margin-right: 40px;
+}
+
+#legend li.new {
+  color: rgb(207,70,71);
+}
+
+#legend li.pageview {
+  color: rgb(235,123,89);
+}
+
+#legend li.idle {
+  color: rgb(82,70,86);
+}
+
+#legend li span {
+  color: white;
+  font-size: 0.8em;
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stacks</title>
+    <script type="text/javascript" src="http://cdn.hydna.com/1/hydna.js"></script>
+  </head>
+  <body>
+    <h1>This is a reference page</h1>
+    <a href="index2.html">navigate to index2</a>
+    <script type="text/javascript" src="tracker.js"></script>
+  </body>
+</html>
diff --git a/example/index2.html b/example/index2.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stacks</title>
+    <script type="text/javascript" src="http://cdn.hydna.com/1/hydna.js"></script>
+  </head>
+  <body>
+    <h1>This is also reference page</h1>
+    <a href="index.html">navigate to index</a>
+    <script type="text/javascript" src="tracker.js"></script>
+  </body>
+</html>
diff --git a/example/tracker.js b/example/tracker.js
@@ -0,0 +1,36 @@
+(function () {
+  var HYDNA_URL = "stacks.hydna.net/9999";
+  var HEARTBEAT_INTERVAL = 15 * 1000; // 15 Sec
+  var chan;
+  var useruuid;
+  var m;
+
+  if ((m = /hydna_stacks_uuid\=([A-Za-z0-9\-]+)/.exec(document.cookie))) {
+    useruuid = m[1];
+  } else {
+    useruuid = (function () {
+        var S4 = function() {
+           return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+        };
+        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
+    })();
+    document.cookie = "hydna_stacks_uuid=" + useruuid;
+  }
+
+  chan = new HydnaChannel(HYDNA_URL, 'w');
+
+  chan.onopen = function(e) {
+    function send () {
+      try {
+        chan.send(useruuid + " " + document.location.pathname, 2);
+      } catch (err) {
+        // just ignore...
+      }
+    }
+    setInterval(send, HEARTBEAT_INTERVAL);
+    send();
+  };
+
+  // Ignore any errors, we are just here to shoooot....
+
+})();
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stacks</title>
+    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
+    <script type="text/javascript" src="http://cdn.hydna.com/1/hydna.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+  </head>
+  <body class="intro">
+    <canvas>
+    </canvas>
+    <ul id="legend">
+      <li class="new"><span>New Visitor</span></li>
+      <li class="pageview"><span>Page view</span></li>
+      <li class="idle"><span>Idle user</span></li>
+    </ul>
+    <div id="shader"></div>
+    <div id="intro">
+      <h1>Welcome to Stacks!</h1>
+      <p>
+        This demo let you track visitors in real-time. This instance is currently showing all visitors on [YOUR DOMAIN]
+      </p>
+      <button id="start">Ok, let me see</button>
+    </div>
+    <script>
+      var button = document.getElementById("start");
+      button.attachEvent ? button.attachEvent("click", stacks.start)
+                         : button.addEventListener("click", stacks.start, false);
+    </script>
+  </body>
+</html>