I made tAsc 1.0 today. It is an AJAX powered JavaScript XSL Transformation (XSLT) script for Gecko browsers and Internet Explorer (6 & 7). I have made it very easy to use. Just follow the instructions in the beginning comments. All you need is a blank HTML page, and a preexisting XML file and its accompanying XSL stylesheet. There may be something like this out there already, probably better, but I wanted to learn how to do this and so I made this script and it works well.

Here is an example of tAsc 1.0. It works well in recent Gecko browsers (FireFox 1.5, Camino, Epiphany, etc) and IE6. It should also work in IE 7, but I haven’t tested it there yet. Let me know if you see any bugs or have any concerns. This script does not require any other libraries of any sort. It comes with an MIT License.

Here is the code:

/***********************************************
************************************************
NAME: tAsc v 1.0

DESCRIPTION:
An AJAX powered JavaScript XSL Transformation script
for Gecko browsers and Internet Explorer (6 & 7).

AUTHOR: Bjorn Tipling

EMAIL: bjorn (at) ambientchill (dot) com
Please use this email for bugs.

WEBSITE: https://sharewonders.com

LICENSE: MIT
http://www.opensource.org/licenses/mit-license.php

USAGE:
Create a basic HTML page with nothing within
the body tags. Link to this javascript file by
placing this in the header:

The tag should look like this:
with the same
id and and onload values.
Give xslFile and xmlFile the names of the xsl file
and the xml file respectively.

NOT ALL BROWSERS ARE CAPABLE OF JAVASCRIPT XSL
TRANSFORMATIONS. WILL ONLY WORK WITH LOCAL FILES.

************************************************
************************************************/

//Change these to the correct values:
var xslFile = ‘test.xsl’;
var xmlFile = ‘test.xml’;

var xmlGlobal;
var xslGlobal;
var xsltProcessorGlobal = new XSLTProcessor();

function start(){

var IE = document.all?true:false;

if(IE){
// Load XML
ieGetXML(’test.xml’);
}else{
// load the xslt file, test.xsl
ffGetXSL(xslFile);
}
}

function ffGetXSL(filename){
var httpRequest = new XMLHttpRequest();
httpRequest.open(”GET”, filename, true);
httpRequest.send(null);
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState==4) {
xslGlobal = httpRequest.responseXML;
xsltProcessorGlobal.importStylesheet(xslGlobal);
// load the xml file, test.xml
ffGetXML(xmlFile);
}
}
}

function ffGetXML(filename){
var httpRequest = new XMLHttpRequest();
var fragment;
httpRequest.open(”GET”, filename, true);
httpRequest.send(null);
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState==4) {
xmlGlobal = httpRequest.responseXML;
//do the transformation:
fragment = xsltProcessorGlobal.transformToFragment(xmlGlobal, document);
document.getElementById(”myBody”).innerHTML = “”;
document.getElementById(”myBody”).appendChild(fragment);
}
}
}

function ieGetXML(filename){
if (window.XMLHttpRequest)
{
var httpRequest = new XMLHttpRequest;
httpRequest.open(”GET”, filename, true);
httpRequest.send(null);
}else{
try {
httpRequest = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
httpRequest = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e) {}
}
}
httpRequest.onreadystatechange = function(){
var string;
if (httpRequest.readyState==4) {
xmlGlobal = httpRequest.responseXML;
ieGetXSL(xslFile);
}
}
httpRequest.open(”GET”, filename, true);
httpRequest.send(null);
}

function ieGetXSL(filename){
if (window.XMLHttpRequest)
{
var httpRequest = new XMLHttpRequest;
httpRequest.open(”GET”, filename);
httpRequest.send();
return httpRequest.responseXML.xml;
}else{
try {
httpRequest = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
httpRequest = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e) {}
}
httpRequest.onreadystatechange = function(){
var piece;
var string;
if (httpRequest.readyState==4) {
xslGlobal = httpRequest.responseXML;
piece = xmlGlobal.transformNode(xslGlobal);
document.getElementById(”myBody”).innerHTML = piece;
}
}
httpRequest.open(”GET”, filename, true);
httpRequest.send(null);
}
}

Colr.org has the ability to generate random colors from an image that you can load. I looked at the code and wondered why only one hundred randomly selected colors were loaded into the script, and I have now realized why.

There is a lot of data in image.

My own attempt at getting colors from images is a lot less random. You can hover over the image to get the color value for the pixel pointed at. It’s a nice feature, but it has draw backs. For one, it is really, really slow. Opera is the slowest and Firefox will throw ’script unresponsive’ warnings at the user (even though it’s just taking its time and will respond). Nevertheless I had fun making this. It works, and you can use it to get the RGB values from JPEG and PNG file types. It loads colors for GIF file types, but I’ve seen some inconsistency in it. There’s nothing to be done about it, I blame the GD Graphics Library, which only recently started to support gifs again.

So how do I do it? The image is loaded into PHP which uses the PHP image functions to get information for colors, including the color values for pixels. PHP records all the colors and their locations (for tens to hundreds of thousands of pixels), stores it in a string and sends it to JavaScript via AJAX. JavaScript then splits the string into several arrays, and associates rgb values with locations in a big multidimensional object. As the mouse hovers over the image, JavaScript uses onmousemove to get the X and Y position of the mouse pointer, calculates where it is above the image, and uses the location to retrieve the RGB values. JavaScript then converts the RGB values into a webcolor.

So there you go! Hopefully you’ll have some use for it. I know I will.