5 ms·

Hugepic - a web app for showing massive pictures

74 points by dilipray 14y ago

seanlinehan 14y ago
Pretty cool!
- peterbe 14y ago
  Thanks!
jameswyse 14y ago
It's pretty awesome! One thing I noticed is that it breaks the browser back button. I see you have some sort of coordinates in the URL, however changing these doesn't seem to do anything?
- SenorWilson 14y ago
  They do if you refresh the page, but doing something like this is a nightmare because it floods your browsing history with useless junk. This should be changed immediately.
  - dilipray 14y ago
    It should be GET request and Completely AJAX instead of HASH.
  - peterbe 14y ago
    It has been fixed. The hashing thing was naive. Now it's only switched on if you start the viewing with a coordinates hash.
- dilipray 14y ago
  It's amazing. He should work on the coordinates but they worked for me on refresh( onPageLoad ), but i think it should be GET request rather than Hash request
  - troels 14y ago
    You wouldn't want to actually issue a new request each time the view is updated. A good solution would probably be to use `pushState` on browsers that support it and fall back to the current behavior for older browsers.
    - dilipray 14y ago
      Yeah. pushState() and replaceState()
      - peterbe 14y ago
        This has now been implemented. Check it out.
- andrewmunsell 14y ago
  Yeah, it essentially is storing a massive number of history items (seems to update the URL too much) and therefore you can never really go back to the previous page if you've scrolled around a lot...
- davecardwell 14y ago
  Perhaps use history.replaceState() instead of history.pushState() so it doesn’t create a new distinct entry each time, but you still get a URL you can bookmark or share with others? https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#The_replaceState().C2.A0method https://developer.mozilla.org/en-US/docs/DOM/Manipulating_th...
- peterbe 14y ago
  The updating of the location hash has now been fixed.
kevingadd 14y ago
I would never use a website that broke the back button this badly unless it offered some tremendously essential feature for my daily life. The way it shows blackness at the bottom of the image but not the top is pretty weird also (tried it with the really wide, but not very tall test image). I think every margin should be the same color. Scrolling and zooming feel pretty smooth, but it glitches and refreshes the entire screen when you cross over a horizontal boundary (when the image is wrapped).
- hnriot 14y ago
  It doesn't seem to break it for me, but really, would you not use something just because the back button doesn't work? That seems so juvenile and pouty. Do you also stamp you foot and have tantrums a lot? Lastly there is no degree if broken back button, it's either functional or not, it's binary, so superlatives like "so badly" just make you sound dumb
- peterbe 14y ago
  Sorry about the back button thing. It's been fixed now. I never really noticed it because I never navigated like that when I developed it. #homeblind
szany 14y ago
Someone should upload the zebrafish image to this. http://v.jcb-dataviewer.glencoesoftware.com/webclient/img_detail/201/ http://v.jcb-dataviewer.glencoesoftware.com/webclient/img_de...
graue 14y ago
This is really, really cool. An obvious use of it would be for someone to upload that one massive xkcd: https://xkcd.com/1110/ https://xkcd.com/1110/ A couple people have already mentioned what would be my first suggestion for improvement, which is change the URL less often, so the back button works. I'd also suggest not having an animated transition when new tiles load. It makes it take longer for the image to properly display, and is, IMHO, distracting. Also, Leaflet (or your app?) seems to assume it's working with an image that repeats horizontally, which isn't actually the case with many of the pics on your site. It would be nice if it didn't wrap or allow going beyond the boundaries of the image. Thank you for sharing your code. Is there supposed to be a license file? I couldn't find one in the repository. RQ looks amazing. I'd love to tinker with all the stuff you used to make this. I think you've created an excellent interface for browsing large, high-resolution images. Well done.
- peterbe 14y ago
  Thank you! I started this project before that brilliant XKCD drawing. It inspired me to look at LeafletJS as an alternative. I don't know how to switch off the vertical overlap-scrolling. Perhaps there's an option in the API. Will try to take a look.
