User:Vanisaac/scripts/TartanBuilder.html
From Wikipedia, the free encyclopedia
< User:Vanisaac | scripts
<!DOCTYPE html> <html> <body>
<form> <input type="button" value="submit" onclick="TartanBuild()"></input> </form> <script language="JavaScript">
/**
* 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 + "<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" ){ // 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("<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; // 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 (/*"<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;
} //
</script>
</body> </html>