Updated draft

cmahnke · Oct 16, 2024 · 57cbb20 · 57cbb20
1 parent 0e7c39e
commit 57cbb20
Show file tree

Hide file tree

Showing 10 changed files with 352 additions and 39 deletions.
diff --git a/assets/scss/base.scss b/assets/scss/base.scss
@@ -23,6 +23,7 @@
 @import "./night";
 @import "./sepia";
 @import "./iiif-hdr";
+@import "./syntax";
 
 $content-width: 64em;
 $gradient-color-light: #b2444d;

diff --git a/assets/scss/blog.scss b/assets/scss/blog.scss
@@ -87,6 +87,47 @@
         }
 
       }
+
+      details {
+        margin-bottom: 1em;
+      }
+
+      .reference {
+        margin-left: 1.4rem;
+        font-style: italic;
+        font-weight: 500;
+
+
+        .worldcat {
+          &:before {
+            content: '';
+          }
+
+          &:after {
+            display: inline-block;
+            width: 1em;
+            content: url($link-light);
+
+          }
+
+          &:hover {
+            text-decoration: unset;
+          }
+
+
+        }
+      }
+
+      .highlight {
+
+        pre {
+
+          border-radius: 1rem;
+          background-color: #f1ffb7;
+          box-shadow: 0 0px 2px #ff5477;
+        }
+      }
+
     }
   }
 

