document.images.image1.src = 'http://my.empeg/proc/empeg_screen.png?IGNORE=' + Date();

                        <table border="0" cellpadding="0" cellspacing="0">
                                <tbody>
                                <tr>
                                        <td rowspan="3"><img border="0" src="/fascia_left.gif"  width="94"  height="90"/></td>
                                        <td rowspan="1"><img border="0" src="/fascia_top.gif"   width="128" height="28"/></td>
                                        <td rowspan="3"><img border="0" src="/fascia_right.gif" width="74"  height="90"/></td>
                                </tr>
                                <tr>
                                        <td bgcolor="grey"><img src="/proc/empeg_screen.png" width="128" height="32" name="screen_png"/></td>
                                </tr>
                                <tr>
                                        <td rowspan="1"><img border="0" src="/fascia_bottom.gif" width="128" height="30"/></td>
                                </tr>
                                </tbody>
                        </table>

<style>

.left, .right, .middle	{
					float: left;
				}

.middleimg		{
					float: left;
					clear: left;
				}

</style>

<div class="left">
	<img src="fascia_left.gif">
</div>
<div class="middle">
	<div class="middleimg"><img src="fascia_top.gif"></div>
	<div class="middleimg"><img src="empeg_screen.png"></div>
	<div class="middleimg"><img src="fascia_bottom.gif"></div>
</div>
<div class="right">
	<img src="fascia_right.gif">
</div>

Quote:
Add the following to the stylesheet:

.mfront_col img { display: block; }

For some reason Firefox is not treating the images as a block element in the XSL but does in a test example.

Quote:
the one we are using bugs me because it's so pixelated and the screen part is tinted blue. I'm sure this picture that Charcoalgrey99 used was a render at some point, I can't believe that was a photo - anyone know where the original, ORIGINAL fascia art came from?

Quote:
Nice, Bitt! I've got it saved now, if I have some time tonight I might try to weakly stab away (Gimp along?) at making a sliced-up version of this.

Quote:
Does IE support transparent png files, yet?

Quote:
Hmm... Makes me wonder if Hijack could use black as transparent in the .png file.

Quote:
Hmm... Makes me wonder if Hijack could use black as transparent in the .png file. Then there's no need for a chopped up image file, as CSS could be used to position the .png file over a single Empeg face image.

Quote:

I was hoping we could make the text transparent so we could set a background color on the containing div of /proc/empeg_screen.png and thus have colored text - but the aliasing with the text might make that hard.

Quote:

Quote:

I was hoping we could make the text transparent so we could set a background color on the containing div of /proc/empeg_screen.png and thus have colored text - but the aliasing with the text might make that hard.

Can that be done the other way around? Have the VFD image in the background, and layer a translucent foreground image (a plain colour) on top of that? Just like the real thing!

Quote:
This works in Firefox and it's been tested in IE6 with a hack in the stylesheet to allow transparent PNGs. Could someone check IE7?

It works with IE7 (under Linux+Wine) but not with IE6 (under Linux+Wine).
I haven't yet looked inside the xsl for a tweak, though.

The colours all vary, of course:



That's FF2 on top, followed by IE7 and then IE6 on the bottom.

Quote:

It works with IE7 (under Linux+Wine) but not with IE6 (under Linux+Wine).

Quote:

It works in IE6/Windows, the hack I found uses some trickery to display it correctly in IE5.5/6. I think because you are using it through Wine that might have something to do with it.

Quote:

Now to image-map those buttons..

Quote:

Now to image-map those buttons..

Quote:
And the gimp file, if you want to change transparency or colours...

Quote:
Attached is a zip with a new default.xsl and some transparent fascia images in various colors (plus the GIMP source so you can make your own).

Quote:

Okay, I give up. What do I need to click on in Gimp to change the colour?

Quote:

Quote:

Okay, I give up. What do I need to click on in Gimp to change the colour?

Photoshop.

Quote:

Quote:
And the gimp file, if you want to change transparency or colours...

