Feature/update documentation

docs/_data/navigation.json

@@ -465,61 +465,61 @@
                           "content":
                           [
                             {
-                              "name": "DepthTouch (2012)",
+                              "name": "DepthTouch",
                               "path": "/knowledge/case-studies/",
                               "file": "depthtouch.html",
                               "type": "page"
                             },
                             {
-                              "name": "FlexiWall (2014)",
+                              "name": "FlexiWall",
                               "path": "/knowledge/case-studies/",
                               "file": "flexiwall.html",
                               "type": "page"
                             },
                             {
-                                "name": "DEEP (2015)",
+                                "name": "DEEP",
                                 "path": "/knowledge/case-studies/",
                                 "file": "deep.html",
                                 "type": "page"
                             },
                             {
-                              "name": "Interactive Animations (2016)",
+                              "name": "Interactive Animations",
                               "path": "/knowledge/case-studies/",
                               "file": "interactive-animations.html",
                               "type": "page"
                             },
                             {
-                              "name": "Zoomable Product Browser (2017)",
+                              "name": "Zoomable Product Browser",
                               "path": "/knowledge/case-studies/",
                               "file": "zoomable-product-browser.html",
                               "type": "page"
                             },
                             {
-                              "name": "Glyphboard (2017)",
+                              "name": "Glyphboard",
                               "path": "/knowledge/case-studies/",
                               "file": "glyphboard.html",
                               "type": "page"
                             },
                             {
-                                "name": "DeepZoom (2018)",
+                                "name": "DeepZoom",
                                 "path": "/knowledge/case-studies/",
                                 "file": "deep-zoom.html",
                                 "type": "page"
                             },
                             {
-                              "name": "DisPlay (2018)",
+                              "name": "DisPlay",
                               "path": "/knowledge/case-studies/",
                               "file": "display.html",
                               "type": "page"
                             },
                             {
-                              "name": "Construction Progress Visualization (2020)",
+                              "name": "Construction Progress Visualization",
                               "path": "/knowledge/case-studies/",
                               "file": "bim.html",
                               "type": "page"
                             },
                             {
-                                "name": "Layers (2022)",
+                                "name": "Layers",
                                 "path": "/knowledge/case-studies/",
                                 "file": "layers.html",
                                 "type": "page"

docs/knowledge/case-studies/glyphboard.md

@@ -12,6 +12,8 @@ title: "Case Study: Glyphboard"
 3. [Scenario](#scenario)
 4. [Findings and Discussion](#findings-and-discussion)
 
+![Case Study: Big Data Landscapes on Elastic Displays]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_title.jpg){:.content__title-image}
+
 | Profile field | Description |
 | ------------- | ----------- |
 | Title | Glyphboard |
@@ -28,14 +30,14 @@ title: "Case Study: Glyphboard"
 
 The fifth case study explored **zoomable user interfaces for information visualization**. The profile covers the historical dSense and ReFlex iterations, following the conventions in the [case study overview](overview.md#case-study-profiles). The published repository may include later adaptations.
 
-<!-- Source: case-studies-glyphboard.pdf, section 5.5, pp. 170-175. -->
-
 ## Research Questions
 
 Glyphboard returned to the exploration of complex information spaces after earlier studies had investigated simpler content and navigation concepts. [FlexiWall](flexiwall.md) had identified zoomable user interfaces as a promising scenario, but its layer-based interaction model did not readily support continuous navigation. The single-touch implementation from [Interactive Animations](interactive-animations.md) provided the initial technical basis.
 
 The application context was **Glyphboard**, a web application developed at the Chair of Media Design at Technische Universität Dresden. It uses dimensionality reduction to visualize multidimensional data as a scatterplot and reveals individual attributes through more detailed glyphs as magnification increases. Although Glyphboard supports both magnifying lenses and full-screen enlargement, this case study concentrated on immersive exploration through continuous full-screen zoom.
 
+![Impressions of the Glyphboard app in the vertical Elastic Display]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_overview.png)
+
 Three questions guided the work:
 
 - How can surface deformation control zooming in, zooming out, and resetting the view, while supporting meaningful levels of detail through semantic zoom?
@@ -76,6 +78,8 @@ Later iterations therefore used multi-touch detection to distinguish one-point z
 
 The starting view was a scatterplot of a preprocessed, clustered dataset. Spatial proximity indicated related items, while colour identified broader group membership. Earlier FlexiWall experiments had compared clustering results; Glyphboard instead supported further exploratory analysis within a complex dataset.
 
+![Semantic Zoom in the Scatterplot]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_semantic-zoom.png)
+
 Semantic zoom progressively revealed the dimensions of individual items at configurable magnification thresholds:
 
 | Detail level | Data representation |
@@ -98,6 +102,8 @@ The multi-touch version switched to panning when **two pressure points** were de
 
 Moving a contact laterally adjusted direction; reversing the contacts' relative depths reversed movement. Adding or removing a second contact enabled transitions between pan and zoom without selecting a separate interface control.
 
+![Glyphboard: Interaction Concept]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_interaction-concept.png){:.full-width-scheme .transparent-background}
+
 ### Hover, Feedback, and Reset
 
 The refined interaction introduced a shallow-deformation range before zoom began. Within this range, the application displayed details for the nearest data point in the vicinity of the detected position, providing a **hover effect**. Further deformation crossed the zoom threshold.
@@ -106,6 +112,8 @@ Visual feedback identified the current operation: a cursor and contextual inform
 
 The later reset gesture used **three rapid presses**. When deformation exceeded a configurable amplitude three times within a configurable time interval, both zoom and pan returned to their initial values. This offered a way to return to the overview and explore another region without pulling the membrane.
 
+![Updated UI with Gesture Feedback]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_gesture-ui.png)
+
 **[⬆ back to top](#table-of-contents)**
 
 ## Findings and Discussion

docs/knowledge/case-studies/other-prototypes.md

@@ -13,10 +13,10 @@ title: "Case Studies: Other Prototypes"
 
 These smaller prototypes explored specific technological and conceptual approaches, addressing open questions identified during model development. They also served to validate the ReFlex framework in practical use and were demonstrated at selected events to gather user feedback.
 
-![EscapeRoom: Game concepts with vibrotactile feedback]({{ site.baseurl }}/assets/img/kb/case-studies/others-escape-room.png){:.content__title-image}
-
 ## EscapeRoom
 
+![EscapeRoom: Game concepts with vibrotactile feedback]({{ site.baseurl }}/assets/img/kb/case-studies/others-escape-room.png){:.content__title-image}
+
 | Profile field | Description |
 | ------------- | ----------- |
 | Title | EscapeRoom |
@@ -56,10 +56,10 @@ Vibrotactile cues accompanied these gestures, connecting their execution and com
 
 **[⬆ back to top](#table-of-contents)**
 
-![MIReFlex: Spatial Audio Placement in Multisensory Interaction Room]({{ site.baseurl }}/assets/img/kb/case-studies/others-flightsim.jpg){:.content__title-image}
-
 ## FlightSim
 
+![MIReFlex: Spatial Audio Placement in Multisensory Interaction Room]({{ site.baseurl }}/assets/img/kb/case-studies/others-flightsim.jpg){:.content__title-image}
+
 | Profile field | Description |
 | ------------- | ----------- |
 | Title | FlightSim |
@@ -94,10 +94,10 @@ Steering followed a **joystick-like mapping**: the direction vector was the diff
 
 **[⬆ back to top](#table-of-contents)**
 
-![MIReFlex: Spatial Audio Placement in Multisensory Interaction Room]({{ site.baseurl }}/assets/img/kb/case-studies/others-mireflex.jpg){:.content__title-image}
-
 ## MIReFlex
 
+![MIReFlex: Spatial Audio Placement in Multisensory Interaction Room]({{ site.baseurl }}/assets/img/kb/case-studies/others-mireflex.jpg){:.content__title-image}
+
 | Profile field | Description |
 | ------------- | ----------- |
 | Title | MIReFlex |

docs/knowledge/case-studies/zoomable-product-browser.md

@@ -74,7 +74,7 @@ Three layouts were explored: random placement, four quadrants organized by produ
 
 Each product was represented by a circular glyph. Semantic zoom progressively exposed more attributes for a smaller set of products, while geometric enlargement provided space to read them.
 
-![Visualization Concept: Glyphs and Leve-of-Detail]({{ site.baseurl }}/assets/img/kb/case-studies/zoomable-product-browser_visualization-concept.png){:.full-width-scheme .transparent-background}
+![Visualization Concept: Glyphs and Level-of-Detail]({{ site.baseurl }}/assets/img/kb/case-studies/zoomable-product-browser_visualization-concept.jpg){:.full-width-scheme .transparent-background}
 
 | Detail level | Product representation |
 | ------------ | ---------------------- |