Skip to content

Commit

Permalink
replacement via form
Browse files Browse the repository at this point in the history
  • Loading branch information
@jo-pol
jo-pol committed Nov 30, 2024
1 parent 0fd6dba commit 339b24d
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 106 deletions.
147 changes: 73 additions & 74 deletions docs/_includes/snow/hexa.html
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,84 @@
<head>
<script src="snow-6.js" type="text/javascript"></script>
<script src="hexa.js" type="text/javascript"></script>
<!-- dirty trick to test stand alone,
in markdown you have to include both js and html
-->
</head>

<form>
<input value="tc,rclcrc,clcrcl,ct" spellcheck="false">
<input id="replacement" value="tc,rclcrc,clcrcl,ct" spellcheck="false">
<span style="display: inline-block">
flip:
<button>&harr;</button>
<button>&varr;</button>
<button>both</button>
<button onclick="flip_b2d('replacement')" disabled>&harr;</button>
<button onclick="flip_b2p('replacement')" disabled>&varr;</button>
<button onclick="flip_b2d('replacement');flip_b2p('replacement')" disabled>both</button>
</span>
</form>
<br>

<svg id="svg2" width="78.556015" height="90.708672" xmlns="http://www.w3.org/2000/svg">
<defs
id="defs11">
<marker style="overflow:visible" id="Arrow1Send-0" refX="0" refY="0" orient="auto">
<path
transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path1212-9" />
</marker>
</defs>
<path
style="fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 72.009683,18.897637 -9.8195,17.007874"
id="path1096" />
<path
style="opacity:0.2;fill:#ff0202;stroke-width:7.93701;stroke-linecap:round;stroke-linejoin:round"
d="m 65.463353,15.118109 13.09266,7.559055 V 37.795275 L 65.463353,45.35433 52.370683,37.795275 V 22.677164 Z"
id="path962" />
<path
style="fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 32.731663,34.015748 9.8195,17.007874"
id="path1622" />
<path
style="opacity:0.2;fill:#ff0202;stroke-width:7.93701;stroke-linecap:round;stroke-linejoin:round"
d="m 39.277993,30.23622 -13.09266,7.559055 v 15.118111 l 13.09266,7.559052 13.09267,-7.559052 V 37.795275 Z"
id="path1620" />
<path
style="fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 58.917013,49.133858 9.8195,17.00787"
id="path1646" />
<path
style="opacity:0.2;fill:#ff0202;stroke-width:7.93701;stroke-linecap:round;stroke-linejoin:round"
d="m 65.463343,45.35433 -13.09266,7.559055 v 15.118113 l 13.09266,7.55905 13.09267,-7.55905 V 52.913385 Z"
id="path1648" />
<path
style="fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 32.731673,3.779528 9.8195,17.007874"
id="path1652" />
<path
style="opacity:0.2;fill:#ff0202;stroke-width:7.93701;stroke-linecap:round;stroke-linejoin:round"
d="m 39.278003,0 -13.09266,7.559055 v 15.118111 l 13.09266,7.559055 13.09267,-7.559055 V 7.559055 Z"
id="path1654" />
<path
style="opacity:0.3;fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="M 19.639,49.133859 9.8195,66.141728"
id="path2031" />
<path
style="opacity:0.2;fill:#ff0202;stroke-width:7.93701;stroke-linecap:round;stroke-linejoin:round"
d="m 13.09267,45.354331 13.092663,7.559055 V 68.031498 L 13.09267,75.590548 0,68.031498 V 52.913386 Z"
id="path2033" />
<path
style="opacity:0.3;fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 32.731663,64.251978 9.8195,17.00787"
id="path2331" />
<path
style="opacity:0.2;fill:#ff0202;stroke-width:7.93701;stroke-linecap:round;stroke-linejoin:round"
d="m 39.277993,60.472448 -13.09266,7.55906 v 15.11811 l 13.09266,7.55905 13.09267,-7.55905 v -15.11811 z"
id="path2333" />
<path
style="opacity:0.3;fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 6.54634,18.897638 9.8195,17.007874"
id="path2337" />
<path
style="opacity:0.2;fill:#ff0202;stroke-width:7.93701;stroke-linecap:round;stroke-linejoin:round"
d="M 13.09267,15.11811 1e-5,22.677165 v 15.118111 l 13.09266,7.559055 13.092673,-7.559055 V 22.677165 Z"
id="path2339" />
</svg>
<svg id="svg2" width="78.556015" height="90.708672" xmlns="http://www.w3.org/2000/svg">
<defs
id="defs11">
<marker style="overflow:visible" id="Arrow1Send-0" refX="0" refY="0" orient="auto">
<path
transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path1212-9"/>
</marker>
</defs>
<path
style="fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 72.009683,18.897637 -9.8195,17.007874"/>
<path
style="opacity:0.2;fill:#ff0202"
d="m 65.463353,15.118109 13.09266,7.559055 V 37.795275 L 65.463353,45.35433 52.370683,37.795275 V 22.677164 Z"
onclick="setHref(this.id, 'replacement','toDiagrams')" id="hexaNE"/>
<path
style="fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 32.731663,34.015748 9.8195,17.007874"/>
<path
style="opacity:0.2;fill:#ff0202"
d="m 39.277993,30.23622 -13.09266,7.559055 v 15.118111 l 13.09266,7.559052 13.09267,-7.559052 V 37.795275 Z"
onclick="setHref(this.id, 'replacement', 'toDiagrams')" id="hexaCenter"/>
<path
style="fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 58.917013,49.133858 9.8195,17.00787"/>
<path
style="opacity:0.2;fill:#ff0202"
d="m 65.463343,45.35433 -13.09266,7.559055 v 15.118113 l 13.09266,7.55905 13.09267,-7.55905 V 52.913385 Z"
onclick="setHref(this.id, 'replacement', 'toDiagrams')" id="hexaSE"/>
<path
style="fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 32.731673,3.779528 9.8195,17.007874"/>
<path
style="opacity:0.2;fill:#ff0202"
d="m 39.278003,0 -13.09266,7.559055 v 15.118111 l 13.09266,7.559055 13.09267,-7.559055 V 7.559055 Z"
onclick="setHref(this.id, 'replacement', 'toDiagrams')" id="hexaN"/>
<path
style="opacity:0.3;fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="M 19.639,49.133859 9.8195,66.141728"/>
<path
style="opacity:0.2;fill:#ff0202"
d="m 13.09267,45.354331 13.092663,7.559055 V 68.031498 L 13.09267,75.590548 0,68.031498 V 52.913386 Z"
onclick="setHref(this.id, 'replacement', 'toDiagrams')" id="hexaSW"/>
<path
style="opacity:0.3;fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 32.731663,64.251978 9.8195,17.00787"/>
<path
style="opacity:0.2;fill:#ff0202"
d="m 39.277993,60.472448 -13.09266,7.55906 v 15.11811 l 13.09266,7.55905 13.09267,-7.55905 v -15.11811 z"
onclick="setHref(this.id, 'replacement', 'toDiagrams')" id="hexaS"/>
<path
style="opacity:0.3;fill:#ff0202;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow1Send-0)"
d="m 6.54634,18.897638 9.8195,17.007874"/>
<path
style="opacity:0.2;fill:#ff0202"
d="M 13.09267,15.11811 1e-5,22.677165 v 15.118111 l 13.09266,7.559055 13.092673,-7.559055 V 22.677165 Z"
onclick="setHref(this.id, 'replacement', 'toDiagrams')" id="hexaNW"/>
</svg>
<button>
<a id="toDiagrams" target="_blank" href="https://d-bl.github.io/GroundForge/stitches?patchWidth=11&patchHeight=10&footside=b,-,b,-&tile=3217,1783,3248,1731,&headside=7,8,-,c&shiftColsSW=0&shiftRowsSW=4&shiftColsSE=4&shiftRowsSE=2&m1=llctt&e1=ctc&d1=rc&c1=tc&b1=lcrclc&a1=rrctt&m2=llctt&e2=ctc&d2=cr&c2=crclcr&b2=ct&e3=lc&d3=ctc&c3=cr&b3=ctc&a3=rrctt&m4=llctt&e4=cl&d4=ctc&c4=ctc&b4=lc">
to diagrams
</a>
</button>
</form>
81 changes: 81 additions & 0 deletions docs/_includes/snow/hexa.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
function flip_b2d(id) {
const n = document.getElementById(id);
n.value = n.value.toLowerCase().replace(/l/g,"R").replace(/r/g,"L").toLowerCase();
n.focus();
}

