mirror of https://github.com/nealey/vail.git
351 lines
11 KiB
HTML
351 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Vail</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- Material Design Lite -->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-purple.min.css">
|
|
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
|
|
|
<!-- Vail stuff -->
|
|
<script src="vail.js"></script>
|
|
<link rel="stylesheet" href="vail.css">
|
|
</head>
|
|
<body>
|
|
<div class="mdl-layout mdl-js-layout">
|
|
<header class="mdl-layout__header mdl-layout__header--scroll">
|
|
<div class="mdl-layout__header-row">
|
|
<!-- Title -->
|
|
<span class="mdl-layout-title">Vail</span>
|
|
<!-- Add spacer, to align navigation to the right -->
|
|
<div class="mdl-layout-spacer"></div>
|
|
<!-- Navigation -->
|
|
<nav class="mdl-navigation">
|
|
<a class="mdl-navigation__link" href="https://github.com/nealey/vail">Source Code</a>
|
|
<a class="mdl-navigation__link" href="https://github.com/nealey/vail/issues/new">Bug Report</a>
|
|
<a class="mdl-navigation__link" href="https://morse.withgoogle.com/learn/">Learn Morse</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mdl-layout__drawer">
|
|
<span class="mdl-layout-title">Repeaters</span>
|
|
<nav class="mdl-navigation">
|
|
<a class="mdl-navigation__link" href="?repeater=">General Chaos</a>
|
|
<a class="mdl-navigation__link" href="?repeater=beg">1-15 WPM</a>
|
|
<a class="mdl-navigation__link" href="?repeater=int">16-20 WPM</a>
|
|
<a class="mdl-navigation__link" href="?repeater=adv">21-99 WPM</a>
|
|
</nav>
|
|
<hr>
|
|
<nav class="mdl-navigation">
|
|
<a class="mdl-navigation__link" href="https://morse.withgoogle.com/learn/">Learn Morse Code</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<main class="mdl-layout__content">
|
|
<div class="flex">
|
|
<div class="input mdl-card mdl-shadow--4dp">
|
|
<div class="mdl-card__title">
|
|
<h2 class="mdl-card__title-text">Input</h2>
|
|
</div>
|
|
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
|
<div class="mdl-tabs__tab-bar">
|
|
<a href="#straight" class="mdl-tabs__tab is-active">Straight Key</a>
|
|
<a href="#iambic" class="mdl-tabs__tab">Iambic</a>
|
|
<a href="#tools" class="mdl-tabs__tab">Tools</a>
|
|
</div>
|
|
<div class="mdl-tabs__panel is-active" id="straight">
|
|
<table class="center wide">
|
|
<tr>
|
|
<td>
|
|
<button id="key" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
|
Key
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<kbd>c</kbd> or <kbd>,</kbd> or <kbd>⇧ Shift</kbd>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="mdl-tabs__panel" id="iambic">
|
|
<table class="center wide">
|
|
<tr>
|
|
<td>
|
|
<button id="dit" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
|
Dit
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<button id="dah" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
|
Dah
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<kbd>.</kbd> or <kbd>z</kbd>
|
|
<br>
|
|
right-click for Dah
|
|
</td>
|
|
<td>
|
|
<kbd>/</kbd> or <kbd>x</kbd>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="mdl-tabs__panel" id="tools">
|
|
<table class="center wide">
|
|
<tr>
|
|
<td>
|
|
<button id="ck" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
|
CK
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Echo On</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mdl-card mdl-shadow--4dp">
|
|
<div class="mdl-card__title">
|
|
<h2 class="mdl-card__title-text">Knobs</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
<p>
|
|
Dit length (iambic):
|
|
<output id="iambic-duration-value"></output>ms
|
|
<input
|
|
id="iambic-duration"
|
|
class="mdl-slider mdl-js-slider"
|
|
type="range"
|
|
min="40"
|
|
max="255"
|
|
value="100">
|
|
</p>
|
|
<p>
|
|
Recieve delay:
|
|
<output id="rx-delay-value"></output>ms
|
|
<input
|
|
id="rx-delay"
|
|
class="mdl-slider mdl-js-slider"
|
|
type="range"
|
|
min="0"
|
|
max="9999"
|
|
value="4000">
|
|
</p>
|
|
<hr>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
Suggested receive delay:
|
|
</td>
|
|
<td>
|
|
<output id="suggested-delay-value">0</output>ms
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Average round-trip time:
|
|
</td>
|
|
<td>
|
|
<output id="lag-value">0</output>ms
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Longest recent transmission:
|
|
</td>
|
|
<td>
|
|
<output id="longest-rx-value">0</output>ms
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Repeater:
|
|
</td>
|
|
<td>
|
|
<span id="repeater"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<hr>
|
|
<p>Errors</p>
|
|
<div id="errors"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mdl-card mdl-shadow--4dp">
|
|
<div class="mdl-card__title">
|
|
<h2 class="mdl-card__title-text">Code Tree</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
<img src="code-tree.png">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mdl-card mdl-shadow--4dp">
|
|
<div class="mdl-card__title">
|
|
<h2 class="mdl-card__title-text">Vail</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
<p>
|
|
This is a CW repeater,
|
|
named after Alfred Vail,
|
|
who may or may not have invented what's called "Morse code",
|
|
but clearly had some role in it.
|
|
</p>
|
|
|
|
<p>
|
|
Just like a radio repeater,
|
|
anybody can connect and start transmitting stuff,
|
|
and this will broadcast it to everyone connected.
|
|
</p>
|
|
|
|
<h3 class="mdl-card__title-text">Why Does This Exist?</h3>
|
|
|
|
<p>
|
|
I need a place to practice CW with actual human beings,
|
|
and I want it to be as close as possible to what I'd experience on a radio.
|
|
Also, I don't want to make people buy a bunch of radio hardware.
|
|
Nothing else like this exists on the Internet, as far as I can tell.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mdl-card mdl-shadow--4dp">
|
|
<div class="mdl-card__title">
|
|
<h2 class="mdl-card__title-text">How It Works</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
|
|
<p>
|
|
The Internet isn't exactly like radio waves:
|
|
it still goes at near the speed of light,
|
|
but there are multiple hops between endpoints,
|
|
which buffer up transmissions, and multiplex them onto a single uplink connection.
|
|
These repeaters (routers)
|
|
are also allowed to just drop things if they need to.
|
|
It's the responsibility of the communicating parties
|
|
to work out whether something needs to be retransmitted.
|
|
Because of this,
|
|
there's no telling how long it will take for a transmission to get to a destination.
|
|
</p>
|
|
|
|
<p>
|
|
Each Vail transmission (packet) consists of:
|
|
</p>
|
|
<ul>
|
|
<li>timestamp (milliseconds since 1 Jan 1970, 00:00:00 in Reykjavík)</li>
|
|
<li>transmission duration (milliseconds)</li>
|
|
<li>silence duration (milliseconds, optional)</li>
|
|
<li>transmission duration (milliseconds, optional)</li>
|
|
<li>silence duration (milliseconds, optional)</li>
|
|
<li>Repeat as necessary</li>
|
|
</ul>
|
|
|
|
<p>
|
|
The repeater does nothing but broadcast everything it gets
|
|
to every connected Vail client,
|
|
including the one that sent the packet.
|
|
When your client gets back the exact same thing it sent,
|
|
it compares the current time to the time in the packet.
|
|
This is the <i>round-trip time</i>:
|
|
the time it takes for a packet to get from your computer to the repeater and back.
|
|
</p>
|
|
|
|
<p>
|
|
When the client gets a packet it didn't send,
|
|
it adds the <i>receive delay</i> to the timestamp,
|
|
and schedules to play the tones and silences in the packet
|
|
at that time.
|
|
</p>
|
|
|
|
<p>
|
|
By adding the maximum round-trip time to the <i>longest recent transmission</i>
|
|
(the length of a dah, hopefully),
|
|
your client can make a guess about how much time needs to be added to a received timestamp,
|
|
in order to have it play back in the future at the time it comes in.
|
|
This is just a guess.
|
|
If you're communicating with somebody with a higher round-trip time than you have,
|
|
you'll need to raise your receive delay to account for it.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mdl-card mdl-shadow--4dp">
|
|
<div class="mdl-card__title">
|
|
<h2 class="mdl-card__title-text">Why do I hear a low tone?</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
<p>
|
|
This is the "drop tone", and will be accompanied by an error.
|
|
</p>
|
|
|
|
<p>
|
|
This means the packet arrived so late, it can't be played in time.
|
|
In technical terms: the timestamp of the packet plus the receive delay
|
|
is less than the current time.
|
|
It can't be scheduled to play, because we can't go back in time.
|
|
</p>
|
|
|
|
<p>
|
|
This could be happening for three reasons:
|
|
</p>
|
|
|
|
<ol>
|
|
<li>You (the person hearing the drop tone) need a larger receive delay</li>
|
|
<li>The receiving computer's clock is in the future (running fast)</li>
|
|
<li>The sending computer's clock is in the past (running slow)</li>
|
|
</ol>
|
|
|
|
<p>
|
|
Make sure your clock is synced with an Internet time server.
|
|
Accurate time is very important to how Vail works.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mdl-card mdl-shadow--4dp">
|
|
<div class="mdl-card__title">
|
|
<h2 class="mdl-card__title-text">Future plans</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
<ul>
|
|
<li>Move to a more permanent URL</li>
|
|
<li>Make this page less ugly</li>
|
|
<li>Arduino program to let you hook up an iambic paddle over USB</li>
|
|
<li>Document the protocol</li>
|
|
</ul>
|
|
|
|
|
|
<h3 class="mdl-card__title-text">How can I help?</h3>
|
|
|
|
<ul>
|
|
<li>Improve the <a href="https://github.com/nealey/vail/">source code</a></li>
|
|
<li>Email me and let me know you're using it</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<a href="mailto:neale@woozle.org">Neale Pickett</a> kd7oqi
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|