Simple computer vision annotator.
npm install omnicodePan/Zoom into a video!
Pan/Zoom into an image!
Pan/Zoom into a container!
I'm using this to build annotation tools for computer vision datasets and to study the roll spatial context plays in perception. Use it for anything.
git clone https://github.com/jackft/omnizoom
`
or:
`
npm install --save omnizoom
`then include some files in your HTML
Put these two lines in your header
`html
`If you used git, they'll be in
`omnizoom/dist`
If you used npm, they'll be in `node_modules/omnizoom/dist`Directions
1. make sure you've included the code (above)
2. add the css class `zoom` to any zoomable elements
3. add the css class `zoom-container` to any container around a zoomable object (this prevents the zoom from overflowing its container.
4. include this somewhere `(new omnizoom.Zoomer()).addElem().addOnScroll() `Usage
Possible HTML elements:
`html

...
`
How to make each element zoomable with the scroll wheel:
`javascript
// add zoom functionality to the video
const zoomy1 = new omnizoom.Zoomer()
.addElem(document.getElementById("zoomable-video"))
.addOnScroll();
// add pan functionality to the img
const zoomy2 = new omnizoom.Zoomer()
.addElem(document.getElementById("zoomable-img"))
.addOnDrag();
// add zoom and pan functionality to the div
const zoomy3 = new omnizoom.Zoomer()
.addElem(document.getElementById("zoomable-div"))
.addOnScroll()
.addOnDrag();
``