#297489 - 16/05/2007 01:46
Re: Dumb Javascript Question
[Re: mlord]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Done, here is the Wiki page that I created to put up the images. There are three sizes, sized so you can use them with the /proc/empeg_screen.png file easily. The large size is very big, the screen image would have to be scaled to 640x160 to be used with it. It's from the full-size render that Rob posted about and Bitt found above. The medium size is good for a double-sized screen png, I've also included a .zip file with an exploded view from the wiki page. I integrated these into Mark's modification to the web interface (screenshot below). I also included the GIMP sources in xcf and a small size. These renders look MUCH better than the one we've been using from CG99's web interface. Tony, you may want to look at these for EmpegFace. 
|
|
Top
|
|
|
|
|
#297491 - 16/05/2007 15:40
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 13/02/2002
Posts: 3212
Loc: Portland, OR
|
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. (And then users can colour their empeg face whatever they like.) Does IE support transparent png files, yet?
edit: hmm... come to think of it, if the white portions were also 95% transparent (or something like that), then the text would pick up a tinge of colour from underneath...
|
|
Top
|
|
|
|
|
#297492 - 16/05/2007 17:49
Re: Dumb Javascript Question
[Re: canuckInOR]
|
carpal tunnel
Registered: 18/01/2000
Posts: 5683
Loc: London, UK
|
Quote:
Does IE support transparent png files, yet?
IE 7 does, yes, using the alpha channel, no less.
_________________________
-- roger
|
|
Top
|
|
|
|
|
#297493 - 16/05/2007 18:59
Hijack v472: transparent background for /proc/empeg_screen.png
[Re: canuckInOR]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
Quote:
Hmm... Makes me wonder if Hijack could use black as transparent in the .png file.
Hijack v472 is now released.
New in this version: the /proc/empeg_screen.png file now has a transparent background.
Note that this makes it difficult to view in a browser that uses a white background.
Also note that alpha channel transparency is incompatible with "colour mode 0" PNG files
(like this one). So we don't use alpha transparency here,
and therefore only the background is transparent, not the foreground.
My updated default.xsl stylesheet is attached, with a black background behind the VFD display.
Cheers
Edited by mlord (16/05/2007 19:27)
|
|
Top
|
|
|
|
|
#297494 - 16/05/2007 19:30
Re: Dumb Javascript Question
[Re: canuckInOR]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
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.
I'd be interested in knowing how to implement that.
Could you please hack my default.xsl CSS to do that with
a single .PNG background image + the empeg VFD image?
Thanks (in advance).
I don't think IE6 can handle any kind of PNG transparency, but I could be wrong on that.
EDIT: apparently I was wrong -- IE6 can do the basic transparent background PNG,
like we have here.
Edited by mlord (16/05/2007 19:32)
|
|
Top
|
|
|
|
|
#297495 - 16/05/2007 20:56
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 13/02/2002
Posts: 3212
Loc: Portland, OR
|
Uh oh. Put up or shut up time. I guess if I can waste an hour or two reading The Instigator, I can spend a bit of time on this, too...  See attached. In a nutshell, I replaced the four fascia images with a single image of the fascia, in which I cut the entire center of the screen out, so that it's transparency shows the background colour. Then, I used css's position:absolute to move the empeg_screen image to the correct location on the fascia. No clue if it works properly in IE, though. Cheers,
|
|
Top
|
|
|
|
|
#297496 - 16/05/2007 21:02
Re: Dumb Javascript Question
[Re: canuckInOR]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Two methods exist for layering images:
1. Set one as a background and the other in a foreground block
2. Use z-index and floating images to position two images correctly in the right layer in the foreground
I've never been successful at implementing either - some browser quirk always prevents me from getting it right in most systems. z-index is the most problematic and if I recall correctly the background/foreground image tricks have issues with positioning.
But, there might be a good way to do it today. Last time I tried to layer images it was a few years ago.
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.
|
|
Top
|
|
|
|
|
#297497 - 16/05/2007 21:05
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
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!
Cheers
|
|
Top
|
|
|
|
|
#297498 - 16/05/2007 22:13
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 13/02/2002
Posts: 3212
Loc: Portland, OR
|
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!
I don't see why not -- there's no difference which image is on top, an image is an image.
|
|
Top
|
|
|
|
|
#297499 - 16/05/2007 22:17
Re: Dumb Javascript Question
[Re: canuckInOR]
|
carpal tunnel
Registered: 13/02/2002
Posts: 3212
Loc: Portland, OR
|
And the gimp file, if you want to change transparency or colours...
Attachments
299287-lens.xcf (800 downloads)
|
|
Top
|
|
|
|
|
#297500 - 16/05/2007 22:23
Re: Dumb Javascript Question
[Re: mlord]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Ho-leee sheet... it works. In Firefox anyway. Good thinking, Mark. I'm going to eat dinner then sit back down and get a working version of this, then maybe someone can test in IE7. 
|
|
Top
|
|
|
|
|
#297501 - 16/05/2007 22:32
Re: Dumb Javascript Question
[Re: canuckInOR]
|
carpal tunnel
Registered: 13/02/2002
Posts: 3212
Loc: Portland, OR
|
Ugh. Those were bad... new lens image files that look a bit nicer, once overlayed on the fascia.
Attachments
299290-lens.zip (428 downloads)
|
|
Top
|
|
|
|
|
#297502 - 17/05/2007 02:51
Re: Dumb Javascript Question
[Re: canuckInOR]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
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). This worked better than I thought it would, thanks Mark and canuckinOR. I'll add these images up to the wiki, too. 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?
Attachments
299299-ewl_transparent.zip (448 downloads)
|
|
Top
|
|
|
|
|
#297504 - 17/05/2007 08:48
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 15/08/2000
Posts: 4859
Loc: New Jersey, USA
|
I swear - I only stepped away for a minute...
Wow!!!
_________________________
Paul Grzelak
200GB with 48MB RAM, Illuminated Buttons and Digital Outputs
|
|
Top
|
|
|
|
|
#297505 - 17/05/2007 10:23
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
Way cool, Mark!
Now to image-map those buttons..
|
|
Top
|
|
|
|
|
#297506 - 17/05/2007 10:53
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
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.
Edited by mlord (17/05/2007 10:54)
|
|
Top
|
|
|
|
|
#297507 - 17/05/2007 11:13
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
Quote:
It works with IE7 (under Linux+Wine) but not with IE6 (under Linux+Wine).
I fiddled with the default.xsl file on IE6, and it seems that this test is failing:
if ( ... && document.body.filters)) {
I suppose that must be some kind of IE6 add-on that I'm missing (?).
[EDIT]
Mmm.. the required system.reg entries are there, as are the DLLs.
Turning on "script debugging" in IE6 gives this:
Line: 82
Char: 4
Error: Could not complete the operation due to error 80040154.
Code: 0
URL: http://10.0.0.8/?FID=101&EXT=.xml
Apparently, "80040154" means.. "class not registered"
[/EDIT]
Cheers
Edited by mlord (17/05/2007 11:39)
|
|
Top
|
|
|
|
|
#297509 - 17/05/2007 13:27
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
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.
Yeah, all of the pieces are there in IE6/Wine, but they just don't function for this.
What really matters is that it does work on IE6/Windows,
since IE7 is restricted distribution.
I do find it odd that I can install/run IE7 (well, close enough) with Wine,
but I cannot use it under standard WinXP without enabling the MS-Spyware
feature aka WGA Validation.
Cheers!
|
|
Top
|
|
|
|
|
#297510 - 17/05/2007 14:46
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
Quote:
Now to image-map those buttons..
EDIT:discarded attachment .. a better one was posted below
Here (attached) is my first hack at image maps.
This modified default.xsl file assigns short-presses
to the buttons and knob. Clicking on the outer ring of the
knob gives Left/Right rotation actions, one per click.
Gotta improve this with long-press capabilities, but for now..
Enjoy!
Edited by mlord (17/05/2007 15:52)
|
|
Top
|
|
|
|
|
#297511 - 17/05/2007 15:51
Now with button presses; Hijack v473
[Re: mlord]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
Quote:
Now to image-map those buttons..
Okay, here is a much improved version.
This one holds the buttons down for as long as the mouse button is held down on them.
>>> This version requires Hijack v473 (or newer). <<<
I added a "button.R" suffix to the Hijack v473 button label decoder,
to allow descriptive entries of button Release codes
(rather than having to use the raw hex values).
So, upgrade Hijack, install this replacement default.xsl file, and enjoy!
|
|
Top
|
|
|
|
|
#297512 - 17/05/2007 16:22
Re: Dumb Javascript Question
[Re: canuckInOR]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
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?
Thanks.
|
|
Top
|
|
|
|
|
#297513 - 17/05/2007 16:53
Re: Dumb Javascript Question
[Re: cushman]
|
carpal tunnel
Registered: 13/02/2002
Posts: 3212
Loc: Portland, OR
|
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).
There are some really nasty jaggies around the lens. I've cleaned that up on the attached gimp file.
I'm guessing you used the fuzzy selection tool, to select the center portion, and just cut that region out. If you grow the selection a bit (turn on antialiasing, and feather edges with a radius of 3 or 4, and do the selection a couple of times), you can then get a slightly better selection. Then, open up the Paths dialog, and save the selection to a path. Now, you can hit cut to get rid of the center. In the eraser options, pick the smallest fuzzy eraser you can find, and set the opacity down to somewhere between 30-50%. Then, go back to your paths, and select that path you just made. Do the "stroke path" with "stroke using paint tool" turned on, and set to eraser. Now the edges of the fascia will be slightly transparent around the interior, and blend nicely with the lens.
The lens, I just made a big square. To get the actual lens shape, I made a new layer from the fascia, and converted it to a black image by changing the contrast/brightness, applying some paint touch-ups, and then inverting the colour. Next, add a layer mask to the lens, set to full opacity (white), and copy/paste the pure-black fascia. Then, apply layer mask. Tada... now you have a lens that matches the interior of the fascia.
The way I'd composite the images on the webpage is to use the "fascia" layer first (which has transparent corners, to show the webpage background color), then the /proc/empeg_screen.png image (which just gets moved into the correct location), then put the "lens" layer on last.
|
|
Top
|
|
|
|
|
#297514 - 17/05/2007 16:55
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
Quote:
Okay, I give up. What do I need to click on in Gimp to change the colour?
Photoshop.
_________________________
Remind me to change my signature to something more interesting someday
|
|
Top
|
|
|
|
|
#297515 - 17/05/2007 16:56
Re: Dumb Javascript Question
[Re: canuckInOR]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
While you're around.. how do I get my button onmousexxx= events to work in MSIE? They work fine as-is in Firefox.
??
|
|
Top
|
|
|
|
|
#297516 - 17/05/2007 16:57
Re: Dumb Javascript Question
[Re: andy]
|
carpal tunnel
Registered: 29/08/2000
Posts: 14496
Loc: Canada
|
Quote:
Quote:
Okay, I give up. What do I need to click on in Gimp to change the colour?
Photoshop.
I don't know how to do it there, either. But I suspect the solution is the same for both.
|
|
Top
|
|
|
|
|
#297517 - 17/05/2007 17:07
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 25/12/2000
Posts: 16706
Loc: Raleigh, NC US
|
There are two overlapping squares on the main toolbar window. Click on the one that's on top.
_________________________
Bitt Faulk
|
|
Top
|
|
|
|
|
#297518 - 17/05/2007 17:27
Re: Dumb Javascript Question
[Re: mlord]
|
carpal tunnel
Registered: 13/02/2002
Posts: 3212
Loc: Portland, OR
|
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?
To start, if you haven't found the Layers dialog, open that up (Ctrl-L, or Dialogs->Layers), and select the lens layer. Before starting to play, I'd suggest making a duplicate layer (click the "two pages" icon next to the anchor, in the Layers dialog). You might want to turn off the visibility of the other layers, by clicking on the eye icon to the left of the layer thumbnail and name, so you can see the exact color you're getting (or not, if you'd do the changes while seeing how it'll look when composited over the fascia).
After that, there are a number of options, but the easiest (since we're dealing with a solid color) is to use one of the filters -- right click on the image to get your context-menu, and select Filters->Colors->Map->Color Exchange....
That pops up a dialog with a preview area, a "From Color" area, and a "To Color" area. Click the blue swatch of colour in the preview area, and then twiddle the sliders (RGB values from 0 to 1) in the bottom area. Click OK when you're happy. If you prefer to not twiddle sliders, you can click the colour swatch in the "To Color" area, instead, which will pop up another dialog, where you can have a whole bunch of different options for picking colours -- gimp's crosshairs method, a colour triangle, some sort of paintbrush thingy I haven't figured out, and 0-255 numerical entry boxes (in either HSV or RGB).
If that's not clear, let me know what part you're stuck on, and I'll try to clarify...
|
|
Top
|
|
|
|
|
|
Previous Topic
Index
