Hugepic - a web app for showing massive pictures

http://www.peterbe.com/plog/introducing-hugepic.io

by dilipray • 14 years ago

74 23 14 years ago

peterbe.com

seanlinehan• 14 years ago

Pretty cool!

peterbe8• 14 years ago

Thanks!

jameswyse• 14 years 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• 14 years 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.

dilipray3• 14 years ago

It should be GET request and Completely AJAX instead of HASH.

peterbe8• 14 years 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.

dilipray3• 14 years 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• 14 years 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.

andrewmunsell• 14 years 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• 14 years 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_th...

peterbe8• 14 years ago

The updating of the location hash has now been fixed.

kevingadd• 14 years 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• 14 years 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

peterbe8• 14 years 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• 14 years ago

Someone should upload the zebrafish image to this.

http://v.jcb-dataviewer.glencoesoftware.com/webclient/img_de...

graue• 14 years 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/

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.

peterbe8• 14 years 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• 14 years 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

peterbe8• 14 years 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• 14 years 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/ (some examples on the right)

peterbe8• 14 years 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.

Hugepic - a web app for showing massive pictures

Related Stories