Board Logo

Songlist background transparency
Pirk - 3-26-2004 at 12:02 AM

Could you allow transparency for the songlist html page? (i would like to turn some parts of the current white background into a transparent color in the songlist.dis file) In order it be possible to produce some good transparency effects with the image displayed behind the songlist html page?
I would like to make a skin which could display non-transparent song titles over a beautiful photo in the background (like in the albumlist). :cool:


Fishy - 3-26-2004 at 01:09 AM

i would take a huge interest in this. I hope that the new skinning system will be able to apply transparency to different actions. Maybe especially to the drag and drop functions of albums--> playlist and such. It Would be really cool, and open some estetic possibilities that one could love :)

At least I hope that the new skinning system will include something like the current dis files for the albumslist and playlist as well. Reminds me of enlightenment for linux, where one can change the gui in whatever way you like through configfiles. All graphics throughout in the program is available to edit and abuse :)

Let's hope that Audiosoft listen to our small prayers :)


Pirk - 3-26-2004 at 01:41 AM

Concerning the transparency of the songlist, i think (well... i hope) Audiosoft can easily allow that! That must be a simple configuration to change somewhere in the program.

Normally, the .dis files we hope are planned... but the question is: in which delay? :)


Fishy - 3-26-2004 at 02:36 AM

what makes ej unique and superior compared with for example Itunes and musicmatch jukebox is it's extreamly configurable, intutive and good looking interface. So I would not be surprised if transparency and alpha blending are used in some sexy ways in 4.0, whenever it arises from the horizon

And it's always worth waiting as long as you're waiting for something good to happen ;)


junk - 3-26-2004 at 07:24 AM

I would think this is already possible. Internet Explorer, which eJ uses for its display supports alpha blending in backgrounds, and you can specify the amount of transparency.

I think it's just a matter of implementing this in the .dis file. Try it out (with our artic design project ;))


Pirk - 3-26-2004 at 09:43 AM

Quote:
Message original : junk
I would think this is already possible. Internet Explorer, which eJ uses for its display supports alpha blending in backgrounds, and you can specify the amount of transparency.

I think it's just a matter of implementing this in the .dis file. Try it out (with our artic design project ;))


Exactly, i've already tried to use alpha blending in the .dis file, but with no sucess... the transparent color still appear as white in eJukebox, so i can't see the Northern Lights i've put back. :(

Junk, CURRENTLY can you successfully use alpha blending in your eJukebox .dis file? Or rather i must wait Audiosoft allow that...


Pirk - 3-26-2004 at 10:34 AM

Thanks for your answer Audiosoft. So it seems that's not so simple we thought...

I would want to use alpha blending with a large font to make a good looking HTPC skin where i could display the "now playing" album in the songlist. In this case, the songlist remain still short as it contain only one album at once. So i think alpha blending would not slow down to much eJukebox... I would be curious to try that!


Audiosoft - 3-26-2004 at 11:27 AM

Pirk,
I just realized that I jumped to the wrong conclusion so have deleted my posts and one of your replies. I assumed that, since no one claimed success, the problem I described was occurring ;)

Good news is: all you have to do to set transparency is add the following to the .DIS file under the element name:

filter: Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?);
or simply...
filter: Alpha(Opacity=50);

Change the "50" to whatever percentage you want to make the element transparent.

You can find a bunch of other filter types you can add to the .dis file here: http://www.xentrik.net/css/filters.php

We are gonna have to add another .name to the dis file for you to be able to get rid of the default white background behind the song titles in order to make that transparent.

If you want to make the entire songlist alpha blend with the songlist background image then add the following to the very top of the .DIS file:
table {filter: Alpha(Opacity=50);}


junk - 3-26-2004 at 11:32 AM

Audiosoft, how about letting eJ scan for .dis files at startup, and let the user select between the ones found? As things are now, it's a shame having to use and select between the three standard names.

And now that we have you here, ;) , how about making the rest of eJ's graphical elements (not only the html ones) available for editing?

This would make eJ a lot more flexible for those who want to intergrate it in larger context, such as in a physical jukebox project. As well as pleasing everyone who just want a different skin to suit their moods.


Audiosoft - 3-26-2004 at 11:37 AM

You can already edit the graphics in the images folder for some of the non-html elements....we are working to make the rest of the images that make up the interface accessible in that folder.

Quote:

how about letting eJ scan for .dis files at startup, and let the user select between the ones found? As things are now, it's a shame having to use and select between the three standard names.

Thats the plan. We are going to make the dis files with different names get added to the menu just like the info links work in the next version when differnt [????] names are in the quicklinks.ini file.


junk - 3-26-2004 at 11:39 AM

Yes, that is true! Come to think of it, i did it last night :) http://www.audiosoft.net/forums/viewthread.php?tid=706

Great, looking forward to it.

All we need then is a option to select which imagedir that eJ should use. Then we have a skinning system.


Pirk - 3-26-2004 at 12:41 PM

Quote:
Message original : Audiosoft
Pirk,
I just realized that I jumped to the wrong conclusion so have deleted my posts and one of your replies. I assumed that, since no one claimed success, the problem I described was occurring ;)

Good news is: all you have to do to set transparency is add the following to the .DIS file:

filter: Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?);
or simply...
filter: Alpha(Opacity=50);

Change the "50" to whatever percentage you want to make the element transparent.

You can find a bunch of other filter types you can add to the .dis file here: http://www.xentrik.net/css/filters.php

We are gonna have to add another .name to the dis file for you to be able to get rid of the default white background behind the song titles in order to make that transparent.


