9 ms·

Show HN: Tragopan – Minimal, dependency-free pan/zoom JavaScript library

69 points by dxchester 6y ago

dxchester 6y ago
We use this library on https://team.video 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.
- krthr 6y ago
  it's always good to see companies joining OSS!
- xgenecloud 6y ago
  Demo link -> https://team-video.github.io/tragopan/ https://team-video.github.io/tragopan/ This looks good, will check out for one of our projects.
kevsim 6y ago
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! 0: https://kitemaker.co https://kitemaker.co
jbverschoor 6y ago
Very smooth
- deleted 6y ago
  [deleted]
KaoruAoiShiho 6y ago
Can you write a bit about why this over other pan zoom libs.
- dougwbrunton 6y ago
  I've opened an issue to track this request: https://github.com/team-video/tragopan/issues/4 https://github.com/team-video/tragopan/issues/4
miguelmota 6y ago
Scroll zoom on the demo image is very choppy for me. Not sure if it's my screen or the library itself.
- dougwbrunton 6y ago
  What browser/os was giving you trouble?
  - miguelmota 6y ago
    Firefox on Linux
    - dougwbrunton 6y ago
      Thank you.
- owenshen24 6y ago
  Agreed. I'm using the latest version of Firefox.
  - dougwbrunton 6y ago
    Which OS? There is an issue open for Firefox on iOS: https://github.com/team-video/tragopan/issues/3 https://github.com/team-video/tragopan/issues/3. Is yours different?
    - owenshen24 6y ago
      Firefox on Linux.
tarkin2 6y ago
Very jumpy on my iphone with firefox or chrome, sadly. Okay with safari. I suspect it’s the shoddy version of webkit apple forces upon moz and google. Nice effort. I applaud any efforts to make a dependency free anything in js.
- dougwbrunton 6y ago
  Thanks for the report - I've filed it at https://github.com/team-video/tragopan/issues/3 https://github.com/team-video/tragopan/issues/3 I couldn't reproduce the Chrome jumpiness - what version of Chrome/iOS was giving you trouble?
  - tarkin2 6y ago
    Latest ios. Chrome 70.0.3538.75. It’s a little better in chrome than ff, but when I pan up and down in chrome it jumps.
    - dougwbrunton 6y ago
      Okay, thanks.
sambeau 6y ago
I'm finding it very choppy and jumpy Safari Version 13.1.1 (14609.2.9.1.3) Mojave 10.14.6
- dougwbrunton 6y ago
  Is the toolbar jumpy (which is a known problem, I've just opened an issue for it at https://github.com/team-video/tragopan/issues/5 https://github.com/team-video/tragopan/issues/5), or is the zooming jumpy?
Jarred 6y ago
It works well on Chrome for desktop. 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. width: max-length; scrollbar-width: none;
josephernest 6y ago
Having infinite pan/zoom is a very exciting, you always have free room to write new things! I made BigPicture a few years ago for this purpose. Live demo: https://josephernest.github.io/bigpicture.js/index.html https://josephernest.github.io/bigpicture.js/index.html Note: I never did a mobile version, so it only works on desktop; same for the website https://bigpictu.re/demo https://bigpictu.re/demo
- dxchester 6y ago
  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!)
deleted 6y ago
[deleted]

69 points by dxchester 6y ago

We use this library on https://team.video 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.

krthr 6y ago
it's always good to see companies joining OSS!
xgenecloud 6y ago
Demo link -> https://team-video.github.io/tragopan/ https://team-video.github.io/tragopan/ This looks good, will check out for one of our projects.

kevsim 6y ago

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! 0: https://kitemaker.co https://kitemaker.co

jbverschoor 6y ago

Very smooth

deleted 6y ago
[deleted]

KaoruAoiShiho 6y ago

Can you write a bit about why this over other pan zoom libs.

dougwbrunton 6y ago
I've opened an issue to track this request: https://github.com/team-video/tragopan/issues/4 https://github.com/team-video/tragopan/issues/4

miguelmota 6y ago

Scroll zoom on the demo image is very choppy for me. Not sure if it's my screen or the library itself.

dougwbrunton 6y ago
What browser/os was giving you trouble?
- miguelmota 6y ago
  Firefox on Linux
  - dougwbrunton 6y ago
    Thank you.
owenshen24 6y ago
Agreed. I'm using the latest version of Firefox.
- dougwbrunton 6y ago
  Which OS? There is an issue open for Firefox on iOS: https://github.com/team-video/tragopan/issues/3 https://github.com/team-video/tragopan/issues/3. Is yours different?
  - owenshen24 6y ago
    Firefox on Linux.

tarkin2 6y ago

Very jumpy on my iphone with firefox or chrome, sadly. Okay with safari. I suspect it’s the shoddy version of webkit apple forces upon moz and google. Nice effort. I applaud any efforts to make a dependency free anything in js.

dougwbrunton 6y ago
Thanks for the report - I've filed it at https://github.com/team-video/tragopan/issues/3 https://github.com/team-video/tragopan/issues/3 I couldn't reproduce the Chrome jumpiness - what version of Chrome/iOS was giving you trouble?
- tarkin2 6y ago
  Latest ios. Chrome 70.0.3538.75. It’s a little better in chrome than ff, but when I pan up and down in chrome it jumps.
  - dougwbrunton 6y ago
    Okay, thanks.

sambeau 6y ago

I'm finding it very choppy and jumpy Safari Version 13.1.1 (14609.2.9.1.3) Mojave 10.14.6

dougwbrunton 6y ago
Is the toolbar jumpy (which is a known problem, I've just opened an issue for it at https://github.com/team-video/tragopan/issues/5 https://github.com/team-video/tragopan/issues/5), or is the zooming jumpy?

Jarred 6y ago

It works well on Chrome for desktop. 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. width: max-length; scrollbar-width: none;

josephernest 6y ago

Having infinite pan/zoom is a very exciting, you always have free room to write new things! I made BigPicture a few years ago for this purpose. Live demo: https://josephernest.github.io/bigpicture.js/index.html https://josephernest.github.io/bigpicture.js/index.html Note: I never did a mobile version, so it only works on desktop; same for the website https://bigpictu.re/demo https://bigpictu.re/demo

dxchester 6y ago
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!)

deleted 6y ago

[deleted]