Hi (hejsan!),
I’m considering creating a custom watcher for screenshots. If so, I’ll need some way of showing these screenshots in the timeline.
I’m writing here because I’d like to hear if you’d be open to discussing how I could take a stab at implementing this under your guidance. There is no point for me to spend time coming up with a PR that you consider a nasty hack and don’t want, and also no point in my trying if I can’t actually show the screenshots in the timeline properly.
Forgive me, I’m very new to ActivityWatch, but I want to see screenshots of my activity, and am prepared to write it myself. And then I figure I might as well contribute to an existing project and just add the screenshots rather than create my own thing form scratch that only does screenshots.
What ActivityWatch appears to have today
It looks to me like the “tooltip” for watchers countain the metadata that the watcher sends is displayed as text or URLs. Is that more or less correct?
Are Custom Visualizations possible for the timeline?
The “Custom Visualizations” section of the Docs says that custom visualizations are possible and lists two examples, but they both have custom Activity visualizations, where I want a custom Timeline visualization. Is that possible today in some experimental mode?
Tooltips are - nah - not quite enough
In the Taking screenshots? support thread there is this screenshot (from ManicTime apparently), and one could do something similar, showing the screenshot in a tooltip.
But in reality, this isn’t actually enough. With the default installation, there is lots of vertical space available in the Timeline and I’d like to show the “active” or the screenshot closest to the “hover point” in the/a timeline in a fixed width: 100% div below. Or some other way browsing the screenshots in a largish size. Screenshots of my 4k desktop need significant size for me to really see what I was doing at the time. Tooltips, however large, are just too small.
MVP Suggestion
I create a standard Screenshots watcher that sends a screenshot URL every 15min (perhaps along with some metadata like “this particular screenshot shows a window you have configured to be sensitive”).
We (somehow) arrange for a collapsible div.container-fluid to be placed under the timeline with some (customizable) max-height. ActivityWatch communicates the metadata or URL of the “nearest” screenshot via Vue props to the Screenshot component that then is responsible for rendering it (or “Vue-ing” it 
).
Mockup
If the “Screenshot” div is collapsed, a smaller thumbnail image (perhaps just the larger one scaled down) is shown in the “standard” tooltip.
Q: Who stores and serves the screenshots?
My suggestion is that the watcher sends complete image URLs (e.g. http://localhost:9091/screenshot/$timestamp.png), but it could also send the actual base64 encoded screenshot (currently about 600KB unencoded) in the JSON payload. That would make ActivityWatch more self-contained, but would require ActivityWatch to also serve the screenshots over HTTP, which would require more changes to ActivityWatch.
The screenshot file already lives on the filesystem, so one could send just the file name instead, but that sort of messes with the separation between watcher and server, I was thinking, and ActivityWatch would still need to serve the screenshots.
Regardless of who stores the screenshots, some method of limiting retention and periodically deleting old screenshots is needed. If the screenshots live and are served from the watcher (no problem), then we’d need a way for the watcher to periodically tell ActivityWatch: “All screenshots from before this datetime/unixtime have now been deleted” so we don’t show broken images. Perhaps that is post-MVP, or perhaps we keep it simple, and the watcher’s image server just shows a static “Sorry the image has expired” png.
Who am I and what have I done so far
Client side, I have professional experience with (mostly) Vue and (some) React. Server side Java, JS, extensive Perl and other languages, and am learning Python.
I have written a quick hacky prototype already in Python/Flask (for the webserver), Python for a loop that creates screenshots, and Svelte for a very hacky frontend. What I did was have one API call that listed all the screenshots for a day, say 30 of them, and then used a
<input type="range" class="time-slider" min="0" max="29" >
<style>
input.time-slider {
width: 100%;
}
</style>
so I could use the mouse or keyboard to manipulate the URL of an <img> to match screenshot[i], served from the webserver. It works beautifully as far as a hack goes. And fast enough on my 10 year old desktop.
So I’m at a decision point. Should I take a stab at integrating it with ActivityWatch or just do my own thing?
PS: Why this post no longer has screenshots or links
I originally had nice screenshots sprinkled throughout this post, but I had to replace them with imgur links because:
Sorry, new users can only put one embedded media item in a post.
And also
Sorry, new users can only put 2 links in a post.
So the links had to go also 
.