function flip_b2p(id) {
const n = document.getElementById(id);
n.value = n.value.toLowerCase().split("").reverse().join("")
n.focus()
}

function setHref(hexaId, stitchesId, hrefId) {
const hrefNode = document.getElementById(hrefId);
const stitchArray = document.getElementById(stitchesId).value.toLowerCase().split(",");
const nrOfStitches = stitchArray.length;
if (nrOfStitches !== 4) {
alert("Sorry, replacement only works for 4 stitches in the text field "+stitchArray)
return
}
const q = getQueryParams(hrefNode.getAttribute("href"));
switch (hexaId) {
// S and Z represent the working orders of the stitches
//
// b1,c1
// S center
// b2,c2 d2,e2
// Z SE/NW
// b3,c3 d3,e3
// S N/S
// b4,c4 d4,e4
// S NE/SW
// d1,e1
case "hexaCenter":
q.set("c1", stitchArray[0]);
q.set("b1", stitchArray[1]);
q.set("c2", stitchArray[2]);
q.set("b2", stitchArray[3]);
break;
case "hexaNW":
case "hexaSE":
q.set("d2", stitchArray[0]);
q.set("e2", stitchArray[1]);
q.set("d3", stitchArray[2]);
q.set("e3", stitchArray[3]);
break;
case "hexaN":
case "hexaS":
q.set("c3", stitchArray[0]);
q.set("b3", stitchArray[1]);
q.set("c4", stitchArray[2]);
q.set("b4", stitchArray[3]);
break;
case "hexaNE":
case "hexaSW":
q.set("e4", stitchArray[0]);
q.set("d4", stitchArray[1]);
q.set("e1", stitchArray[2]);
q.set("d1", stitchArray[3]);
break;
}
let newQ = Array
.from(q.entries())
.map(([key, value]) => `${encodeURIComponent(key)}=${value.replace(/%2C/g, ',').replace(/%2D/g, '-')}`)
.join('&');
console.log(newQ);
hrefNode.setAttribute('href', "https://d-bl.github.io/GroundForge/stitches?" + newQ);
}

