-
Notifications
You must be signed in to change notification settings - Fork 1
/
ploverpad.html
145 lines (136 loc) · 12.2 KB
/
ploverpad.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0056)http://stenoknight.com/plover/ploverdemo/ploverdemo.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Plover Pad</title>
<!-- import jquery stuff -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<!-- import style sheets -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="ploverdemo.css">
<style type="text/css">img[src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"]
{display:none !important;}</style></head>
<body>
<!-- area to show output -->
<div id="outputContainer" class="ui-draggable ui-resizable"><h1>Output</h1>
<textarea id="output" rows="10" cols="66"></textarea>
<div class="ui-resizable-handle ui-resizable-s"></div></div>
<!-- area to show the vertical notes-->
<div id="verticalNotesContainer" class="ui-draggable ui-resizable"><h1>Vertical Notes</h1>
<textarea id="verticalNotes" wrap="off" rows="10" cols="36"></textarea>
<div class="ui-resizable-handle ui-resizable-s"></div></div>
<!-- STANDARD KEYBOARD (This keyboard is based on the IBM PC Windows 104 keyboard) -->
<div id="stdKeyboard" class="ui-draggable ui-resizable">
<div class="stdRow">
<div class="stdKey code192" id="stdKeyGraveAccent" style="background-color: rgb(0, 0, 0);"><span class="upper">~</span><span class="lower">`</span></div>
<div class="stdKey code49" id="stdKey1" style="background-color: rgb(0, 0, 0);"><span class="upper">!</span><span class="lower">1</span></div>
<div class="stdKey code50" id="stdKey2" style="background-color: rgb(0, 0, 0);"><span class="upper">@</span><span class="lower">2</span></div>
<div class="stdKey code51" id="stdKey3" style="background-color: rgb(0, 0, 0);"><span class="upper">#</span><span class="lower">3</span></div>
<div class="stdKey code52" id="stdKey4" style="background-color: rgb(0, 0, 0);"><span class="upper">$</span><span class="lower">4</span></div>
<div class="stdKey code53" id="stdKey5" style="background-color: rgb(0, 0, 0);"><span class="upper">%</span><span class="lower">5</span></div>
<div class="stdKey code54" id="stdKey6" style="background-color: rgb(0, 0, 0);"><span class="upper">^</span><span class="lower">6</span></div>
<div class="stdKey code55" id="stdKey7" style="background-color: rgb(0, 0, 0);"><span class="upper">&</span><span class="lower">7</span></div>
<div class="stdKey code56" id="stdKey8" style="background-color: rgb(0, 0, 0);"><span class="upper">*</span><span class="lower">8</span></div>
<div class="stdKey code57" id="stdKey9" style="background-color: rgb(0, 0, 0);"><span class="upper">(</span><span class="lower">9</span></div>
<div class="stdKey code48" id="stdKey0" style="background-color: rgb(0, 0, 0);"><span class="upper">)</span><span class="lower">0</span></div>
<div class="stdKey code109 code189" id="stdKeyDash" style="background-color: rgb(0, 0, 0);"><span class="upper">_</span><span class="lower">-</span></div>
<div class="stdKey code107 code187" id="stdKeyEqualSign" style="background-color: rgb(0, 0, 0);"><span class="upper">+</span><span class="lower">=</span></div>
<div class="stdKey code8" id="stdKeyBackspace" style="background-color: rgb(0, 0, 0);">Backspace</div>
</div>
<div class="stdRow">
<div class="stdKey code9" id="stdKeyTab" style="background-color: rgb(0, 0, 0);">Tab</div>
<div class="stdKey code81" id="stdKeyQ" style="background-color: rgb(0, 0, 0);">Q</div>
<div class="stdKey code87" id="stdKeyW" style="background-color: rgb(0, 0, 0);">W</div>
<div class="stdKey code69" id="stdKeyE" style="background-color: rgb(0, 0, 0);">E</div>
<div class="stdKey code82" id="stdKeyR" style="background-color: rgb(0, 0, 0);">R</div>
<div class="stdKey code84" id="stdKeyT" style="background-color: rgb(0, 0, 0);">T</div>
<div class="stdKey code89" id="stdKeyY" style="background-color: rgb(0, 0, 0);">Y</div>
<div class="stdKey code85" id="stdKeyU" style="background-color: rgb(0, 0, 0);">U</div>
<div class="stdKey code73" id="stdKeyI" style="background-color: rgb(0, 0, 0);">I</div>
<div class="stdKey code79" id="stdKeyO" style="background-color: rgb(0, 0, 0);">O</div>
<div class="stdKey code80" id="stdKeyP" style="background-color: rgb(0, 0, 0);">P</div>
<div class="stdKey code219" id="stdKeyOpenBracket" style="background-color: rgb(0, 0, 0);"><span class="upper">{</span><span class="lower">[</span></div>
<div class="stdKey code221" id="stdKeyCloseBracket" style="background-color: rgb(0, 0, 0);"><span class="upper">}</span><span class="lower">]</span></div>
<div class="stdKey code220" id="stdKeyBackslash" style="background-color: rgb(0, 0, 0);"><span class="upper">|</span><span class="lower">\</span></div>
</div>
<div class="stdRow">
<div class="stdKey code20" id="stdKeyCapsLock" style="background-color: rgb(0, 0, 0);">Caps Lock</div>
<div class="stdKey code65" id="stdKeyA" style="background-color: rgb(0, 0, 0);">A</div>
<div class="stdKey code83" id="stdKeyS" style="background-color: rgb(0, 0, 0);">S</div>
<div class="stdKey code68" id="stdKeyD" style="background-color: rgb(0, 0, 0);">D</div>
<div class="stdKey code70" id="stdKeyF" style="background-color: rgb(0, 0, 0);">F</div>
<div class="stdKey code71" id="stdKeyG" style="background-color: rgb(0, 0, 0);">G</div>
<div class="stdKey code72" id="stdKeyH" style="background-color: rgb(0, 0, 0);">H</div>
<div class="stdKey code74" id="stdKeyJ" style="background-color: rgb(0, 0, 0);">J</div>
<div class="stdKey code75" id="stdKeyK" style="background-color: rgb(0, 0, 0);">K</div>
<div class="stdKey code76" id="stdKeyL" style="background-color: rgb(0, 0, 0);">L</div>
<div class="stdKey code59 code186" id="stdKeySemicolon" style="background-color: rgb(0, 0, 0);"><span class="upper">:</span><span class="lower">;</span></div>
<div class="stdKey code222" id="stdKeySingleQuote" style="background-color: rgb(0, 0, 0);"><span class="upper">"</span><span class="lower">'</span></div>
<div class="stdKey code13" id="stdKeyEnter" style="background-color: rgb(0, 0, 0);">Enter</div>
</div>
<div class="stdRow">
<div class="stdKey code16" id="stdKeyLeftShift" style="background-color: rgb(0, 0, 0);">Shift</div>
<div class="stdKey code90" id="stdKeyZ" style="background-color: rgb(0, 0, 0);">Z</div>
<div class="stdKey code88" id="stdKeyX" style="background-color: rgb(0, 0, 0);">X</div>
<div class="stdKey code67" id="stdKeyC" style="background-color: rgb(0, 0, 0);">C</div>
<div class="stdKey code86" id="stdKeyV" style="background-color: rgb(0, 0, 0);">V</div>
<div class="stdKey code66" id="stdKeyB" style="background-color: rgb(0, 0, 0);">B</div>
<div class="stdKey code78" id="stdKeyN" style="background-color: rgb(0, 0, 0);">N</div>
<div class="stdKey code77" id="stdKeyM" style="background-color: rgb(0, 0, 0);">M</div>
<div class="stdKey code188" id="stdKeyComma" style="background-color: rgb(0, 0, 0);"><span class="upper"><</span><span class="lower">,</span></div>
<div class="stdKey code190" id="stdKeyPeriod" style="background-color: rgb(0, 0, 0);"><span class="upper">></span><span class="lower">.</span></div>
<div class="stdKey code191" id="stdKeySlash" style="background-color: rgb(0, 0, 0);"><span class="upper">?</span><span class="lower">/</span></div>
<div class="stdKey code16" id="stdKeyRightShift" style="background-color: rgb(0, 0, 0);">Shift</div>
</div>
<div class="stdRow">
<div class="stdKey code17" id="stdKeyLeftControl" style="background-color: rgb(0, 0, 0);">Ctrl</div>
<div class="stdKey code91" id="stdKeyLeftWindows" style="background-color: rgb(0, 0, 0);">Win</div>
<div class="stdKey code18" id="stdKeyLeftAlt" style="background-color: rgb(0, 0, 0);">Alt</div>
<div class="stdKey code32" id="stdKeySpace" style="background-color: rgb(0, 0, 0);">Space</div>
<div class="stdKey code18" id="stdKeyRightAlt" style="background-color: rgb(0, 0, 0);">Alt</div>
<div class="stdKey code92" id="stdKeyRightWindow" style="background-color: rgb(0, 0, 0);">Win</div>
<div class="stdKey code93" id="stdKeyMenu" style="background-color: rgb(0, 0, 0);">Menu</div>
<div class="stdKey code17" id="stdKeyRightControl" style="background-color: rgb(0, 0, 0);">Ctrl</div>
</div>
<div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div></div>
<!-- STENO KEYBOARD -->
<div id="stenoKeyboard" class="ui-draggable ui-resizable">
<div class="stenoNumberBar">
<div class="stenoKey numberBar code48 code49 code50 code51 code52 code53 code54 code55 code56 code57" id="stenoKeyNumberBar" style="background-color: rgb(0, 0, 0);"></div>
</div>
<div class="stenoUpperBank">
<div class="stenoKey square code81 code65" id="stenoKeyS-1" style="background-color: rgb(0, 0, 0);">S</div>
<div class="stenoKey square code87" id="stenoKeyT-" style="background-color: rgb(0, 0, 0);">T</div>
<div class="stenoKey square code69" id="stenoKeyP-" style="background-color: rgb(0, 0, 0);">P</div>
<div class="stenoKey square code82" id="stenoKeyH-" style="background-color: rgb(0, 0, 0);">H</div>
<div class="stenoKey square code71 code72 code84 code89" id="stenoKeyAsterisk1" style="background-color: rgb(0, 0, 0);">*</div>
<div class="stenoKey square code85" id="stenoKey-F" style="background-color: rgb(0, 0, 0);">F</div>
<div class="stenoKey square code73" id="stenoKey-P" style="background-color: rgb(0, 0, 0);">P</div>
<div class="stenoKey square code79" id="stenoKey-L" style="background-color: rgb(0, 0, 0);">L</div>
<div class="stenoKey square code80" id="stenoKey-T" style="background-color: rgb(0, 0, 0);">T</div>
<div class="stenoKey square code219" id="stenoKey-D" style="background-color: rgb(0, 0, 0);">D</div>
</div>
<div class="stenoLowerBank">
<div class="stenoKey rounded code81 code65" id="stenoKeyS-2" style="background-color: rgb(0, 0, 0);">S</div>
<div class="stenoKey rounded code83" id="stenoKeyK-" style="background-color: rgb(0, 0, 0);">K</div>
<div class="stenoKey rounded code68" id="stenoKeyW-" style="background-color: rgb(0, 0, 0);">W</div>
<div class="stenoKey rounded code70" id="stenoKeyR-" style="background-color: rgb(0, 0, 0);">R</div>
<div class="stenoKey rounded code71 code72 code84 code89" id="stenoKeyAsterisk2" style="background-color: rgb(0, 0, 0);">*</div>
<div class="stenoKey rounded code74" id="stenoKey-R" style="background-color: rgb(0, 0, 0);">R</div>
<div class="stenoKey rounded code75" id="stenoKey-B" style="background-color: rgb(0, 0, 0);">B</div>
<div class="stenoKey rounded code76" id="stenoKey-G" style="background-color: rgb(0, 0, 0);">G</div>
<div class="stenoKey rounded code59 code186" id="stenoKey-S" style="background-color: rgb(0, 0, 0);">S</div>
<div class="stenoKey rounded code222" id="stenoKey-Z" style="background-color: rgb(0, 0, 0);">Z</div>
</div>
<div class="stenoVowelKeys">
<div class="stenoKey rounded code67" id="stenoKeyA-" style="background-color: rgb(0, 0, 0);">A</div>
<div class="stenoKey rounded code86" id="stenoKeyO-" style="background-color: rgb(0, 0, 0);">O</div>
<div class="stenoKey rounded code78" id="stenoKey-E" style="background-color: rgb(0, 0, 0);">E</div>
<div class="stenoKey rounded code77" id="stenoKey-U" style="background-color: rgb(0, 0, 0);">U</div>
</div>
<div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div></div>
<!-- make elements draggable and resizable -->
<script type="text/javascript" src="uiElements.js"></script>
<!-- do the steno thing! -->
<script type="text/javascript" src="ploverdemo.js"></script>
</body></html>