gabemart 14y ago
The current maximum zoom level (I think it's "5" from the url) seems too low for some of the pictures. For example, this shot [1] from the picture "Nick Field" is zoomed to the maximum level but looks like it could zoom quite a bit more while still having a useful level of resolution and quality. [1] http://hugepic.io/35f881f45#5.00/80.636/-135.923 http://hugepic.io/35f881f45#5.00/80.636/-135.923
- peterbe 14y ago
  It's capped at 5 I think. Zoom level five corresponds to a width of 8,192 pixels. Zoom level 6 would be 16,384 pixels. And the Nick Field picture is only 10,768 pixels wide.
rhplus 14y ago
There's a similar service called zoom.it (based on Deep Zoom), but it doesn't seem to be taking uploads anymore. http://zoom.it/ http://zoom.it/ (some examples on the right)
- peterbe 14y ago
  I did not know about that. Thanks for pointing it out. I had so much fun building this that I don't mind discovering existing wheels lying around.

74 points by dilipray 14y ago

seanlinehan 14y ago

Pretty cool!

peterbe 14y ago
Thanks!

jameswyse 14y ago

It's pretty awesome! One thing I noticed is that it breaks the browser back button. I see you have some sort of coordinates in the URL, however changing these doesn't seem to do anything?

SenorWilson 14y ago
They do if you refresh the page, but doing something like this is a nightmare because it floods your browsing history with useless junk. This should be changed immediately.
- dilipray 14y ago
  It should be GET request and Completely AJAX instead of HASH.
- peterbe 14y ago
  It has been fixed. The hashing thing was naive. Now it's only switched on if you start the viewing with a coordinates hash.
dilipray 14y ago
It's amazing. He should work on the coordinates but they worked for me on refresh( onPageLoad ), but i think it should be GET request rather than Hash request
- troels 14y ago
  You wouldn't want to actually issue a new request each time the view is updated. A good solution would probably be to use `pushState` on browsers that support it and fall back to the current behavior for older browsers.
  - dilipray 14y ago
    Yeah. pushState() and replaceState()
    - peterbe 14y ago
      This has now been implemented. Check it out.
andrewmunsell 14y ago
Yeah, it essentially is storing a massive number of history items (seems to update the URL too much) and therefore you can never really go back to the previous page if you've scrolled around a lot...
davecardwell 14y ago
Perhaps use history.replaceState() instead of history.pushState() so it doesn’t create a new distinct entry each time, but you still get a URL you can bookmark or share with others? https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#The_replaceState().C2.A0method https://developer.mozilla.org/en-US/docs/DOM/Manipulating_th...
peterbe 14y ago
The updating of the location hash has now been fixed.

kevingadd 14y ago

I would never use a website that broke the back button this badly unless it offered some tremendously essential feature for my daily life. The way it shows blackness at the bottom of the image but not the top is pretty weird also (tried it with the really wide, but not very tall test image). I think every margin should be the same color. Scrolling and zooming feel pretty smooth, but it glitches and refreshes the entire screen when you cross over a horizontal boundary (when the image is wrapped).

hnriot 14y ago
It doesn't seem to break it for me, but really, would you not use something just because the back button doesn't work? That seems so juvenile and pouty. Do you also stamp you foot and have tantrums a lot? Lastly there is no degree if broken back button, it's either functional or not, it's binary, so superlatives like "so badly" just make you sound dumb
peterbe 14y ago
Sorry about the back button thing. It's been fixed now. I never really noticed it because I never navigated like that when I developed it. #homeblind

szany 14y ago

Someone should upload the zebrafish image to this. http://v.jcb-dataviewer.glencoesoftware.com/webclient/img_detail/201/ http://v.jcb-dataviewer.glencoesoftware.com/webclient/img_de...

graue 14y ago

This is really, really cool. An obvious use of it would be for someone to upload that one massive xkcd: https://xkcd.com/1110/ https://xkcd.com/1110/ A couple people have already mentioned what would be my first suggestion for improvement, which is change the URL less often, so the back button works. I'd also suggest not having an animated transition when new tiles load. It makes it take longer for the image to properly display, and is, IMHO, distracting. Also, Leaflet (or your app?) seems to assume it's working with an image that repeats horizontally, which isn't actually the case with many of the pics on your site. It would be nice if it didn't wrap or allow going beyond the boundaries of the image. Thank you for sharing your code. Is there supposed to be a license file? I couldn't find one in the repository. RQ looks amazing. I'd love to tinker with all the stuff you used to make this. I think you've created an excellent interface for browsing large, high-resolution images. Well done.

peterbe 14y ago
Thank you! I started this project before that brilliant XKCD drawing. It inspired me to look at LeafletJS as an alternative. I don't know how to switch off the vertical overlap-scrolling. Perhaps there's an option in the API. Will try to take a look.

gabemart 14y ago

The current maximum zoom level (I think it's "5" from the url) seems too low for some of the pictures. For example, this shot [1] from the picture "Nick Field" is zoomed to the maximum level but looks like it could zoom quite a bit more while still having a useful level of resolution and quality. [1] http://hugepic.io/35f881f45#5.00/80.636/-135.923 http://hugepic.io/35f881f45#5.00/80.636/-135.923

peterbe 14y ago
It's capped at 5 I think. Zoom level five corresponds to a width of 8,192 pixels. Zoom level 6 would be 16,384 pixels. And the Nick Field picture is only 10,768 pixels wide.

rhplus 14y ago

There's a similar service called zoom.it (based on Deep Zoom), but it doesn't seem to be taking uploads anymore. http://zoom.it/ http://zoom.it/ (some examples on the right)

peterbe 14y ago
I did not know about that. Thanks for pointing it out. I had so much fun building this that I don't mind discovering existing wheels lying around.