Hey everyone. Been lurking a long time, first time submitting.
I was inspired to make this after seeing the JWST images. I thought it would be cool to have something that would zoom in on random parts of those huge images, and maybe you could see things that you wouldn't otherwise see. This resulted from that.
First time using ViteJS and Mantine, and second project using TailwindCSS. I enjoyed how quick it was to develop with Vite and Tailwind. I did have trouble getting the behavior of the fading to work correctly, because rendering those huge files in <canvas>, you can't predict how long it takes for the compositor to display. Also, using React hooks doesn't seem to be as ergonomic for something like a long-running timer, because you have to reset and re-run the timers when dependencies change. Part of the solution was updating Refs using useEffect, and using those refs within the timer function.
The nice thing about this is that it works on my LG tv, so I can have a slideshow on that!
Thanks for making this. From your comment, should we be able to zoom in with a mouse on desktop?
I think you could also consider a 'next' (previous too?) control to allow skipping something, but that might be more useful once there are many many JWST images.
I guess I wasn't clear on the zoom. The zoom can be activated in the settings - but it's not a user-controlled zoom. Every new slide, it chooses a random set of bounds to display, if the image is larger than your viewport. I wanted to be surprised in seeing random closeup portions of those large images (especially the Carina and SMACS 0723 images), because there is so much detail that you miss otherwise.
As far as a next and prev, that would be easy, but I guess since the slideshow is only X seconds per slide, I didn't think it would be that necessary (at least to my use case) to skip or go back.
I've been wondering how to get some of the JWST photos to my LG tv as well - how do I load this up over there?
Edit Lol, well I finally got it open in the built in browser, but I'm not sure I'd say it works, exactly. My TV crashed, and based on the browser's behavior, I think it's less the website and more the browser. I may be better off just moving some photos with a USB drive.
I was inspired to make this after seeing the JWST images. I thought it would be cool to have something that would zoom in on random parts of those huge images, and maybe you could see things that you wouldn't otherwise see. This resulted from that.
First time using ViteJS and Mantine, and second project using TailwindCSS. I enjoyed how quick it was to develop with Vite and Tailwind. I did have trouble getting the behavior of the fading to work correctly, because rendering those huge files in <canvas>, you can't predict how long it takes for the compositor to display. Also, using React hooks doesn't seem to be as ergonomic for something like a long-running timer, because you have to reset and re-run the timers when dependencies change. Part of the solution was updating Refs using useEffect, and using those refs within the timer function.
The nice thing about this is that it works on my LG tv, so I can have a slideshow on that!