Skip to content

Commit 59371f6

Browse files
willwadewillwade
committed
adding missing images
1 parent 6306e46 commit 59371f6

5 files changed

Lines changed: 102 additions & 45 deletions

File tree

‎src/pages/demonstrations.astro‎

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
1919
flow of text entry.
2020
</p>
2121
<div class="demo-media">
22-
<video controls width="600" poster="/images/dasher-poster.jpg">
23-
<source src="/videos/intro.mp4" type="video/mp4">
24-
Your browser does not support the video tag.
25-
</video>
22+
<img src="/videos/newdasher.gif" alt="Animated GIF of Dasher in action" width="250" height="230" loading="lazy" />
2623
</div>
2724
</section>
2825

@@ -54,39 +51,63 @@ import BaseLayout from '../layouts/BaseLayout.astro';
5451

5552
<section class="demo-section">
5653
<h2>See It In Action</h2>
54+
<p>
55+
The original project videos are now available on YouTube.
56+
Start with the full playlist, then use the featured demos below.
57+
</p>
58+
<p>
59+
<a href="https://www.youtube.com/playlist?list=PLG22wrzFpavafCF-5u9jh6kS-UAIGkPbw" target="_blank" rel="noopener noreferrer" class="btn-secondary">Open YouTube Playlist</a>
60+
</p>
5761

5862
<div class="video-list">
5963
<div class="video-item">
60-
<h3>Introduction to Dasher</h3>
61-
<p>A complete overview of how Dasher works and its key features.</p>
64+
<h3>Eye-Tracking Demo (Nov 2001)</h3>
65+
<p>Classic eye-tracking demonstration from the original project videos.</p>
6266
<div class="video-player">
63-
<video controls poster="/images/dasher-poster.jpg">
64-
<source src="/videos/intro.mp4" type="video/mp4">
65-
Your browser does not support the video tag.
66-
</video>
67+
<iframe
68+
src="https://www.youtube.com/embed/-96VfRFS7tw"
69+
title="Eye-tracking demo (Nov 2001)"
70+
loading="lazy"
71+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
72+
referrerpolicy="strict-origin-when-cross-origin"
73+
allowfullscreen>
74+
</iframe>
6775
</div>
6876
</div>
6977

7078
<div class="video-item">
71-
<h3>Eye-Tracking Demonstration</h3>
72-
<p>See how Dasher enables text entry using only eye movements.</p>
79+
<h3>Control Mode</h3>
80+
<p>Enhanced eye-tracking mode demonstrating control mode behavior.</p>
7381
<div class="video-player">
74-
<video controls poster="/images/dasher-poster.jpg">
75-
<source src="/videos/eye-tracking.mp4" type="video/mp4">
76-
Your browser does not support the video tag.
77-
</video>
82+
<iframe
83+
src="https://www.youtube.com/embed/KwpGpCSK2Pk"
84+
title="Dasher control mode demo"
85+
loading="lazy"
86+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
87+
referrerpolicy="strict-origin-when-cross-origin"
88+
allowfullscreen>
89+
</iframe>
7890
</div>
7991
</div>
8092

8193
<div class="video-item">
82-
<h3>Advanced Techniques</h3>
83-
<p>Learn tips and tricks for faster text entry with Dasher.</p>
94+
<h3>Dasher Eyetracker and BreathDasher</h3>
95+
<p>Additional legacy demos now hosted on YouTube.</p>
8496
<div class="video-player">
85-
<video controls poster="/images/dasher-poster.jpg">
86-
<source src="/videos/advanced.mp4" type="video/mp4">
87-
Your browser does not support the video tag.
88-
</video>
97+
<iframe
98+
src="https://www.youtube.com/embed/qW2-Qvj_p7k"
99+
title="Dasher Eyetracker demo"
100+
loading="lazy"
101+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
102+
referrerpolicy="strict-origin-when-cross-origin"
103+
allowfullscreen>
104+
</iframe>
89105
</div>
106+
<p>
107+
More videos:
108+
<a href="https://youtu.be/Bz3OJXokFDs" target="_blank" rel="noopener noreferrer">EyeDasher 4800</a>,
109+
<a href="https://youtu.be/_tMIotLU7Co" target="_blank" rel="noopener noreferrer">BreathDasher</a>.
110+
</p>
90111
</div>
91112
</div>
92113
</section>

