This post is more of an introduction of what I am working on more than anything else really. Chris Holden created an amazing RAW audio playing device which has essentially only 5 components, as listed here:

  • PIC16F1825
  • 100uF capacitor
  • NPN Transistor
  • SD Card
  • Mini speaker

Obviously there is a power source to take into account, which depending on where you are presenting to the circuit may need a voltage regulator. None the less, it’s an amazing little device.

It works on the FAT16 file system, and makes use of SPI to communicate to the SD card, along with Pulse Wave Modulation to play the actual audio. Now the FAT16 file system unfortunately has a 4GB disk size limit, but for a lot of simple electronics projects this is more than enough. There is also a a limit of 512 files per folder, which really isn’t much of a problem either, however Chris’ implementation does not support sub folders. This is where I come in.

I am looking to make a number of changes to this project, and my improvements will be as follows:

  1. Add sub folder support
  2. Get this working with an STA013 to decode MP3 files
  3. Add support for other file systems (perhaps FAT32 or EXT)

Currently on my SD card I am working with the following file structure:

Files1

Now I have made a couple small tweaks so far, but nothing major yet. Originally Chris’ code did not care if a file was deleted or not, which annoyed me a bit, so was the first tweak I had to make. Now when I query the root directory with UART I see the following:

UART

The first strange thing I found was the “AMyFol” right next to “MYFOLDER”. I decided to take a look at the raw hex for the SD card, and I found MyFolder without a problem, however nothing about AMyFol, so something isn’t quite right in the code. An extra thing to add to my list of things to check I suppose. For those interested, my hex looked as follows:

hex1

So anyway, a number of blog posts are sure to follow whilst I work on this. I am hoping to get the Sub Folder support added very quickly, as I need it for another project I have in mind.

Today I am going to go through, how to copy some XML structure and data from one XML object to another XML object. Now from what I have noticed when making use of jQuery, I have seen that it does not actually support XML as such, while it does support XHTML formatted in an XML structure. So in essence, we will be converting our XML object into an XHTML object, do all of our changes, and then convert it back. This may sound a bit long winded, but it’s actually not as bad as it sounds.

First off, we need to add a function created by John Resig (http://ejohn.org/blog/javascript-array-remove/), which will allow us to remove items from an array.

Array.prototype.remove = function(fr, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

And now we need to extend our XML to string function, as in good XML you tend to get the first line starting with double quotes.

jQuery.XMLtoString = function(xmlData) {
  var xData;
  var xSplit;
  if (window.ActiveXObject) {
    xData = xmlData.xml;
  } else {
    xData = (new XMLSerializer()).serializeToString(xmlData);
  }
  xSplit = xData.split('\r\n');
  if (xSplit[0].substr(0, 5) == '')
    xSplit.remove(0);
  return xSplit.join('\r\n');
}

Now I have only just thrown this together, it works, however I will be making some changes to it at a later date by making use of some Regex, as well as giving you the ability to re-add the line you are removing. Anyway, let’s give an example XML structure:

<labels>
  <label added="2003-06-10" id="ep">
    <name>Ezra Pound</name>
    <address id="1">
      <street>45 Usura Place</street>
      <city>Hailey</city>
      <province>ID</province>
    </address>
  </label>
  <label added="2003-06-20" id="tse">
    <name>Thomas Eliot</name>
    <address id="2">
      <street>3 Prufrock Lane</street>
      <city>Stamford</city>
      <province>CT</province>
    </address>
  </label>
  <label added="2004-11-01" id="lh">
    <name>Langston Hughes</name>
    <address id="3">
      <street>10 Bridge Tunnel</street>
      <city>Harlem</city>
      <province>NY</province>
    </address>
  </label>
</labels>

Scenario:

You want to copy all of the address tags, including all attributes and child nodes, onto a new location on a different XML object. Resulting in something like this:

<locations>
  <address id="1">
    <street>45 Usura Place</street>
    <city>Hailey</city>
    <province>ID</province>
  </address>
  <address id="2">
    <street>3 Prufrock Lane</street>
    <city>Stamford</city>
    <province>CT</province>
  </address>
  <address id="3">
    <street>10 Bridge Tunnel</street>
    <city>Harlem</city>
    <province>NY</province>
  </address>
</locations>

This is a fairly easy task, however the way you go about doing it, is not very obvious. Let’s say you have done your AJAX request, received your XML, and have now passed the xml to your function. Here’s what you should have inside your function.

Firstly, we need to convert our XML into a string (with the modified function), find our “address” tags, and convert the string into an object. You can do that all in a single line:

var xData = $($.XMLtoString(xml)).find("address");

If you are not already aware of this, encapsulating a string with $(), converts it to an object (with jQuery).

Now we have all the data we want from the XML document, but we need to create our new XML document to contain the data within. Now for some reason (which I am yet to investigate), the first element in a newly created object is removed upon creation, so we need to keep this in mind when creating it. We want a root of “”, so we need to add a dummy node above that so that our one is not removed. Our code will look like this:

var xDoc = $("");

Next we need to specify where inside this new document, to inject our original data, which is done with a simple find() like so:

xDoc.find("locations").append(xData);

That’s it, our data has been added to the new object. You can print it out to a textarea to view the results by calling the .html() function on the new document, so something like this:

$("#output").text(xDoc.html());

Here is what the resulting function would look like:

function parseXml(xml) {
  var xData = $($.XMLtoString(xml)).find("address");
  var xDoc = $("");
  xDoc.find("locations").append(xData);
  $("#output").text(xDoc.html());
}

As I said earlier, it’s not very obvious, but when you know what to do, it’s actually quite an easy task.

Starting with the basics, we are going to create an XML Document/Object with JavaScript. Now as most developers should know, Internet Explorer behaves quite differently to all other web browsers, and for this, it will be no exception.

In short, Internet Explorer makes use of ActiveX to create XML, while other browsers have something called DOMParser. Now as it’s not the same on every browser, we are best to create a function to create our object, and handle all the browser issues.

jQuery.strToXML = function(s) {
  var xmlDoc;
  if (window.ActiveXObject) {
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = "false";
    xmlDoc.loadXML(s);
  } else {
    xmlDoc = (new DOMParser()).parseFromString(s, "text/xml");
  }
}

Usage:

var xmlDoc = $.strToXML("");

Due to the nature of how you create the object, you can as you may have noticed also convert a regular string into an XML document (given that it is correctly structured obviously). You now have an XML Document/Object, now you can fill it up with a structure and some data.

I have had a few people asking me for help with numerous things related to jQuery, and have noticed that they are quite repetitive questions, so I have decided to create this blog which will contain a series of tutorials with code snippets I have made, which should help bring some light on many questions.

My most recent set of questions were in regards to jQuery and XML, so I am going to go through this as best I can, and if anybody needs any further clarifications, please feel free to leave me some comments.

For those of you who make use of RackSpace for your web hosting, you may notice there is no option to get full reports on every Domain you have with them, let alone the Sub-Domains, nor where they are all pointing. If you want that type of information, you have to manually view each page, one by one.

I was put in charge of creating a Web Audit, as the company I work for own over 260 domains, numerous servers with RackSpace, and going through all of that one by one could prove daunting, and could take anything up to a couple days to complete.

Being the type of the person that I am, I wrote a small command line application in C#, which logs into our RackSpace account, navigates to the relevant web pages, and then strips the HTML for all the information we needed to do our audit. I plan on releasing the source code for this (after a bit of cleaning up, as it was very quickly thrown together), so that others may make use of it, or even alter it to gather additional information from other sections of their RackSpace administration panel.