XBM Constructor (Javascript images)

I was bored, so I decided to play around with creating images on the fly with Javascript. I made this constructor, it's not brilliant, there are a few bugs, I think there may be something wrong in the binary to hex conversion, though it works most of the time, lol.

Not sure if IE supports XBM images, but Firefox does.

Anyway, was a bit of fun to test my binary and hex knowledge.

Ah yes, you will need to know binary to be able to create images (it's easy, really). I'll provide 2 examples at the end.

function _XBM(){
    this.xbm = "";
    this.xbm_width = arguments[0] || 0;
    this.xbm_height = arguments[1] || 0;
    this.xbm_img_id = arguments[2] || null;
    this.xbm_parent = arguments[3] || document.body;
    this.xbm_bin = [];
    this.xbm_bin_split = [];
    this.xbm_hex = "";
}

_XBM.prototype.prepare_for_hex = function(){
    if(this.xbm_bin){
        for(key in this.xbm_bin){
            if(this.xbm_bin[key].toString().length % 8 != 0){
                while(this.xbm_bin[key].toString().length < 8){
                    this.xbm_bin[key] = "0" + this.xbm_bin[key];
                }
            }

            var temp = "";

            for(r = 0; r <= this.xbm_bin[key].toString().length; r ++){
                temp = this.xbm_bin[key].charAt(r) + temp;
            }

            this.xbm_bin[key] = temp;

            this.xbm_bin_split.push(this.xbm_bin[key].toString().substring(0, 4));
            this.xbm_bin_split.push(this.xbm_bin[key].toString().substring(4, 8));
        }
    }
}

_XBM.prototype.hex = function(bin){
    var x = "0123456789ABCDEF";

    if(bin){
        this.prepare_for_hex(bin);

        if(this.xbm_bin_split.length > 0){
            for(h = 0; h < this.xbm_bin_split.length; h += 2){
                this.xbm_hex += "0x" + x.charAt(parseInt(this.xbm_bin_split[h], 2) & 15);
                this.xbm_hex += x.charAt(parseInt(this.xbm_bin_split[h + 1], 2) & 15);

                if(h < (this.xbm_bin_split.length - 2)){
                    this.xbm_hex += ", ";
                }
            }
        }
    }
}

_XBM.prototype.create = function(bin_array){
    if(bin_array && bin_array.length > 0){
        this.xbm_bin = bin_array;
        this.hex(this.xbm_bin);

        this.xbm += "#define Xbitmap_width " + this.xbm_width + "\n";
        this.xbm += "#define Xbitmap_height " + this.xbm_height + "\n";
        this.xbm += "static unsigned char Xbitmap_bits[] = {\n";
        this.xbm += this.xbm_hex;
        this.xbm += "\n};\n";
       
        this.append();
    }
}

_XBM.prototype.append = function(){
    if(this.xbm && this.xbm.length > 0){
        var xbm_image = document.createElement("img");

        xbm_image.id = this.xbm_img_id;
        xbm_image.src = "javascript: '" + this.xbm + "'";
        this.xbm_parent.appendChild(xbm_image);
    }
}

You can pass 4 arguments when creating an instance...

Width, Height, image id, and obj you wish to append the image to (default is the body).

To use it, create a new instance...

var XBM = new _XBM(WIDTH, HEIGHT);

The width and height need to match your array. So for example, to create a 32 x 32 image, you would do...

var XBM = new _XBM(32, 32);

XBM.create([
    "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111",
    "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111",
    "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000",
    "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000",
    "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111",
    "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111",
    "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000",
    "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000",
    "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111",
    "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111",
    "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000",
    "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000",
    "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111",
    "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111", "00001111",
    "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000",
    "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000", "11110000"
]);

That would create a chess board

This next one will create an image that says "IF"...

var XBM = new _XBM(32, 32);

XBM.create([
    "0", "0", "0", "0", "0", "0", "0", "0",
    "11111000", "11111111", "11111111", "0", "11111000", "11111111", "11111111", "0",
    "11111000", "11111111", "11111111", "0", "11111000", "11111111", "11111111", "0",
    "11111000", "11111111", "11111111", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111111", "11111111", "0",
    "11111000", "11111111", "11111111", "0", "11111000", "11111111", "11111111", "0",
    "11111000", "11111111", "11111111", "0", "11111000", "11111111", "11111111", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "11111000", "11111000", "0", "0",
    "11111000", "11111000", "0", "0", "0", "0", "0", "0"
]);

If you notice, the binary values don't have to be the full 8 bits, as the script will pad them anyway.

Do what you want with it

Have fun, if you spot a bug or have something cool to show, post below.