‎src/pages/docs/concepts/how-dasher-works/index.md‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ The first book in the "a" section reads "aaaaaaaaaaaa..."; somewhere to its righ
2323
"all good things must come to an end..."; a tiny bit further to the right are books that start
2424
"all good things must come to an enema...".
2525

26-
<div class="diagram-container">
27-
<div class="diagram">
28-
<strong>(i)</strong>
29-
<p>The entire library a-z</p>
30-
</div>
26+
<div class="demo-preview">
27+
<img src="/videos/newdasher.gif" alt="Dasher zooming interface animation (version 3)" width="250" height="230" loading="lazy" />
28+
<p class="caption">
29+
The original "How does Dasher work?" page (<code>DasherSummary2.html</code>) used this animation on the right side.
30+
</p>
3131
</div>
3232

3333
## Finding Your Book
@@ -43,7 +43,8 @@ First, they walk into the "a" section of the library. There, they are confronted
4343
<div class="diagram-container">
4444
<div class="diagram">
4545
<strong>(ii)</strong>
46-
<p>Looking more closely at the "al" section</p>
46+
<img src="/videos/he2.gif" alt="Dasher showing letter regions while writing 'hello'" width="226" height="363" loading="lazy" />
47+
<p>Looking more closely at a specific region</p>
4748
</div>
4849
</div>
4950

@@ -52,7 +53,8 @@ Looking more closely at the "al" section, they can find books starting "ala", "a
5253
<div class="diagram-container">
5354
<div class="diagram">
5455
<strong>(iii)</strong>
55-
<p>The "ala" through "alz" subsection</p>
56+
<img src="/videos/he10.gif" alt="Higher-resolution Dasher screenshot showing probable next letters" width="226" height="363" loading="lazy" />
57+
<p>Zooming further into the most likely continuations</p>
5658
</div>
5759
</div>
5860

‎src/pages/docs/concepts/how-dasher-works/page-2.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,18 @@ and more to the more plausible books, thus making it easier to find books that c
3333
<div class="diagram-grid">
3434
<div class="diagram">
3535
<strong>(i)</strong>
36-
<p>a-z (all equal size)</p>
36+
<img src="/videos/areas.gif" alt="Dasher area map showing available text space" width="384" height="384" loading="lazy" />
37+
<p>All possibilities visible as regions</p>
3738
</div>
3839
<div class="diagram">
3940
<strong>(ii)</strong>
40-
<p>aa-az (sized by probability)</p>
41+
<img src="/videos/areas2.gif" alt="Dasher area map zoomed into likely regions" width="384" height="384" loading="lazy" />
42+
<p>Likely continuations occupy more space</p>
4143
</div>
4244
<div class="diagram">
4345
<strong>(iii)</strong>
44-
<p>ala-alz (sized by probability)</p>
46+
<img src="/videos/object-from-site.gif" alt="Dasher showing object/objective branch with larger likely targets" width="507" height="447" loading="lazy" />
47+
<p>Fine-grained steering among probable words</p>
4548
</div>
4649
</div>
4750
</div>

‎src/pages/docs/concepts/how-dasher-works/page-3.md‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ If you find Dasher hard to imagine based on static pictures, you're not alone.
1919
but be assured: it is actually very easy; it's a lot like driving a car.</strong>
2020

2121
<div class="demo-preview">
22-
<img src="/images/object.gif" alt="Dasher text entry interface showing word selection" width="507" height="447" loading="lazy" />
22+
<img src="/videos/object-from-site.gif" alt="Dasher text entry interface showing word selection" width="507" height="447" loading="lazy" />
2323
<p class="caption">
2424
The image above shows the state of the Dasher interface while the user is writing the word "objection".
2525
Alternative words that could easily be written at this point include "objective", "objects_", and "object_oriented".
@@ -30,20 +30,32 @@ but be assured: it is actually very easy; it's a lot like driving a car.</strong
3030

