Recreate "StepShot Guides" with BetterTouchTool

Years ago there was an app called StepsShot Guides.
Very simply put, it allowed to you "take screenshots while clicking around on a screen"

On each click, the app took a screenshot and if available, it even put the metadata into a title or description of the screenshot. Then, it let you export the whole thing as a PDF.
This was a timesaver for creating UI Documentation.

Example, to show a user how to create a new post in a CMS of choice, you just had to do that yourself (creating a post) while having the StepShot Guides App Running. It took a screenshot on each click, highlighting the clicked item, taking its metadata and putting it into the Screenshot description.
Then, you exported that and sent to the user.

What usually takes up to hours, with this tool took like minutes.

I was wondering, since StepShot guides has been scorched by UiPath and thus is not available anymore... if something like that could be created with BTT.
The export part probably not, but at least taking the screenshot with metadata and highlight the clicked item.
So I tried, and it seems we can easily take a screenshot on click (with the configurable screenshot trigger of BTT)
We can even show the cursor on the screenshot.

However, what I would need at least, would be a "highlight" for where I click (such as a yellowish circle for example) and ideally, the metadata of the item clicked (for example in an a href link on a website, it should get the handle title)

Super-ideally, it would then put all those screenshots into a PDF, but I would be happy with having them in a Folder, which is doable, with a title set to the metadata gathered and perhaps an increasing step number)

I am guessing this needs some load of scripting, since I see I can set BTT to trigger a script after the screenshot is taken. But its a terminal command only. The other options are create email, or open in app, but that is not good because it would do this each time after taking the screenshot and thus interrupting the work of actually taking the screenshots - which ideally is not interrupted, all the saving should happen in the background.

I found something done for automator which might be useful - but the BTT does not offer automator after screenshot is taken, so I guess that would not work, and it still wouldn't highlight the clicked item, nor grab its metadata.

Bottom line, perhaps somehow someone here as done similar things in past and has some inputs?

I would not try to add the highlight after the screenshot has been taken, instead I'd try to do it before.

BTT currently can not override the left click - but I think I should allow that now, this is an old limitation which is not valid anymore.

Let me play a bit with this, I think I might need to add a few little actions, but it should be simple enough and I like the idea.

My approach would be:
0.) Catch the leftclick
1.) Use the floating webview to highlight the cursor position. => This already works and is super customizable.

2.) Take the screenshot including the cursor (or alternatively include a custom cursor in the floating webview as a picture)
3.) Close the webview (currently a bit hard to do, but easy to fix)
4.) Forward the left click to the target application

Combining to pdf should be easy, there are multiple ways to achieve that.

1 Like