5 ms·

I wonder if adding overlays could be easier done with another tool. Let shot-scraper export the coordinates of the elements you are interested in and then use a

by spockz 5y ago

I wonder if adding overlays could be easier done with another tool. Let shot-scraper export the coordinates of the elements you are interested in and then use another tool to add in the arrows or circles. This also allows for re-using a single screenshot for multiple annotations.

simonw 5y ago
My hunch is that applying annotations in-browser will be easier, just because SVG and canvas are such powerful tools for dynamic graphics. I'm hoping people with stronger frontend skills than me will provide some more interesting examples there!
- spockz 5y ago
  Yes, I agree that SVG and cans are powerful tools. But the amount of JavaScript in the examples isn’t insignificant. I saw a simple dsl for annotating pictures with arrows, rectangles, circles, and text from the Cli. But I can’t find it anymore.
  - simonw 5y ago
    One idea I had there was to build a utility library that gets made available automatically, so you could write JavaScript that looks something like this: ShotScraper.annotate( ".facet-link", ShotScraper.Arrow({ color: "pink", width: 150, direction: "right" }) ) Building this out is a lot of extra work though, so I decided to ship without that and see what kind of things people needed.
    - spockz 5y ago
      That would be neat indeed. Would it be a lot of extra work? If there is a transparant SVG canvas placed over the element, then the positioning of elements should be relatively trivial? It would basically follow the example JavaScript in the post.
      - simonw 5y ago
        My concern is more about the long-term maintenance of it. If I ship a JavaScript library with the tool, then modify that JavaScript library later, I risk breaking the automated screenshots that were scripted against previous versions of the library. If I'm committing to shipping a library that won't break backwards compatibility, I have to be very confident that I'm designing it well from the start. So I'm probably going to do it at some point, but I'm not going to rush into it.
        zellyn 5y ago
        That sounds entirely reasonable. It might also be a good idea to have users call it with something like: Shotscraper.v1.annotate( // etc

by spockz 5y ago

simonw 5y ago

My hunch is that applying annotations in-browser will be easier, just because SVG and canvas are such powerful tools for dynamic graphics. I'm hoping people with stronger frontend skills than me will provide some more interesting examples there!

spockz 5y ago
Yes, I agree that SVG and cans are powerful tools. But the amount of JavaScript in the examples isn’t insignificant. I saw a simple dsl for annotating pictures with arrows, rectangles, circles, and text from the Cli. But I can’t find it anymore.
- simonw 5y ago
  One idea I had there was to build a utility library that gets made available automatically, so you could write JavaScript that looks something like this: ShotScraper.annotate( ".facet-link", ShotScraper.Arrow({ color: "pink", width: 150, direction: "right" }) ) Building this out is a lot of extra work though, so I decided to ship without that and see what kind of things people needed.
  - spockz 5y ago
    That would be neat indeed. Would it be a lot of extra work? If there is a transparant SVG canvas placed over the element, then the positioning of elements should be relatively trivial? It would basically follow the example JavaScript in the post.
    - simonw 5y ago
      My concern is more about the long-term maintenance of it. If I ship a JavaScript library with the tool, then modify that JavaScript library later, I risk breaking the automated screenshots that were scripted against previous versions of the library. If I'm committing to shipping a library that won't break backwards compatibility, I have to be very confident that I'm designing it well from the start. So I'm probably going to do it at some point, but I'm not going to rush into it.
      - zellyn 5y ago
        That sounds entirely reasonable. It might also be a good idea to have users call it with something like: Shotscraper.v1.annotate( // etc