new banner, short help videos (#14)

* video clips * titles for pages * clarified last step * more generic download description * intro for swatch size and reordered * 4 color code explained for all-in-one as split-up pages * un-duplicate * standard header for all d-bl repo-s * restored link to tesselace site * propose changes link * broken link
d-bl · Nov 18, 2023 · 5383ee0 · 5383ee0
1 parent d397eae
commit 5383ee0
Show file tree

Hide file tree

Showing 21 changed files with 161 additions and 54 deletions.
diff --git a/docs/Download.md b/docs/Download.md
@@ -4,27 +4,33 @@ title: GroundForge download
 ---
 
 The download icon ![](/GroundForge/images/download.jpg) 
-downloads:
-* templates for an [Inkscape plugin](/inkscape-bobbinlace/)
-  from the "pattern definition" panel
-* the diagram as scalable image from the other panels
+may apply to:
+* a diagram as scalable vector image from
+* a template for an [Inkscape plugin](/inkscape-bobbinlace/)
+  (on the "pattern definition" panel on the all-in-one page) 
 
 Templates
 ---------
+
+The download may also appear as button in a phrase.
+
 A template is a text file, please preview before trying to apply:
 it might contain an error message.
+
 The plugin renders regular or circular patterns from the download file.
 These templates are not available on iOS nor Android (read: tablets, smartphones),
-Inkscape itself does not run on these systems.
+Inkscape does not run on these systems.
 
 Diagrams
 --------
 The download icon for diagrams launches a download dialog on a mouse click,
-when tapping, you get a link that opens the dialog.
-You can view a download in a browser by dragging it with your mouse between the tabs:  
+when tapping on a tablet or smartphone, you get a link that opens the dialog.
+
+On desk/lap-tops you can view a download in a browser
+by dragging it with your mouse between the tabs:  
 ![](images/download.png)
 
-Some bowsers may have a limit on the size of the downloads. 
+Some browsers may have a limit on the size of the downloads. 
 
 Some tablets open a download in a browser, some of those fail to render. 
 Other save a download in a photo section, 

diff --git a/docs/History.md b/docs/History.md
@@ -61,4 +61,4 @@ the algorithm figures out a working order to create the lace just like a real la
 [node]: https://github.com/d-bl/GroundForge/blob/918ab7aa3601e709475aa4b80baa388f2bd1161e/src/main/scala/dibl/NodeProps.scala#L27-L32
 [TesselaceThumbs]: https://github.com/d-bl/GroundForge/blob/918ab7aa3601e709475aa4b80baa388f2bd1161e/src/test/scala/dibl/TesselaceThumbs.scala#L66
 [composition]: /GroundForge/images/matrix-template.png
-[TesseLace]: http://TesseLace.com
+[TesseLace]: https://tesselacedotcom.wordpress.com
diff --git a/docs/Patch-Size.md b/docs/Patch-Size.md
@@ -5,35 +5,43 @@ title: Swatch Size
 Swatch Size
 ===========
 
-Changing the dimensions of the diagrams may have some unexpected consequences.
+The following manipulated screenshot illustrates the difference between
+the _tile_ size (small green boxes) and the _swatch_ size (big red boxes).
+Changing the dimensions of the swatch size may have some unexpected consequences.
 
-Override maximum size
----------------------
-The arrows of the input fields are maximized such that
-the swatch snugly fits on an A4.
-For a larger swatch size you can type any number.
+![](images/swatch-size.png)
 
-With foot sides added to a maximum swatch size, the pattern spills over a portrait A4.
-When the pattern doesn't fit on an A4, the maximum available space will become a portrait A2.
-
-Large sizes and slow devices
-----------------------------
-Note that a large swatch size makes a diagram slower to render.
-On slow devices like tablets and phones that might give the impression that links to large swatches don't work.
-Those links can even block a device.
-So create links with patch sizes just large enough to recognize the pattern, visitors can easily increment the size.
-
-When you specify a swatch that is too small, (or a link with no dimensions) the size will be automatically increased to contain at least one tile.
 
 Right foot sides
 ---------------
-When a diagram has a foot side on the right, it will usually match only for every so many columns. You may have to reassign the stitches.
 
-If you want another number, go to the "Pattern definition" section:
-rotating the rows in the right field might help but you might need more changes.
+When a diagram has a foot side on the right, it will usually match only for every so many columns.
+You may also have to reassign the stitches.
+
+If you want another number, go to "Pattern definition":
+rotating the rows in the right field might help, but you might need more changes.
 For example for this [pattern](/GroundForge/tiles?patchWidth=13&patchHeight=20&g1=ctct&a1=ctcttl&s2=ctcttr&r2=ctcrr&q2=ctc&h2=ct&f2=ct&d2=ct&c2=ctc&b2=ctc&r3=ctc&q3=ctcl&i3=ctct&g3=ctc&e3=ctct&d3=ct&c3=ctc&b3=ctcll&h4=ctc&f4=ctc&c4=ctc&b4=ctc&a4=ctcttl&r5=ctcrr&q5=ctc&i5=ctc&h5=ctc&g5=ctc&f5=ctc&e5=ctc&d5=ct&s6=ctcttr&h6=ctc&g6=ctc&f6=ctc&r7=ctc&q7=ctcl&i7=ctcr&g7=ctc&e7=ctcl&d7=ct&c7=ctc&b7=ctcll&a7=ctcttl&r8=ctcrr&q8=ctc&h8=ctcr&f8=ctcl&d8=ct&c8=ctc&b8=ctc&s9=ctcttr&r9=ctc&q9=ctcl&i9=ctct&g9=ctct&e9=ctct&h10=ct&f10=ct&d10=ct&c10=ctc&b10=ctcll&footside=b--,xcd,-11,b88,xxx,---,aaa,x78,x--,-aa&tile=---5--,d-b-c-,15-5-5,--5-5-,c63532,--158-,ab-5-c,8-5-5-,-5-5-5,b-5-5-&headside=---,DDD,14X,--X,DD-,--C,ABX,88-,11C,XXX&footsideStitch=ctct&tileStitch=ctc&headsideStitch=ctct&shiftColsSW=0&shiftRowsSW=10&shiftColsSE=6&shiftRowsSE=5)
 you would have to change as shown below when switching
-between an odd and even number of spider columns. 
+between an odd and even number of spider columns.
 Other widths will match with neither of the variations.
 
 ![](images/right-footside.png)
+
+Override maximum size
+---------------------
+
+The up/down arrows on the input fields are maximized such that
+the swatch snugly fits on an A4.
+For a larger swatch size you can type any number.
+
+The tile size is the minimum for the _rendered_ swatch size.
+
+With foot sides added to a maximum swatch size, the pattern spills over a portrait A4.
+The maximum available space may be a portrait A2 or A1, depending on the page.
+
+Large sizes and slow devices
+----------------------------
+
+When sharing links to patterns, please keep in mind that others might have less powerful devices.
+Links to patterns with large swatches may block these devices.
+So create links with patch sizes just large enough to recognize the pattern, visitors can easily increment the size.
diff --git a/docs/Reshape-Patterns.md b/docs/Reshape-Patterns.md
@@ -113,6 +113,6 @@ When done with adjusting the pattern you might do all kind of other things with
 
 [SVG editor]: https://en.wikipedia.org/wiki/Comparison_of_vector_graphics_editors#File_format_support
 
-[fill]: https://web.archive.org/web/20220517070441/https://tesselace.com/2017/11/08/filling-a-shape-with-a-lace-ground/
+[fill]: https://tesselacedotcom.wordpress.com/2017/11/08/filling-a-shape-with-a-lace-ground/
 
 [bend]: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathEffects-BendTool.html
diff --git a/docs/_includes/Sidebar.md b/docs/_includes/Sidebar.md
@@ -13,7 +13,7 @@
 
 ## GroundForge
 
-* [Diagram editor](/GroundForge/tiles)
+* [Diagram editor](/GroundForge/stitches)
 * {% if page.name == 'about-us.md' %} [User guide](/GroundForge/) {% else %} User guide {% endif %}
 * [Net variations](/GroundForge/nets)
 * [Symmetries](/GroundForge/symmetry)
@@ -62,6 +62,6 @@
 ### Contribute
 
 * [Share and reuse](/GroundForge-help/Reuse)
-* [propose changes]({{%20site.github.repository_url%20}}/edit/master/docs/{{%20page.path%20}} "typo's, grammar, whatever") to this page.
+* [propose changes]({{site.github.repository_url}}/edit/master/docs/{{page.path}} "typo's, grammar, whatever") to this page.
 * [![-](/GroundForge/assets/images/CC_some_rights_reserved.png)](https://github.com/d-bl/GroundForge/#licenses)  
     The [code](https://github.com/d-bl/GroundForge/tree/master/src) has a [GPL-v3](https://github.com/d-bl/GroundForge#licenses) license, the [pages](https://github.com/d-bl/GroundForge/tree/master/docs) a [cc-by](http://creativecommons.org/licenses/by/4.0/) license.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -25,19 +25,16 @@
 <header lang="en">
     <div class="outer">
       <div class="inner">
-        <a href="{{ '/' | absolute_url }}">
-            <h1>{{ site.title | default: site.github.repository_name }}</h1>
-        </a>
-        <h2>{{ site.description | default: site.github.project_tagline }}</h2>
-          <a href="{{ site.github.repository_url }}" class="button"><small>View project on</small>
-              GitHub</a>
+        <h1><a href="https://github.com/d-bl">Diagrams for Bobbin Lace</a></h1>
+        <h2>GroundForge: help pages</h2>
       </div>
     </div>
 </header>
 
 <div id="content-wrapper">
     <div class="inner clearfix">
         <section id="main-content">
+            <script src="/GroundForge/js/fork-warning.js"></script>
             {{ content }}
         </section>
 

diff --git a/docs/about-us.md b/docs/about-us.md
@@ -7,7 +7,7 @@ title: About us
 
 * [Jo Pol](#jo-pol)
 * [Marian Tempels](#marian-tempels)
-* <a href="https://web.archive.org/web/20220808044947/https://tesselace.com/about/" target="_blank">Veronika Irvine</a>
+* <a href="https://linktr.ee/tesselace" target="_blank">Veronika Irvine</a>
 
 ## Jo Pol
 

diff --git a/docs/assets/css/help.css b/docs/assets/css/help.css
@@ -5,6 +5,8 @@ Header { background: #3679cd url(../images/header-bg-left.png) top right repeat;
         background-color: #3679cd
     }
 }
+header a{color: #fff}
+header a:hover {color: #9ddcff}
 
 #sidebar ul { font-weight: normal; padding-left: 0; margin-bottom: 0; margin-top: 0; padding-bottom: 8px; }
 #sidebar ul ul { padding-left: 16px;  padding-bottom: 0;}
@@ -15,10 +17,12 @@ Header { background: #3679cd url(../images/header-bg-left.png) top right repeat;
 #main-content ul ul { margin-bottom: 0px; }
 
 #fallBack { border: 10px solid orange; padding: 5px; }
+.deprecated { background: darkorange; padding: 2px; }
+header h1, header h2 {width:100%}
 
 figure { display: inline-block; margin-left: 0; margin-top: 0; margin-right: 0.5em; }
 figure image, figcaption { display: block; }
 figcaption { text-align: center; background-color: #ddd; border-radius: 3px; margin-top: 0.3em; }
 
 .hide { display: none; }
-.show { display: block; }
+.show { display: block; }
diff --git a/docs/clips/color.md b/docs/clips/color.md
@@ -0,0 +1,18 @@
+---
+layout: default
+title: Colors in thread diagrams
+---
+
+Highlight threads and stitches in thread diagrams
+=================================================
+
+Soundless video clip.
+
+* The dialog to change the color is kept out of sight as it varies by browser and/or OS.
+* Pop-ups show your mouse is hovering over a thread (start pin or bobbin) or a stitch.
+
+<video controls style="border: 1px solid; padding-top: 2px;">
+    <source src="color.mp4" type="video/mp4">
+    Your browser does not support an inline <a href="color">video</a>.
+</video>  
+
diff --git a/docs/clips/color.mp4 b/docs/clips/color.mp4
diff --git a/docs/clips/flip.md b/docs/clips/flip.md
@@ -0,0 +1,16 @@
+---
+layout: default
+title: Flip stitches
+---
+Assign mirrored and rotated version of stitches.
+================================================
+
+Soundless video clip.
+
+<video controls style="border: 1px solid; padding-top: 2px;">
+    <source src="flip.mp4" type="video/mp4">
+    Your browser does not support an inline <a href="flip">video</a>.
+</video>  
+
+Mirroring stitches is pretty straight forward in a diamond mesh,
+weaving stitches would require diagonal mirrors and the direction also plays a role.
diff --git a/docs/clips/flip.mp4 b/docs/clips/flip.mp4
diff --git a/docs/clips/ignore.md b/docs/clips/ignore.md
@@ -0,0 +1,19 @@
+---
+layout: default
+title: Ignore and restore stitches
+---
+
+Ignore and restore stitches
+==========================
+
+Soundless video clip.
+
+<video controls style="border: 1px solid; padding-top: 2px;">
+    <source src="ignore.mp4" type="video/mp4">
+    Your browser does not support an inline <a href="ignore">video</a>.
+</video>  
+
+The last step shows that ignoring stitches does not always work:
+The algorithm may swap pairs before making a stitch.
+Resulting in one column with lines that still cross but no longer have a color coded stitch.
+In that case you will have to return to the pattern design.
diff --git a/docs/clips/ignore.mp4 b/docs/clips/ignore.mp4
diff --git a/docs/clips/print-as-pdf.md b/docs/clips/print-as-pdf.md
@@ -0,0 +1,22 @@
+---
+layout: default
+title: Print with destination PDF
+---
+
+Print with destination PDF
+==========================
+
+The soundless video clip shows Firefox, details may vary by browser.
+
+<video controls style="border: 1px solid; padding-top: 2px;">
+    <source src="print-as-pdf.mp4" type="video/mp4">
+    Your browser does not support an inline <a href="print as pdf">video</a>.
+</video>  
+
+* The print dialog of your browser has a destination option PDF.
+* Your OS may let you browse through thumbnails of saved PDFs.
+* Clutter like banners and form fields will be removed from the saved document.
+* Prepare the desired room for the diagrams, check the preview, perhaps adjust the scale.
+* The last seconds of the video clip shows the mouse hovering over a link.
+  The status bar at the bottom of the bowser shows the target.
+  Once the document is saved, this link goes back to the online page.
diff --git a/docs/clips/print-as-pdf.mp4 b/docs/clips/print-as-pdf.mp4
diff --git a/docs/clips/resize.md b/docs/clips/resize.md
@@ -0,0 +1,16 @@
+---
+layout: default
+title: Resize panels
+---
+
+Resize panels
+=============
+
+Soundless video clip.
+
+Older tablets and phones may not have the hot corner shown at the start. 
+
+<video controls style="border: 1px solid; padding-top: 2px;">
+    <source src="resize.mp4" type="video/mp4">
+    Your browser does not support an inline <a href="resize">video</a>.
+</video>
diff --git a/docs/clips/resize.mp4 b/docs/clips/resize.mp4
diff --git a/docs/color-rules.md b/docs/color-rules.md
@@ -9,6 +9,15 @@ Color codes
 The Belgian color code and [similar systems](Color-Code) are designed for traditional styles of bobbin lace.
 When experimenting with unorthodox stitches and grounds we need more than half a dozen of colors for a universal legend.
 
+Depending on the context, these icons: ![3x3swatches](/GroundForge/images/swatches.png) ![2x2swatches](/GroundForge/images/to-color-rules.png)  
+may lead to a page explaining one of the color code systems (one color versus four colors per stitch),
+or provide enumerations of the stitches used in a pattern.
+For publishing purposes, you can use third party software to merge
+the downloads of a pattern and an enumeration.
+The 2x2 icon serves as a reminder:
+the color numbers are arranged in a clockwise order
+starting with red (=danger alias unusual) as zero.
+
 4 colors per stitch
 ===================
 
@@ -19,23 +28,16 @@ If we count mirrored versions of stitches, the color code can distinguish over 4
 separate stitches. It does have one drawback: the approach may be too elaborate to 
 draw accurately by hand.
 
-The ![3x3swatches](/GroundForge/images/swatches.png) icon in the caption of a pair diagram
-provides enumerations of the applied stitches. 
-For publishing purposes, you can use third party software to merge
-the downloads of the pattern and the enumeration.
 
 Twists
 ------
 
-![2x2swatches](/GroundForge/images/to-color-rules.png) The icon leading to this page serves as a reminder:
-the color numbers are arranged in a clockwise order starting with red (=danger alias unusual) as zero.
-
 | none| one | two | more | |
 | :---: | :---: | :---: | :---: | :--- |
 | ~~&nbsp;&nbsp;&nbsp;&nbsp;~~ | ~~&nbsp; ! &nbsp;~~ | ~~&nbsp; !! &nbsp;~~ | ~~&nbsp; !!! &nbsp;~~ | twists between stitches |
 | {% include circle.svg color="#CA0020" %}  | {% include circle.svg color="#0571B0" %} | {% include circle.svg color="#F4A582" %} | {% include circle.svg color="#92C5DE" %} | twists between crosses |
 
-Colors for the twists fill shapes in the following table.
+Colors for the twists fill blank shapes in the following table.
 
 Crosses
 -------
@@ -58,7 +60,7 @@ Note that each `t` of the captions is translated into an `l` plus `r` in the dra
 
 ![](images/examples.svg)
 
-The [Whiting catalogue](gw-lace-to-gf) has some interesting examples illustrating the _four colors per stitch_ in practice:
+The sampler by [Gertrude Whiting](gw-lace-to-gf) has some interesting examples illustrating the _four colors per stitch_ in practice:
 [E12](/GroundForge/tiles?whiting=E12_P167&patchWidth=20&patchHeight=20&h1=ct&c1=ctctt&a1=ctctt&i2=ctrct&h2=ct&g2=ct&f2=ct&e2=ctlct&h3=ct&g3=ct&f3=ct&b3=ctctt&i4=ctrct&h4=ct&g4=ct&f4=ct&e4=ctlct&f5=ct&c5=ctct&a5=ctct&j6=ctrct&i6=ct&h6=ct&g6=ctct&f6=ct&e6=ct&d6=ctlct&i7=ct&e7=ct&j8=ct&i8=ct&h8=ctlct&f8=ctrct&e8=ct&d8=ct&c8=ctlct&a8=ctrct&j9=ct&d9=ct&j10=ct&i10=ctlct&e10=ctrct&d10=ct&c10=ct&b10=ctct&a10=ct&tile=7-4----7--,x-xwaaa1cy,-5-x-788-x,y-wxa111cx,7-4--7----,x-x2a1cdd6,x-x-7---4-,8-1a1c-b8d,---7-x-x-4,d3a1cx-xb8&footsideStitch=ctctt&tileStitch=ct&headsideStitch=ctctt&shiftColsSW=-5&shiftRowsSW=10&shiftColsSE=5&shiftRowsSE=10),
 [A2](/GroundForge/tiles?whiting=A2_P71&tile=831,4-7,-5-&headside=d,-,c,-&footside=b,-,a,-&footsideStitch=ctctt&patchWidth=9&patchHeight=10&k1=lctctt&d1=ct&c1=ctct&b1=ct&a1=rctctt&d2=ctct&b2=ctct&k3=lctctt&c3=ctct&a3=rctctt&tileStitch=ctct&headsideStitch=ctctt&shiftColsSW=-2&shiftRowsSW=2&shiftColsSE=2&shiftRowsSE=2).
 [F9](/GroundForge/tiles?whiting=F9_P185&patchWidth=26&patchHeight=26&m1=ctc&e1=ctc&o3=llcttctt&k3=cttctt&g3=ctcrrrctc&e3=ctc&c3=ctcllctc&g4=ctc&e4=ctc&i5=llctctt&g5=ctc&e5=ctc&c5=ctc&a5=rrctctt&e6=ctc&c6=ctc&o7=cttctt&k7=cttctt&g7=ctcrrctcrr&e7=ctc&c7=ctcllctcll&tile=--x-5-x---x-c-x-,-----w-----y-w--,--g-g-c---b---c-,---w8-mv-yx---xw,h-g-f-f-5-x---x-,-w8-mv---w-----y,--f-f-c---c---b-,--xw--x---xw-yx-&footsideStitch=ctctt&tileStitch=ctc&headsideStitch=ctctt&shiftColsSW=-8&shiftRowsSW=8&shiftColsSE=8&shiftRowsSE=8).
@@ -75,4 +77,5 @@ because of its color-blind friendly properties.
 The pair diagrams based on thread diagrams still apply a [variation](Color-Code) of the Belgian color-code with buggy numbers of twist marks. 
 
 Not having twists between stitches encoded in the colors of the stitches, 
-makes the diagrams agnostic to the open (start with twist) and close (end with twist) method.
+makes the diagrams agnostic to the open (start with twist) and close (end with twist) method.
+The tooltip when hovering over a stitch may have the twist one either one of the stitches. 
diff --git a/docs/images/swatch-size.png b/docs/images/swatch-size.png
diff --git a/docs/symmetry/index.md b/docs/symmetry/index.md
@@ -3,8 +3,6 @@ layout: default
 title: edit symmetries
 ---
 
-_Create your own template, it may generate numerous patterns with reflected and rotated copies._
-
 - [Edit symmetries](#edit-symmetries)
 - [The forms](#the-forms)
   * [Export / Import](#export---import)
@@ -24,7 +22,7 @@ _Create your own template, it may generate numerous patterns with reflected and
 Edit symmetries
 ===============
 
-_Create a single template and browse through dozens of pattern variations created with the template._
+_Create your own template, it may generate numerous patterns with reflected and rotated copies._
 
 The [page](/GroundForge/symmetry) has a few forms before an editable template
 and (optionally) several swatches in a smaller scale.