Re:Show HN: Tragopan – Minimal, dependency-free pan/zoom Jav...
by dxchester on Friday June 19, 2020 @06:16PM
(#23579389)
We use this library on https://team.video for panning and zooming around in screenshares.
It can be really useful if you have situation where a colleague is sharing their hi-res screen, when meanwhile you're on a laptop with a lower-res screen, and you want to zoom in on their terminal or some part of the screenshare so that the text there can be easier to read.
Re:Show HN: Tragopan – Minimal, dependency-free pan/zoom Jav...
by kevsim on Saturday June 20, 2020 @06:52AM
(#23583187)
Looks nice! We've been looking for a lightweight solution to zooming on images in the issue tracker we're building [0]. Figured we'd end up rolling our own because we're trying to avoid adding heavy dependencies for these little things. But this looks great, we'll definitely give it a try!
Re:Show HN: Tragopan – Minimal, dependency-free pan/zoom Jav...
by dxchester on Saturday June 20, 2020 @10:29PM
(#23589245)
Nice, that is a cool concept. Part of the motivation with tragopan was to see if using native scrolling could be a more natural fit especially on mobile, versus the more common way of using transform/translate.
On BigPicture, two bits of feedback for what it's worth:
- Maybe try `user-select: none` while a user is panning? Otherwise I end up inadvertently selecting text sometimes when I try to pan around, especially in Firefox
- I couldn't figure out how to make a given bit of text bigger or smaller, like the demo shows is obviously possible. I did make it happen a few times but then couldn't understand what steps had actually led to the change... Maybe some instructions on that, or just a floating toolbar could help (even though the toolbar-less aesthetic and approach is otherwise pretty nice!)
It can be really useful if you have situation where a colleague is sharing their hi-res screen, when meanwhile you're on a laptop with a lower-res screen, and you want to zoom in on their terminal or some part of the screenshare so that the text there can be easier to read.
This looks good, will check out for one of our projects.
0: https://kitemaker.co
Note: I never did a mobile version, so it only works on desktop; same for the website https://bigpictu.re/demo
On BigPicture, two bits of feedback for what it's worth:
- Maybe try `user-select: none` while a user is panning? Otherwise I end up inadvertently selecting text sometimes when I try to pan around, especially in Firefox
- I couldn't figure out how to make a given bit of text bigger or smaller, like the demo shows is obviously possible. I did make it happen a few times but then couldn't understand what steps had actually led to the change... Maybe some instructions on that, or just a floating toolbar could help (even though the toolbar-less aesthetic and approach is otherwise pretty nice!)
On the demo page, it looks like you're using CSS that isn't supported by most browsers, which might be what causes the flickering / jank on Safari.
Nice effort. I applaud any efforts to make a dependency free anything in js.
I couldn't reproduce the Chrome jumpiness - what version of Chrome/iOS was giving you trouble?