Pixel Joint Forum: Suggestion: Move the zoom buttons on top.

Message

   This post is addressed to who ever is in charge of the main site design. But if you're just a member like me, feel free to weigh in as well.

I frequently make use of the zoom buttons on the main gallery, mostly because my screen is a high-DPI display, and certain elements tend to be pretty small. 

Also due to my High-DPI display, the default 1x zoom on pixel art 
is often too small to read clearly, so I have to usually press the Zoom 
[+] button at least once to even see anything. Having an option in our user settings to set our "Default Zoom Level" would be really nice.

But the one thing that bothers me about the Zoom buttons, is that since they're below the image, when the image expands it pushes the Zoom buttons down with it. So if I want to click the button to quickly Zoom 2 or 3 times on a really small piece, I  have to click, then chase the moved button down with my cursor, then click again, and chase it again, etc.

Aesthetically, I think the buttons look good below the image, but just due to how HTML works, the buttons move. And there's nothing more annoying than when an interface button just moves from under your cursor.

I figure the Zoom buttons would be a bit more functional above the image, because they won't move down the page when the image expands.

Since I'm currently learning JavaScript, I decided to try and tackle this problem myself.

I copied PixelJoint's layout, then removed anything unnecessary to my task. Then I set out to modify the buttons and reverse engineer the Zoom script:

https://jameso2.neocities.org/experiments/pj/pj.html

(Note, my sample page above is using a Dark Theme CSS mod.)

I decided that since I'm doing the Zoom script from scratch, I might as well add a few features:
The buttons are a bit bigger, making them easier to press (again, my High-DPI display makes the buttons really tiny and hard to line up my cursor on)
In the code, you can specify a "default zoom level" so that gallery items start at 2x, or 3x, or whatever your preferred zoom level is.
"Default Zoom Level" can be set independently for the Main Image and the Small Image (preview). So you can have the main images open up at 2x, and leave the preview default at 1x -- or vice versa.
I added a middle button between the [-] and [+] buttons. The middle button will reset the Zoom to 1x.
If you are already at 1x zoom, pressing the middle button again will switch you to double the default zoom (2x by default, but if your default zoom is 2x it sets to 4x). -- So this button basically acts as a quick-toggle.
The middle button also displays your current Zoom level as text.
You can check out the bare-bones clean code here:
https://codepen.io/jameso2/pen/YzpedJB

Since the image defaults are stored in an array, this script could theoretically support any number of images on a page at once, not just the two.

So, what does everyone think?

If this doesn't get implemented into the PixelJoint code, I might try to convert this to a Grease Monkey script. But that'd take a bit more time to figure out.

Author	Message
JamesOrthII Seaman Joined: 24 February 2021 Online Status: Offline Posts: 6	Topic: Suggestion: Move the zoom buttons on top. Posted: 08 April 2021 at 8:27pm
	This post is addressed to who ever is in charge of the main site design. But if you're just a member like me, feel free to weigh in as well. I frequently make use of the zoom buttons on the main gallery, mostly because my screen is a high-DPI display, and certain elements tend to be pretty small. Also due to my High-DPI display, the default 1x zoom on pixel art is often too small to read clearly, so I have to usually press the Zoom [+] button at least once to even see anything. Having an option in our user settings to set our "Default Zoom Level" would be really nice. But the one thing that bothers me about the Zoom buttons, is that since they're below the image, when the image expands it pushes the Zoom buttons down with it. So if I want to click the button to quickly Zoom 2 or 3 times on a really small piece, I have to click, then chase the moved button down with my cursor, then click again, and chase it again, etc. Aesthetically, I think the buttons look good below the image, but just due to how HTML works, the buttons move. And there's nothing more annoying than when an interface button just moves from under your cursor. I figure the Zoom buttons would be a bit more functional above the image, because they won't move down the page when the image expands. Since I'm currently learning JavaScript, I decided to try and tackle this problem myself. I copied PixelJoint's layout, then removed anything unnecessary to my task. Then I set out to modify the buttons and reverse engineer the Zoom script: https://jameso2.neocities.org/experiments/pj/pj.html (Note, my sample page above is using a Dark Theme CSS mod.) I decided that since I'm doing the Zoom script from scratch, I might as well add a few features: The buttons are a bit bigger, making them easier to press (again, my High-DPI display makes the buttons really tiny and hard to line up my cursor on) In the code, you can specify a "default zoom level" so that gallery items start at 2x, or 3x, or whatever your preferred zoom level is. "Default Zoom Level" can be set independently for the Main Image and the Small Image (preview). So you can have the main images open up at 2x, and leave the preview default at 1x -- or vice versa. I added a middle button between the [-] and [+] buttons. The middle button will reset the Zoom to 1x. If you are already at 1x zoom, pressing the middle button again will switch you to double the default zoom (2x by default, but if your default zoom is 2x it sets to 4x). -- So this button basically acts as a quick-toggle. The middle button also displays your current Zoom level as text. You can check out the bare-bones clean code here: https://codepen.io/jameso2/pen/YzpedJB Since the image defaults are stored in an array, this script could theoretically support any number of images on a page at once, not just the two. So, what does everyone think? If this doesn't get implemented into the PixelJoint code, I might try to convert this to a Grease Monkey script. But that'd take a bit more time to figure out.
	IP Logged