function getQueryParams(url) {
const queryParams = new Map();
const queryString = url.split('?')[1];
if (queryString) {
const pairs = queryString.split('&');
pairs.forEach(pair => {
const [key, value] = pair.split('=');
queryParams.set(decodeURIComponent(key), decodeURIComponent(value));
});
}
return queryParams;
}
Binary file removed docs/snow-stitches/blobs.png
View file
Binary file not shown.
Binary file removed docs/snow-stitches/capture-of-double-ring-pair.png
View file
Binary file not shown.
47 changes: 15 additions & 32 deletions docs/snow-stitches/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,40 @@ layout: default
title: Snowflakes
---

So far, about a [template] intended for fun with snowflakes.

Introduction
------------
A recipe for snowflake fun with a [template].

![sample](sample.png?align=left)
We saw someone using a double ring pair around snowflakes.
Babette posted her invention of a double ring pair around snowflakes.
It is a variation of ground B4.1 in [Viele Gute Gründe] by Ulrike Volker-Löhr,
The corners of te ring pairs are in fact compact snowflakes.
Curiosity led to a method to generate all kinds of variations with GroundForge.

![pairs as threads for a snowflake](blobs.png?align=right)
We can interpret pair diagrams of snowflakes as thread diagrams.
In the figure on the right we see blobs highlighting four stitches in such a thread diagram.
The caption enumerates these stitches in the order they are worked.
The R means we start working with the two pairs on the right.
More examples (and explanations) on [MAE-gf](/MAE-gf/docs/snow-stitches/#examples).

We can assign the stitches from the blobs to a template to get diagrams as in the screenshot below.
This is example is a [reconstruction] of a ground with a double ring pair.
See also the [color coding](/GroundForge-help/color-rules).

![img.png](capture-of-double-ring-pair.png)
Curiosity by the GroundForge team led to a recipe to generate all kinds of variations.

![](capture-extract.svg?align=right)
The recipe boils down to replace three-pair spiders in a template and use the resulting thread diagram as pair diagram.
[MAE-gf](/MAE-gf/docs/snow-stitches/#examples) has some examples for replacements and a recipe for more.
On a fresh page, the _to-diagrams_ button shows a reconstruction of the double ring pair.
The star in the center of the hexagonal ring is a snowflake
which can become one of B3.47-B3.51 and more.

For now, you have to assign sixteen stitches one by one to this [template]:
The [template] requires to replace sixteen stitches:
one for each corner of the squares shown on the right.


Under construction
------------------

The hexagons below match the squares above.
Note that one of the black arrows has another direction.
Note that in both cases one element is flipped.

<script>{% include snow/hexa.js %}</script>
{% include snow/hexa.html %}

The form is not yet active. A click on a hexagon should assign the stitches in the text field and show the changes in the template.
Subsequently, follow the links to the _pairs from threads_ page to assign stitches for the actual snowflakes.
A click on a hexagon should replace all stitches of one spider in the template with the stitches in the text field.
When going to the diagrams page, you should see the result.
When satisfied, follow the links to the _pairs from threads_ page to assign stitches for the actual snowflakes.
Even without that last step it can be fun to play with configurations of snowflakes.

Another challenge is to support a variety of blob counts and starting sides.
For that purpose we should be able to combine any of the following elements into a valid template.
Challenge for the form developer: support a variety of replacement stitch counts and starting sides.
For that purpose it should be possible to combine any of the following elements into a valid template
and keep track of count changes and directions.

![](plaits.svg)

[Viele Gute Gründe]: https://www.librarything.com/work/2331526/book/11899122
[reconstruction]: https://d-bl.github.io/GroundForge/stitches?patchWidth=11&patchHeight=10&footside=b,-,b,-&tile=3217,1783,3248,1731,&headside=7,8,-,c&shiftColsSW=0&shiftRowsSW=4&shiftColsSE=4&shiftRowsSE=2&m1=llctt&e1=ctc&d1=rc&c1=tc&b1=lcrclc&a1=rrctt&m2=llctt&e2=ctc&d2=cr&c2=crclcr&b2=ct&e3=lc&d3=ctc&c3=cr&b3=ctc&a3=rrctt&m4=llctt&e4=cl&d4=ctc&c4=ctc&b4=lc&droste2=
[example]: https://d-bl.github.io/GroundForge/stitches?patchWidth=11&patchHeight=10&footside=b,-,b,-&tile=3217,1783,3248,1731,&headside=7,8,-,c&shiftColsSW=0&shiftRowsSW=4&shiftColsSE=4&shiftRowsSE=2&m1=llctt&e1=ctc&d1=rc&c1=tc&b1=lcrclc&a1=rrctt&m2=llctt&e2=ctc&d2=cr&c2=crclcr&b2=ct&e3=lc&d3=ctc&c3=cr&b3=ctc&a3=rrctt&m4=llctt&e4=cl&d4=ctc&c4=ctc&b4=lc&droste2=
[template]: https://d-bl.github.io/GroundForge/stitches.html?patchWidth=11&patchHeight=10&footside=b,-,b,-&tile=3217,1783,3248,1731,&headside=7,8,-,c&shiftColsSW=0&shiftRowsSW=4&shiftColsSE=4&shiftRowsSE=2&m1=llctt&e1=ctc&d1=ctc&c1=ctc&b1=ctc&a1=rrctt&m2=llctt&e2=ctc&d2=ctc&c2=ctc&b2=ctc&e3=ctc&d3=ctc&c3=ctc&b3=ctc&a3=rrctt&m4=llctt&e4=ctc&d4=ctc&c4=ctc&b4=ctc

0 comments on commit 339b24d

Please sign in to comment.