3131
The best way to understand Dasher is to see it in motion. We have several types of demonstrations:
3232

33-
<div class="demo-types">
34-
<div class="demo-type">
35-
<h3>Animated GIFs</h3>
36-
<p>Short animations showing Dasher version 3 in action. These work in any modern browser.</p>
33+
<div class="video-list">
34+
<div class="video-item">
35+
<h3>Animated GIF: Dasher v3</h3>
36+
<div class="demo-media">
37+
<img src="/videos/newdasher.gif" alt="Animated GIF of Dasher version 3" width="250" height="230" loading="lazy" />
38+
</div>
3739
</div>
3840

39-
<div class="demo-type">
40-
<h3>Video Demonstrations</h3>
41-
<p>Longer videos showing various input methods including eye-tracking, breath control, and more.</p>
41+
<div class="video-item">
42+
<h3>Animated GIF: Dasher v1</h3>
43+
<div class="demo-media">
44+
<img src="/videos/dasher-v1.gif" alt="Animated GIF of early Dasher version" loading="lazy" />
45+
</div>
4246
</div>
4347

44-
<div class="demo-type">
45-
<h3>External Videos</h3>
46-
<p>Google Tech Talks, YouTube demonstrations, and media features showing real-world usage.</p>
48+
<div class="video-item">
49+
<h3>YouTube Demonstrations</h3>
50+
<p>Current long-form demos are now hosted on YouTube.</p>
51+
<ul>
52+
<li><a href="https://www.youtube.com/playlist?list=PLG22wrzFpavafCF-5u9jh6kS-UAIGkPbw" target="_blank" rel="noopener noreferrer">Dasher YouTube Playlist</a></li>
53+
<li><a href="https://youtu.be/-96VfRFS7tw" target="_blank" rel="noopener noreferrer">Eye-tracker demo (Nov 2001)</a></li>
54+
<li><a href="https://youtu.be/KwpGpCSK2Pk" target="_blank" rel="noopener noreferrer">Control Mode</a></li>
55+
<li><a href="https://youtu.be/qW2-Qvj_p7k" target="_blank" rel="noopener noreferrer">Dasher Eyetracker</a></li>
56+
<li><a href="https://youtu.be/Bz3OJXokFDs" target="_blank" rel="noopener noreferrer">EyeDasher 4800</a></li>
57+
<li><a href="https://youtu.be/_tMIotLU7Co" target="_blank" rel="noopener noreferrer">BreathDasher</a></li>
58+
</ul>
4759
</div>
4860
</div>
4961

‎src/styles/pages.css‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -601,11 +601,15 @@ pre code {
601601
}
602602

603603
.diagram {
604-
display: inline-block;
604+
display: flex;
605+
flex-direction: column;
606+
align-items: center;
605607
padding: var(--space-lg);
606608
background-color: var(--color-horizon-mint);
607609
border-radius: var(--radius-md);
608-
min-width: 200px;
610+
min-width: 0;
611+
width: 100%;
612+
overflow: hidden;
609613
}
610614

611615
.diagram strong {
@@ -614,6 +618,14 @@ pre code {
614618
margin-bottom: var(--space-sm);
615619
}
616620

621+
.diagram img {
622+
max-width: 100%;
623+
width: 100%;
624+
height: auto;
625+
display: block;
626+
border-radius: var(--radius-sm);
627+
}
628+
617629
.key-concept {
618630
margin-top: var(--space-xl);
619631
padding: var(--space-lg);
@@ -1175,6 +1187,13 @@ li {
11751187
max-height: 480px;
11761188
}
11771189

1190+
.video-player iframe {
1191+
width: 100%;
1192+
aspect-ratio: 16 / 9;
1193+
border: 0;
1194+
display: block;
1195+
}
1196+
11781197
/* External links */
11791198
.external-links {
11801199
display: grid;

0 commit comments

Comments
 (0)