diff --git a/docs/assets/img/kb/case-studies/deep-zoom_examples.png b/docs/assets/img/kb/case-studies/deep-zoom_examples.png new file mode 100644 index 00000000..84b04c00 Binary files /dev/null and b/docs/assets/img/kb/case-studies/deep-zoom_examples.png differ diff --git a/docs/assets/img/kb/case-studies/deep-zoom_semantic-layers.png b/docs/assets/img/kb/case-studies/deep-zoom_semantic-layers.png new file mode 100644 index 00000000..f13d073f Binary files /dev/null and b/docs/assets/img/kb/case-studies/deep-zoom_semantic-layers.png differ diff --git a/docs/assets/img/kb/case-studies/deep-zoom_title.jpg b/docs/assets/img/kb/case-studies/deep-zoom_title.jpg new file mode 100755 index 00000000..afab63c1 Binary files /dev/null and b/docs/assets/img/kb/case-studies/deep-zoom_title.jpg differ diff --git a/docs/assets/img/kb/case-studies/deep-zoom_zoom-modes.png b/docs/assets/img/kb/case-studies/deep-zoom_zoom-modes.png new file mode 100644 index 00000000..d93061c5 Binary files /dev/null and b/docs/assets/img/kb/case-studies/deep-zoom_zoom-modes.png differ diff --git a/docs/assets/img/kb/case-studies/display_ball-sim.png b/docs/assets/img/kb/case-studies/display_ball-sim.png new file mode 100644 index 00000000..f6e1433b Binary files /dev/null and b/docs/assets/img/kb/case-studies/display_ball-sim.png differ diff --git a/docs/assets/img/kb/case-studies/display_overview.png b/docs/assets/img/kb/case-studies/display_overview.png new file mode 100644 index 00000000..a78857a3 Binary files /dev/null and b/docs/assets/img/kb/case-studies/display_overview.png differ diff --git a/docs/assets/img/kb/case-studies/display_particles.png b/docs/assets/img/kb/case-studies/display_particles.png new file mode 100644 index 00000000..0e1155be Binary files /dev/null and b/docs/assets/img/kb/case-studies/display_particles.png differ diff --git a/docs/assets/img/kb/case-studies/display_spaceship.png b/docs/assets/img/kb/case-studies/display_spaceship.png new file mode 100644 index 00000000..2f51e7ad Binary files /dev/null and b/docs/assets/img/kb/case-studies/display_spaceship.png differ diff --git a/docs/assets/img/kb/case-studies/display_title.jpg b/docs/assets/img/kb/case-studies/display_title.jpg new file mode 100755 index 00000000..5a7a10dd Binary files /dev/null and b/docs/assets/img/kb/case-studies/display_title.jpg differ diff --git a/docs/assets/img/kb/case-studies/layers_title.jpg b/docs/assets/img/kb/case-studies/layers_title.jpg new file mode 100755 index 00000000..5a1fdeb8 Binary files /dev/null and b/docs/assets/img/kb/case-studies/layers_title.jpg differ diff --git a/docs/knowledge/case-studies/deep-zoom.md b/docs/knowledge/case-studies/deep-zoom.md index 2c2e4966..db10d281 100644 --- a/docs/knowledge/case-studies/deep-zoom.md +++ b/docs/knowledge/case-studies/deep-zoom.md @@ -12,6 +12,8 @@ title: "Case Study: DeepZoom - Gigapixel Visualizations" 3. [Scenario](#scenario) 4. [Findings and Discussion](#findings-and-discussion) +![Case Study: DeepZoom - Gigapixel Visualizations]({{ site.baseurl }}/assets/img/kb/case-studies/deep-zoom_title.jpg){:.content__title-image} + | Profile field | Description | | ------------- | ----------- | | Title | DeepZoom | @@ -71,7 +73,9 @@ This was a limit of the implementation described in the study. Loading complete ### Lens Placement and Overview Context -The study considered five presentation concepts, illustrated in Figure 5-39 of the source: +![Lens placement options]({{ site.baseurl }}/assets/img/kb/case-studies/deep-zoom_zoom-modes.png) + +The case study considered five presentation concepts, illustrated in Figure 5-39 of the source: | Presentation | Relationship between detail and context | | ------------ | --------------------------------------- | @@ -92,6 +96,8 @@ Several kinds of content tested the same interaction approach: - **Maps and aerial imagery:** Pre-rendered Google Maps satellite images at different resolutions and historical aerial photographs of Dresden from 1953 connected a city-wide overview with individual streets and buildings. - **Event plans:** Exhibition plans supplied as vector graphics were used for OUTPUT and Fit4Congress. The overview showed room and stand silhouettes; the detailed image added room names and event information. +![Examples for Zoomable Imagery]({{ site.baseurl }}/assets/img/kb/case-studies/deep-zoom_examples.png) + The event plans combined **geometric zoom**, enlarging the image, with **semantic zoom**, revealing additional content. They suggested an information-terminal scenario in which visitors could explore both a venue's layout and its programme. However, embedding all labels in the detail image made small text appear at low magnification, where it was difficult to read and could distract from the overview. ### Comparing Different Image Layers @@ -104,6 +110,8 @@ The lens made colour changes and alterations to pictorial elements visible withi The final iteration addressed the readability problem by separating annotations from the underlying detail image. A semi-transparent information layer became progressively more opaque as magnification increased, keeping fine detail unobtrusive at low zoom levels. +![Semantic Layers in Zoomable Images]({{ site.baseurl }}/assets/img/kb/case-studies/deep-zoom_semantic-layers.png) + For the Dresden panorama, the overlay labelled significant buildings at their image positions, resembling an augmented-reality view. The same approach was tested with other panoramas and with traffic information overlaid on maps. It worked in both the full-screen and lens presentations. **[⬆ back to top](#table-of-contents)** diff --git a/docs/knowledge/case-studies/display.md b/docs/knowledge/case-studies/display.md index 89b92fda..6a9c5098 100644 --- a/docs/knowledge/case-studies/display.md +++ b/docs/knowledge/case-studies/display.md @@ -12,6 +12,8 @@ title: "Case Study: DisPlay - Game Concepts" 3. [Scenario](#scenario) 4. [Findings and Discussion](#findings-and-discussion) +![Case Study: DisPlay]({{ site.baseurl }}/assets/img/kb/case-studies/display_title.jpg){:.content__title-image} + | Profile field | Description | | ------------- | ----------- | | Title | DisPlay | @@ -30,7 +32,9 @@ The seventh case study explored **surface deformation as a means of influencing DisPlay returned to the playful exploration of physical effects introduced by [DepthTouch](depthtouch.md). Studies such as [DEEP](deep.md) and the [Zoomable Product Browser](zoomable-product-browser.md) had mapped simulated forces to abstract actions such as selection and filtering. DisPlay instead investigated how deformation could influence objects in a virtual environment, ideally making simple physical principles understandable through interaction. -The study addressed four main questions: +![IGame Concepts: Ball Simulation and Spaceship Game]({{ site.baseurl }}/assets/img/kb/case-studies/display_overview.png) + +The case study addressed four main questions: - How can gravity, friction, inertia, velocity, and acceleration support interaction in spatial environments? - Does the simulation require an accurate vector field derived from the surface relief, or can detected deformation extrema provide a sufficient approximation? @@ -81,6 +85,8 @@ Apart from short idle-screen texts, the scenarios had no fixed reading direction ### Ball Simulation: Revisiting DepthTouch +![Ball Simulation Scenario]({{ site.baseurl }}/assets/img/kb/case-studies/display_ball-sim.png) + The first level adapted DepthTouch's circles into **three-dimensional balls**. Shading made their volume visible, while textures revealed rotation. The physics engine added size-dependent mass, inertia, friction, and more complex collisions. Moving to a three-dimensional simulation also allowed balls to move vertically and stack. Invisible boundaries formed a virtual glass box: a floor and side walls contained the balls, while a ceiling slightly above the diameter of the largest ball limited vertical movement. This reduced excessive stacking while retaining some of the additional behaviour introduced by the engine. @@ -89,11 +95,15 @@ The scenario thus explored both the visual appeal and interaction consequences o ### Particle Simulation +![IParticle Simulation Scenario]({{ site.baseurl }}/assets/img/kb/case-studies/display_particles.png) + The second level used a particle effect as a proof of concept for interactive force-field visualization. Pressing created a force source at the hand position, and deformation depth controlled its strength. Particles responded by changing their trajectories, producing an interactive snowstorm-like effect. Magnetic fields and interactions between them motivated the concept, but the prototype **did not simulate magnetic field lines**. Producing those patterns would have required additional constraints on particle motion, which remained outside the implemented scenario. -### Space Game: Steering Objects through Forces +### Spaceship Game: Steering Objects through Forces + +![Spaceship Game Scenario]({{ site.baseurl }}/assets/img/kb/case-studies/display_spaceship.png) The third level developed a game around indirect control. An initial projectile concept would have mapped pressure to launch speed and contact position to firing direction. It was set aside because it favoured single-touch interaction and fitted the idea of simultaneous gravitational sources less well. diff --git a/docs/knowledge/case-studies/layers.md b/docs/knowledge/case-studies/layers.md index 4f128406..1a546de5 100644 --- a/docs/knowledge/case-studies/layers.md +++ b/docs/knowledge/case-studies/layers.md @@ -1,5 +1,5 @@ --- -title: "Case Study: Layers - Layered Data" +title: "Case Study: Layers - Layered Data on Elastic Displays" --- # {{ page.title }} @@ -12,6 +12,8 @@ title: "Case Study: Layers - Layered Data" 3. [Scenario](#scenario) 4. [Findings and Discussion](#findings-and-discussion) +![Case Study: Layers]({{ site.baseurl }}/assets/img/kb/case-studies/layers_title.jpg){:.content__title-image} + | Profile field | Description | | ------------- | ----------- | | Title | Layers | @@ -29,8 +31,6 @@ The ninth case study combined **layer blending, multi-touch detection, and inter This account documents the research questions, interaction concepts, and findings. Dataset configuration, texture conversion, controls, and development instructions are maintained in the [Layers application documentation](../../software/apps/layers.md). - - ## Research Questions Layers revisited FlexiWall's exploration of layered content using ReFlex and web technologies. Its contribution went beyond porting the earlier visualization: detecting individual pressure points made it possible to combine direct depth-image blending with lenses and contextual information about the selected layers.