User:Vanisaac/scripts/TartanBuilder.js

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.1 (alpha), June 2020
 * 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 aligning with colorarray.
var dasharray = [];						// Array of SVG stroke-dasharray values.
var subthread = [0,0];						// Array for all but first and last values in threadarray for summing.
var threadtotal = 0;					// Sum of all values in threadarray.
var othercount = 0;						// Sum of non-color values for stroke-dasharray.
var asym = false;						// Flag for asymmetric sett pattern.
//document.write("Sett: " + sett + " - " + sett.length + "<br />");

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

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);
		}
		if (sett.charAt(i) == '+') {
		asym = true;
		}
	}
	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, push count
				if (m != 0) {						// of other other threads, unless this
					dasharray.push (othercount.toString());	// is the start of the sett, 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, push
					dasharray.push (othercount.toString());	// count of other threads, and reset
					othercount = 0;					// the count of other threads, then push the
					dasharray.push (threadarray[m]);	// thread count for this color.
				}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); // set up for final threadcount.
		}
	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){			// pattern when color isn't found in pattern.
			svg.document.write (/*"<br />" + */"#" + String.fromCharCode(k) + " {stroke:" + colors[String.fromCharCode(k)] +
			"; stroke-dasharray:" + dasharray.toString() + ";}");
		}
	}
svg.document.write ("</style>\n" +
"<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" +
"  <line id=\"B\" x1=\"50%\" x2=\"50%\" y2=\"100%\"/>\n" +
"  <line id=\"K\" x1=\"50%\" x2=\"50%\" y2=\"100%\"/>\n" +
"  <line id=\"G\" x1=\"50%\" x2=\"50%\" y2=\"100%\"/>\n" +
" </g>\n" +
" <g mask=\"url(#weave)\" stroke-width=\"100%\">\n" +
"  <line id=\"B\" y1=\"50%\" x2=\"100%\" y2=\"50%\"/>\n" +
"  <line id=\"K\" y1=\"50%\" x2=\"100%\" y2=\"50%\"/>\n" +
"  <line id=\"G\" y1=\"50%\" x2=\"100%\" y2=\"50%\"/>\n" +
" </g>\n" +
"</g>\n" +
"</svg>");
	return (0);
}else{return (1);} // 1=Empty sett pattern
}

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