Added table links to day pages.

Author: suurjaak

inputscope/conf.py

@@ -20,7 +20,7 @@
 
 @author      Erki Suurjaak
 @created     26.03.2015
-@modified    19.05.2015
+@modified    21.05.2015
 ------------------------------------------------------------------------------
 """
 try: import ConfigParser as configparser # Py2
@@ -36,8 +36,8 @@
 
 """Program title, version number and version date."""
 Title = "InputScope"
-Version = "1.1a"
-VersionDate = "19.05.2015"
+Version = "1.1b"
+VersionDate = "21.05.2015"
 
 """TCP port of the web user interface."""
 WebHost = "localhost"
@@ -63,6 +63,9 @@
 """Physical length of a pixel, in meters."""
 PixelLength = 0.00024825
 
+"""Mapping tables to input types."""
+InputTables = [("mouse", ["moves", "clicks", "scrolls"]), ("keyboard", ["keys", "combos"])]
+
 """Key positions in keyboard heatmap."""
 KeyPositions = {
   "Escape": (12, 12),
@@ -243,8 +246,8 @@
   "CREATE TABLE IF NOT EXISTS app_events (id INTEGER NOT NULL PRIMARY KEY, dt TIMESTAMP DEFAULT (DATETIME('now', 'localtime')), type TEXT)",
   "CREATE TABLE IF NOT EXISTS screen_sizes (id INTEGER NOT NULL PRIMARY KEY, dt TIMESTAMP DEFAULT (DATETIME('now', 'localtime')), x INTEGER, y INTEGER)",
   "CREATE TABLE IF NOT EXISTS counts (id INTEGER NOT NULL PRIMARY KEY, type TEXT, day DATETIME, count INTEGER, UNIQUE(type, day))",
-) + tuple(TriggerTemplate.format(x) for x in ["moves", "clicks", "scrolls", "keys", "combos"]
-) + tuple(DayIndexTemplate.format(x) for x in ["moves", "clicks", "scrolls", "keys", "combos"])
+) + tuple(TriggerTemplate.format(x) for x in [x for k, vv in InputTables for x in vv]
+) + tuple(DayIndexTemplate.format(x) for x in [x for k, vv in InputTables for x in vv])
 
 
 def init(filename=ConfigPath):

inputscope/static/site.css

@@ -3,7 +3,7 @@
  *
  * @author      Erki Suurjaak
  * @created     07.04.2015
- * @modified    20.05.2015
+ * @modified    21.05.2015
  */
 * {
   font-family: Tahoma;
@@ -46,9 +46,6 @@
   color: white;
   text-decoration: none;
 }
-#header a:hover {
-  text-decoration: underline;
-}
 #headerlinks {
   float: left;
   position: relative;
@@ -103,9 +100,6 @@
   color: white;
   font-size: 1em;
 }
-#content a:visited {
-  color: blue;
-}
 #mouse_heatmap {
   margin-left: auto;
   margin-right: auto;
@@ -183,3 +177,21 @@ label.range_label {
   top: -18px;
   width: 100%;
 }
+#header a:hover, #content a:hover {
+  text-decoration: underline;
+}
+#tablelinks {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  font-weight: bold;
+  font-size: 0.8em;
+}
+#tablelinks a {
+  color: #1abc9c;
+  margin: 2px;
+  text-decoration: none;
+}
+#tablelinks span {
+  margin: 2px;
+}

inputscope/views/base.tpl

@@ -40,14 +40,15 @@ Template arguments:
 <span id="daysection">
     %dayidx = next((i for i, x in enumerate(days) if x["day"] == day), None)
     %prevday, nextday = (days[x]["day"] if 0 <= x < len(days) else None for x in [dayidx-1, dayidx+1]) if dayidx is not None else [None]*2
+    %prevday = prevday if day else days[-1]["day"]
   <a href="{{get_url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/%s/<table>/<day>%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E%20%3Cspan%20class=%22pl-k%22%3E%%3C/span%3E%20input,%20%3Cspan%20class=%22pl-v%22%3Etable=%3C/span%3Etable,%20%3Cspan%20class=%22pl-v%22%3Eday=%3C/span%3Eprevday)}}">{{"< %s" % prevday if prevday else ""}}</a>
 
   <select id="dayselector">
-    %if not day:
+    %if not day or not events:
     <option>- day -</option>
     %end # if not day
-    %for d in days:
-    <option{{' selected="selected"' if day == d["day"] else ""}}>{{d["day"]}}</option>
+    %for d in days[::-1]:
+    <option{{!' selected="selected"' if day == d["day"] else ""}}>{{d["day"]}}</option>
     %end # for d
   </select>
 

inputscope/views/keyboard.tpl

@@ -12,7 +12,7 @@ Template arguments:
 
 @author      Erki Suurjaak
 @created     07.04.2015
-@modified    20.05.2015
+@modified    21.05.2015
 %"""
 %WEBROOT = get_url(http://github.com/"/")
 %title = "%s %s" % (input.capitalize(), table)
@@ -32,6 +32,18 @@ Template arguments:
   </span>
 </span>
 
+%if day:
+<div id="tablelinks">
+%for type, tbl in [(k, x) for k, tt in conf.InputTables for x in tt]:
+    %if tbl == table:
+  <span>{{tbl}}</span>
+    %else:
+  <a href="{{get_url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/%s/<table>/<day>%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E%20%3Cspan%20class=%22pl-k%22%3E%%3C/span%3E%20type,%20%3Cspan%20class=%22pl-v%22%3Etable=%3C/span%3Etbl,%20%3Cspan%20class=%22pl-v%22%3Eday=%3C/span%3Eday)}}">{{tbl}}</a>
+    %end # if tbl == table
+%end # for type, tbl
+</div>
+%end # if day
+
 <div id="status">
 <span id="statustext"><br /></span>
 <span id="progressbar"></span>
@@ -104,7 +116,7 @@ Template arguments:
         elm_show_kb  = document.getElementById("show_keyboard"),
         elm_keyboard = document.getElementById("keyboard");
     var myHeatmap = h337.create({container: elm_heatmap, radius: RADIUS});
-    myHeatmap.setData({data: positions, max: positions.length ? positions[0].value : 0});
+    if (positions.length) myHeatmap.setData({data: positions, max: positions[0].value});
 
     elm_show_kb.addEventListener("click", function() {
       elm_keyboard.style.display = this.checked ? "" : "none";
@@ -113,6 +125,19 @@ Template arguments:
       elm_heatmap.getElementsByTagName("canvas")[0].style.display = this.checked ? "" : "none";
     });
 
+    elm_button.addEventListener("click", function() {
+      if ("Replay" == elm_button.value) {
+        myHeatmap.setData({data: [], max: 0});
+        elm_button.value = "Pause";
+        replay(0);
+      } else if ("Continue" != elm_button.value) {
+        elm_button.value = "Continue";
+      } else {
+        elm_button.value = "Pause";
+        resumeFunc && resumeFunc();
+        resumeFunc = undefined;
+      };
+    });
 
     var replay = function(index) {
       if (index <= events.length - 1) {
@@ -139,20 +164,5 @@ Template arguments:
       }
     };
 
-
-    elm_button.addEventListener("click", function() {
-      if ("Replay" == elm_button.value) {
-        myHeatmap.setData({data: [], max: 0});
-        elm_button.value = "Pause";
-        replay(0);
-      } else if ("Continue" != elm_button.value) {
-        elm_button.value = "Continue";
-      } else {
-        elm_button.value = "Pause";
-        resumeFunc && resumeFunc();
-        resumeFunc = undefined;
-      };
-    });
-
   });
 </script>