diff --git a/assets/scss/syntax.scss b/assets/scss/syntax.scss
@@ -0,0 +1,86 @@
+/* Background */ .bg { background-color:#f0f3f3; }
+/* PreWrapper */ .chroma { background-color:#f0f3f3; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color:#a00;background-color:#faa }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+/* LineHighlight */ .chroma .hl { background-color:#d8dada }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#069;font-weight:bold }
+/* KeywordConstant */ .chroma .kc { color:#069;font-weight:bold }
+/* KeywordDeclaration */ .chroma .kd { color:#069;font-weight:bold }
+/* KeywordNamespace */ .chroma .kn { color:#069;font-weight:bold }
+/* KeywordPseudo */ .chroma .kp { color:#069 }
+/* KeywordReserved */ .chroma .kr { color:#069;font-weight:bold }
+/* KeywordType */ .chroma .kt { color:#078;font-weight:bold }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color:#309 }
+/* NameBuiltin */ .chroma .nb { color:#366 }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color:#0a8;font-weight:bold }
+/* NameConstant */ .chroma .no { color:#360 }
+/* NameDecorator */ .chroma .nd { color:#99f }
+/* NameEntity */ .chroma .ni { color:#999;font-weight:bold }
+/* NameException */ .chroma .ne { color:#c00;font-weight:bold }
+/* NameFunction */ .chroma .nf { color:#c0f }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color:#99f }
+/* NameNamespace */ .chroma .nn { color:#0cf;font-weight:bold }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color:#309;font-weight:bold }
+/* NameVariable */ .chroma .nv { color:#033 }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color:#c30 }
+/* LiteralStringAffix */ .chroma .sa { color:#c30 }
+/* LiteralStringBacktick */ .chroma .sb { color:#c30 }
+/* LiteralStringChar */ .chroma .sc { color:#c30 }
+/* LiteralStringDelimiter */ .chroma .dl { color:#c30 }
+/* LiteralStringDoc */ .chroma .sd { color:#c30;font-style:italic }
+/* LiteralStringDouble */ .chroma .s2 { color:#c30 }
+/* LiteralStringEscape */ .chroma .se { color:#c30;font-weight:bold }
+/* LiteralStringHeredoc */ .chroma .sh { color:#c30 }
+/* LiteralStringInterpol */ .chroma .si { color:#a00 }
+/* LiteralStringOther */ .chroma .sx { color:#c30 }
+/* LiteralStringRegex */ .chroma .sr { color:#3aa }
+/* LiteralStringSingle */ .chroma .s1 { color:#c30 }
+/* LiteralStringSymbol */ .chroma .ss { color:#fc3 }
+/* LiteralNumber */ .chroma .m { color:#f60 }
+/* LiteralNumberBin */ .chroma .mb { color:#f60 }
+/* LiteralNumberFloat */ .chroma .mf { color:#f60 }
+/* LiteralNumberHex */ .chroma .mh { color:#f60 }
+/* LiteralNumberInteger */ .chroma .mi { color:#f60 }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#f60 }
+/* LiteralNumberOct */ .chroma .mo { color:#f60 }
+/* Operator */ .chroma .o { color:#555 }
+/* OperatorWord */ .chroma .ow { color:#000;font-weight:bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color:#09f;font-style:italic }
+/* CommentHashbang */ .chroma .ch { color:#09f;font-style:italic }
+/* CommentMultiline */ .chroma .cm { color:#09f;font-style:italic }
+/* CommentSingle */ .chroma .c1 { color:#09f;font-style:italic }
+/* CommentSpecial */ .chroma .cs { color:#09f;font-weight:bold;font-style:italic }
+/* CommentPreproc */ .chroma .cp { color:#099 }
+/* CommentPreprocFile */ .chroma .cpf { color:#099 }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { background-color:#fcc }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr { color:#f00 }
+/* GenericHeading */ .chroma .gh { color:#030;font-weight:bold }
+/* GenericInserted */ .chroma .gi { background-color:#cfc }
+/* GenericOutput */ .chroma .go { color:#aaa }
+/* GenericPrompt */ .chroma .gp { color:#009;font-weight:bold }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:#030;font-weight:bold }
+/* GenericTraceback */ .chroma .gt { color:#9c6 }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* TextWhitespace */ .chroma .w { color:#bbb }
diff --git a/config.toml b/config.toml
@@ -117,6 +117,9 @@ preserveTaxonomyNames = true
         [markup.goldmark.parser.attribute]
             block = true
 
+[markup.highlight]
+  noClasses = false
+
 [imaging]
     quality = 95
 

diff --git a/content/post/naechtliche-schatten/index.en.md b/content/post/naechtliche-schatten/index.en.md
@@ -1,5 +1,5 @@
 ---
-date: 2024-09-21T20:33:44+02:00
+date: 2024-10-21T20:33:44+02:00
 title: "Nocturnal shadows"
 draft: true
 class: night

diff --git a/content/post/naechtliche-schatten/index.md b/content/post/naechtliche-schatten/index.md
@@ -1,5 +1,5 @@
 ---
-date: 2024-09-21T20:33:44+02:00
+date: 2024-10-21T20:33:44+02:00
 title: "Nächtliche Schatten"
 draft: true
 class: night

diff --git a/content/post/tactile-feedback/index.en.md b/content/post/tactile-feedback/index.en.md
@@ -18,16 +18,29 @@ resources:
     label: Tafel 31
 ---
 
-Since one of the goals of this blog is to find ways to transport analog content into digital space, here is an attempt to make fabrics tangible ...
+Another contribution from the Projektemacher Labs...
 
 <!--more-->
 
-# Preparation of image data
+...finally completed thanks to Corona:
 
-These steps can be configured for each individual image section. The goal is to transfer image data into a grid of tangible points. The following still has to be determined experimentally:
 
-* Which edge length for points would be optimal - currently 1mm
-* How many levels of intensity are useful - currently only 2 (on and off)
+As this blog is also about transporting analogue content into the digital space in an innovative way, here is an attempt to make fabrics tangible...
+
+Some time ago I bought a fabric sample book:
+<p class="reference">
+Textil-Lexikon: Ein Lehrbuch und Nachschlagebuch für den Textileinzelhandel und die Gewebeverarbeitung by Wilhelm Spitschka, Franckh, Stuttgart 1928. <a class="worldcat" href="http://www.worldcat.org/oclc/249121078">&nbsp;</a>
+</p>
+
+The patterns are not simply printed, but carefully cut out and glued in. The corresponding entry can be found at [Blaufußtölpel](https://xn--blaufusstlpel-qmb.de/post/textil-atlas-1928/). The aim of this article is to make them tangible in a new way.
+
+# Preparation of the image data
+
+The first step is to prepare the image data: The starting point for tactile feedback are the image files, as well as a manual marker for the sections (bounding box) with fabric.
+
+Height information is obtained from them with a little automated post-processing. However, there are only two gradations. These steps can be configured for each individual image section; after processing, the result is rasterised again to obtain a resolution of tangible points, using an edge length of 1 mm.
+
+The Cordsamt (corduroy) serves as an example here:
 
 {{< figure src="./page031-0-cut.png" caption="Extracted section" >}}
 
@@ -47,8 +60,95 @@ These steps can be configured for each individual image section. The goal is to
 
 {{< figure src="./page031-0.png" caption="scaled down to a edge length of 1mm" >}}
 
-# Result
-
-Currently without enriched contents.
-
-{{< iiif/mirador manifestUrl="manifest.json" >}}
+<details>
+  <summary>Example: The result of preprocessing as a JSON array</summary>
+<pre>
+{{< highlight json >}}
+[
+  [1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,0,1,0,0,0,0,1,1,1,1,0,1,1,0,1,0,0,0,0,0,1,0,1,0,0,0,1,0,0,0,1,0,0,1,0,1,1,1,0,1,1],
+  [0,1,1,0,1,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,1,1,0,0,1,1,0,1,1,1,0,1,1,1,1,0,0,1,1,1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0],
+  [0,0,0,1,1,0,0,1,1,1,1,0,0,1,1,1,1,0,1,1,1,0,1,1,0,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1],
+  [0,0,0,1,1,0,1,1,0,1,1,0,0,1,0,1,1,0,1,1,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1,1,1,0,1,1,0,1,0,1,0,1,1,1,0,1,0,1,1,1,1,1,0,0],
+  [1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,1,1,0,0,1,0,1,1,1,0,1,0,0,1,0,0,1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,0,0,1,0,1,1,0,1,1,1,1],
+  [1,0,1,1,1,1,1,1,0,1,0,0,1,1,0,0,1,0,0,1,1,0,1,0,0,1,1,0,1,1,0,1,1,1,0,1,1,0,0,1,0,1,1,1,1,0,1,0,1,1,1,1,0,0,1,1,0,0],
+  [1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,1,0,1,1,0,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,0,1,1,0,1,1,1,1],
+  [1,1,1,1,0,0,1,1,0,0,1,1,1,0,0,1,0,1,1,1,0,0,0,1,0,0,1,0,0,1,0,0,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,0,0],
+  [1,1,1,1,1,0,1,1,1,1,0,0,1,1,0,0,1,0,1,1,0,0,1,0,0,1,0,0,1,1,0,0,1,0,1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,0,0,1,0,1,1,1,1],
+  [1,1,1,1,0,1,1,1,1,1,1,0,1,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,0,0,0,0,1,1,1],
+  [1,0,1,1,1,1,1,0,0,1,0,1,0,0,0,0,0,0,1,1,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,1,1,1,1,0,0,0,1,1,1,1,0,1,1,0,1,1,0,1,1,1,0,1],
+  [0,0,1,1,0,1,1,1,1,1,0,0,1,0,0,0,1,0,1,1,0,0,1,0,0,0,0,0,0,1,0,1,1,0,0,1,0,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1],
+  [0,0,1,1,0,1,1,0,1,1,0,0,0,0,0,1,0,1,1,1,0,0,1,0,0,0,0,0,1,0,0,1,1,0,1,1,0,0,1,0,0,1,1,0,1,1,1,0,1,0,1,1,0,1,0,1,0,0],
+  [1,0,1,1,0,1,1,0,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,1,1,0,0,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,0,1,0,1,0],
+  [1,0,1,1,0,1,1,0,0,1,0,0,0,0,0,0,0,0,1,1,0,1,1,0,1,1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,0,1,1,0,1,1,0,0,1,0,1,1,0,0,0,1,0,1],
+  [1,1,1,1,0,1,1,0,1,1,0,0,1,1,0,1,0,0,1,1,0,0,1,0,0,1,0,0,1,0,0,0,1,0,1,1,0,1,0,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,0,0],
+  [0,1,1,1,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,1,1,0,1,1,0,0,0,0,1,1,1,0,1,1,0,1,1,0,0,1,0,0,1,1,0,1,1,0,1,0,0,0,1,0,0,1],
+  [0,1,1,1,0,1,1,0,1,1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,1,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1],
+  [0,0,1,1,0,1,1,0,1,1,0,0,1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,0,1,0,0,1,0,1,1,1,0,1,1,0,1,1,1,0,1],
+  [1,0,1,1,0,1,1,0,1,1,0,0,1,0,0,1,0,0,0,1,0,1,0,0,1,1,0,0,1,1,0,1,1,0,1,0,0,0,1,0,0,1,0,0,1,0,0,1,1,0,1,1,0,1,1,0,0,1],
+  [0,0,1,1,0,1,0,0,1,1,0,0,1,0,0,1,0,0,0,1,0,1,1,0,1,1,0,0,1,0,0,1,0,0,0,1,0,1,1,0,1,1,0,0,1,0,1,1,1,0,1,0,0,1,0,0,1,1],
+  [1,1,1,1,0,1,1,0,1,1,0,1,1,0,1,0,0,0,1,1,0,0,1,0,1,1,0,1,0,0,1,0,1,0,1,1,0,1,1,0,0,1,0,1,1,0,0,1,0,0,1,1,1,1,1,1,1,1],
+  [1,0,1,1,0,0,1,0,1,0,0,1,1,0,1,1,0,0,0,1,0,1,1,0,1,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,0,1,0,1,1,0,0,1,1,0,1,1,0,1,1],
+  [1,1,1,1,0,0,0,0,1,1,0,1,1,0,1,1,0,0,1,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0,0,1,0,1,1,0,1,1,0,1,1,0,1,1,0,0,1,1,1,1,1,0,1,1],
+  [1,1,1,0,0,1,1,0,0,1,0,1,0,0,0,1,1,0,1,0,0,1,1,0,1,1,0,0,1,1,0,1,0,1,1,1,0,0,1,0,1,0,0,1,1,1,0,1,0,0,1,0,0,0,1,0,0,1],
+  [1,1,1,1,0,1,0,0,1,1,0,0,1,0,1,1,0,0,0,0,0,1,0,0,1,1,0,1,1,0,0,1,0,0,1,0,0,1,0,0,0,1,0,1,1,0,0,1,1,1,1,0,1,1,0,0,0,1],
+  [1,1,1,0,1,1,0,0,1,1,0,0,1,1,0,1,0,0,1,0,0,1,0,0,1,0,0,1,1,0,1,1,0,0,1,0,0,1,0,0,1,1,0,0,1,0,1,1,1,1,1,0,0,1,1,0,0,0],
+  [1,1,1,1,0,1,0,0,1,1,0,1,1,0,1,1,0,0,0,0,0,1,0,0,1,0,0,1,1,0,0,1,0,0,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,0,1,0,0,1,1],
+  [1,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,0,1,1,0,0,1,1,1,1,0,1,1,0,1,1,0,0,1,1,0,1,1,0,0,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,0,1],
+  [1,1,1,0,1,0,0,0,1,1,0,1,1,0,0,1,0,0,1,0,0,1,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,1,1,0,1,1,0,1,1,0,0,1,1,0,0,1],
+  [1,1,1,0,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,0,1],
+  [1,1,1,0,1,1,0,0,1,0,0,1,1,0,1,1,0,1,1,0,0,1,0,0,1,1,0,0,1,0,0,1,0,0,1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,0,1],
+  [0,1,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1,0,0,0,0,1,1,1,0,0,0,0,1,1,0,1,0,0,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,0,1,0],
+  [1,1,1,0,1,1,0,0,1,0,0,1,1,0,1,1,0,1,0,0,1,1,0,1,1,1,0,1,0,0,1,1,0,0,1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,1,1,0,0,0,1],
+  [1,1,1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,1,0,0,1,1,0,1,1,0,1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,0,1,1],
+  [1,1,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,0,0,1,1,0,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,1,1],
+  [1,0,1,1,0,0,0,0,0,1,0,0,1,1,0,1,0,0,0,0,1,1,1,1,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,1,1,1,1,1,0,1,1,1,0,1]
+]
+{{< / highlight >}}
+</details>
+
+# Presentation
+
+In order for the generated data structure to be seamlessly integrated with the digitised image in the usual functionality, it must somehow become part of the IIIF manifest. this supports the creation of references to descriptive data on image regions via annotations. i.e. exactly what is needed here.
+
+But even if you consider that you can throw away almost half of the points because they do not contain necessary information (in the example above ‘0’), there are still 1232 points left over. It is therefore necessary to summarise the contiguous areas, making sure that no holes are left out. At the end of this optimisation, 120 areas remain, which are represented as SVG polygons.
+
+{{< figure src="./single.jpg" caption="Individual squares" >}}
+
+{{< figure src="./merged.jpg" caption="Polygons" >}}
+
+These SVG polygons can be translated into web annotations and embedded directly in the IIIF manifest.
+
+<details>
+  <summary>Example: The second polygon as an annotation</summary>
+  {{< highlight json >}}
+  {
+    "id": "http://localhost:5173/canvas/page031/annotation/0/touch/1",
+    "type": "Annotation",
+    "motivation": "tagging",
+    "body": { "id": "http://localhost:5173/canvas/page031/annotation/0/touch/1/body", "type": "Boolean", "value": true },
+    "target": {
+      "type": "SpecificResource",
+      "source": "http://localhost:5173/canvas/page031",
+      "selector": {
+        "type": "SvgSelector",
+        "value": "<svg  xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"805,596 806,596 829,596 853,596 853,572 829,572 806,572 805,572 782,572 758,572 758,596 782,596\" /></svg>"
+      }
+    }
+  }
+{{< / highlight >}}
+</details>
+
+OpenSeadragon](https://openseadragon.github.io/) and [Annotorious](https://annotorious.dev/) are then used to display this.
+
+# Final result
+
+"Unfortunately", the Vibrate API is not supported by all browsers. The most promising candidate is certainly Chrome on Android, but even there a few basic conditions must be observed:
+* Vibration must be activated
+* Sound must be activated
+* Power saving mode must be deactivated
+
+Other potential browsers are listed by [Can I Use](https://caniuse.com/vibration), there is also a test page from the [Chrome project on Github](https://googlechrome.github.io/samples/vibration/).
+
+{{< vibrate-check >}}
+
+{{< iiif/touch-iiif manifestUrl="manifest-enriched.json" >}}