Hapiel Rear Admiral Joined: 14 April 2022 Online Status: Offline Posts: 3263	Posted: 09 April 2021 at 1:56am
	I agree, its kinda annoying some times! We had a discussion about it when we made the PA color browser, at first I wanted the buttons below the artworks because of convention, but I'm glad we decided to put it above in the end! I don't think the site is gonna update very soon, since a much bigger overhaul is needed before these small changes make sense, but I'd be looking forward to your grease monkey script! By the way, in case you're not aware there is a great plugin called FixelJoint, I've set it up to auto zoom all works already at 2x, which means I have to click the button less often.
	IP Logged

JamesOrthII Seaman Joined: 24 February 2021 Online Status: Offline Posts: 6	Posted: 09 April 2021 at 11:37am
	Oh wow, I did not know about FixelJoint. This pretty much covers all of my super minor complaints, like the fave button thing, default zoom at 2x, bigger zoom buttons, etc. And it adds some stuff I hadn't even thought of, but are super nice: like being able to move the image sideways, smooth zooming, and change the background color. The little "stars" are a nice touch to the rating system too! The overall look of the some of the UI changes are really nice too. They're not necessarily better or worse than default PJ, but I really do like the thick look of these new buttons. This is great! Thanks. As for the PA Color Browser -- this is really cool. I can definitely see myself using this in the future for quick inspiration. Is PA Color Browser like an external program/site that links into the PixelJoint gallery database or something? I'm just curious how that works. I'm somewhat new to JS and PHP, but I have some grasp on it, and am always trying to learn new stuff.
	IP Logged

Hapiel Rear Admiral Joined: 14 April 2022 Online Status: Offline Posts: 3263	Posted: 09 April 2021 at 1:36pm
	I made it together with a friend, also to learn JS! The site is running on ReactJS and Node, no PHP. We scraped all of pixeljoint, ran some python scripts to analyse the colors, threw all that data in a database, so it is not linked to PJ. The downside is that it also doesn't auto update, so right now you can't find images that are newer than 2020... Let me know if you have questions about it, I'd love to share more :)
	IP Logged

JamesOrthII Seaman Joined: 24 February 2021 Online Status: Offline Posts: 6	Posted: 09 April 2021 at 7:40pm
	A friend of mine keeps talking about React, but I haven't gotten into any frameworks like that yet. So its all a bit foreign to me. I mostly just do small "projects" where ever my curiosity takes me (like the one in this thread). I haven't really had the time to just sit down and go through some formal JS course or something. So I know PHP runs server-side, and JS runs client-side. Does ReactJS sort of act like PHP in some way, allowing you to utilize database-like structures or something? To my understanding, the biggest benefit of PHP is it's ability to pull "posts" out of a database and serve them up in different formats to the client -- like WordPress runs off of PHP in this way, and most forum software uses PHP to be able to sort, filter, and search through posts. To my knowledge, JS (or React) can't do that sort of stuff -- but I could be totally wrong. Also, how did you write that site-scraper? Was that in python? I want to write a site scraper/crawler for a project of mine, but I don't know where to start. From the some of the quick searches I've done, I've noticed most scraper projects I've seen online mention Python. So I'm guessing that's a good language to start with for that.
	IP Logged

Hapiel Rear Admiral Joined: 14 April 2022 Online Status: Offline Posts: 3263	Posted: 10 April 2021 at 1:59am
	Node runs server side, and usually react runs on Node. Node allows you to use JS outside of the browser (I've used JS for robotics for example, or for running software server side for websites), it's worth learning about! Knowing the basics of Node & expressJS (a networking library for Node) can be useful before diving into things like React. Server side code in any language can pull up posts out of a database, but your typical JS runs in the browser (client side), which is why it can't (shouldn't) be used for database connection. I wrote the scraper in python using the Beautiful Soup library, that was surprisingly straight forward. By the way the source for the pa color browser site and the scraper & database builder is online. It's messy, but you can view it.
	IP Logged

JamesOrthII Seaman Joined: 24 February 2021 Online Status: Offline Posts: 6	Posted: 10 April 2021 at 6:14pm
	Wow, this is super informative. Thanks! I'm gonna bookmark your post for later. Right now I need to figure out which of my projects I'm gonna focus on next. But this info really helps. I definitely need to get into python.
	IP Logged

Resources and Support
Pixel Joint Forum : The Lounge : Resources and Support