Hmm, really Audiosoft? Following your first reply, that's a unexpected but nevertheless very good news!! :D You can say that you know how to keep your users in abeyance. ;) So i will try your "fine trick" very soon!

Well, at least if our "deleted" posts can do things to evolve... That's great!

Thank you very much for a your quick feedback. :)


Pirk - 3-26-2004 at 01:59 PM

Junk, Fishy, and the others too! :

Now, we have a lot on our plate... to make good skins! :D ;)


Pirk - 3-26-2004 at 05:48 PM

Quote:
Message original : Audiosoft

We are gonna have to add another .name to the dis file for you to be able to get rid of the default white background behind the song titles in order to make that transparent.

If you want to make the entire songlist alpha blend with the songlist background image then add the following to the very top of the .DIS file:
table {filter: Alpha(Opacity=50);}


These 2 last things you say interest me especially:

The "table" instruction is very powerfull, but here the filter also apply to the text! so the result is not ideal: everything become mixed without any contrast...
I would like to keep the text totally NON-transparent even though the rest of the songlist remain totally transparent.
Is there a global instruction that could make that? Or should i wait you suppress the current default white background in the next version of eJukebox?

Thanks for your help.


Audiosoft - 3-26-2004 at 11:25 PM

Unfortunately there is no way to apply a filter to anything without it also effecting the text contained in the element.

We are going to make it so the elements no longer have a default white background. This way when you do not specify a background image or color for an element in the .DIS it will simply show 100% through to the page background image. That way it does not need to use extra CPU because it will not be using a filter and it will also leave the text unchanged.

Here is an example of how filters can do some cool things but can also slow the page's response to mouseover movement. Add this under .artisthide in the DIS for an interesting effect to the left column:

filter: Alpha(Opacity=0, FinishOpacity=100, Style=3);


Pirk - 3-26-2004 at 11:57 PM

Ohhh! very surprising effect! :D

I've made myself some tests using different filters (shadow on text...) - thanks to your very instructive web link! - and yes, that can be well but that slow down the display enough considerably as soon as the page is a bit long! So the transparency you plan to add by default will be very useful. Thanks for that.


Pirk - 3-27-2004 at 02:35 AM


junk - 3-27-2004 at 10:07 AM

Good work, Pirk! I see you have found an image of northern lights as well, as we were talking about in http://www.audiosoft.net/forums/viewthread.php?tid=706

I think it's time we exchanged .dis files again. :) Send me an u2u and we'll find a way to do it.


Pirk - 3-27-2004 at 10:55 AM

Thanks junk! Yes, it's a Norwegian northern lights image! No problem to exchange the files, i will send you a u2u message soon... :)


Fishy - 3-27-2004 at 03:09 PM

Pirk. Really nice work :)) May I have that dis file as well? All it took was a french ;)


Pirk - 3-27-2004 at 04:01 PM

Thanks. Of course you can, Fishy! :) I send it to you by u2u... Be careful it's still buggy and not finished!

NB: I think there are also northern lights in Canada... ;)


Fishy - 4-13-2004 at 07:54 PM

yeah you're right. Every part of the world which lies over the polarcircle can enjoy this phenomenon.

That is Canada, Alaska, Northern Norway, Northern Sweden, Northern Finland parts of Russia and the north pole if I am not wrong ;)


Audiosoft - 4-13-2004 at 08:15 PM

In v3.75, you may use the following in the .dis file:

table {background-color: transparent;}

This will make the default background change from white to transparent...so that if you delete the background declarations for the title, artisthide, etc in the .dis it will show 100% through to the songlist background image for that section.

You may also add the following to change the scrollbar colors:

body {
scrollbar-face-color: #6191FF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #EDF0F0;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #E9E9ED;
scrollbar-arrow-color: #FFFFFF
}

Neither of those will work on versions before v3.75.

With v3.75 you gain the power to override any of eJukebox's default display definitions for the songlist via the .dis file.
So you can also do stuff like change the properties of the background image:

body {
background-image : url("image.jpg");
background-position: 16px 100%;

background-attachment : fixed;
background-attachment : scroll;

background-repeat : repeat;
background-repeat : no-repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
}


Pirk - 4-13-2004 at 08:55 PM

Hi Fishy!

Thanks for your "infos" about regions where people can enjoy northern lights. :o ;)


Audiosoft,

Thank you for give us further information concerning background images and scrollbar colors in v3.75.

Another thing:
I would be interested it would be still possible to specify a whole directory for the background image - like i can do that now using the "table" instruction in the .dis file. I hope in v3.75 that will not be only a specific and static name in the "images" directory.
In this way i could link the eJukebox songlist background to a third party program (a winamp plug-in) which put an image of the current song playing in winamp in a specific place. I currently link the songlist background puting this path in the .dis file...

Thanks.


Audiosoft - 4-13-2004 at 08:59 PM

You can replace "image.jpg" with whatever image path you want. That was just an example. You can change it to anything just like your "table" image.


Pirk - 4-13-2004 at 09:35 PM

OK Audiosoft, great for that!


So now, the only thing which be lacking, would be a way to toggle eJukebox in a kind of "new mode" where it always bring up to date the songlist, displaying in it the now playing album (like when i click on the cover in the player) and its own cover in the background (none work needed for that since it's already possible!)... A dream!

You only need to add a function that reproduce the same effect as if "someone" clicked on the cover each time the song change... You see? A kind of "Live update" for the songlist. Interesting, no?


Pirk - 4-13-2004 at 10:21 PM

Another question concerning the songlist background image:

Is it possible to resize the image or to change the contrast using a specific instruction in the .dis file? Or it's only possible if it's written directly into the html page, so inaccessible for us eJukebox common users...?