feat: added basic custom visualization

Author: ErikBjare

README.md

@@ -20,9 +20,31 @@ Run `poetry run aw-watcher-input --help` for usage instructions.
 We might eventually create binary builds (like the ones bundled with ActivityWatch for aw-watcher-afk and aw-watcher-window) to make it easier to get this watcher up and running, but it's still a bit too early for that.
 
 
+## Custom visualization
+
+This watcher ships with an **experimental** custom visualization which needs special configuration. 
+
+**NOTE:** This is a work-in-progress. Custom visualizations is an experimental feature with little to no decent documentation, so far.
+
+First, you need to build it, which you can do by:
+
+```sh
+cd visualization/
+npm install -g pug browserify  # might need sudo
+npm install
+make build
+```
+
+You can then configure aw-server (aw-server-rust not yet supported) to host the custom visualization by adding the following to your aw-server config file:
+
+```toml
+[server.custom_static]
+aw-watcher-input = "/home/user/path/to/aw-watcher-input/visualization/dist"
+```
+
 # Notes
 
-This was massively inspired by ulogm by @karpathy, here's a screenshot for how it looks:
+This was massively inspired by ulogme by @karpathy, here's a screenshot of how it looks:
 
 ![screenshot of ulogme](https://karpathy.github.io/assets/ulogme_sv2.jpeg)
 

visualization/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

visualization/Makefile

@@ -0,0 +1,8 @@
+
+build: dist/index.html dist/bundle.js
+
+dist/bundle.js: src/index.js
+	browserify $< -o $@
+
+dist/index.html: src/index.pug
+	pug src/index.pug -o dist/

visualization/package-lock.json

@@ -0,0 +1,22 @@
+{
+  "name": "aw-watcher-input-vis",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ActivityWatch/aw-watcher-input.git"
+  },
+  "author": "",
+  "license": "MPL-2.0",
+  "bugs": {
+    "url": "https://github.com/ActivityWatch/aw-watcher-input/issues"
+  },
+  "homepage": "https://github.com/ActivityWatch/aw-watcher-input#readme",
+  "dependencies": {
+    "aw-client": "^0.3.0"
+  }
+}

visualization/package.json

@@ -0,0 +1,51 @@
+const aw_client = require("aw-client");
+
+const url = new URL(window.location.href); // www.test.com/?filename=test
+
+// Helper for sum-reduce
+function add(accumulator, a) {
+  return accumulator + a;
+}
+
+// TODO: Avoid hardcoding and pass port directly to AWClient constructor
+const testing = url.port == 5666;
+
+let today_start = new Date();
+today_start.setHours(0, 0, 0, 0);
+
+let today_end = new Date();
+today_end.setHours(23, 59, 59, 999);
+
+const start = url.searchParams.get("start") || today_start;
+const stop = url.searchParams.get("stop") || today_end;
+const hostname = url.searchParams.get("hostname");
+console.log(hostname, start, stop);
+
+const aw = new aw_client.AWClient("aw-watcher-input", { testing: true });
+
+function load() {
+  const statusEl = document.getElementById("status");
+  const pressesEl = document.getElementById("presses");
+  const clicksEl = document.getElementById("clicks");
+  const bucketName = `aw-watcher-input_${hostname}`;
+
+  aw.getBuckets()
+    .then(bs => {
+      if (bs[bucketName] === undefined) {
+        throw `no bucket called ${bucketName}`;
+      }
+    })
+    .then(() => {
+      return aw.getEvents(bucketName, { start: start, stop: stop });
+    })
+    .then(events => {
+      console.log(events);
+      const presses = events.map(e => e.data.presses).reduce(add, 0);
+      const clicks = events.map(e => e.data.clicks).reduce(add, 0);
+      pressesEl.append(presses);
+      clicksEl.append(clicks);
+    })
+    .catch(msg => statusEl.append(msg));
+}
+
+load();

visualization/src/index.js

@@ -0,0 +1,23 @@
+html
+  head
+    title aw-watcher-input visualization
+    style
+      | th { text-align: left; }
+  body
+    p#status
+
+    table
+      tr
+        th Keyboard
+      tr
+        td Presses
+        td#presses
+      tr
+        td  
+      tr
+        th Mouse
+      tr
+        td Clicks
+        td#clicks
+
+    script(src="bundle.js")