Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 51 additions & 2 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@
h2 { font-size: 26px; margin: 54px 0 6px; letter-spacing: -.01em; }
.sub { color: var(--dim); margin: 0 0 20px; max-width: 70ch; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.tile h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.tile p { margin: 0; color: var(--dim); font-size: 14.5px; }

.picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pick {
padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line);
Expand Down Expand Up @@ -95,8 +100,9 @@
<div class="mark"><div class="dot"></div></div>
<h1>MThread Draw</h1>
<p class="lede">It turns an ordinary photograph into touch strokes and draws it on an
Android phone, over ADB, with nothing installed on the device. A drawing of
five hundred points lands in about two seconds.</p>
Android phone, over ADB, with nothing installed on the device. You watch the
phone's screen while you place the drawing on it, and a drawing of five hundred
points lands in about a second and a half.</p>
<div class="cta">
<a class="btn primary" href="https://github.com/MAXAWER/MThread-Draw/releases/latest">Download</a>
<a class="btn" href="https://github.com/MAXAWER/MThread-Draw">Source on GitHub</a>
Expand Down Expand Up @@ -124,6 +130,49 @@ <h2>Trace it yourself</h2>
</div>
</div>

<h2>What it does</h2>
<p class="sub">Everything below is in the released build, and every claim on this page was
measured rather than estimated.</p>

<div class="grid">
<div class="tile">
<h3>It shows you the phone</h3>
<p>The screen, live, in its own shape, with the drawing lying over exactly where
it will land. About three frames a second: the phone scales and compresses each
one, so the cable carries 27 kB instead of a sixteen-megabyte framebuffer.</p>
</div>
<div class="tile">
<h3>Put it where you want it</h3>
<p>Drag it over the live view, wheel to resize, Shift and wheel to turn, and
flip it either way. Held in fractions of the screen, so it survives the phone
being turned and means the same thing on a different device.</p>
</div>
<div class="tile">
<h3>Layers</h3>
<p>Several pictures arranged against each other before anything is drawn, each
with its own position and its own tracer settings. Hide one, reorder them,
remove one.</p>
</div>
<div class="tile">
<h3>An eraser</h3>
<p>Drag across the strokes you do not want and they come out. Which ones count
as under the cursor is decided after placement, because the cursor is over a
picture of the phone rather than over a coordinate space.</p>
</div>
<div class="tile">
<h3>Record and replay</h3>
<p>Record what you do on the phone and play it back, on that phone or another
one. The file holds each touch as a fraction of the screen, so replaying it
elsewhere scales it to that screen rather than refusing.</p>
</div>
<div class="tile">
<h3>Or draw with no picture at all</h3>
<p><code>mthread shape heart</code>, <code>mthread shape star --points 7</code>,
<code>mthread text "hello"</code>. Seven shapes from equations, and text in any
font the machine has.</p>
</div>
</div>

<h2>Why it is quick</h2>
<p class="sub">Every touch on Android normally costs a process. Sending a thousand of them
that way takes minutes, which is why anything continuous - a gesture, a line, a
Expand Down
53 changes: 51 additions & 2 deletions tools/make_play.py
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,11 @@ def trace_all() -> dict:
h2 { font-size: 26px; margin: 54px 0 6px; letter-spacing: -.01em; }
.sub { color: var(--dim); margin: 0 0 20px; max-width: 70ch; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.tile h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.tile p { margin: 0; color: var(--dim); font-size: 14.5px; }

.picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pick {
padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line);
Expand Down Expand Up @@ -164,8 +169,9 @@ def trace_all() -> dict:
<div class="mark"><div class="dot"></div></div>
<h1>MThread Draw</h1>
<p class="lede">It turns an ordinary photograph into touch strokes and draws it on an
Android phone, over ADB, with nothing installed on the device. A drawing of
five hundred points lands in about two seconds.</p>
Android phone, over ADB, with nothing installed on the device. You watch the
phone's screen while you place the drawing on it, and a drawing of five hundred
points lands in about a second and a half.</p>
<div class="cta">
<a class="btn primary" href="https://github.com/MAXAWER/MThread-Draw/releases/latest">Download</a>
<a class="btn" href="https://github.com/MAXAWER/MThread-Draw">Source on GitHub</a>
Expand Down Expand Up @@ -193,6 +199,49 @@ def trace_all() -> dict:
</div>
</div>

<h2>What it does</h2>
<p class="sub">Everything below is in the released build, and every claim on this page was
measured rather than estimated.</p>

<div class="grid">
<div class="tile">
<h3>It shows you the phone</h3>
<p>The screen, live, in its own shape, with the drawing lying over exactly where
it will land. About three frames a second: the phone scales and compresses each
one, so the cable carries 27 kB instead of a sixteen-megabyte framebuffer.</p>
</div>
<div class="tile">
<h3>Put it where you want it</h3>
<p>Drag it over the live view, wheel to resize, Shift and wheel to turn, and
flip it either way. Held in fractions of the screen, so it survives the phone
being turned and means the same thing on a different device.</p>
</div>
<div class="tile">
<h3>Layers</h3>
<p>Several pictures arranged against each other before anything is drawn, each
with its own position and its own tracer settings. Hide one, reorder them,
remove one.</p>
</div>
<div class="tile">
<h3>An eraser</h3>
<p>Drag across the strokes you do not want and they come out. Which ones count
as under the cursor is decided after placement, because the cursor is over a
picture of the phone rather than over a coordinate space.</p>
</div>
<div class="tile">
<h3>Record and replay</h3>
<p>Record what you do on the phone and play it back, on that phone or another
one. The file holds each touch as a fraction of the screen, so replaying it
elsewhere scales it to that screen rather than refusing.</p>
</div>
<div class="tile">
<h3>Or draw with no picture at all</h3>
<p><code>mthread shape heart</code>, <code>mthread shape star --points 7</code>,
<code>mthread text "hello"</code>. Seven shapes from equations, and text in any
font the machine has.</p>
</div>
</div>

<h2>Why it is quick</h2>
<p class="sub">Every touch on Android normally costs a process. Sending a thousand of them
that way takes minutes, which is why anything continuous - a gesture, a line, a
Expand Down
Loading