From 529a6f421063a55e01d71e00bf99f16d4b235151 Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Sun, 28 Jun 2026 14:17:33 +0200 Subject: [PATCH 01/17] 1 twistmark line with 3 strokes --- docs/js/stitch-gallery.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index fc00544f..6277a6a4 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -334,8 +334,21 @@ const GF_Random = { // copied from GF_stitches.setcolorcode() colorCodeSvg = document.createElement("colorCodeSvg"); - colorCodeSvg.innerHTML = ` - + + colorCodeSvg.innerHTML += ` + + + + + + + + + + + + + ${PairSvg.shapes(displayStitch.toLowerCase())} From 1bc06fead91b77c16eabefefed1c242012c63841 Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Sun, 28 Jun 2026 16:11:08 +0200 Subject: [PATCH 02/17] 4 twistmarks --- docs/js/stitch-gallery.js | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index 6277a6a4..e18baaf4 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -316,7 +316,8 @@ const GF_Random = { let displayStitch; let displayElement; - let threadSvg, colorCodeSvg, figure; + let threadSvg, colorCodeSvg, figure, twistMarkSvg; + let southEast, southWest, northEast, northWest; displayElement = document.getElementById("displayRandomArray"); displayElement.innerHTML = ""; @@ -334,9 +335,16 @@ const GF_Random = { // copied from GF_stitches.setcolorcode() colorCodeSvg = document.createElement("colorCodeSvg"); + twistMarkSvg = document.createElement("twistMarkSvg"); - colorCodeSvg.innerHTML += ` - + southEast = "3"; + southWest = "2"; + northEast = "1"; + northWest = "2"; + + // line not long enough for more than 3 twistmarks + twistMarkSvg.innerHTML = ` + @@ -348,18 +356,25 @@ const GF_Random = { - + + + + + `; + + colorCodeSvg.innerHTML = `0 ${PairSvg.shapes(displayStitch.toLowerCase())} - ` + `; figure = document.createElement("figure"); figure.append(threadSvg); displayElement.appendChild(figure); + displayElement.appendChild(twistMarkSvg); displayElement.appendChild(colorCodeSvg); displayElement.innerHTML += " " + " " + displayStitch; displayElement.innerHTML += "
"; From f1448dcdb4542d032b79e867fcc217488cfe786b Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Sun, 28 Jun 2026 17:09:43 +0200 Subject: [PATCH 03/17] correct no of twistmarks, with max of 3 --- docs/js/stitch-gallery.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index e18baaf4..d889864b 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -337,10 +337,14 @@ const GF_Random = { colorCodeSvg = document.createElement("colorCodeSvg"); twistMarkSvg = document.createElement("twistMarkSvg"); - southEast = "3"; - southWest = "2"; - northEast = "1"; - northWest = "2"; + southEast = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("L","")).length.toString(); + southWest = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("R","")).length.toString(); + northEast = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("L","")).length.toString(); + northWest = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("R","")).length.toString(); + if (southEast > 3) {southEast = 3}; + if (southWest > 3) {southWest = 3}; + if (northEast > 3) {northEast = 3}; + if (northWest > 3) {northWest = 3}; // line not long enough for more than 3 twistmarks twistMarkSvg.innerHTML = ` @@ -362,6 +366,7 @@ const GF_Random = { `; + // todo : place colorCodeSvg on top of twistMarkSvg. Playing with translate seems to cut of edges on the overlap. colorCodeSvg.innerHTML = `0 From 00709f37d8c75a483c7a426c4c81734991a9ce88 Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Mon, 29 Jun 2026 11:24:32 +0200 Subject: [PATCH 04/17] more functions --- docs/js/stitch-gallery.js | 21 +++++++++++---------- docs/random-stitches/test-offline.html | 2 +- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index d889864b..d7ab611f 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -346,6 +346,10 @@ const GF_Random = { if (northEast > 3) {northEast = 3}; if (northWest > 3) {northWest = 3}; + function twistMarkerLine(path,swne) { + return ``; + }; + // line not long enough for more than 3 twistmarks twistMarkSvg.innerHTML = ` @@ -360,16 +364,14 @@ const GF_Random = { - - - - - `; - - // todo : place colorCodeSvg on top of twistMarkSvg. Playing with translate seems to cut of edges on the overlap. - colorCodeSvg.innerHTML = `0 + ${twistMarkerLine("L 30 30 M 30 30 L 40 40", southEast)} + ${twistMarkerLine("L 10 30 M 10 30 L 0 40", southWest)} + ${twistMarkerLine("L 10 10 M 10 10 L 0 0", northWest)} + ${twistMarkerLine("L 30 10 M 30 10 L 40 0", northEast)} + + - + ${PairSvg.shapes(displayStitch.toLowerCase())} @@ -422,4 +424,3 @@ const GF_Random = { - diff --git a/docs/random-stitches/test-offline.html b/docs/random-stitches/test-offline.html index 74a470c7..4fdab8c0 100644 --- a/docs/random-stitches/test-offline.html +++ b/docs/random-stitches/test-offline.html @@ -87,7 +87,7 @@

Stitches Generator

-

Here the simple version, these are not cleaned.

+

Here the simple version. Just the array.

From ebd3c2f6800141f10a2f87784025d8703310f392 Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Mon, 29 Jun 2026 12:30:14 +0200 Subject: [PATCH 05/17] 4 dashes --- docs/js/stitch-gallery.js | 56 +++++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index d7ab611f..3ccdd90a 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -316,7 +316,7 @@ const GF_Random = { let displayStitch; let displayElement; - let threadSvg, colorCodeSvg, figure, twistMarkSvg; + let threadSvg, colorCodeSvg, figure; let southEast, southWest, northEast, northWest; displayElement = document.getElementById("displayRandomArray"); @@ -333,43 +333,48 @@ const GF_Random = { GF_svgP2T.newStitch(displayStitch, 0,0, threadSvg,40,60); GF_svgP2T.addThreadClasses(threadSvg); // this gives the lines their color - // copied from GF_stitches.setcolorcode() - colorCodeSvg = document.createElement("colorCodeSvg"); - twistMarkSvg = document.createElement("twistMarkSvg"); + // set variabeles for twistmarks southEast = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("L","")).length.toString(); southWest = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("R","")).length.toString(); northEast = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("L","")).length.toString(); northWest = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("R","")).length.toString(); - if (southEast > 3) {southEast = 3}; - if (southWest > 3) {southWest = 3}; - if (northEast > 3) {northEast = 3}; - if (northWest > 3) {northWest = 3}; + if (southEast > 4) {southEast = 4}; + if (southWest > 4) {southWest = 4}; + if (northEast > 4) {northEast = 4}; + if (northWest > 4) {northWest = 4}; - function twistMarkerLine(path,swne) { + function twistMarkerBase(path,swne) { return ``; }; + function twistMarkerLine(twistId, path) { + return ` + + ` + }; + + // copied from GF_sttches.setcolorcode() + colorCodeSvg = document.createElement("colorCodeSvg"); + + let t1 = "M -0.8 6 L -0.8 -6"; + let t2 = t1 + " " + "M 0 6 L 0 -6" ; + let t3 = t2 + " " + "M 0.8 6 L 0.8 -6" ; + let t4 = t3 + " " + "M 1.6 6 L 1.6 -6" ; // line not long enough for more than 3 twistmarks - twistMarkSvg.innerHTML = ` + colorCodeSvg.innerHTML = ` - - - - - - - - - - - ${twistMarkerLine("L 30 30 M 30 30 L 40 40", southEast)} - ${twistMarkerLine("L 10 30 M 10 30 L 0 40", southWest)} - ${twistMarkerLine("L 10 10 M 10 10 L 0 0", northWest)} - ${twistMarkerLine("L 30 10 M 30 10 L 40 0", northEast)} + ${twistMarkerLine("twist-1",`${t1}` )} + ${twistMarkerLine("twist-2",`${t2}` )} + ${twistMarkerLine("twist-3",`${t3}` )} + ${twistMarkerLine("twist-4",`${t4}` )} + + ${twistMarkerBase("L 30 30 M 30 30 L 40 40", southEast)} + ${twistMarkerBase("L 10 30 M 10 30 L 0 40", southWest)} + ${twistMarkerBase("L 10 10 M 10 10 L 0 0", northWest)} + ${twistMarkerBase("L 30 10 M 30 10 L 40 0", northEast)} - ${PairSvg.shapes(displayStitch.toLowerCase())} @@ -381,7 +386,6 @@ const GF_Random = { figure.append(threadSvg); displayElement.appendChild(figure); - displayElement.appendChild(twistMarkSvg); displayElement.appendChild(colorCodeSvg); displayElement.innerHTML += " " + " " + displayStitch; displayElement.innerHTML += "
"; From ce3a997fe40fedd54cee70d1ee32161539845429 Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Mon, 29 Jun 2026 13:12:15 +0200 Subject: [PATCH 06/17] 5 dashes --- docs/js/stitch-gallery.js | 43 ++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index 3ccdd90a..8f6463cf 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -333,50 +333,51 @@ const GF_Random = { GF_svgP2T.newStitch(displayStitch, 0,0, threadSvg,40,60); GF_svgP2T.addThreadClasses(threadSvg); // this gives the lines their color - // set variabeles for twistmarks - + // set variabeles for twistmarks southEast = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("L","")).length.toString(); southWest = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("R","")).length.toString(); northEast = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("L","")).length.toString(); northWest = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("R","")).length.toString(); - if (southEast > 4) {southEast = 4}; - if (southWest > 4) {southWest = 4}; - if (northEast > 4) {northEast = 4}; - if (northWest > 4) {northWest = 4}; + if (southEast > 5) {southEast = 5} + if (southWest > 5) {southWest = 5} + if (northEast > 5) {northEast = 5} + if (northWest > 5) {northWest = 5} + + let t1 = "M -1.25 6 L -1.25 -6"; + let t2 = t1 + " " + "M -0.5 6 L -0.5 -6" ; + let t3 = t2 + " " + "M 0.25 6 L 0.25 -6" ; + let t4 = t3 + " " + "M 1 6 L 1 -6" ; + let t5 = t4 + " " + "M 1.75 6 L 1.75 -6" ; function twistMarkerBase(path,swne) { - return ``; - }; + return ``; + } function twistMarkerLine(twistId, path) { return ` ` - }; + } // copied from GF_sttches.setcolorcode() colorCodeSvg = document.createElement("colorCodeSvg"); - let t1 = "M -0.8 6 L -0.8 -6"; - let t2 = t1 + " " + "M 0 6 L 0 -6" ; - let t3 = t2 + " " + "M 0.8 6 L 0.8 -6" ; - let t4 = t3 + " " + "M 1.6 6 L 1.6 -6" ; - - // line not long enough for more than 3 twistmarks + // the middle of the base-path has to be at least 10 units of the centre, else to close to colorcode-block colorCodeSvg.innerHTML = ` - + ${twistMarkerLine("twist-1",`${t1}` )} ${twistMarkerLine("twist-2",`${t2}` )} ${twistMarkerLine("twist-3",`${t3}` )} ${twistMarkerLine("twist-4",`${t4}` )} + ${twistMarkerLine("twist-5",`${t5}` )} - ${twistMarkerBase("L 30 30 M 30 30 L 40 40", southEast)} - ${twistMarkerBase("L 10 30 M 10 30 L 0 40", southWest)} - ${twistMarkerBase("L 10 10 M 10 10 L 0 0", northWest)} - ${twistMarkerBase("L 30 10 M 30 10 L 40 0", northEast)} + ${twistMarkerBase("L 36 36 M 36 36 L 52 52", southEast)} + ${twistMarkerBase("L 16 36 M 16 36 L 0 52", southWest)} + ${twistMarkerBase("L 16 16 M 16 16 L 0 0", northWest)} + ${twistMarkerBase("L 36 16 M 36 16 L 52 0", northEast)} - + ${PairSvg.shapes(displayStitch.toLowerCase())} From 91a99e43607e774673b697477e051686d9284763 Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Wed, 1 Jul 2026 15:43:47 +0200 Subject: [PATCH 07/17] - bigger viewbox for dashes - bigger viewbox and container for threadSvg --- docs/js/stitch-gallery.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index 8f6463cf..4da17000 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -329,11 +329,16 @@ const GF_Random = { // copied from newLegendStitch, as "document.body.appendChild(figure)" does not clean up previous result, and picts to large // without "figcaption" - threadSvg = GF_svgP2T.newSVG(40,60); - GF_svgP2T.newStitch(displayStitch, 0,0, threadSvg,40,60); + let containerWidth = 60; + let containerHeight = Math.max(60, displayStitch.length * 10); + + threadSvg = GF_svgP2T.newSVG(containerWidth,containerHeight); + // Overrule viewbox settings from newSVG. Necessary to line out on bottom of colorcode-element. + threadSvg.setAttribute("viewBox", "-10 -10 " + (containerWidth + 12) + " " + (containerHeight + 12)); + GF_svgP2T.newStitch(displayStitch, 0,0, threadSvg,containerWidth,containerHeight); GF_svgP2T.addThreadClasses(threadSvg); // this gives the lines their color - // set variabeles for twistmarks + // set variables for twistmarks southEast = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("L","")).length.toString(); southWest = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("R","")).length.toString(); northEast = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("L","")).length.toString(); @@ -343,18 +348,18 @@ const GF_Random = { if (northEast > 5) {northEast = 5} if (northWest > 5) {northWest = 5} - let t1 = "M -1.25 6 L -1.25 -6"; - let t2 = t1 + " " + "M -0.5 6 L -0.5 -6" ; - let t3 = t2 + " " + "M 0.25 6 L 0.25 -6" ; - let t4 = t3 + " " + "M 1 6 L 1 -6" ; - let t5 = t4 + " " + "M 1.75 6 L 1.75 -6" ; + let t1 = "M 0.0 6 L 0.0 -6"; + let t2 = t1 + " M 5.0 6 L 5.0 -6"; + let t3 = t2 + " M 2.5 6 L 2.5-6"; + let t4 = t3 + " M -2.5 6 L -2.5 -6"; + let t5 = t4 + " M -5.0 6 L -5.0 -6"; function twistMarkerBase(path,swne) { return ``; } function twistMarkerLine(twistId, path) { - return ` - + return ` + ` } From e5718ae4a69615c55cd26587f70c3816b3626a40 Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Wed, 1 Jul 2026 16:12:47 +0200 Subject: [PATCH 08/17] last bits --- docs/js/stitch-gallery.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index 4da17000..ce1e2b83 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -326,14 +326,14 @@ const GF_Random = { displayStitch = GF_Random.stitchArray[i]; - // copied from newLegendStitch, as "document.body.appendChild(figure)" does not clean up previous result, and picts to large - // without "figcaption" + // Copied from newLegendStitch, as "document.body.appendChild(figure)" does not clean up previous result, and picts to large. + // Without "figcaption", and with much other changes. let containerWidth = 60; let containerHeight = Math.max(60, displayStitch.length * 10); threadSvg = GF_svgP2T.newSVG(containerWidth,containerHeight); - // Overrule viewbox settings from newSVG. Necessary to line out on bottom of colorcode-element. + // Overrule viewbox settings from newSVG. Also necessary to line out on bottom of colorcode-element. threadSvg.setAttribute("viewBox", "-10 -10 " + (containerWidth + 12) + " " + (containerHeight + 12)); GF_svgP2T.newStitch(displayStitch, 0,0, threadSvg,containerWidth,containerHeight); GF_svgP2T.addThreadClasses(threadSvg); // this gives the lines their color @@ -343,11 +343,13 @@ const GF_Random = { southWest = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("R","")).length.toString(); northEast = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("L","")).length.toString(); northWest = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("R","")).length.toString(); + // User-input is limited to max 5; programmers-input to max 8. Because of view-box definition we show a maximum of 5 dashes. if (southEast > 5) {southEast = 5} if (southWest > 5) {southWest = 5} if (northEast > 5) {northEast = 5} if (northWest > 5) {northWest = 5} + // note: these dashes have to fit in the viewbox defined at twistMarkerLine. let t1 = "M 0.0 6 L 0.0 -6"; let t2 = t1 + " M 5.0 6 L 5.0 -6"; let t3 = t2 + " M 2.5 6 L 2.5-6"; @@ -357,7 +359,7 @@ const GF_Random = { function twistMarkerBase(path,swne) { return ``; } - function twistMarkerLine(twistId, path) { + function twistMarkerDash(twistId, path) { return ` ` @@ -366,15 +368,15 @@ const GF_Random = { // copied from GF_sttches.setcolorcode() colorCodeSvg = document.createElement("colorCodeSvg"); - // the middle of the base-path has to be at least 10 units of the centre, else to close to colorcode-block + // the middle of the base-path has to be at least 10 units of the centre, else to close to colourcode-block colorCodeSvg.innerHTML = ` - ${twistMarkerLine("twist-1",`${t1}` )} - ${twistMarkerLine("twist-2",`${t2}` )} - ${twistMarkerLine("twist-3",`${t3}` )} - ${twistMarkerLine("twist-4",`${t4}` )} - ${twistMarkerLine("twist-5",`${t5}` )} + ${twistMarkerDash("twist-1",`${t1}` )} + ${twistMarkerDash("twist-2",`${t2}` )} + ${twistMarkerDash("twist-3",`${t3}` )} + ${twistMarkerDash("twist-4",`${t4}` )} + ${twistMarkerDash("twist-5",`${t5}` )} ${twistMarkerBase("L 36 36 M 36 36 L 52 52", southEast)} ${twistMarkerBase("L 16 36 M 16 36 L 0 52", southWest)} @@ -399,7 +401,6 @@ const GF_Random = { } }, - makeRandomStitchList(stitchesRequired, maxCrosses, maxTwistsBetweenCrosses, maxTwistsBefore, maxTwistsAfter) { // The function can be called with or without attributes. // without Number(), document.value is a string. With unexpected results in function genTwists. From 1a09bf17257c7d9ad035962f97209f907e7e70ad Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Wed, 1 Jul 2026 16:24:10 +0200 Subject: [PATCH 09/17] last bits --- docs/js/stitch-gallery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index ce1e2b83..5281f45f 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -365,7 +365,7 @@ const GF_Random = { ` } - // copied from GF_sttches.setcolorcode() + // copied from GF_stitches.setcolorcode() colorCodeSvg = document.createElement("colorCodeSvg"); // the middle of the base-path has to be at least 10 units of the centre, else to close to colourcode-block From 4b68145900e3359460fbf5959e6fb0e9bea48c34 Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Sun, 5 Jul 2026 16:17:26 +0200 Subject: [PATCH 10/17] seperate function for colorcode-with-twist-marks --- docs/js/stitch-gallery.js | 128 ++++++++++++++++++++------------------ 1 file changed, 67 insertions(+), 61 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index 5281f45f..823a0b95 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -239,8 +239,8 @@ const GF_Random = { // make sure that max(lengthL, lengthR) = lengthAll // The simplified version: if lengthL < lengthAll then lengthR = lengthAll doesn't work well. It generates more R's than L's. // Because: chance(lengthL == lengthAll) = 1/lengthAll and chance(lengthL < lengthAll) = ((lengthAll-1)/lenghtAll). - if (Math.max(lengthL, lengthR ) !== lengthAll) { - if ( Math.floor(Math.random() * 2) === 0) { + if (Math.max(lengthL, lengthR) !== lengthAll) { + if (Math.floor(Math.random() * 2) === 0) { lengthL = lengthAll; } else { lengthR = lengthAll; @@ -312,12 +312,14 @@ const GF_Random = { // I want to keep genRandomStitchList and genRandomStitch as flexible as is. Therefore, construct as below. // Why this display-function, as

also displays stitchArray = genRandomStitchList? // We want to add the colorcode and the threaddiagram to the list. See p2t.newlegendStitch. + + // Functionality taken from P2T.newLegendStitch, GF_stitches.setcolorcode(). + // NewLegendStitch does not clean up previous result (document.body.appendChild(figure). displayRandomStitchList() { let displayStitch; let displayElement; - let threadSvg, colorCodeSvg, figure; - let southEast, southWest, northEast, northWest; + let threadSvg, colorCodeWithTwistsSvg, figure; displayElement = document.getElementById("displayRandomArray"); displayElement.innerHTML = ""; @@ -326,79 +328,84 @@ const GF_Random = { displayStitch = GF_Random.stitchArray[i]; - // Copied from newLegendStitch, as "document.body.appendChild(figure)" does not clean up previous result, and picts to large. - // Without "figcaption", and with much other changes. - let containerWidth = 60; let containerHeight = Math.max(60, displayStitch.length * 10); - threadSvg = GF_svgP2T.newSVG(containerWidth,containerHeight); + threadSvg = GF_svgP2T.newSVG(containerWidth, containerHeight); // Overrule viewbox settings from newSVG. Also necessary to line out on bottom of colorcode-element. threadSvg.setAttribute("viewBox", "-10 -10 " + (containerWidth + 12) + " " + (containerHeight + 12)); - GF_svgP2T.newStitch(displayStitch, 0,0, threadSvg,containerWidth,containerHeight); + GF_svgP2T.newStitch(displayStitch, 0, 0, threadSvg, containerWidth, containerHeight); GF_svgP2T.addThreadClasses(threadSvg); // this gives the lines their color - // set variables for twistmarks - southEast = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("L","")).length.toString(); - southWest = ((displayStitch.substring(displayStitch.lastIndexOf("C")+1)).replaceAll("R","")).length.toString(); - northEast = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("L","")).length.toString(); - northWest = ((displayStitch.substring(0, displayStitch.indexOf("C"))).replaceAll("R","")).length.toString(); - // User-input is limited to max 5; programmers-input to max 8. Because of view-box definition we show a maximum of 5 dashes. - if (southEast > 5) {southEast = 5} - if (southWest > 5) {southWest = 5} - if (northEast > 5) {northEast = 5} - if (northWest > 5) {northWest = 5} - - // note: these dashes have to fit in the viewbox defined at twistMarkerLine. - let t1 = "M 0.0 6 L 0.0 -6"; - let t2 = t1 + " M 5.0 6 L 5.0 -6"; - let t3 = t2 + " M 2.5 6 L 2.5-6"; - let t4 = t3 + " M -2.5 6 L -2.5 -6"; - let t5 = t4 + " M -5.0 6 L -5.0 -6"; - - function twistMarkerBase(path,swne) { - return ``; - } - function twistMarkerDash(twistId, path) { - return ` + colorCodeWithTwistsSvg = GF_svgP2T.newSVG(50, 50); + colorCodeWithTwistsSvg = GF_Random.colorCodeWithTwistMarks(displayStitch,colorCodeWithTwistsSvg ); + + figure = document.createElement("figure"); + figure.append(threadSvg); + + displayElement.appendChild(figure); + displayElement.appendChild(colorCodeWithTwistsSvg); + displayElement.innerHTML += " " + " " + displayStitch; + displayElement.innerHTML += "
"; + + } + }, + + colorCodeWithTwistMarks(randomStitch, colorCodeWithTwistsSvg) { + + // set variables for twistmarks + let southEast = ((randomStitch.substring(randomStitch.lastIndexOf("C") + 1)).replaceAll("L", "")).length.toString(); + let southWest = ((randomStitch.substring(randomStitch.lastIndexOf("C") + 1)).replaceAll("R", "")).length.toString(); + let northEast = ((randomStitch.substring(0, randomStitch.indexOf("C"))).replaceAll("L", "")).length.toString(); + let northWest = ((randomStitch.substring(0, randomStitch.indexOf("C"))).replaceAll("R", "")).length.toString(); + + // User-input is limited to max 5; programmers-input to max 8. Because of view-box definition we show a maximum of 5 dashes. + if (southEast > 5) { southEast = 5 } + if (southWest > 5) { southWest = 5 } + if (northEast > 5) { northEast = 5 } + if (northWest > 5) { northWest = 5 } + + // note: these dashes have to fit in the viewbox defined at twistMarkerLine. + let t1 = "M 0.0 6 L 0.0 -6"; + let t2 = t1 + " M 5.0 6 L 5.0 -6"; + let t3 = t2 + " M 2.5 6 L 2.5-6"; + let t4 = t3 + " M -2.5 6 L -2.5 -6"; + let t5 = t4 + " M -5.0 6 L -5.0 -6"; + + function twistMarkerBase(path, swne) { + return ``; + } + + function twistMarkerDash(twistId, path) { + return ` ` - } + } + - // copied from GF_stitches.setcolorcode() - colorCodeSvg = document.createElement("colorCodeSvg"); - - // the middle of the base-path has to be at least 10 units of the centre, else to close to colourcode-block - colorCodeSvg.innerHTML = ` - - - ${twistMarkerDash("twist-1",`${t1}` )} - ${twistMarkerDash("twist-2",`${t2}` )} - ${twistMarkerDash("twist-3",`${t3}` )} - ${twistMarkerDash("twist-4",`${t4}` )} - ${twistMarkerDash("twist-5",`${t5}` )} - - ${twistMarkerBase("L 36 36 M 36 36 L 52 52", southEast)} - ${twistMarkerBase("L 16 36 M 16 36 L 0 52", southWest)} - ${twistMarkerBase("L 16 16 M 16 16 L 0 0", northWest)} - ${twistMarkerBase("L 36 16 M 36 16 L 52 0", northEast)} + + // the middle of the base-path has to be at least 10 units of the centre, else to close to colourcode-block + colorCodeWithTwistsSvg.innerHTML = ` + + ${twistMarkerDash("twist-1", `${t1}`)} + ${twistMarkerDash("twist-2", `${t2}`)} + ${twistMarkerDash("twist-3", `${t3}`)} + ${twistMarkerDash("twist-4", `${t4}`)} + ${twistMarkerDash("twist-5", `${t5}`)} + + ${twistMarkerBase("L 36 36 M 36 36 L 52 52", southEast)} + ${twistMarkerBase("L 16 36 M 16 36 L 0 52", southWest)} + ${twistMarkerBase("L 16 16 M 16 16 L 0 0", northWest)} + ${twistMarkerBase("L 36 16 M 36 16 L 52 0", northEast)} - ${PairSvg.shapes(displayStitch.toLowerCase())} + ${PairSvg.shapes(randomStitch.toLowerCase())} `; - figure = document.createElement("figure"); - figure.append(threadSvg); - - displayElement.appendChild(figure); - displayElement.appendChild(colorCodeSvg); - displayElement.innerHTML += " " + " " + displayStitch; - displayElement.innerHTML += "
"; - - } + return colorCodeWithTwistsSvg; }, makeRandomStitchList(stitchesRequired, maxCrosses, maxTwistsBetweenCrosses, maxTwistsBefore, maxTwistsAfter) { @@ -434,4 +441,3 @@ const GF_Random = { } - From 703aed0cd93d45800fe0fb44cb4c782e56567d5c Mon Sep 17 00:00:00 2001 From: MarianTempels <28353067+MAETempels@users.noreply.github.com> Date: Sun, 5 Jul 2026 16:25:48 +0200 Subject: [PATCH 11/17] remove one attrib to many --- docs/js/stitch-gallery.js | 12 ++++-------- docs/random-stitches/test-offline.html | 4 ++-- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/docs/js/stitch-gallery.js b/docs/js/stitch-gallery.js index 823a0b95..8a18468d 100644 --- a/docs/js/stitch-gallery.js +++ b/docs/js/stitch-gallery.js @@ -319,7 +319,7 @@ const GF_Random = { let displayStitch; let displayElement; - let threadSvg, colorCodeWithTwistsSvg, figure; + let threadSvg, colorCodeWithTwistsSvg; displayElement = document.getElementById("displayRandomArray"); displayElement.innerHTML = ""; @@ -340,12 +340,10 @@ const GF_Random = { colorCodeWithTwistsSvg = GF_svgP2T.newSVG(50, 50); colorCodeWithTwistsSvg = GF_Random.colorCodeWithTwistMarks(displayStitch,colorCodeWithTwistsSvg ); - figure = document.createElement("figure"); - figure.append(threadSvg); - - displayElement.appendChild(figure); + displayElement.appendChild(threadSvg); + displayElement.innerHTML += " ".repeat(5); displayElement.appendChild(colorCodeWithTwistsSvg); - displayElement.innerHTML += " " + " " + displayStitch; + displayElement.innerHTML += " ".repeat(5)+ displayStitch; displayElement.innerHTML += "
"; } @@ -382,8 +380,6 @@ const GF_Random = { ` } - - // the middle of the base-path has to be at least 10 units of the centre, else to close to colourcode-block colorCodeWithTwistsSvg.innerHTML = ` diff --git a/docs/random-stitches/test-offline.html b/docs/random-stitches/test-offline.html index 4fdab8c0..aff72520 100644 --- a/docs/random-stitches/test-offline.html +++ b/docs/random-stitches/test-offline.html @@ -75,10 +75,10 @@

Stitches Generator

Generate 2 stitches