Okay, I give up. What do I need to click on in Gimp to change the colour?

Quote:
While you're around.. how do I get my button onmousexxx= events to work in MSIE? They work fine as-is in Firefox.

Quote:
There are two overlapping squares on the main toolbar window. Click on the one that's on top.

Quote:

Quote:

Okay, I give up. What do I need to click on in Gimp to change the colour?

Photoshop.

Bah. Gimp can do pretty much anything Photoshop can.

Except colour profiles.

Quote:
Okay, I give up. What do I need to click on in Gimp to change the colour?

Quote:

Quote:
Okay, I give up. What do I need to click on in Gimp to change the colour?

Nice job on cleaning up the edges, how do you do that? I did the corners manually, but your method looks smooth.

The basic idea is that selections follow pixel boundaries, so if you chop something up based on a selection, you end up with hard edges the way you did. The effect isn't so noticeable if the transition is between similar colours, but it's harsh when going between contrasting colours (or colour to transparency). Cleaning that up is simply a matter of manually applying a bit of anti-aliasing.

It's in the post above, but the simple version is that, after you make your selection for the interior, you can convert the selection to a path, and then stroke the path with a small fuzzy eraser with an opacity of 50% or so. The jaggies are still there -- that's just the nature of the square pixel beast -- but you can't see them because the eraser modifies their transparency so that they blend better.

Quote:
Attached is a simpler xcf file. To change the lens color, select the "lens color" layer and then use the bukkit tool to fill that layer with the foreground color. Slide the layer transparency slider to get the right amount of opaqueness, then save as png.

I went with the slightly more complex version because if you keep the text layer the same size as the fascia layer, the black background shows around the fascia corners. It's not noticeable in gimp, but it is on a web-page with a white background.

An alternative would be to have 4 layers -- the black background, the empeg_screen, the lens, and the fascia. The lens and black background are both just simple squares slightly smaller than the fascia -- heck, you could make them 2pixel square images, and stretch them with width and height attributes in the html.

Quote:
While you're around.. how do I get my button onmousexxx= events to work in MSIE? They work fine as-is in Firefox.

Quote:

I modified the wiki page with updated xcf files.

Quote:
Those files have some text on the background, instead of a plain background.

Quote:

It can actually go faster than 8X/second if you want,
giving a pretty near to real-time effect.

Quote:

Quote:
Those files have some text on the background, instead of a plain background.

The text is just to see what it would look like if it were in use.

Open up Dialogs->Layers and click the eye to hide the bottom text layer - then when you do a File-Save As... and select PNG, it will prompt you to export and save only the visible layers.

If you select the lens layer (I think it is named New Layer in that file) you can use the paint bucket tool to fill in different colors and tweak the layer transparency to make it look like you want.

Quote:
It would be nice to just have a small set of finished fascias without the jaggies
like the ones that I'm using right now.

Quote:
If we could somehow get javascript to catch keys from the PC keyboard (the arrow keys?) then those could be used for better gameplay..

Quote:

Bah. Gimp can do pretty much anything Photoshop can.

I don't doubt that, it is the user interface that baffles me, whenever I try using it I can never work out what is where. I'm not a frequent Photoshop user, but I can normally find things fairly quickly, at least compared to Gimp.

When I'm using Photoshop it is normally to do a quick job that takes less than five minutes. It typically goes like this:

- download and install latest version of Gimp in case there have been any improvements (5 minutes)
- attempt to work out how to do the job in Gimp (20 minutes)
- give up and do the job in Photoshop (5 minutes)

I wish Gimp made sense to me, as Photoshop is pretty much my only unlicensed bit of software nowadays. I justify it to myself on the basis that if I wasn't using Photoshop then I wouldn't buy any of their competition (because I would be fighting with Gimp)

Quote:

Quote:
Bah. Gimp can do pretty much anything Photoshop can.

I don't doubt that, it is the user interface that baffles me, whenever I try using it I can never work out what is where. I'm not a frequent Photoshop user, but I can normally find things fairly quickly, at least compared to Gimp.