inputscope/views/mouse.tpl

@@ -12,7 +12,7 @@ Template arguments:
 
 @author      Erki Suurjaak
 @created     07.04.2015
-@modified    20.05.2015
+@modified    21.05.2015
 %"""
 %WEBROOT = get_url(http://github.com/"/")
 %title = "%s %s" % (input.capitalize(), table)
@@ -32,6 +32,18 @@ Template arguments:
   </span>
 </span>
 
+%if day:
+<div id="tablelinks">
+%for type, tbl in [(k, x) for k, tt in conf.InputTables for x in tt]:
+    %if tbl == table:
+  <span>{{tbl}}</span>
+    %else:
+  <a href="{{get_url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/%s/<table>/<day>%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E%20%3Cspan%20class=%22pl-k%22%3E%%3C/span%3E%20type,%20%3Cspan%20class=%22pl-v%22%3Etable=%3C/span%3Etbl,%20%3Cspan%20class=%22pl-v%22%3Eday=%3C/span%3Eday)}}">{{tbl}}</a>
+    %end # if tbl == table
+%end # for type, tbl
+</div>
+%end # if day
+
 <div id="status">
 <span id="statustext"><br /></span>
 <span id="progressbar"></span>
@@ -74,6 +86,19 @@ Template arguments:
     var myHeatmap = h337.create({container: elm_heatmap, radius: RADIUS});
     myHeatmap.setData({data: positions, max: positions.length ? positions[0].value : 0});
 
+    elm_button.addEventListener("click", function() {
+      if ("Replay" == elm_button.value) {
+        myHeatmap.setData({data: [], max: positions.length ? positions[0].value : 0});
+        elm_button.value = "Pause";
+        replay(0);
+      } else if ("Continue" != elm_button.value) {
+        elm_button.value = "Continue";
+      } else {
+        elm_button.value = "Pause";
+        resumeFunc && resumeFunc();
+        resumeFunc = undefined;
+      };
+    });
 
     var replay = function(index) {
       if (index <= events.length - 1) {
@@ -99,20 +124,5 @@ Template arguments:
       }
     };
 
-
-    elm_button.addEventListener("click", function() {
-      if ("Replay" == elm_button.value) {
-        myHeatmap.setData({data: [], max: positions.length ? positions[0].value : 0});
-        elm_button.value = "Pause";
-        replay(0);
-      } else if ("Continue" != elm_button.value) {
-        elm_button.value = "Continue";
-      } else {
-        elm_button.value = "Pause";
-        resumeFunc && resumeFunc();
-        resumeFunc = undefined;
-      };
-    });
-
   });
 </script>

inputscope/webui.py

@@ -6,7 +6,7 @@
 
 @author      Erki Suurjaak
 @created     06.04.2015
-@modified    20.05.2015
+@modified    21.05.2015
 """
 import collections
 import datetime
@@ -79,10 +79,9 @@ def inputindex(input):
 @route("/")
 def index():
     """Handler for showing the GUI index page."""
-    stats = {"mouse": {"count": 0}, "keyboard": {"count": 0}}
+    stats = dict((k, {"count": 0}) for k, tt in conf.InputTables)
     countminmax = "SUM(count) AS count, MIN(day) AS first, MAX(day) AS last"
-    tables = {"keyboard": ("keys", "combos"), "mouse": ("moves", "clicks", "scrolls")}
-    for input, table in [(x, t) for x, tt in tables.items() for t in tt]:
+    for input, table in [(x, t) for x, tt in conf.InputTables for t in tt]:
         row = db.fetchone("counts", countminmax, type=table)
         if not row["count"]: continue # for input, table
         stats[input]["count"] += row["count"]