From 57cbb2006121cc6da6b49d28eef0322eba08e99e Mon Sep 17 00:00:00 2001 From: Christian Mahnke Date: Wed, 16 Oct 2024 14:24:31 +0200 Subject: [PATCH] Updated draft --- assets/scss/base.scss | 1 + assets/scss/blog.scss | 41 ++++++ assets/scss/syntax.scss | 86 +++++++++++++ config.toml | 3 + content/post/naechtliche-schatten/index.en.md | 2 +- content/post/naechtliche-schatten/index.md | 2 +- content/post/tactile-feedback/index.en.md | 120 ++++++++++++++++-- content/post/tactile-feedback/index.md | 47 +++---- package.json | 87 ++++++++++++- themes/projektemacher-base | 2 +- 10 files changed, 352 insertions(+), 39 deletions(-) create mode 100644 assets/scss/syntax.scss diff --git a/assets/scss/base.scss b/assets/scss/base.scss index b944d69bb8..141db40183 100644 --- 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 index c383d92765..1521753ff2 100644 --- 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 new file mode 100644 index 0000000000..0430e70f76 --- /dev/null +++ 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 index a449705101..a725c79a67 100644 --- 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 index d6f5efe2a7..8f2ec57cf5 100644 --- 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 index 88ef631028..0a07e3c732 100644 --- 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 index 8a747690b0..eba97da409 100644 --- 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... -# 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: +

+Textil-Lexikon: Ein Lehrbuch und Nachschlagebuch für den Textileinzelhandel und die Gewebeverarbeitung by Wilhelm Spitschka, Franckh, Stuttgart 1928.   +

