User:Vanisaac/scripts/TartanBuilder.html

<!DOCTYPE html>

 

/** * 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.11 (alpha), June-July 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 * */ //

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 + " ");

svg = window.open; svg.document.write ("\n\n" + "");			// Basic SVG header

if (sett !== ''){ for (i=0; i= "a" && sett.charAt(i) <= "z" ){ // If it's a letter, colorarray.push (sett.charAt(i)); // push its value into colorarray, lenarray.push (i);			// and push its location into lenarray. } else if (sett.charAt(i) == '+' && i == 0) {	// If it's the plus sign in first position, asym = true;				// then set the flag for an asymmetrical tartan. } else if (sett.charAt(i) < "0" || sett.charAt(i) > "9") {	// Check if it's a number. return (2);					// If not, return 2=Invalid character in sett pattern. }	}	lenarray.push (i);					// Mark location of the end of sett string. //	document.write(" " + 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 + " "); for (k='a'.charCodeAt; k<='z'.charCodeAt; k++){	// Generates dasharray for each color. othercount = 0;						// Initialize othercount variable, and dasharray = [];						// initialize dasharray. if (colorarray[0] != String.fromCharCode(k)) {	// Check if first element in colorarray is dasharray.push (0);			// the color, and push a null "0" to dasharray if not. }								// This starts the dasharray on blank 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 (/*" " + */"#" + String.fromCharCode(k) + " {stroke:" + colors[String.fromCharCode(k)] +			"; stroke-dasharray:" + dasharray.toString + ";}\n");	// Writes code for each color present. }	} svg.document.write (" \n" +					// Generic tartan SVG code. "\n" + " \n" + " \n" + "  \n" + "  \n" + "  \n" + "  \n" + " \n" + " \n" + "\n" + " \n" + " \n" + "\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" + " "); return (0);						// Return 0=Successful run of code. }else{return (1);} 					// Return 1=Empty sett pattern. }

function getSum(total, num) { return total + num; } //