| |
Raistlin
Registered: Mar 2007
Posts: 680 |
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! |
|
... 67 posts hidden. Click here to view all posts....
|
| |
Raistlin
Registered: Mar 2007
Posts: 680 |
Interesting. I hadn’t seen either of those.
I’m in two minds now whether this is worth pursuing…
A lot of what I’m trying to make is automated and designed to be relatively quick… or, it will be when finished…
Scraping should usually just be done on new entries on CSDb. I analyse screenshots from there, store their sizes in a CSV, “try” to automatically fix borders and sizes to be consistent. I had plans to unify the palette and switch to a better compressed format - eg. 4-bit GIF with LZW. And so on..
Hashtags for country, year, format, competition, etc… competitions will of course be included to show the results.
Lots can be done… but absolutely the big question is: will it survive? Maintaining something like this, even with all the automation above, will be difficult. |
| |
Raistlin
Registered: Mar 2007
Posts: 680 |
Re: the copyright notice … I hadn’t pushed it to GitHub. Doing that now so it’ll be fixed later today :-) |
| |
Oswald
Registered: Apr 2002
Posts: 5094 |
copyright notice.. just add website by, etc. |
| |
Shine
Registered: Jul 2012
Posts: 369 |
Quoting RaistlinLots can be done… but absolutely the big question is: will it survive? Maintaining something like this, even with all the automation above, will be difficult.
You never know if or how long it will survive.
I would really like this project though! |
| |
spider-j
Registered: Oct 2004
Posts: 498 |
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: 680 |
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: 498 |
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: 680 |
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: 498 |
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. |
| Previous - 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 - Next |
