Skip to main content

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: Album Art with Jewel Case (Read 17540 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Album Art with Jewel Case

Hello,

i see people posting skins that use a cover art display that adds a jewel case image to the album art. How is this done?
Sorry for this question, but i cannot find a component that seems to do this.

Cheers,
nixda

Album Art with Jewel Case

Reply #1
panel stack splitter (columns UI only) or WSH panel mod (works in DUI and CUI) are capable of doing this. if nobody posts anything in the meantime, i might knock up a WSH panel mod script this evening when i get in.


 

Album Art with Jewel Case

Reply #4
thanks to everyone replying.
i had a quick look into WSH panel mod and i'm afraid it's way beyond my capacities to create something on my own here.

marc - thank you very much for your example, I'll have a look into it and see how much i can make of it, i should be able to modify a working skript to my liking... I'll come back later and tell how i am getting along.


however, i have something else on my mind.

I did have a look into the panel stack splitter and i like it's versatility, so i started to replace most standard splitters in my layout with it.
I understand that it is possible to place components freely, even overlapping others...?... how do i make it stay on top and not be overdrawn/cut by the underlying component?
In my layout i use several layers of tabs, which leaves an unoccupied space in the top right part of the window (right under the toolbar), i'd like to place a 'now playing' info-element there but it gets cut off by the tab component under it.

Album Art with Jewel Case

Reply #5
now i finally had a look into the sample, but my coding knowledge is, well, limited...

Is it possible to have it not in a fixed size, but variable, determined by the panel size?
Is it possible to keep the aspect ratio of the source? I don't mind that this won't fill up the case completely...
Is it eventually also possible to check the source file's aspect ratio, and if it is beyond a set ratio to draw only the source without the case? (thus digipak covers will be displayed without the case, determined by their aspect ratio)


I also checked the other samples (mostly to learn some coding basics, but it's beyond me...)
I particularly like the thumbs panels. Is iut possible to set the playing file's folder as default? i know i can assign a custom folder (and did so using $replace(%path%,%filename_ext%,)), but can i set this in the code as default?


Album Art with Jewel Case

Reply #6
all those things are possible. implementing it is another matter. it would have been easier if the area left by the case template for the cover was square as i've already written functions to convert non square images into squares and keeping aspect. but because it's rectangle, i was too lazy to work out the calculations. 

Album Art with Jewel Case

Reply #7
all those things are possible. implementing it is another matter. it would have been easier if the area left by the case template for the cover was square as i've already written functions to convert non square images into squares and keeping aspect. but because it's rectangle, i was too lazy to work out the calculations. 



I'd like to have a try at writing some calculating routines (clumsy as they will be...), but i don't know how to get the measures of an image. can you tell me how to obtain these in the code?

and a question concerning the case image - is there a need for the white/invisible border? can i crop it away or is there a good reason for it? it seems to me that any resizing will get more complex then neccessary if the border has to be considered...


Album Art with Jewel Case

Reply #8
you can comment out the line for the gloss image if you don't want it. but all the template images are the same size so it doesn't add any complexity having it there.

as for the image dimensions, you can start by changing this line of code (line 28)

Code: [Select]
img && gr.DrawImage(img, pos_x + 36, pos_y + 31, 251, 239, 0, 0, img.width, img.height);


to

Code: [Select]
if(img) {
  var your_width = img.width;
  var your_height = img.height;
  //calculations go here.....
  gr.DrawImage.....
}


notes from the docs on DrawImage....

Code: [Select]
void DrawImage(IGdiBitmap, dstX, dstY, dstW, dstH, srcX, srcY, srcW, srcH, angle = 0, alpha = 255);


Album Art with Jewel Case

Reply #9
this is my first implementation, based on marc's sample.
I don't know much about coding, this is pretty much the result of a trial-and-error process.
Maybe someone else will like it, maybe someone can improve it.

However, here it is.
You will need the 'sample.zip' posted above by marc2003!!!!!!!!!!!!!

The case and cover-art will be resized according to the panel size, aspect ratio will be preserved.
On a given aspect-ratio-limit the cover-art will not be displayed any more, only the cover-art, thus representing digipak covers which won't look good inside a case image (I think).

Code: [Select]
// ==PREPROCESSOR==
// @import "%fb2k_profile_path%\marc2003\common.js"
// @name "CD Jewel Case"
// @author "marc2003"
// ==/PREPROCESSOR==
//
// modified for resizing by atumno
//

//Aspect-Ratio-Limit for Cover-Art to be drawn with a CD-Case
var aspect_ratio_limit_1 = 0.9
var aspect_ratio_limit_2 = 1.1

//If Cover-Art is drawn without CD-Case it will be resized slightly to leave a border.
//The amount of resizing can be adjusted here.
var margin_on_nocase = 0.92

//Case-Image: images_path + "case.png"
//Measures of Case-Image:
//600 x 527
//Measures of Cover-Area:
//ca. 488 x 476
//Hinge-Offset:
//ca. 72
var case_cover_area_h = 476
var case_cover_area_w = 488
var case_rim = 72



var img = null;

on_item_focus_change();
if(fb.IsPlaying) update_image();

function on_size() {
    ww = window.Width;
    wh = window.Height;
}

function on_paint(gr) {

    var g_font = gdi.Font("Segoe UI", 12, 0);
    var color = RGB(200,0,0);

    var case_h = gdi.Image(images_path + "case.png").height
    var case_w = gdi.Image(images_path + "case.png").width

    var casecalc = null

    gr.FillSolidRect(0, 0, ww, wh, g_backcolor);

    if ((wh / case_h) < (ww / case_w)) {
        casecalc = (wh / case_h)
        }
        else {
        casecalc = (ww / case_w)
        }

        pos_x = Math.round((ww - (case_w * casecalc)) / 2);
        pos_y = Math.round((wh - (case_h * casecalc)) / 2);


        if (g_metadb) {

            scale(gr, gdi.Image(images_path + "shadow.png"),  pos_x, pos_y , (case_w * casecalc), (case_h * casecalc), "min");
            scale(gr, gdi.Image(images_path + "case.png"), pos_x, pos_y, (case_w * casecalc), (case_h * casecalc), "min");

            if(img) {
                var cover_h = img.height;
                var cover_w = img.width;

                var case_on = 1

                if ((cover_w / cover_h) <= 0.9) {case_on = null}
                if ((cover_w / cover_h) >= 1.1) {case_on = null}
                if ((cover_w / cover_h) <= aspect_ratio_limit_1) {case_on = null}
                if ((cover_w / cover_h) >= aspect_ratio_limit_2) {case_on = null}

                var cover_pos_x = null
                var cover_pos_y = null
                var cover_resize_h = null
                var cover_resize_w = null

                if (case_on) {
                    cover_pos_x = Math.round((ww - ((case_cover_area_w - ((case_rim) / 2)) * casecalc)) / 2)
                    cover_pos_y = Math.round((wh - (case_cover_area_h * casecalc)) / 2)

                    if (img.width > img.height) {
                        cover_resize_h = (case_cover_area_w * casecalc) / (img.width / img.height)
                        cover_resize_w = case_cover_area_w * casecalc
                        } else {
                        cover_resize_h = case_cover_area_h * casecalc
                        cover_resize_w = (case_cover_area_h * casecalc) * (img.width / img.height)
                        }

                    gr.DrawImage(img, cover_pos_x, cover_pos_y, cover_resize_w, cover_resize_h, 0, 0, img.width, img.height);
                    scale(gr, gdi.Image(images_path + "semi.png"), pos_x, pos_y , (case_w * casecalc), (case_h * casecalc), "min");
                    scale(gr, gdi.Image(images_path + "gloss.png"), pos_x, pos_y , (case_w * casecalc), (case_h * casecalc), "min");
                    } else {
                    gr.FillSolidRect(0, 0, ww, wh, g_backcolor);


                    if ((wh / img.height) < (ww / img.width)) {
                        casecalc = (wh / img.height)
                        }
                        else {
                        casecalc = (ww / img.width)
                        }

                    cover_resize_w = img.width
                    cover_resize_h = img.height
                    //cover_resize_h = img.height

                    if (img.width > img.height) {
                        cover_resize_h = (img.width * casecalc) / (img.width / img.height) * margin_on_nocase
                        cover_resize_w = (img.width * casecalc) * margin_on_nocase
                        } else {
                        cover_resize_h = (img.height * casecalc) * margin_on_nocase
                        cover_resize_w = (img.height * casecalc) * (img.width / img.height) * margin_on_nocase
                        }
                    pos_x = Math.round((ww - cover_resize_w) / 2);
                    pos_y = Math.round((wh - cover_resize_h) / 2);
                    gr.DrawImage(img, pos_x, pos_y, cover_resize_w, cover_resize_h, 0, 0, img.width, img.height);
                    }
            }

        } else {
                gr.GdiDrawText("[no selection]", g_font, g_textcolor, 0, 0, ww, wh, DT_VCENTER | DT_CENTER | DT_WORDBREAK | DT_CALCRECT | DT_NOPREFIX);
            }

        }

function on_playback_new_track() {
    on_item_focus_change();
    update_image();
}

function on_metadb_changed() {
    if(fb.IsPlaying) return;
    update_image();
}

function update_image() {
    if(!g_metadb) return;
    img && img.Dispose();
    utils.GetAlbumArtAsync(window.ID, g_metadb, 0);
}

function on_get_album_art_done(metadb, art_id, im, ip) {
    img = im;
    img_path = ip;
    window.Repaint();
}

function on_mouse_lbtn_dblclk() {
    //if(!g_metadb || !img) return;
    //if("file://" + img_path == g_metadb.RawPath) {
    //    fb.RunContextCommandWithMetadb("Open Containing Folder", g_metadb);
    //} else {
    //    try {WshShell.Run("\"" + img_path + "\""); } catch(e) {}
    //}
}

Album Art with Jewel Case

Reply #10
Udated Code, stupid mistake in the last one.
Sorry for a new post, but it seems i cannot edit the last one.

Code: [Select]
// ==PREPROCESSOR==
//// @import "%fb2k_profile_path%\marc2003\common.js"
// @import "%fb2k_profile_path%\WSH_components_marc2003\common.js"
// @name "CD Jewel Case"
// @author "marc2003"
// ==/PREPROCESSOR==
//
// modified for resizing by atumno
//

//Aspect-Ratio-Limit for Cover-Art to be drawn with a CD-Case
var aspect_ratio_limit_1 = 0.9
var aspect_ratio_limit_2 = 1.1

//If Cover-Art is drawn without CD-Case it will be resized slightly to leave a border.
//The amount of resizing can be adjusted here.
var margin_on_nocase = 0.92

//Case-Image: images_path + "case.png"
//Measures of Case-Image:
//600 x 527
//Measures of Cover-Area:
//ca. 488 x 476
//Hinge-Offset:
//ca. 72
var case_cover_area_h = 476
var case_cover_area_w = 488
var case_rim = 72



var img = null;

on_item_focus_change();
if(fb.IsPlaying) update_image();

function on_size() {
    ww = window.Width;
    wh = window.Height;
}

function on_paint(gr) {

    var g_font = gdi.Font("Segoe UI", 12, 0);
    var color = RGB(200,0,0);

    var case_h = gdi.Image(images_path + "case.png").height
    var case_w = gdi.Image(images_path + "case.png").width

    var casecalc = null

    gr.FillSolidRect(0, 0, ww, wh, g_backcolor);

    if ((wh / case_h) < (ww / case_w)) {
        casecalc = (wh / case_h)
        }
        else {
        casecalc = (ww / case_w)
        }

        pos_x = Math.round((ww - (case_w * casecalc)) / 2);
        pos_y = Math.round((wh - (case_h * casecalc)) / 2);


        if (g_metadb) {

            scale(gr, gdi.Image(images_path + "shadow.png"),  pos_x, pos_y , (case_w * casecalc), (case_h * casecalc), "min");
            scale(gr, gdi.Image(images_path + "case.png"), pos_x, pos_y, (case_w * casecalc), (case_h * casecalc), "min");

            if(img) {
                var cover_h = img.height;
                var cover_w = img.width;

                var case_on = 1

                if ((cover_w / cover_h) <= aspect_ratio_limit_1) {case_on = null}
                if ((cover_w / cover_h) >= aspect_ratio_limit_2) {case_on = null}
                if ((cover_w / cover_h) <= aspect_ratio_limit_1) {case_on = null}
                if ((cover_w / cover_h) >= aspect_ratio_limit_2) {case_on = null}

                var cover_pos_x = null
                var cover_pos_y = null
                var cover_resize_h = null
                var cover_resize_w = null

                if (case_on) {
                    cover_pos_x = Math.round((ww - ((case_cover_area_w - ((case_rim) / 2)) * casecalc)) / 2)
                    cover_pos_y = Math.round((wh - (case_cover_area_h * casecalc)) / 2)

                    if (img.width > img.height) {
                        //cover_resize_h = (case_cover_area_w * casecalc) / (img.width / img.height)
                        //cover_resize_w = case_cover_area_w * casecalc
                        cover_resize_h = case_cover_area_h * casecalc
                        cover_resize_w = case_cover_area_w * casecalc
                        } else {
                        //cover_resize_h = case_cover_area_h * casecalc
                        //cover_resize_w = (case_cover_area_h * casecalc) * (img.width / img.height)
                        cover_resize_h = case_cover_area_h * casecalc
                        cover_resize_w = case_cover_area_w * casecalc
                        }

                    gr.DrawImage(img, cover_pos_x, cover_pos_y, cover_resize_w, cover_resize_h, 0, 0, img.width, img.height);
                    scale(gr, gdi.Image(images_path + "semi.png"), pos_x, pos_y , (case_w * casecalc), (case_h * casecalc), "min");
                    scale(gr, gdi.Image(images_path + "gloss.png"), pos_x, pos_y , (case_w * casecalc), (case_h * casecalc), "min");
                    } else {
                    gr.FillSolidRect(0, 0, ww, wh, g_backcolor);


                    if ((wh / img.height) < (ww / img.width)) {
                        casecalc = (wh / img.height)
                        }
                        else {
                        casecalc = (ww / img.width)
                        }

                    cover_resize_w = img.width
                    cover_resize_h = img.height
                    //cover_resize_h = img.height

                    if (img.width > img.height) {
                        cover_resize_h = (img.width * casecalc) / (img.width / img.height) * margin_on_nocase
                        cover_resize_w = (img.width * casecalc) * margin_on_nocase
                        } else {
                        cover_resize_h = (img.height * casecalc) * margin_on_nocase
                        cover_resize_w = (img.height * casecalc) * (img.width / img.height) * margin_on_nocase
                        }
                    pos_x = Math.round((ww - cover_resize_w) / 2);
                    pos_y = Math.round((wh - cover_resize_h) / 2);
                    gr.DrawImage(img, pos_x, pos_y, cover_resize_w, cover_resize_h, 0, 0, img.width, img.height);
                    }
            }

        } else {
                gr.GdiDrawText("[no selection]", g_font, g_textcolor, 0, 0, ww, wh, DT_VCENTER | DT_CENTER | DT_WORDBREAK | DT_CALCRECT | DT_NOPREFIX);
            }

        }

function on_playback_new_track() {
    on_item_focus_change();
    update_image();
}

function on_metadb_changed() {
    if(fb.IsPlaying) return;
    update_image();
}

function update_image() {
    if(!g_metadb) return;
    img && img.Dispose();
    utils.GetAlbumArtAsync(window.ID, g_metadb, 0);
}

function on_get_album_art_done(metadb, art_id, im, ip) {
    img = im;
    img_path = ip;
    window.Repaint();
}

function on_mouse_lbtn_dblclk() {
    //if(!g_metadb || !img) return;
    //if("file://" + img_path == g_metadb.RawPath) {
    //    fb.RunContextCommandWithMetadb("Open Containing Folder", g_metadb);
    //} else {
    //    try {WshShell.Run("\"" + img_path + "\""); } catch(e) {}
    //}
}

Album Art with Jewel Case

Reply #11
Can anyone help me with this? I can't seem to get it to work.

I installed the WSH panel mod, and I added a new panel and pasted the above script in. I get the error message:

"Scripting Engine Initialization Failed (CD Jewel Case by marc2003, CODE: 0x80020101)
Check the console for more information (Always caused by unexcepted script error)."

I quickly glanced at the script and saw the following line:

"//Case-Image: images_path + "case.png""

There is no case.png in the images folder.

Thanks



Album Art with Jewel Case

Reply #13
I don't quite understand the above post. There is no case.png in the samples.zip file - that was my point !


Album Art with Jewel Case

Reply #15
Thanks!

Now I have the case.png, but when I run the script I get the following error:

Scripting Engine Initialization Failed (CD Jewel Case by marc2003, CODE: 0x80020101)
Check the console for more information (Always caused by unexcepted script error).

In the console it says this:

WSH Panel Mod ({332B2D37-7FF8-445C-ACFF-70628B30D5D6}): initialized in 1 ms
WSH Panel Mod (CD Jewel Case by marc2003): Parsing file "C:\Users\Dan\AppData\Roaming\foobar2000\\WSH_components_marc2003\common.js": Failed to load
Error: WSH Panel Mod (CD Jewel Case by marc2003): Microsoft JScript runtime error:
Object expected
Ln: 34, Col: 1
<source text only available at compile time>

Any ideas? Might it be that the script is looking for Foobar on my c: under the users folder? I have it on my d:.

Album Art with Jewel Case

Reply #16
Quote
WSH Panel Mod (CD Jewel Case by marc2003): Parsing file "C:\Users\Dan\AppData\Roaming\foobar2000\\WSH_components_marc2003\common.js": Failed to load


i'm not sure how you did that. 

that file should be located at

Quote
C:\Users\Dan\AppData\Roaming\foobar2000\marc2003\common.js


if you extracted the zip as per the bundled readme, you shouldn't have any problems????

Album Art with Jewel Case

Reply #17
Looks like he's using nixda's script in Post #11, I can see that mistake in line 3, I think.
He should try the original "cd jewel case.txt" instead.
It's working for me here...

Dennis

edit: I downloaded my copy on Jan. 27, not sure if the original "cd jewel case.txt" script might be different from the current download, probably not.

Album Art with Jewel Case

Reply #18
Thanks for the comments, but if anyone can tell me how to get this plugin working with Foobar I would appreciate it !


Album Art with Jewel Case

Reply #19
Did you use the text file that came with the download, the one entitled "cd jewel case" as the script
in your WSH Panel? It's working here.

If you used the script in the codebox from Post#11 of this forum thread, that is the wrong one...

Hope that helps,

Dennis

Album Art with Jewel Case

Reply #20
it's the just the "import" section that needed correcting in post 11 to match my folder path.

anyways..... i've pinched nixda's resizing code and put it into my samples.

link: http://cid-649d3bfeaf541fbb.office.live.co...ide/samples.zip

@nixda, i've credited you as atumno in the @author section as that is the name you used in your snippet. if you want it changed, let me know.

Album Art with Jewel Case

Reply #21
Any chance of a walkthrough guide on how to install this?

Album Art with Jewel Case

Reply #22
there's a readme inside the zip file and the file you need to import is named "cd jewel case.txt".

it does assume you know how to add panels to your existing layout though.

for default UI, you can checkout this page: http://wiki.hydrogenaudio.org/index.php?ti...ut_Editing_Mode

Album Art with Jewel Case

Reply #23
it's the just the "import" section that needed correcting in post 11 to match my folder path.

anyways..... i've pinched nixda's resizing code and put it into my samples.

link: http://cid-649d3bfeaf541fbb.office.live.co...ide/samples.zip

@nixda, i've credited you as atumno in the @author section as that is the name you used in your snippet. if you want it changed, let me know.



that's fine. (glad you found my code usable.  )

Album Art with Jewel Case

Reply #24
The link to the samples doesn't seem to work?

And getting an error trying to run the CD jewel case script with WSH panel mod; from console -

WSH Panel Mod (CD Jewel Case by marc2003 / atumno): Parsing file "C:\Users\caps\AppData\Roaming\foobar2000\\marc2003\common2.js"
Error: WSH Panel Mod (CD Jewel Case by marc2003 / atumno): Microsoft JScript runtime error:
Automation server can't create object
File: C:\Users\caps\AppData\Roaming\foobar2000\\marc2003\common2.js
Ln: 410, Col: 1

Thanks!