iTunes Artwork Folder Structure

With the weather and dark nights forcing me out of the garden, I have recently turned my attention to sorting out my media library, working towards a music streaming solution throughout the house. This starts with getting my iTunes library in order.

One of the problems for me with iTunes is the way it stores artwork. All the tracks are stored in their folders, but iTunes will use a sneaky way of hiding the artwork into an *.itc file which is then hidden away in a confusing folder structure, thus stopping other programs from accessing it.

After finding this post decyphering the location of the artwork file, I wrote a Java function to take a track’s persistent ID and return the location of the artwork, if it existed. Here is the code.

public static File getArtwork(String libId, String trackId) {
		File artwork = null;

		// Get the last three characters from the tracks ID and turn them into
		// decimals, with a leading zero if needed.
		String folderOne = hexToDec(trackId.charAt(trackId.length() - 1));
		String folderTwo = hexToDec(trackId.charAt(trackId.length() - 2));
		String folderThree = hexToDec(trackId.charAt(trackId.length() - 3));

		// artwork can be stored in itc or itc2 files, so we should check if the
		// itc exists, and if not, try the itc2.
		artwork = new File("Album Artwork/Download/" + libId + "/" + folderOne
				+ "/" + folderTwo + "/" + folderThree + "/" + libId + "-"
				+ trackId + ".itc");
		 * Note: the Downloads folder is the best place to look. If the artwork
		 * is in the Cache folder, then I think that means the track already had
		 * artwork embedded in the MP3 so it wasn't downloaded, just cached for
		 * faster access by iTunes.
		return artwork;

	private static String hexToDec(char hexValue) {
		switch (hexValue) {
		case '0':
			return "00";
		case '1':
			return "01";
		case '2':
			return "02";
		case '3':
			return "03";
		case '4':
			return "04";
		case '5':
			return "05";
		case '6':
			return "06";
		case '7':
			return "07";
		case '8':
			return "08";
		case '9':
			return "09";
		case 'A':
			return "10";
		case 'B':
			return "11";
		case 'C':
			return "12";
		case 'D':
			return "13";
		case 'E':
			return "14";
		case 'F':
			return "15";
			return "";

I am basically using this to parse an XML file, find any artwork which isn’t embedded into the MP3 file and then save it inside, so that all my other media players have access to the image. It will increase the file size a little, but for me that’s negligible. I suppose someone could also use it to store the artwork in an understandable structure (ArtistName/AlbumName) so that it could be retrieved that way, but that can be looked at later.

Embedding Views Slideshow into Drupal Template Files

Recently, I have been learning some ways of theming websites on Drupal, and using template files more often – I wanted to create a page with a view in the header, next to some links, but this is not easily done using the Views UI, unless you get Panels involved, and I wanted the website to be as lightweight as possible, so I decided to embed the view into some HTML myself.

On the views API, you find that Views can be placed into a template file using the following code

print views_embed_view('view_name', 'display_type');

The view name is the name you can see on your views page. The only thing I had a problem with was the display type. I was trying it with ‘block’ but you have to use block_1 or block_2, page_1 etc… depending on how many views you have. If you are not sure, load the view using the UI and them check out the HTML to see what the name of the display is.

Once you have done this, your view appears on the page, wherever you printed it in your template file! Good times. However, there is a slight problem.. your slideshow isn’t working! Unfortunately, the slideshow requires some information in Drupal.settings which isn’t added this way, as the template file is generated after Drupal.settings!

So, what you actually need to do is create a custom module that loads the required JS into Drupal.settings using drupal_add_js() before the page is rendered.

To do this, create a new module, and implement hook_init to get your JS added. Lets say my module is called custom_slideshow_js

So my info file would be like so:

name:Custom Slideshow Javascript
description:A file which loads some Javascript to run on all my pages with a view in

To add the required JS to drupal.settings, you need to display the view using Views UI first, and copy the JS is produces. You will find this at the end of the header of your page, and looks a little like this: (you may need to filter this out from other settings)

jQuery.extend(Drupal.settings, {
  "viewsSlideshowSingleFrame": {
    "#views_slideshow_singleframe_name_of_view": {
      //loads of settings are listed here for the view

So you need to copy this from your own page and paste it into your module, converting it to a PHP array. Then you just use drupal_add_js() to put the settings into the page where you need them. You need to remember to change the

You should end up with something like this..


  $settings = array(
    "viewsSlideshowSingleFrame" => array(
      "#views_slideshow_singleframe_THIS_SHOULD_BE_YOUR_VIEW_ID" => array(
        //all your settings go in here in the format 'key' => 'value'
  drupal_add_js($settings, 'setting');

And that should sort you out! Your view should now be showing, and animating. Obviously, if you wanted it all in one place, you could use the custom module to render the view as a block with the HTML around it, but I was just saving the time of rendering the block, as I knew where I wanted the view to be permanently.

Uploadify – How to Rename an Uploaded File

I’ve recently got to grips with Uploadify – a great little jQuery plugin that allows you to simply upload images in a crazily easy to use form. However the images will overwrite, and I wanted to prevent this by renaming it if there was a clash.

This wasn’t too difficult. In uploadify.php, you will find the code that actually deals with the moving of the uploaded file.

Simply adding a file_exists function to the code allowed me to check if I needed to rename the file. Adding a number to the end of it and counting up until it no longer had a clash does the trick. You can also plug in some more stuff here, like creating thumbnails.


    //we need to rename the file here to avoid a clash.
    //Add a number to the end until it doesn't clash
    $info = pathinfo($targetFile);
    $file_name = basename($targetFile,'.'.$info['extension']);
    $targetFile = $info['dirname'].'/'.$file_name.'_'.$count.'.'.$info['extension'];

Anyway, this still causes a problem. if you are using the onComplete function call, you will find that the returns the original file name, not the new one. The solution? Read the response instead, which will contain the original file name.

  'onComplete' : function(event, ID, fileObj, response, data){
    //fileObj will return the original file name, so use response instead.
    $('#image_thumbnail').attr('src', response).show();

I hope that helps someone and saves them the time it took me to figure it out!

Custom JDialog PIN Entry

Its been a while since I did Java programming, but I occasionally get myself into a weeks programming to keep up with the hobbies. Today is the second day I got back into some programming. I am working on an application which has a settings screen, but I don’t want people to access it, so I had a task of developing a password screen. The application is being designed for a touchscreen, so passwords are out of the question (no keyboard) hence, I wanted to get a keypad on the screen for a 4-digit PIN entry.

I wanted the behaviour of the program to stop everything and only allow user input on the keypad whilst it was on screen – much like the behaviour of a JDialog  when it is on screen – you have to deal with it before you can get back to the parent frame. So I built a class which extends on the JDialog and constructs a JPanel with the JButtons inside to deal with the user input. Not being a Java regular, I couldn’t tell you whether I’ve done something against the rules here, but it works pretty neatly, and the best bit is its a static call, so it can be used in any other scenario (just access the variables inside for the three possible responses, CANCELLED, ACCESS_GRANTED or ACCESS_DENIED)

The keypad looks like this:

To call it, you simply add the Keypad class to your program, and use the code below

//showDialog(jFrame, title, PIN, attemptsAllowed)
int result = Keypad.showDialog(myJFrame, "Please enter PIN", "1234", 3);
//result is one of the following
  case Keypad.ACCESS_GRANTED:
  case Keypad.ACCESS_DENIED:
  case Keypad.CANCELLED:

Hope that helps someone. All that is needed to perfect this is to prevent the user closing the window using the X in the top right, but that doesn’t bother me at the moment.
I’ve put the zip file below with the class file and the images used on the buttons.

Carrington & Polaroid gallery

I suppose a good way to start off this post would be to talk about the design of this blog. Its based on WordPress, incase you didn’t know. I usually develop with Drupal, but since this site was always meant to be about blogging, it seemed overkill to use something as powerful as Drupal for a blog. Also the blogging in Drupal is obviously not as good as a platform developed for blogging!

I installed Polaroid widgets to give some cool style to my photos. This works great, however it didn’t work quite this way when I installed the theme I am using. So I’ll explain below how I got it working.

I am using the Carringdon theme on the site, which I modified to look the way I wanted it through the CSS files. After installing the Polaroid gallery, I found that the images didn’t quite display the way I wanted them to.

The wrong way to display a galleryThis is the way I want gallerys displayed!

This is not the way I wanted my photos displayed, it looks less than pants. So I had a little poke around and found the code in Carrington which displays the gallery. The function is called cfct_post_gallery() and you can find it in attatchment.php in the carrington_core folder. You want to remove this code and replace it with the code below, which I took from WordPress’ twenty eleven theme. It works for me, so I guess it should for everyone! Enjoy.

<?php //ignore the tag above, its in here for the benefit of the blog colouring. function cfct_post_gallery($unused, $attr) {
?><article id="post-<?php the_ID(); ?>" post_class="" php="">&gt;<header class="entry-header"><hgroup>
<h2 class="entry-title"></h2>
<h3 class="entry-format"></h3>
</hgroup><!-- .entry-meta --></header><!-- .entry-header --> <?php if ( is_search() ) : // Only display Excerpts for search pages ?><!-- .entry-summary --> <?php else : ?><!-- .entry-content --> <?php endif; ?><footer class="entry-meta"><?php $show_sep = false; ?> <?php 
			/* translators: used between list items, there is a space after the comma */
			$categories_list = get_the_category_list( __( ', ', 'twentyeleven' ) );
			if ( $categories_list ):
		?> <?php endif; // End if categories ?> <?php 
			/* translators: used between list items, there is a space after the comma */
			$tags_list = get_the_tag_list( '', __( ', ', 'twentyeleven' ) );
			if ( $tags_list ):
			if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <?php endif; // End if $tags_list ?> <?php if ( comments_open() ) : ?> <?php if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <?php endif; // End if comments_open() ?> <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?></footer><!-- #entry-meta --></article>

<!-- #post-<?php the_ID(); ?> --><?php