Mercurial > hg > rlgwebd
changeset 76:a497ecd116d9
Improvements to the keyboard.
Add a number pad to the keyboard. Make it hidden by default for
RLG-Web.
| author | John "Elwin" Edwards <elwin@sdf.org> |
|---|---|
| date | Sat, 23 Jun 2012 17:11:51 -0700 |
| parents | 2984604ce3e6 |
| children | f8bb37f48d58 |
| files | index-rlg.html index-sh.html rlgterm.js shterm.js style-rlg.css tty.css |
| diffstat | 6 files changed, 59 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/index-rlg.html Thu Jun 21 23:44:51 2012 -0700 +++ b/index-rlg.html Sat Jun 23 17:11:51 2012 -0700 @@ -16,6 +16,7 @@ </div> <div id="termwrap">TERM</div> <div class="modal" id="keyboard"> +<div id="keys"> <div class="keyrow"> <div class="key" onclick="vkey('`')">`</div> <div class="key" onclick="vkey('1')">1</div> @@ -31,6 +32,9 @@ <div class="key" onclick="vkey('-')">-</div> <div class="key" onclick="vkey('=')">=</div> <div class="key" onclick="vkey('\b')" style="width: 2.5em">Bksp</div> + <div class="rkey" onclick="vkey('KP9')">↗</div> + <div class="rkey" onclick="vkey('KP8')">↑</div> + <div class="rkey" onclick="vkey('KP7')">↖</div> </div> <div class="keyrow"> <div class="key" onclick="vkey('\t')" style="width: 2.5em">Tab</div> @@ -47,6 +51,9 @@ <div class="key" onclick="vkey('[')">[</div> <div class="key" onclick="vkey(']')">]</div> <div class="key" onclick="vkey('\\')">\</div> + <div class="rkey" onclick="vkey('KP6')">→</div> + <div class="rkey" onclick="vkey('KP5')">·</div> + <div class="rkey" onclick="vkey('KP4')">←</div> </div> <div class="keyrow"> <div class="key" onclick="togglectrl()" id="ctrlkey">Ctrl</div> @@ -62,6 +69,9 @@ <div class="key" onclick="vkey(';')">;</div> <div class="key" onclick="vkey('\'')">'</div> <div class="key" onclick="vkey('\n')" style="width: 4em">Ret</div> + <div class="rkey" onclick="vkey('KP3')">↘</div> + <div class="rkey" onclick="vkey('KP2')">↓</div> + <div class="rkey" onclick="vkey('KP1')">↙</div> </div> <div class="keyrow"> <div class="key" onclick="toggleshift()" id="shiftkey">Shift</div> @@ -79,6 +89,8 @@ <div class="keyrow"> <div class="key" onclick="vkey(' ')" id="spacebar"></div> </div> +</div> +<div class="centerb"><span class="ibutton" onclick="toggleBlock('keys')">Keyboard</span></div> <div class="rfloat"><span class="ibutton" onclick="stop()">Stop</span></div> <div class="rfloat">Font: <span onclick="textsize(false)" class="ibutton">Smaller</span> @@ -105,7 +117,7 @@ </div> <div class="modal" id="register"> <div class="formtable"> -<div><div>Name:</div><div><input type="text" name="name" id="regin_name"></div></div> +<div><div>Name:</div><div><input type="text" name="name" id="regin_name" maxlength="10"></div></div> <div><div>Password:</div><div><input type="password" name="pw" id="regin_pw"></div></div> <div><div>E-mail (optional):</div><div><input type="text" name="email" id="regin_email"></div></div> <div> @@ -115,7 +127,7 @@ </div> </div> <div class="modal" id="misc"> -<div class="centerb"><span class="ibutton" onclick="toggledebug()">Messages</span></div> +<div class="centerb"><span class="ibutton" onclick="toggleBlock('debug')">Messages</span></div> </div> <div id="debug"> </div>
--- a/index-sh.html Thu Jun 21 23:44:51 2012 -0700 +++ b/index-sh.html Sat Jun 23 17:11:51 2012 -0700 @@ -31,6 +31,9 @@ <div class="key" onclick="vkey('-')">-</div> <div class="key" onclick="vkey('=')">=</div> <div class="key" onclick="vkey('\b')" style="width: 2.5em">Bksp</div> + <div class="rkey" onclick="vkey('KP9')">↗</div> + <div class="rkey" onclick="vkey('KP8')">↑</div> + <div class="rkey" onclick="vkey('KP7')">↖</div> </div> <div class="keyrow"> <div class="key" onclick="vkey('\t')" style="width: 2.5em">Tab</div> @@ -47,6 +50,9 @@ <div class="key" onclick="vkey('[')">[</div> <div class="key" onclick="vkey(']')">]</div> <div class="key" onclick="vkey('\\')">\</div> + <div class="rkey" onclick="vkey('KP6')">→</div> + <div class="rkey" onclick="vkey('KP5')">·</div> + <div class="rkey" onclick="vkey('KP4')">←</div> </div> <div class="keyrow"> <div class="key" onclick="togglectrl()" id="ctrlkey">Ctrl</div> @@ -62,6 +68,9 @@ <div class="key" onclick="vkey(';')">;</div> <div class="key" onclick="vkey('\'')">'</div> <div class="key" onclick="vkey('\n')" style="width: 4em">Ret</div> + <div class="rkey" onclick="vkey('KP3')">↘</div> + <div class="rkey" onclick="vkey('KP2')">↓</div> + <div class="rkey" onclick="vkey('KP1')">↙</div> </div> <div class="keyrow"> <div class="key" onclick="toggleshift()" id="shiftkey">Shift</div>
--- a/rlgterm.js Thu Jun 21 23:44:51 2012 -0700 +++ b/rlgterm.js Sat Jun 23 17:11:51 2012 -0700 @@ -327,6 +327,10 @@ ';': "3a", '\'': "22", ',': "3c", '.': "3e", '/': "3f", '`': "7e" } +var kpkeys = { "KP1": "1b4f46", "KP2": "1b4f42", "KP3": "1b5b367e", + "KP4": "1b4f44", "KP5": "1b5b45", "KP6": "1b4f43", + "KP7": "1b4f48", "KP8": "1b4f41", "KP9": "1b5b357e" }; + function vkey(c) { if (!session.playing) return; @@ -363,6 +367,9 @@ else keystr = c.charCodeAt(0).toString(16); } + else if (c in kpkeys) { + keystr = kpkeys[c]; + } else return; var datareq = new XMLHttpRequest(); @@ -760,11 +767,14 @@ } } -function toggledebug() { - if (document.getElementById("debug").style.display != "block") - document.getElementById("debug").style.display = "block"; +function toggleBlock(id) { + var element = document.getElementById(id); + if (!element) + return; + if (element.style.display != "block") + element.style.display = "block"; else - document.getElementById("debug").style.display = "none"; + element.style.display = "none"; } function debug(level, msg) {
--- a/shterm.js Thu Jun 21 23:44:51 2012 -0700 +++ b/shterm.js Sat Jun 23 17:11:51 2012 -0700 @@ -260,6 +260,10 @@ ';': "3a", '\'': "22", ',': "3c", '.': "3e", '/': "3f", '`': "7e" } +var kpkeys = { "KP1": "1b4f46", "KP2": "1b4f42", "KP3": "1b5b367e", + "KP4": "1b4f44", "KP5": "1b5b45", "KP6": "1b4f43", + "KP7": "1b4f48", "KP8": "1b4f41", "KP9": "1b5b357e" }; + function vkey(c) { var keystr; if (c.match(/^[a-z]$/)) { @@ -294,6 +298,9 @@ else keystr = c.charCodeAt(0).toString(16); } + else if (c in kpkeys) { + keystr = kpkeys[c]; + } else return; //writeData("Sending " + keystr);
--- a/style-rlg.css Thu Jun 21 23:44:51 2012 -0700 +++ b/style-rlg.css Sat Jun 23 17:11:51 2012 -0700 @@ -21,6 +21,7 @@ } div.centerb { + clear: both; margin: 0.2em; padding: 0.4em; text-align: center; @@ -74,6 +75,10 @@ text-align: center; } +div#keys { + display: none; +} + div#debug { display: none; }
--- a/tty.css Thu Jun 21 23:44:51 2012 -0700 +++ b/tty.css Sat Jun 23 17:11:51 2012 -0700 @@ -23,6 +23,16 @@ background-color: white; color: black; } +div.rkey { + width: 2em; + height: 2em; + float: right; + border: 2px solid black; + margin: 0.2em; + text-align: center; + background-color: white; + color: black; +} div.keysel { width: 2em; height: 2em;