mirror of https://github.com/nealey/vail.git
A bit of UI work
This commit is contained in:
parent
0677d7171c
commit
7ba5ee836e
|
|
@ -2,138 +2,178 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Vail</title>
|
<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>
|
<script src="vail.js"></script>
|
||||||
<link rel="stylesheet" href="vail.css">
|
<link rel="stylesheet" href="vail.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div class="mdl-layout mdl-js-layout">
|
||||||
<img src="code-tree.png">
|
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||||
</div>
|
<div class="mdl-layout__header-row">
|
||||||
|
<!-- Title -->
|
||||||
<div>
|
<span class="mdl-layout-title">Vail</span>
|
||||||
<table>
|
<!-- Add spacer, to align navigation to the right -->
|
||||||
<tr>
|
<div class="mdl-layout-spacer"></div>
|
||||||
<th>Dot</th>
|
<!-- Navigation -->
|
||||||
<td><code>,</code>, <code>w</code>, left mouse button</td>
|
<nav class="mdl-navigation">
|
||||||
</tr>
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
<tr>
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
<th>Dash</th>
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
<td><code>.</code>, <code>v</code>, right mouse button</td>
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
</tr>
|
</nav>
|
||||||
</table>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
|
<div class="mdl-layout__drawer">
|
||||||
<div>
|
<span class="mdl-layout-title">Title</span>
|
||||||
<pre>
|
<nav class="mdl-navigation">
|
||||||
a : .-
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
b : -...
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
c : -.-.
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
d : -..
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
e : .
|
</nav>
|
||||||
f : ..-.
|
</div>
|
||||||
g : --.
|
<main class="mdl-layout__content">
|
||||||
h : ....
|
<div class="flex">
|
||||||
i : ..
|
<div class="mdl-card mdl-shadow--4dp">
|
||||||
j : .---
|
<div class="mdl-card__title">
|
||||||
k : -.-
|
<h2 class="mdl-card__title-text">
|
||||||
l : .-..
|
Code Tree
|
||||||
m : --
|
</h2>
|
||||||
n : -.
|
</div>
|
||||||
o : ---
|
<div class="mdl-card__supporting-text">
|
||||||
p : .--.
|
<img src="code-tree.png">
|
||||||
q : --.-
|
</div>
|
||||||
r : .-.
|
</div>
|
||||||
s : ...
|
|
||||||
t : -
|
<div class="mdl-card mdl-shadow--4dp">
|
||||||
u : ..-
|
<div class="mdl-card__title">
|
||||||
v : ...-
|
<h2 class="mdl-card__title-text">
|
||||||
w : .--
|
Input
|
||||||
x : -..-
|
</h2>
|
||||||
y : -.--
|
</div>
|
||||||
z : --..
|
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
||||||
0 : -----
|
<div class="mdl-tabs__tab-bar">
|
||||||
1 : .----
|
<a href="#iambic" class="mdl-tabs__tab is-active">Iambic</a>
|
||||||
2 : ..---
|
<a href="#straight" class="mdl-tabs__tab">Straight Key</a>
|
||||||
3 : ...--
|
</div>
|
||||||
4 : ....-
|
<div class="mdl-tabs__panel is-active" id="iambic">
|
||||||
5 : .....
|
<table style="width: 100%; text-align: center;">
|
||||||
6 : -....
|
<tr>
|
||||||
7 : --...
|
<td>
|
||||||
8 : ---..
|
<button class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
||||||
9 : ----.
|
dit
|
||||||
. : .-.-.-
|
</button>
|
||||||
, : --..--
|
</td>
|
||||||
: : ---...
|
<td>
|
||||||
? : ..--..
|
<button class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
||||||
' : .----.
|
dah
|
||||||
- : -....-
|
</button>
|
||||||
/ : -..-.
|
</td>
|
||||||
" : .-..-.
|
</tr>
|
||||||
@ : .--.-.
|
<tr>
|
||||||
= : -...-
|
<td>
|
||||||
! : -.-.--
|
<code>.</code> or <code>⇧</code>
|
||||||
</pre>
|
</td>
|
||||||
</div>
|
<td>
|
||||||
|
<code>/</code> or <code>z</code>
|
||||||
<div>
|
</td>
|
||||||
<h1>Vail</h1>
|
</tr>
|
||||||
|
</table>
|
||||||
<p>
|
</div>
|
||||||
This is a CW repeater,
|
<div class="mdl-tabs__panel" id="straight">
|
||||||
named after Alfred Vail,
|
<button class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
||||||
who may or may not have invented what's called "Morse code",
|
Key
|
||||||
but clearly had some role in it.
|
</button>
|
||||||
</p>
|
</div>
|
||||||
|
</div>
|
||||||
<p>
|
</div>
|
||||||
Just like a radio repeater,
|
|
||||||
anybody can connect and start transmitting stuff,
|
<div class="mdl-card mdl-shadow--4dp">
|
||||||
and this will broadcast it to everyone connected.
|
<div class="mdl-card__title">
|
||||||
If there's enough interest,
|
<h2 class="mdl-card__title-text">
|
||||||
I'll add something like channels.
|
Vail
|
||||||
</p>
|
</h2>
|
||||||
|
</div>
|
||||||
<p>
|
<div class="mdl-card__supporting-text">
|
||||||
If you need this to work on a cell phone,
|
<p>
|
||||||
let me know and I'll come up with something for you.
|
This is a CW repeater,
|
||||||
</p>
|
named after Alfred Vail,
|
||||||
</div>
|
who may or may not have invented what's called "Morse code",
|
||||||
|
but clearly had some role in it.
|
||||||
<div>
|
</p>
|
||||||
<h2>Why does this exist?</h2>
|
|
||||||
|
<p>
|
||||||
<p>
|
Just like a radio repeater,
|
||||||
I need a place to practice CW with actual human beings,
|
anybody can connect and start transmitting stuff,
|
||||||
and I want it to be as close as possible to what I'd experience on a radio.
|
and this will broadcast it to everyone connected.
|
||||||
Also, I don't want to make people buy a bunch of radio hardware.
|
If there's enough interest,
|
||||||
Nothing else like this exists on the Internet, as far as I can tell.
|
I'll add something like channels.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Who made it?</h2>
|
<p>
|
||||||
|
If you need this to work on a cell phone,
|
||||||
<p>
|
let me know and I'll come up with something for you.
|
||||||
<a href="mailto:neale@woozle.org">Neale Pickett</a> kd7oqi
|
</p>
|
||||||
</p>
|
</div>
|
||||||
|
</div>
|
||||||
<h2>Future plans</h2>
|
|
||||||
|
<div class="mdl-card mdl-shadow--4dp">
|
||||||
<ul>
|
<div class="mdl-card__title">
|
||||||
<li>Move to a more permanent URL</li>
|
<h2 class="mdl-card__title-text">
|
||||||
<li>Make this page less ugly</li>
|
Why Does This Exist?
|
||||||
<li>Arduino program to let you hook up an iambic paddle over USB</li>
|
</h2>
|
||||||
<li>Document the protocol</li>
|
</div>
|
||||||
<li>Support multiple channels/frequencies</li>
|
<div class="mdl-card__supporting-text">
|
||||||
<li>Sensible way to make this work on a cell phone</li>
|
<p>
|
||||||
<li>Make this page less ugly (I really hate it right now)</li>
|
I need a place to practice CW with actual human beings,
|
||||||
</ul>
|
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.
|
||||||
<h2>How can I help?</h2>
|
</p>
|
||||||
|
|
||||||
<ul>
|
<h3>Who made it?</h3>
|
||||||
<li>Improve the <a href="https://github.com/nealey/vail/">source code</a></li>
|
|
||||||
<li><a href="mailto:neale@woozle.org">Email me</a> and let me know you're using it</li>
|
<p>
|
||||||
</ul>
|
<a href="mailto:neale@woozle.org">Neale Pickett</a> kd7oqi
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mdl-card mdl-shadow--4dp">
|
||||||
|
<div class="mdl-card__title">
|
||||||
|
<h3 class="mdl-card__title-text">Future plans</h3>
|
||||||
|
</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>
|
||||||
|
<li>Support multiple channels/frequencies</li>
|
||||||
|
<li>Sensible way to make this work on a cell phone</li>
|
||||||
|
<li>Make this page less ugly (I really hate it right now)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<h3>How can I help?</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Improve the <a href="https://github.com/nealey/vail/">source code</a></li>
|
||||||
|
<li><a href="mailto:neale@woozle.org">Email me</a> and let me know you're using it</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,13 @@
|
||||||
body {
|
.flex {
|
||||||
background-color: #ccc;
|
|
||||||
font-family: sans-serif;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
width: 100%;
|
||||||
|
height: 6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,89 @@
|
||||||
var ac = new AudioContext()
|
// jshint asi:true
|
||||||
var gain = ac.createGain()
|
|
||||||
gain.connect(ac.destination)
|
|
||||||
gain.gain.value = 0.1
|
|
||||||
|
|
||||||
var short = 80
|
var short = 80
|
||||||
var long = 200
|
var long = 200
|
||||||
var audioFreq = 660
|
var audioFreq = 660
|
||||||
var audioFreqMe = audioFreq * 6 / 5 // I think this works out to a minor third
|
var audioFreqMe = audioFreq * 6 / 5 // I think this works out to a minor third
|
||||||
var myosc
|
|
||||||
|
var ac = new AudioContext()
|
||||||
|
|
||||||
|
var mygain = ac.createGain()
|
||||||
|
mygain.connect(ac.destination)
|
||||||
|
mygain.gain.value = 0
|
||||||
|
|
||||||
|
var myosc = ac.createOscillator()
|
||||||
|
myosc.connect(mygain)
|
||||||
|
myosc.frequency.value = audioFreqMe
|
||||||
|
myosc.start()
|
||||||
|
|
||||||
|
var theirgain = ac.createGain()
|
||||||
|
theirgain.connect(ac.destination)
|
||||||
|
theirgain.gain.value = 0
|
||||||
|
|
||||||
|
var theirosc = ac.createOscillator()
|
||||||
|
theirosc.connect(theirgain)
|
||||||
|
theirosc.frequency.value = audioFreq
|
||||||
|
theirosc.start()
|
||||||
|
|
||||||
|
var repeatInterval
|
||||||
|
|
||||||
|
|
||||||
function message(event) {
|
function message(event) {
|
||||||
|
let now = ac.currentTime
|
||||||
let duration = Number(event.data) || 0
|
let duration = Number(event.data) || 0
|
||||||
duration = Math.min(duration, long)
|
duration = Math.min(duration, long)
|
||||||
|
|
||||||
let osc = ac.createOscillator()
|
if (now === 0) {
|
||||||
osc.connect(gain)
|
// Audio Context hasn't started, we can't make sound yet
|
||||||
osc.frequency.value = audioFreq
|
return
|
||||||
osc.start(ac.currentTime)
|
}
|
||||||
osc.stop(ac.currentTime + (duration * 0.001))
|
|
||||||
|
theirgain.gain.linearRampToValueAtTime(0.1, now + 0.01)
|
||||||
|
mygain.gain.setValueAtTime(0.1, now + duration/1000)
|
||||||
|
theirgain.gain.linearRampToValueAtTime(0.0, now + 0.01 + duration/1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function send(duration) {
|
||||||
|
let now = ac.currentTime
|
||||||
|
window.socket.send(duration)
|
||||||
|
|
||||||
|
if (now === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
mygain.gain.linearRampToValueAtTime(0.1, now + 0.01)
|
||||||
|
mygain.gain.setValueAtTime(0.1, now + duration/1000)
|
||||||
|
mygain.gain.linearRampToValueAtTime(0.0, now + 0.01 + duration/1000)
|
||||||
}
|
}
|
||||||
|
|
||||||
function key(event) {
|
function key(event) {
|
||||||
let duration = 0
|
let duration = 0
|
||||||
|
|
||||||
|
ac.resume()
|
||||||
|
|
||||||
if ((event.button === 0) || (event.key == ",") || (event.key == "w")) {
|
if (event.repeat) {
|
||||||
duration = short
|
// Ignore key repeats generated by the OS, we do this ourselves
|
||||||
}
|
|
||||||
if ((event.button === 2) || (event.key == ".") || (event.key == "v")) {
|
|
||||||
duration = long
|
|
||||||
}
|
|
||||||
// You don't get to hold the key down yet, sorry
|
|
||||||
if ((event.repeat) || (duration === 0)) {
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
window.socket.send(duration)
|
if ((event.button === 0) || (event.code == "Period") || (event.key == "Shift")) {
|
||||||
|
duration = short
|
||||||
|
}
|
||||||
|
if ((event.button === 2) || (event.code == "Slash") || (event.code == "KeyZ")) {
|
||||||
|
duration = long
|
||||||
|
}
|
||||||
|
if (duration === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (repeatInterval) {
|
||||||
|
clearInterval(repeatInterval)
|
||||||
|
}
|
||||||
|
|
||||||
myosc = ac.createOscillator()
|
if (event.type.endsWith("down")) {
|
||||||
myosc.connect(gain)
|
send(duration)
|
||||||
myosc.frequency.value = audioFreqMe
|
repeatInterval = setInterval(() => {send(duration)}, duration + short)
|
||||||
myosc.start(ac.currentTime)
|
}
|
||||||
myosc.stop(ac.currentTime + duration * 0.001)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function canWeJustNot(event) {
|
function canWeJustNot(event) {
|
||||||
|
|
@ -58,7 +101,9 @@ function init() {
|
||||||
// disable RMB context menu
|
// disable RMB context menu
|
||||||
document.addEventListener("contextmenu", e => canWeJustNot(e))
|
document.addEventListener("contextmenu", e => canWeJustNot(e))
|
||||||
document.addEventListener("mousedown", e => key(e))
|
document.addEventListener("mousedown", e => key(e))
|
||||||
|
document.addEventListener("mouseup", e => key(e))
|
||||||
document.addEventListener("keydown", e => key(e))
|
document.addEventListener("keydown", e => key(e))
|
||||||
|
document.addEventListener("keyup", e => key(e))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue