| |
Raistlin
Registered: Mar 2007
Posts: 575 |
C64GFXDb
I'd like to announce C64GFXDb (name is subject to change).
In the simplest terms, I plan for this to be something similar to HVSC but for graphics. Primarily, a ZIP file download of as much C64 scene and non-scene graphics as can be collected - but also backed up by a website presentation.
v0.05 download is here:
https://www.dropbox.com/scl/fi/rk8lhbt5lsaolfc836ql6/C64GFXDb-v..
And a WIP website is here: https://c64graphicsdb.netlify.app/
There's a lot to do to get it all into nice shape .. my todo list is quite long already.. for example:-
Collection (ZIP etc)
====================
- sort something out for sceners who used multiple handles .. these aren't handled well right now .. plus I seem to have a bug in my database code that pushes older names into "unsorted"...
- ensure that duplicates are removed
- favour a single palette for all, and a better compressed image format (eg. GIF) .. it's then easy to convert these to different palettes later
- ensure all images are a consistent size (multi-screeners can be different in size in the direction of scroll of course)
The Website
===========
- I don't have a main page as yet, just a nasty horrible, massive list of artist names ... this will of course improve at some point...
- for scrolling images I want to actually scroll them within their grid entry... so they'd be almost like animated GIFs (except animated GIFs are a bad idea, I've found, since they don't cleverly compress scroll animation (and so end up HUGE)
Questions
=========
For image dimensions I've been aiming for the same as CSDb - 384x272. This means we could lose pixels, though, as of course C64 screen can go up to 408px wide... any preferences here? I want most pictures to match so that I can setup the grid nicely without images being scaled oddly.
For such as interlace images my eventual plan was to use animated GIFs and to simply flip frames at 50fps (however many frames there are). Check out Leon's folder for a single example. Do you think this is better - or should interlace pics be given in a different form? Many of the screenshots on CSDb seem misleading to me...
Some images are animated .. where it makes sense I've added these as animated GIFs. Check out my own folder (the Turn Disk image) and Talent's folder for examples... do you think this is a good way to go?
Please, please let me know your thoughts, whether you like or hate it .. what can be done to make it better, more useful, etc etc.
Cheers! |
|
... 64 posts hidden. Click here to view all posts....
|
| |
spider-j
Registered: Oct 2004
Posts: 449 |
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll('img');
images.forEach(img => img.setAttribute('loading', 'lazy'));
images.forEach(img => img.setAttribute('width', '384'));
images.forEach(img => img.setAttribute('height', '272'));
});
This only sets html attributes on all img tags.
You can just set them directly in the html :-)
<img src="bla.png" loading="lazy" width="384" height="272">
|
| |
Raistlin
Registered: Mar 2007
Posts: 575 |
Quote:
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll('img');
images.forEach(img => img.setAttribute('loading', 'lazy'));
images.forEach(img => img.setAttribute('width', '384'));
images.forEach(img => img.setAttribute('height', '272'));
});
This only sets html attributes on all img tags.
You can just set them directly in the html :-)
<img src="bla.png" loading="lazy" width="384" height="272">
Ahhh, damned ChatGPT :p .. I asked it how I could reduce the size of my HTML and it suggested Javascript for the constant stuff ..
Just by reading the name, though, I can guess that "DOMContentLoaded" only happens when an image has loaded.. by which time it's too late to add the 'loading="lazy"' tag... doh!
I've fixed this now ... so the pages should now appear much faster. Thanks for pointing that out :-)
I've also fixed the collages/thumbnails .. if you share an artist's page on Twitter/Facebook you'll get a collage of 4x3 images as the embed image. |
| |
spider-j
Registered: Oct 2004
Posts: 449 |
Quoting RaistlinJust by reading the name, though, I can guess that "DOMContentLoaded" only happens when an image has loaded.. by which time it's too late to add the 'loading="lazy"' tag... doh!
No DOM Content Loaded means the HTML is translated into a domain object model by the browser, which usually happens before images are loaded.
Images should load after that.
The "DOMContentLoaded" event is normally used in javascript when you put it into the header (like in your page) instead of the footer of the page (which has become standard), so you can modify DOM nodes but be sure they are already loaded.
Never the less: it's not good practice to use JS for things you can do in HTML or CSS.
You maybe can get rid of the other JS stuff too with CSS media queries:
.container {
width: 408px;
}
.pixel-title {
font-size: 24px;
}
@media (min-width: 808px) {
.pixel-title {
font-size: 32px;
}
.container {
width: 808px;
}
}
@media (min-width: 1208px) {
.pixel-title {
font-size: 40px;
}
.container {
width: 1208px;
}
}
@media (min-width: 1608px) {
.pixel-title {
font-size: 48px;
}
.container {
width: 1608px;
}
}
|
| |
Raistlin
Registered: Mar 2007
Posts: 575 |
Ahhh, interesting. I just mentioned it because lazy loading didn’t seem to be working on my phone… it might just be a problem with Chrome for iPhone. With everything inside the IMG tag, it “just works”. Which is good since you also say it’s better to do that way.
I’ll try your other suggestion tomorrow. ChatGPT -did- also suggest the media query stuff, actually, but I was struggling figuring out the right values to make it work. |
| |
spider-j
Registered: Oct 2004
Posts: 449 |
Quoting Raistlinbut I was struggling figuring out the right values to make it work.
I just copied the values your script calculated from the browser dev console.
Usually at work when I'm not sure about some sizes, I just play around with the values in the CSS dev view. You can just select i.e. "width" and then arrow up / down for in/decreasing the values. |
| |
Deev
Registered: Feb 2002
Posts: 206 |
I don't know whether I'm a bit late on this one since it seems like the project may be on hold, but on the subject of screenshots, one of the things I think should be considered if you're creating a dedicated archive of C64 graphics is that C64 pixels (like most 8 bit machines) are not square. Almost every archive online features C64 graphics displayed in a slightly too-wide aspect ratio. This is something that could be corrected using the high pixel counts of modern displays and would be good to consider if you're going for the definitive archive. |
| |
Raistlin
Registered: Mar 2007
Posts: 575 |
I’m going to continue with the project but make it something more manageable. I’ll add that to my todo list (Trello). If you know what relative width/height each pixel should be, I could give that a go. |
| |
Deev
Registered: Feb 2002
Posts: 206 |
Quote: I’m going to continue with the project but make it something more manageable. I’ll add that to my todo list (Trello). If you know what relative width/height each pixel should be, I could give that a go.
Someone may tell us otherwise, but a quick Google search is saying PAL 0.937:1, NTSC 0.75:1 |
| |
Raistlin
Registered: Mar 2007
Posts: 575 |
I've updated the site now with some popup modal window stuff (instead of linking straight to CSDb) - I don't have the details here yet, they're just filled with test data.. but the HTML/CSS/JS side is working on desktop at least. nb. On mobile, and in small windows etc, it doesn't work yet, it'll look very messy.
I've also updated the collage stuff ... if you haven't seen this, just try sharing one of the artist pages (preferably one with 12 or more images) and you should see an image preview on Facebook and Twitter.
Lots of code changes behind-the-scenes too .. all good stuff that might help me open-source this in future. |
| |
Bob
Registered: Nov 2002
Posts: 71 |
Most impressive work in such a short notice and getting up an art gallery just like that. |
| Previous - 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 - Next |
