E-BIGS Museum

This is the E-BIGS Museum

The grading system you see here wasn't just built in a day! Over the last two and a half years, the system has been checked over and over, refined, restyled, revamped and re-coded to do just about everything that collectors might find useful.

On this page are some snapshots and background on how it all came together, piece by piece!

6th October 2004

This was the first ever version of the grading tool that came to be known as E-BIGS.

Originally titled "Grade It Yourself", the page contained some 200 images of comic book defects that had been scanned from the very first day of production, June 8th 2004. The page was written in plain vanilla HTML and the maths done by a simple JavaScript algorithm. When the button at the bottom of the page was clicked, the result was plain text in a small popup window, including only the numerical grade and its corresponding description (as per Overstreet Guide®), for all your hard work!

The tabular layout is reflected in all versions of E-BIGS but the colour scheme follows on from a page layout I used to sell stuff on eBay. As we found later, it wasn't the best use of colour!

17th October 2004

The layout looks the same, with the exception of the first appearance of the floating control box.

I wanted the floating control box to scroll smoothly with the page horizontally and vertically. Sounds easy, but with several methods to choose from, with varying degrees of smoothness, this was the simplest and probably judderiest way to do it. A Javascript is fired every 10 milliseconds and makes sure that the position of the box corresponds to the position you want it. Yuk!

The other feature that was implemented here was the reset button. Although all the grading functions were controlled by a single HTML web form, the reset button actually made the page reload, forcing all 200 images to be reloaded along with it. Watch for updates on this one (File under 'you live and learn')!

19th March 2005

The floating control box looks the same, but what happened to the colour scheme? Surely powder blue doesn't make a good background for making judgements on colour difference....

For some strange reason that I have yet to determine, the top part of the document contains something called 'v:shapes' which include a lot of XML, like this;

<!--[if gte vml 1]><v:shapetype id="_x0000_t202" coordsize="21600,21600" o:spt="202" path="m,l,21600r21600,l21600,xe">
<v:stroke joinstyle="miter"/>
<v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1026" type="#_x0000_t202" alt="" style='position:absolute;left:10.5pt;top:200.25pt;width:680.25pt;height:88.5pt;z-index:-1' stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center"> </td>
</tr>
</table>
</v:textbox>

I think it was auto-generated by FrontPage when I didn't know any better. I'm still not sure.

21st March 2005

"Grade it Yourself" has now officially become E-BIGS, the Examples-Based Internet Grading System. Since the words constituting all acronyms are shoehorned into the final letter/word for various reasons, it's only fair to say why I picked E-BIGS as a title - for years I had posted on comic forums under the monicker BigLion, and by some strange quirk of fate, it looked as though I could make up an acronym that sounded like my forum handle. A pretty good fit too; BigLion... E-BIGS...? If you want to know more you'll have to ask my wife.

Despite the juddery toolbox and the forever-reloading reset button, there were improvements.

The lasting change here was the colour scheme - as suggested by collaborator James Jobe of stlcomics.com, it is much easier to see the scans against a black background. The red lettering is also set off nicely, and the background remains the key to enabling easier discernment of fine detail. It's easier on the eyes too.

The toolbox now moved horizontally as well as vertically, but only if you had enough patience to wait for the page to load!

13th May 2005

More splashy graphics were included in this version which took up a regular place on the STLcomics.com server. Most of the behind the scenes stuff was the same but I thought the red banner was cool.

There was also a button to a help page which I don't think existed at the time. As you can imagine, that was a big help.

What was also about to change was the presentation of the grades. There was still only plain text in the grade window, but the first graphical labels were to appear in the next update.

15th May 2005

Another day, another update - but this time there were some big steps.

The floating toolbox was located in the natural position most people wanted it, in the lower right-hand corner. With the application of new JavaScript, it floated soothingly up and down the page as you scrolled. One thing that it didn't do however was go sideways. It was just too complicated to get the vertical behaviour to work that I didn't want to chance any other tweaking. As most users had 1024 pixel wide screens, this was never much of a problem.

This day's version also included an instant reset button which thanks to the aid of basic HTML web form functions, resets all the grading variables without reloading the whole page. This is achieved by calling the reset(); function for the grading form. I know - it's pretty complicated.

The grading tool now had some fancy graphical labels which merely required the utter tedium of several hours changing numbers in Photoshop® and resaving the new images. Did you know that the classic (Overstreet®) ten point grading scale contains 26 separate grades?

19th June 2005

Qualified grades were the main addition to the index page this time.

Not only did that require some serious brain-time to figure out the logic, but it also means that there are separate qualified labels for each of the comic book defects; and there are 37 of those. Just take it for granted that when you check the 'Allow Qualified Grades' box, there are a lot of oompa-loompas getting their pencils out. Except, there wasn't a checkbox for that yet.

Another 'useful' addition was the blocking of right-clicking (PC only). After all, this was pretty hard work...

25th June 2005

A checkbox is added so that you can choose to accept qualified grades, or not .

Everything works.

Life is good.

16th July 2005

A decision has been made to go to a subscription service, and while the previous version is still available free, quite a lot has changed since then:

Boxes appear at the top of the screen for book data
The label gets revamped to include this data and a notes section
Paper colour variables are added; in time these also appear on the label.
A first serious stab at CSS styling has been made and reduces the file size a fair bit.
Graphics are rounder and more friendly (ie, legible)
There is a dropdown quick-link system for easy navigation
More scans are added.
There is a Help page.

This means there are some 63 JavaScript variables being bounced around as you click. It's a symphony of precision, but not yet entirely satisfactory...

24th July 2005

Developments continue apace; the annoying floating control box can now be toggled open and closed. There is much rejoicing over this news.

A convenient button is placed on the control panel to clear the book data as you go, instead of having to scroll or jump to the bottom of the page.

What's more fun are the contextual popups which show the whole cover scans when you double-click the image (I wonder how many people use 'onDoubleClick()' these days?). The thing was, a lot of the full scans had black backgrounds, but then a lot of them had white backgrounds too. So what colour should the window background be? Black, or white? Well, the answer is, it depends. I had to write a script to colour the window background according to the background colour in the scan, and that means hard-coding the colour for each picture.

Did someone say this was easy??

22nd February 2006

After a long layoff to help my wife through her pregnancy, the last corners are polished to get E-BIGS on its own website.

Being a code guru, the page has now been forked to take advantage of the relative strengths (or avoid weaknesses) of each browser, so a different page of code exists for each. There are also different CSS stylesheets for each. Logins, session variables and one very small cookie are added, just like on a proper website! The database for your comic labels has been created. All the other little popup pages are ready too.

A nasty (in IE 6.0) CSS hack has been implemented to get the floating toolbox to move sideways. It works, but in IE 6.0 the scrollbars do the macarena while the page is loading. This can be avoided by upgrading to IE 7.0, or should Microsoft ever consider supporting the CSS {position:fixed;} declaration. We can but dream.

Smooth new page graphics declare the intent; we are hip, happening and about to go live!

Also 22nd February 2005

A holding graphic is created for the index page of E-BIGS before the official launch.

I liked it, and it would be a shame to never see it again, so here it is.

Sunday 12th March 2005

The curtain is raised on E-BIGS.net!

Thanks for watching - it is very cathartic to get this out of my system.

Who knows; there may be more improvements (suggestions welcome) and then the site as it appears now will be consigned to the E-BIGS museum.