+ +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" >}} +
+ Example: The result of preprocessing as a JSON array +
+{{< 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 >}}
+
+ +# 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. + +
+ Example: The second polygon as an annotation + {{< 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": "" + } + } + } +{{< / highlight >}} +
+ +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" >}} diff --git a/content/post/tactile-feedback/index.md b/content/post/tactile-feedback/index.md index 212c44f70d..36bc9b4148 100644 --- a/content/post/tactile-feedback/index.md +++ b/content/post/tactile-feedback/index.md @@ -7,16 +7,16 @@ tags: - TactileFeedback - DigitalImages draft: true -iiifContext: http://iiif.io/api/presentation/2/context.json +#iiifContext: http://iiif.io/api/presentation/2/context.json outputs: - html - iiif-manifest -#resources: -#- src: "page031.jpg" -# params: -# iiif: page031/info.json -# hint: non-paged -# label: Tafel 31 +resources: +- src: "page031.jpg" + params: + iiif: page031/info.json + hint: non-paged + label: Tafel 31 --- Wieder ein Beitrag aus den Projektemacher Labs... @@ -25,14 +25,14 @@ Wieder ein Beitrag aus den Projektemacher Labs... ...dank Corona nun endlich abgeschlossen: - Da es in diesem Blog auch darum gehen soll analoge Inhalte innovativ in den digitalen Raum zu transportieren, hier ein Versuch Stoffe fühlbar zu machen... Vor einiger Zeit habe ich ein Stoffmusterbuch erworben: -Textil-Lexikon: Ein Lehrbuch und Nachschlagebuch für den Textileinzelhandel und die Gewebeverarbeitung - +

+Textil-Lexikon: Ein Lehrbuch und Nachschlagebuch für den Textileinzelhandel und die Gewebeverarbeitung von Wilhelm Spitschka, Franckh, Stuttgart 1928.   +

-Darin sind die Muster nicht einfach abgedruckt, sondern aufwendig ausgeschnitten und eingeklebt. Der entsprechende Eintrag findet sich bei [Blaufußtölpel](https://xn--blaufusstlpel-qmb.de/post/textil-atlas-1928/) +Darin sind die Muster nicht einfach abgedruckt, sondern aufwendig ausgeschnitten und eingeklebt. Der entsprechende Eintrag findet sich bei [Blaufußtölpel](https://xn--blaufusstlpel-qmb.de/post/textil-atlas-1928/). Diese sollen mit diesem Beitrag auf eine neue Art erfühl und damit erfahrbar gemacht werden. # Vorbereitung der Bilddaten @@ -60,8 +60,9 @@ Als Beispiel dient hier der Cordsamt: {{< figure src="./page031-1.png" caption="Reduktion auf eine Pixelkantenlänge von 1mm" class="img-center" >}}
- Das Ergebnis dieser Vorverarbeitung ist ein Array in dieser Form: + Beispiel: Das Ergebnis der Vorverarbeitung als JSON-Array 
+{{< 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],
@@ -101,7 +102,7 @@ Als Beispiel dient hier der Cordsamt:
   [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 >}}
# Präsentation @@ -114,13 +115,11 @@ Aber selbst wenn man bedenkt, dass man fast die Hälfte der Punkte wegwerfen kan {{< figure src="./merged.jpg" caption="Darstellung Polygone" >}} -Diese SVG Polygone lassen sich in Webannotationen übersetzen und so direkt in das IIIF Manifest einbetten. Zur Darstellung desselben kommt hier dann [OpenSeadragon](https://openseadragon.github.io/) zusammen mit [Annotorious](https://annotorious.dev/) - -## Beispiel Annotation +Diese SVG Polygone lassen sich in Webannotationen übersetzen und so direkt in das IIIF Manifest einbetten.
- Das zweite Polygon als Annotation - 
+  Beispiel: Das zweite Polygon als Annotation
+  {{< highlight json >}}
   {
     "id": "http://localhost:5173/canvas/page031/annotation/0/touch/1",
     "type": "Annotation",
@@ -134,17 +133,21 @@ Diese SVG Polygone lassen sich in Webannotationen übersetzen und so direkt in d
         "value": ""
       }
     }
-  },
-
+ } +{{< / highlight >}}
+Zur Darstellung desselben kommt hier dann [OpenSeadragon](https://openseadragon.github.io/) zusammen mit [Annotorious](https://annotorious.dev/) zum Einsatz. + # Endergebnis -"Leider" wird die Vibrate API nicht von allen Browsern unterstützt. Der erfolgversprecheste Kadidat ist sicher Chome auf Android, aber auch da müssen ein paar Rahmenbedingungen beachtet werden: +"Leider" wird die Vibrate API nicht von allen Browsern unterstützt. Der erfolgversprechendste Kandidat ist sicher Chrome auf Android, aber auch da müssen ein paar Rahmenbedingungen beachtet werden: * Vibration muss aktivier sein * Ton muss aktiviert sein * Der Stromsparmodus deaktiviert sein +Weitere potentielle Browser listet [Can I Use](https://caniuse.com/vibration) auf, es existiert auch eine Testseite vom [Chrome Projekt auf Github](https://googlechrome.github.io/samples/vibration/). + {{< vibrate-check >}} -{{< iiif/mirador manifestUrl="manifest.json" >}} +{{< iiif/touch-iiif manifestUrl="manifest-enriched.json" >}} diff --git a/package.json b/package.json index 643862f098..6f89d965e1 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,101 @@ { "dependencies": { + "aframe": "^1.6.0", + "aframe-orbit-controls": "^1.3.2", + "bootstrap": "^5.2.2", + "detect-browser": "5.3.0", + "hdr-canvas": "^0.0.9", + "highlight.js": "^11.10.0", + "howler": "^2.2.3", + "jquery": "^3.6.0", + "jquery-ui": "^1.13.2", + "js-cookie": "^3.0.5", + "mirador": "ProjectMirador/mirador#5cb692ed31480c1e130f4a8715726688cb35796d", + "normalize.css": "^8.0.1", + "ol": "^10.0.0", + "ol-mapbox-style": "^12.0.0", + "pdfjs-dist": "^4.0.189", + "pdfobject": "2.3.0", + "stickybits": "^3.7.11", + "yargs": "^17.6.0", "aos": "^2.3.4", "elevator.js": "^1.0.1", "enter-view": "^2.0.1", - "js-cookie": "^3.0.5", "lg-fullscreen": "^1.2.1", "lightgallery": "^2.7.2", "photoswipe": "^5.4.4", "wordcloud": "^1.2.2", "img-comparison-slider": "^8.0.6", "chroma-js": "^3.1.2", - "pdfobject": "2.3.0" + "openseadragon": "^5.0.0", + "@annotorious/openseadragon": "^3.0.11", + "manifesto.js": "^4.2.18" }, "devDependencies": { - "replace-in-file": "8.2.0", - "svgo": "^3.3.2" + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@fullhuman/postcss-purgecss": "^6.0.0", + "@gltf-transform/cli": "^4.0.0", + "@gltf-transform/core": "^4.0.0", + "@gltf-transform/extensions": "^4.0.0", + "@gltf-transform/functions": "^4.0.0", + "cors": "^2.8.5", + "doiuse": "^6.0.1", + "eslint": "~8.57.0", + "eslint-config-prettier": "~9.1.0", + "eslint-plugin-compat": "~6.0.0", + "eslint-plugin-json-es": "^1.5.7", + "eslint-plugin-prettier": "~5.2.1", + "eslint-plugin-toml": "^0.11.0", + "express": "^4.18.2", + "gltf-pipeline": "^4.1.0", + "gulp-cli": "^3.0.0", + "markdownlint-cli": "~0.42.0", + "mktemp": "~1.0.1", + "obj2gltf": "^3.1.6", + "patch-package": "^8.0.0", + "postcss": "^8.4.20", + "postcss-cli": "^11.0.0", + "postcss-discard-duplicates": "^7.0.0", + "postcss-import": "^16.0.0", + "postcss-inline-svg": "^6.0.0", + "postcss-utilities": "^0.8.4", + "prettier": "^3.0.0", + "puppeteer": "^23.1.0", + "purgecss": "^6.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "stylelint": "^16.3.0", + "stylelint-config-prettier": "^9.0.5", + "stylelint-config-sass-guidelines": "^12.0.0", + "stylelint-config-standard": "^36.0.0", + "stylelint-config-standard-scss": "^13.0.0", + "stylelint-no-unsupported-browser-features": "^8.0.1", + "stylelint-prettier": "^5.0.0", + "stylelint-scss": "^6.2.1", + "svgo": "^3.3.2", + "three": "^0.169.0", + "toml": "^3.0.0", + "xslt3": "^2.6.0", + "replace-in-file": "8.2.0" }, "scripts": { + "check-generated-css": "stylelint --config ./themes/projektemacher-base/.stylelintrc-postbuild.yaml 'docs/css/*.css'", + "lint-scss": "stylelint 'assets/scss/*'", + "lint-js": "eslint 'assets/js/*'", + "lint-toml": "eslint --ext .toml i18n", + "lint": "yarn run lint-scss && yarn run lint-js && yarn run lint-toml", + "postbuild-lint": "yarn run check-generated-css", + "prepatch": "cp -rf $INIT_CWD/themes/projektemacher-base/patches $INIT_CWD", + "patch": "yarn run patch-package", + "postinstall": "yarn run prepatch && yarn run patch && yarn run postinstall-mirador && ls -al node_modules/mirador/dist", + "postinstall-mirador": "cd node_modules/mirador && yarn add -D @babel/plugin-proposal-private-property-in-object && yarn install && yarn run build", + "validate-iiif-gnu": "find docs -name manifest.json -print0 | xargs -r -0 -n1 yarn run eslint -c themes/projektemacher-base/.eslintrc.yml", + "validate-gjson-gnu": "find docs -name '*.gjson' -o -name '*.geojson' -print0 | xargs -r -0 -n1 yarn run eslint -c themes/projektemacher-base/.eslintrc.yml", + "validate-iiif-bsd": "find docs -name manifest.json -print0 | xargs -0 -n1 yarn run eslint -c themes/projektemacher-base/.eslintrc.yml", + "validate-gjson-bsd": "find docs -name '*.gjson' -o -name '*.geojson' -print0 | xargs -0 -n1 yarn run eslint -c themes/projektemacher-base/.eslintrc.yml", + "validate-iiif": "case $OSTYPE in darwin*) yarn run validate-iiif-bsd ;; linux*) yarn run validate-iiif-gnu ;; bsd*) yarn run validate-iiif-bsd ;; *) exit 100 ;; esac", + "validate-gjson": "case $OSTYPE in darwin*) yarn run validate-gjson-bsd ;; linux*) yarn run validate-gjson-gnu ;; bsd*) yarn run validate-gjson-bsd ;; *) exit 100 ;; esac", + "validate": "yarn run validate-iiif && yarn run validate-gjson", "logo-projektemacher": "svgo --config Source\\ Files/svgo.config.js -i themes/projektemacher-base/Source\\ Files/Images/Laborant.svg -o static/images/laborant.svg", "logo-monogram": "svgo -i themes/projektemacher-base/static/images/cm.svg -o static/images/cm.svg && cp static/images/cm.svg static/images/cm-black.svg", "logo-monogram-black": "yarn run logo-monogram && replace-in-file 'fill-opacity:.5' 'fill-opacity:1.0' static/images/cm-black.svg && replace-in-file 'fill:#d40000' 'fill:#000000' static/images/cm-black.svg", diff --git a/themes/projektemacher-base b/themes/projektemacher-base index 796c385a4a..c78ea45899 160000 --- a/themes/projektemacher-base +++ b/themes/projektemacher-base @@ -1 +1 @@ -Subproject commit 796c385a4ad29b12296d042260370cbfa7711efb +Subproject commit c78ea45899560de2d91d6b46d20b2cb81071cde6