h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

I just realised it would probably be quite easy to adapt your table maker thingy to do an n by m grid instead of just 16 by 16. Interested?

Sounds good. I was also thinking it might be able to work in other browsers if it used transparent GIFs and links, but the dragging thing might mess it up. I should probably move it to my new webspace, too.

The table maker thingy is I've already used it for this A755525, but is there a reason why there's no brown in the palette?

You can change the palette. Double-click the color you want to change...

Aaah And then enter a hex code?

Or even a color name. The way it works is it just transfers the color value from cell to cell, so "red" works just as well as "#FF0000". Most color names will work, but I recommend hex for more precision and control.

Thanks, I tried it with a hex code and it worked just fine I wish we could use them in coversations tough

Been away for a few days, I'll have a look and see if I can find an easy way to do it. Watch this space...

Phew, a couple of hours of programming later....

The basic principle is this: the function MakeTableMaker(...) opens a new window and algorithmically creates an n by m version of your original web page. I added a couple of tweaks while I was at it, although I seem to have b******d up the drag thing, it doesn't seem to work anymore. You'll probably want to slap an interface on it, with a form with things like "Width", "Height", etc. You should probably include a warning, it takes a long time to open the edit page for large dimensions. It took my computer about 2 minutes to open the page for a 64x64 image.

Have fun and let me know if it works...

Insert this into a file called "putittogether.js" on your webserver:

function putItTogether()
{
fred.printout.value='\r';
for(i=0;i<tHeight;i++)
{
fred.printout.value=fred.printout.value+'\r'
var n = 1;
var c = pixelcell[i*tWidth].bgColor;
var bgColSeg, colSpanSeg;
for(j=1;j1) colSpanSeg=" colspan=\""+n+"\""; else colSpanSeg="";
fred.printout.value=fred.printout.value+'&nbsp;\r'
n = 1;
c = pixelcell[j+i*tWidth].bgColor;
} else
{
n++;
}
}

if(c=="") bgColSeg=""; else bgColSeg=" bgColor=\""+c+"\"";
if(n>1) colSpanSeg=" colspan=\""+n+"\""; else colSpanSeg="";
fred.printout.value=fred.printout.value+'&nbsp;\r\r'
}
fred.printout.value=fred.printout.value+''
}





Insert this into your main page (email me and I'll send you a copy if this doesn't work properly):





// tW, tH are the table width and height, cW and cH are
// the cell width and height in the edit table
var tWidth=16;
var tHeight=16;
var cWidth=5;
var cHeight=5;
// Default Palette
var defPal = new String(16);
defPal[0] = "FF0000";
defPal[1] = "880000";
defPal[2] = "FFFF00";
defPal[3] = "888800";
defPal[4] = "00FF00";
defPal[5] = "008800";
defPal[6] = "00FFFF";
defPal[7] = "008888";
defPal[8] = "0000FF";
defPal[9] = "000088";
defPal[10] = "FF00FF";
defPal[11] = "880088";
defPal[12] = "FFFFFF";
defPal[13] = "CCCCCC";
defPal[14] = "888888";
defPal[15] = "000000";
// PopUpWin will hold the editing window when one is created...
var popUpWin;



/*

This script generates a table of suitable dimensions in a new window

tw,th are the table dimensions (i.e. image dimensions)
cw,ch are the sizes of the cells in the editing box (in pixels)
ww,wh are the dimensions of the popup window
bgc is an html colour, the background colour for the window

So, to get the original table maker thingy, use

MakeTableMaker(16,16,20,20,640,480,'#000066');

*/
function MakeTableMaker(tw,th,cw,ch,ww,wh,bgc)
{
tWidth = tw;
tHeight = th;
cWidth = cw;
cHeight = ch;
popUpWin = window.open('','tableEditWin','width='+ww+',height='+wh+',resizable=yes,scrollbars=yes');
zhtm = "Table Maker Thingy Editing Window\r";

// Setup variables

zhtm += "\r";
zhtm += "var drag=false;\r";
zhtm += "var tWidth = "+tWidth+";\r";
zhtm += "var tHeight = "+tHeight+";\r";
zhtm += "var cWidth = "+cWidth+";\r";
zhtm += "var cHeight = "+cHeight+";\r";
zhtm += "\r";

// Load the Put it Together Script

zhtm += "\r";

// Create the Palette and current colour bar

totalPixels = tWidth * tHeight;

zhtm += "Palette:\r";
zhtm += "\r\r";
for(i=0;i<16;i++)
{
zhtm += "&nbsp;\r";
}
zhtm += "\r";
zhtm += "<td colspan=\"16\" bgColor=\"black\" id=\"currentcolor\" onClick=\"for(i=0;i<"+totalPixels+";i++){tinycell[i].bgColor=pixelcell[i].bgColor}\" onDblClick=\"for(i=0;i<"+totalPixels+";i++){pixelcell[i].bgColor=this.bgColor}\">Current colour (click to see preview, double click to fill)\r";
zhtm += "\r";

// Create the preview

zhtm += "Preview:\r";
zhtm += "\r";
for(j=0;j<tHeight;j++)
{
zhtm += "\r";
for(i=0;i<tWidth;i++)
{
zhtm += "&nbsp;\r";
}
zhtm += "\r";
}
zhtm += "\r";

// Create the editing table

tabWid = tWidth * cWidth + 2*tWidth + 2;

zhtm += "Editing Box:\r";
zhtm += "\r";
for(j=0;j<tHeight;j++)
{
zhtm += "\r";
for(i=0;i<tWidth;i++)
{
zhtm += "&nbsp;\r";
}
zhtm += "\r";
}
zhtm += "\r";

// Create the Put it Together form

zhtm += "Put it Together:\r";
zhtm += "\r";
zhtm += "Copy from here after Putting it Together, then paste into your page!\r";

// and finish...

zhtm += "";
window.popUpWin.document.open();
window.popUpWin.document.write(zhtm);
window.popUpWin.document.close();

}

Looks good... I can't actually test it right now, though, because I switched my computer to Linux, and can't get FTP or Internet Explorer to work at the moment. I'll let you know as soon as I can. Feel free to host it yourself, if you want.