Create "Cover Flow" art on the fly

Osler · Post by **Osler** » Thu Dec 20, 2007 10:40 pm

I came across a great Active X component from this site:

http://pagesperso-orange.fr/pierre.g/xn ... adgfl.html

Download the GLFAx v2.80, unzip, and register the dll in the win32->std folder. This dll is free for non-commercial use.

Using this component you can create coverflow art on the fly for any image. You can take an image such as the first cover pictured below and turn it into the second cover. Add a black background and you get the third image below , which is quite close in appearance to the cover flow images found in iTunes. This has the potential to add a bit of "eye candy" to images displayed on software remotes. You can't achieve the angled album appearance as in iTunes with this control; however, making images behind the center cover smaller by 50 px (constrained) and placing them in a stair-step fashion gives a similar feeling of depth to the image, fooling the eye into thinking the horizon lies beyond the images.

The following subroutine will allow you to make the bottom two images. Simply drop it into your script you are currently using to pull images and go:

Code: Select all

MakeCFArt "C:", "Test.jpg", "CoverFlow.jpg", 300, 300, True

Private Sub MakeCFArt(ByVal strFolderPath, ByVal strInputFile, ByVal strOutputFile, ByVal lngFinalWidth, ByVal lngFinalHeight, ByVal blnBackground)
   Dim LoadPath
   Dim SavePath
   Dim WidthOffset
   Dim HeightOffset
   Dim BackgroundWidth
   Dim BackgroundHeight
   Dim objImage
   
   Set objImage = CreateObject("GflAx.GflAx")
   LoadPath = strFolderPath & "\" & strInputFile
   SavePath = strFolderPath & "\" & strOutputFile
   WidthOffset = 800
   HeightOffset = 100
   
   BackgroundWidth = lngFinalWidth + WidthOffset
   BackgroundHeight = (lngFinalHeight * 2) + HeightOffset

   objImage.LoadBitmap(LoadPath)
   objImage.Resize lngFinalWidth, lngFinalHeight
   objImage.FlipVertical
   objImage.GaussianBlur 2
   objImage.lightness 30
   objImage.Soften 50
   objImage.SaveBitmap(strFolderPath & "\" & "ReflectedImage.jpg")
   objImage.LoadBitmap(LoadPath)
   objImage.Resize lngFinalWidth, lngFinalHeight
   objImage.lightness 10
   objImage.ResizeCanvas lngFinalWidth, (lngFinalHeight * 2), 0, vbBlack
   objImage.SaveBitmap(strFolderPath & "\" & "ActualImage.jpg")
   objImage.MergeAddFile strFolderPath & "\" & "ActualImage.jpg", 80, 0, 0
   objImage.MergeAddFile strFolderPath & "\" & "ReflectedImage.jpg", 20, 0, lngFinalHeight
   objImage.Merge
   objImage.MergeClear
   If blnBackground = True Then
      objImage.ResizeCanvas BackgroundWidth, BackgroundHeight, 4, vbBlack
      objImage.Crop 0, 0, BackgroundWidth, (BackgroundHeight - lngFinalHeight/2) 
   End If
   objImage.SaveBitmap(SavePath)
   Set objImage = Nothing
End Sub

Look for wide-spread use of this in my next theme.

Osler

EDIT: code updated to give improved output (see below)

markd · Post by **markd** » Fri Dec 21, 2007 6:57 am

Cool! You would integrate this by using dynamic images pointed to the output of the script?

Osler · Post by **Osler** » Fri Dec 21, 2007 11:27 am

Yep. I have a single .jpg called NowPlaying for cover art that I continually update as the Sonos system moves from track to track in a queue. With the addition of this sub to the master script I will implement NowPlayingCF.jpg as an additional image that can be linked to a dynamic image. In addition, this can be used to track what song is playing via the queue, with last played on the left, now playing in the middle, and next up on the right. Below is a sample of how this could be layed out on a panel. To give perspective, the right and left images had their width reduced by 50 px (constrained). The track position bar also aids with the perspective effect by giving a foreground to mark off of.

Also, when playing with this you may find a guassian blur of 3-4 more suitable for the reflected image. You can adjust the darkness of the reflected image with the lightness function to get it just the way you want it.

Osler

markd · Post by **markd** » Fri Dec 21, 2007 12:48 pm

Very nice. Have you tried using the Merge function? the doc is kind of sketchy, but it might let you merge with a gradient to fade the reflection out as it gets farther from the album cover. Only other piece that is missing is to be able to distort the image such that it tapers.

I've been looking at some Open GL stuff that would allow this and more, but not really fitting into the HB space.

Markd

Osler · Post by **Osler** » Fri Dec 21, 2007 2:46 pm

Precisely what I was thinking...just couldn't get merge to work until now. See above for the updated script. The output is much better using the Merge command. See the updated picture below created using the output from this script.

Osler

markd · Post by **markd** » Thu Feb 07, 2008 1:47 pm

Ok, I think I have an even better one-

http://www.imagemagick.org/script/index.php

This one can do all sorts of tricks. . . I have been playing with it in the command line (at work right now) but it is supposed to have a vbs interface as well. I started off with the "turn sideways" problem- here is where I started-

<darn it, I can't seem to post the images!! I'll have to do it from home later. Sorry!>

This is the batch file that I used-

composite -compose multiply square.jpg black_grad.jpg square_mirror.png

convert -flip -blur 0 square_mirror.png square_flip.png

montage square.jpg square_flip.png -geometry +0+0 -tile 1x2 square_int.png

convert square_int.png -matte -virtual-pixel transparent -distort Perspective "0,0 0,0 200,0 170,50 0,400 0,400 200,400 170,350" -scale 80x400! -crop 30x400+0+0 sq_pers.png

Might be a shorter/faster way to do it by combining some commands.

Markd

markd · Post by **markd** » Thu Feb 07, 2008 9:35 pm

And here it is reflected and distorted. This is cut so that it would be the 2nd or 3rd back, mostly hidden.

Osler · Post by **Osler** » Thu Feb 07, 2008 9:58 pm

Very nice. Can you make the background transparent?

Osler

markd · Post by **markd** » Fri Feb 08, 2008 5:39 am

I think so. . . I actually thought I had, wasn't until I loaded it here that I realized it wasn't. It could certainly be color keyed. I'll play around a little more today.

markd · Post by **markd** » Fri Feb 08, 2008 5:42 am

When I load it up in gimp, it does show as transparent. . . so yes.

Something about the way the forum shows it, I guess.

incoronado · Post by **incoronado** » Thu Feb 14, 2008 8:28 pm

I like were you are going with this. I have started creating a few scripts using imageMagick with the intention of creating a slideshow script that used a coverflow concept. ImageMagick is VERY powerful and there is a COM+ implementation that allows you to access almost all of of its functionality in VB Scripts. Coupled with HB's dynamic images and some creativity the skys the limit.

markd · Post by **markd** » Thu Feb 14, 2008 8:41 pm

Yup, very cool. I found the vb samples right after I posted, they are pretty trivial. The tool is awesome! I was thinking I might add an adjunct screen to the jukebox script to display the coverflow for the now playing, or to allow selection by album. Maybe once I get the multizone done.

Markd

Post by **Richard Naninck** » Sun Feb 17, 2008 2:49 pm

I haven't looked at this at all, but it sounds promising. Can I use this to rotate images left and/or right. The girlfriend likes to take 80% of the pictures sideways. Not sure why that is, but it for sure is a girl thing. I created a meedio library based image module for HouseBot and Meedio can do the rotate thing, but doing it from HB requires something like this (I hope).

incoronado · Post by **incoronado** » Sun Feb 17, 2008 5:10 pm

Yes.

COM + instructions.

http://www.imagemagick.org/script/ImageMagickObject.php

I have attached a vbscript example that will give you an idea on how to use it .

Post by **Richard Naninck** » Sun Feb 17, 2008 5:17 pm

I am logged in (obviously) but I don't see the attached vbscript example.