User:Vanisaac/scripts/TartanBuilder.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/**
 * TartanBuilder
 * 
 * This tool is used in conjunction with template:Infobox Tartan and template:Tartan to build an
 * SVG image of a tartan pattern from its sett description and allow a user to upload the file to
 * Wikipedia for use as a default image for those templates.
 * 
 * Author: Van Anderson
 * Version: 0.10 (alpha), June-July 6 2020:	Takes sett pattern from dialogue. Outputs raw SVG image
 * 											to new window. Contains no Wikipedia interaction code.
 * License: CC-by-SA 4.0
 * Source location: User:Vanisaac/scripts/TartanBuilder.js
 * Documentation: User:Vanisaac/scripts/TartanBuilder
 * 
 */
// <pre><nowiki>

function TartanBuild(){
var colors={
	a:	'#80D0FF',
	b:	'#2888C4',
	c:	'#2C2C80',
	d:	'#404040',
	e:	'#808080',
	f:	'#004028',
	g:	'#008000',
	h:	'#7CC06C',
	i:	'#808080',
	j:	'#808080',
	k:	'#000000',
	l:	'#C0C0C0',
	m:	'#880000',
	n:	'#808080',
	o:	'#EC8048',
	p:	'#780078',
	q:	'#808080',
	r:	'#C80000',
	s:	'#FF6060',
	t:	'#604000',
	u:	'#441800',
	v:	'#D0A870',
	w:	'#FFFFFF',
	x:	'#808080',
	y:	'#FCCC00',
	z:	'#C89800',
	dummy: null
};


var settinput = prompt("Sett pattern");	// input of a tartan sett pattern, to be replaced
										// by data from HTML scrape.
var settlc = settinput.toLowerCase();	// Regularize sett pattern to lower case with no spaces.
var sett = settlc.replace(/ /g, "");	
var colorarray = [];					// Array containing color codes in pattern order.
var lenarray = [];						// Array of color code locations in sett string.
var threadarray = [];					// Array containing thread counts synched with colorarray.
var dasharray = [];						// Array of SVG stroke-dasharray values.
var subthread = [0,0];					// Array for middle values in threadarray for summing.
var threadtotal = 0;					// Sum of total thread count in tartan pattern.
var othercount = 0;						// Sum of non-color values for stroke-dasharray.
var asym = false;						// Flag for asymmetric sett pattern.

var color = [0,0,0,0,0,0,0,0,0,0,0,0,	// Array for colors in pattern. Increments each time
0,0,0,0,0,0,0,0,0,0,0,0,0,0];			// the color shows up with threads in the sett.


//document.write("Sett: " + sett + " - " + sett.length + "<br />");

svg = window.open();
svg.document.write ("\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"600\" height=\"600\">\n" + 
"<style id=\"" + sett + "\">");			// Basic SVG header

if (sett !== ''){
	for (i=0; i<sett.length; i++){		// Goes through each character of sett to extract
										// color codes and their location in the string.
//		document.write(sett.charAt(i) + ",");
		if (sett.charAt(i) >= "a" && sett.charAt(i) <= "z" ){
			colorarray.push (sett.charAt(i));
			lenarray.push (i);
		} else if (sett.charAt(i) == '+' && i==0) {
			asym = true;
		} else if (sett.charAt(i) <= "0" || sett.charAt(i) >= "9") {
			return (2);					// Return 2=Invalid character in sett pattern.
		}
	}
	lenarray.push (i);
//	document.write("<br />" + colorarray + " - " + lenarray + " - ");
	for (j=0; j<colorarray.length; j++){	// Extracts thread counts from sett string
		threadarray.push(parseInt(sett.substring(lenarray[j]+1, lenarray[j+1])));
	}
//	document.write(threadarray + " - " + subthread + " - " + threadtotal + "<br />");
	for (k='a'.charCodeAt(); k<='z'.charCodeAt(); k++){	// Generates dasharray for each color.
	othercount = 0;
	dasharray = [];
		if (colorarray[0] != String.fromCharCode(k)) {
			dasharray.push (0);
		}
		for (m=0; m<colorarray.length; m++){		// Go through colorarray. If colorarray
			if (colorarray[m] == String.fromCharCode(k)) {	// value is current color,
				color[k-97]++;						// increment in color array. Unless this is
				if (m != 0) {						// the start of the sett, push the count
					dasharray.push (othercount.toString());	// of other other threads, and
					othercount = 0;					// reset the count of other threads.
				}
				dasharray.push (threadarray[m]);	// Then push the thread count for this
			}else{									// color. If it's not the right color,
				othercount += threadarray[m];		// add to the count of other threads.
			}
		}
		if (asym == false) {						// If this is not an asymetrical tartan, then
			for (m-=2; m>0; m--){					// reverse through colorarray. If colorarray
				if (colorarray[m] == String.fromCharCode(k)) {	// value is current color,
					color[k-97]++;					// increment in color array. Push
					dasharray.push (othercount.toString());	// the count of other threads, then
					dasharray.push (threadarray[m]);	// push the thread count for this color.
					othercount = 0;					// Then reset the other color thread count.
				}else{								// If it's not the right color,
					othercount += threadarray[m];	// add to the count of other threads.
				}
			}
			subthread = threadarray.slice(1, threadarray.length-1); // Duplicate middle threads if symmetric.
		}
	dasharray.push(othercount.toString());			// Push the final othercount to finish dasharray.
	threadtotal = threadarray.reduce(getSum, 0) + subthread.reduce(getSum, 0); // Check for dasharray
		if (dasharray[1] != threadtotal){			// that completely skips this color in second value.
			svg.document.write (/*"<br />" + */"#" + String.fromCharCode(k) + " {stroke:" + colors[String.fromCharCode(k)] +
			"; stroke-dasharray:" + dasharray.toString() + ";}\n");	// Writes code for each color present.
		}
	}
svg.document.write ("</style>\n" +					// Generic tartan SVG code.
"<pattern id=\"twill\" height=\"4\" width=\"4\" patternUnits=\"userSpaceOnUse\">\n" +
" <g fill=\"#FFF\">\n" +
"  <rect y=\"2\" width=\"1\" height=\"2\"/>\n" +
"  <rect x=\"1\" y=\"1\" width=\"1\" height=\"2\"/>\n" +
"  <rect x=\"2\" width=\"1\" height=\"2\"/>\n" +
"  <rect x=\"3\" width=\"1\" height=\"1\"/>\n" +
"  <rect x=\"3\" y=\"3\" width=\"1\" height=\"1\"/>\n" +
" </g>\n" +
"</pattern>\n" +
"<mask id=\"weave\" maskUnits=\"-10% -10% 120% 120%\">\n" +
" <rect width=\"100%\" height=\"100%\" fill=\"url(#twill)\"/>\n" +
"</mask>\n" +
"<g transform=\"scale(1 1)\">\n" +
" <g stroke-width=\"600\">\n");

for (n=0; n<26; n++){				// Go through all the colors, and 
	if (color[n] != 0){				// if they are in the pattern, include a line.
		svg.document.write ("  <line id=\"" + String.fromCharCode(n + 97) + "\" x1=\"50%\" x2=\"50%\" y2=\"100%\"/>\n");
	}
}

svg.document.write (" </g>\n" +
" <g mask=\"url(#weave)\" stroke-width=\"100%\">\n");

for (n=0; n<26; n++){				// Go through all the colors, and 
	if (color[n] != 0){				// if they are in the pattern, include a line.
		svg.document.write ("  <line id=\"" + String.fromCharCode(n + 97) + "\" y1=\"50%\" x2=\"100%\" y2=\"50%\"/>\n");
	}
}

svg.document.write (" </g>\n" +		// End of generic tartan SVG code.
"</g>\n" +
"</svg>");
	return (0);						// Return 0=Successful run of code.
}else{return (1);} 					// Return 1=Empty sett pattern.
}

function getSum(total, num) {
  return total + num;
} // </nowiki></pre>