1
0
tmk_keyboard/editor/alps64/index.html
2016-01-06 12:28:20 +09:00

529 lines
25 KiB
HTML

<html>
<head>
<title>TMK Keymap Editor</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="../common/lz-string-1.0.2.js"></script>
<script src="../common/base64.js"></script>
<script src="keymap_editor.js"></script>
<script src="firmware.js"></script>
<link href='keyboard.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1 id="page-title">TMK Keymap Editor</h1>
<h3>Instruction</h3>
How to edit keymap
<ol>
<li>Select layer</li>
<li>Select key to edit</li>
<li>Select keycode to assign to the key</li>
<li>Download firmware</li>
</ol>
See <a href="https://github.com/tmk/tmk_keyboard/blob/master/tmk_core/doc/keymap.md" target="_blank">this</a> for detailed description of keymap.
<h2>Keyboard</h2>
<div id="keyboard-pane" class="keyboard-pane">
<form>
<div id="layer_radio">
<input type="radio" name="radio" class="layer" id="layer-0"checked="checked" /><label for="layer-0">Layer 0</label>
<input type="radio" name="radio" class="layer" id="layer-1"/><label for="layer-1">Layer 1</label>
<input type="radio" name="radio" class="layer" id="layer-2"/><label for="layer-2">Layer 2</label>
<input type="radio" name="radio" class="layer" id="layer-3"/><label for="layer-3">Layer 3</label>
<input type="radio" name="radio" class="layer" id="layer-4"/><label for="layer-4">Layer 4</label>
<input type="radio" name="radio" class="layer" id="layer-5"/><label for="layer-5">Layer 5</label>
<input type="radio" name="radio" class="layer" id="layer-6"/><label for="layer-6">Layer 6</label>
<input type="radio" name="radio" class="layer" id="layer-7"/><label for="layer-7">Layer 7</label>
</div>
</form>
<!--
Keyboard keys
-->
<div id="keyboard-outline" class="keyboard-outline">
<div class='keyboard-row'>
<div id="key-36" class="key" tabindex="1">Esc</div>
<div id="key-37" class="key" tabindex="1">1</div>
<div id="key-46" class="key" tabindex="1">2</div>
<div id="key-47" class="key" tabindex="1">3</div>
<div id="key-56" class="key" tabindex="1">4</div>
<div id="key-57" class="key" tabindex="1">5</div>
<div id="key-66" class="key" tabindex="1">6</div>
<div id="key-67" class="key" tabindex="1">7</div>
<div id="key-76" class="key" tabindex="1">8</div>
<div id="key-77" class="key" tabindex="1">9</div>
<div id="key-06" class="key" tabindex="1">0</div>
<div id="key-07" class="key" tabindex="1">-</div>
<div id="key-17" class="key" tabindex="1">=</div>
<div id="key-26" class="key" tabindex="1">Iso1</div>
<div id="key-27" class="key" tabindex="1">BSpc</div>
</div>
<div class='keyboard-row'>
<div id="key-34" class="key btn150" tabindex="2">Tab</div>
<div id="key-35" class="key" tabindex="2">Q</div>
<div id="key-44" class="key" tabindex="2">W</div>
<div id="key-45" class="key" tabindex="2">E</div>
<div id="key-54" class="key" tabindex="2">R</div>
<div id="key-55" class="key" tabindex="2">T</div>
<div id="key-64" class="key" tabindex="2">Y</div>
<div id="key-65" class="key" tabindex="2">U</div>
<div id="key-75" class="key" tabindex="2">I</div>
<div id="key-05" class="key" tabindex="2">O</div>
<div id="key-15" class="key" tabindex="2">P</div>
<div id="key-16" class="key" tabindex="2">[</div>
<div id="key-25" class="key" tabindex="2">]</div>
<div id="key-24" class="key btn150" tabindex="2">\</div>
</div>
<div class='keyboard-row'>
<div id="key-32" class="key btn175" tabindex="3">Ctrl</div>
<div id="key-33" class="key" tabindex="3">A</div>
<div id="key-43" class="key" tabindex="3">S</div>
<div id="key-52" class="key" tabindex="3">D</div>
<div id="key-53" class="key" tabindex="3">F</div>
<div id="key-63" class="key" tabindex="3">G</div>
<div id="key-73" class="key" tabindex="3">H</div>
<div id="key-74" class="key" tabindex="3">J</div>
<div id="key-03" class="key" tabindex="3">K</div>
<div id="key-04" class="key" tabindex="3">L</div>
<div id="key-13" class="key" tabindex="3">;</div>
<div id="key-14" class="key" tabindex="3">'</div>
<div id="key-23" class="key btn225" tabindex="3">Enter</div>
</div>
<div class='keyboard-row'>
<div id="key-31" class="key btn125" tabindex="4">Shift</div>
<div id="key-41" class="key" tabindex="4">Z</div>
<div id="key-42" class="key" tabindex="4">Iso2</div>
<div id="key-51" class="key" tabindex="4">X</div>
<div id="key-61" class="key" tabindex="4">C</div>
<div id="key-62" class="key" tabindex="4">V</div>
<div id="key-71" class="key" tabindex="4">B</div>
<div id="key-72" class="key" tabindex="4">N</div>
<div id="key-01" class="key" tabindex="4">M</div>
<div id="key-02" class="key" tabindex="4">,</div>
<div id="key-11" class="key" tabindex="4">.</div>
<div id="key-12" class="key" tabindex="4">/</div>
<div id="key-21" class="key btn175" tabindex="4">Shift</div>
<div id="key-22" class="key" tabindex="4">Fn</div>
</div>
<div class='keyboard-row'>
<div id="key-30" class="key btn125" tabindex="5">LCtl</div>
<div id="key-40" class="key btn125" tabindex="5">LGui</div>
<div id="key-50" class="key btn125" tabindex="5">LAlt</div>
<div id="key-60" class="key btn625" tabindex="5">Space</div>
<div id="key-70" class="key btn125" tabindex="5">App</div>
<div id="key-00" class="key btn125" tabindex="5">RAlt</div>
<div id="key-10" class="key btn125" tabindex="5">RGui</div>
<div id="key-20" class="key btn125" tabindex="5">RCtl</div>
</div>
<div class="Thank"></div>
</div>
</div>
<h2>Keycodes</h2>
<div id="keycode_tabs" class="keycode_tabs">
<ul>
<li><a href="#tabs-main">Main</a></li>
<li><a href="#tabs-other">Function and keypad</a></li>
<li><a href="#tabs-special">System, Media and Mouse key</a></li>
<li><a href="#tabs-layer">Layer Switching and etc.</a></li>
</ul>
<!-- Main -->
<div id="tabs-main">
<button class="action" id="code-0">NO</button>
<button class="action" id="code-1">TRNS</button>
<br>
<br>
<button class="action" id="code-4" title="A">A</button>
<button class="action" id="code-5" title="B">B</button>
<button class="action" id="code-6" title="C">C</button>
<button class="action" id="code-7" title="D">D</button>
<button class="action" id="code-8" title="E">E</button>
<button class="action" id="code-9" title="F">F</button>
<button class="action" id="code-10" title="G">G</button>
<button class="action" id="code-11" title="H">H</button>
<button class="action" id="code-12" title="I">I</button>
<button class="action" id="code-13" title="J">J</button>
<button class="action" id="code-14" title="K">K</button>
<button class="action" id="code-15" title="L">L</button>
<button class="action" id="code-16" title="M">M</button>
<br>
<button class="action" id="code-17" title="N">N</button>
<button class="action" id="code-18" title="O">O</button>
<button class="action" id="code-19" title="P">P</button>
<button class="action" id="code-20" title="Q">Q</button>
<button class="action" id="code-21" title="R">R</button>
<button class="action" id="code-22" title="S">S</button>
<button class="action" id="code-23" title="T">T</button>
<button class="action" id="code-24" title="U">U</button>
<button class="action" id="code-25" title="V">V</button>
<button class="action" id="code-26" title="W">W</button>
<button class="action" id="code-27" title="X">X</button>
<button class="action" id="code-28" title="Y">Y</button>
<button class="action" id="code-29" title="Z">Z</button>
<br>
<br>
<button class="action" id="code-30" title="1">1</button>
<button class="action" id="code-31" title="2">2</button>
<button class="action" id="code-32" title="3">3</button>
<button class="action" id="code-33" title="4">4</button>
<button class="action" id="code-34" title="5">5</button>
<button class="action" id="code-35" title="6">6</button>
<button class="action" id="code-36" title="7">7</button>
<button class="action" id="code-37" title="8">8</button>
<button class="action" id="code-38" title="9">9</button>
<button class="action" id="code-39" title="0">0</button>
<br>
<br>
<button class="action" id="code-45" title="MINUS">MINUS</button>
<button class="action" id="code-46" title="EQUAL">EQUAL</button>
<button class="action" id="code-47" title="LBRACKET">LBRACKET</button>
<button class="action" id="code-48" title="RBRACKET">RBRACKET</button>
<button class="action" id="code-49" title="BSLASH">BSLASH</button>
<button class="action" id="code-51" title="SCOLON">SCOLON</button>
<button class="action" id="code-52" title="QUOTE">QUOTE</button>
<button class="action" id="code-53" title="GRAVE">GRAVE</button>
<button class="action" id="code-54" title="COMMA">COMMA</button>
<button class="action" id="code-55" title="DOT">DOT</button>
<button class="action" id="code-56" title="SLASH">SLASH</button>
<br>
<br>
<button class="action" id="code-40" title="ENTER">ENTER</button>
<button class="action" id="code-41" title="ESCAPE">ESCAPE</button>
<button class="action" id="code-42" title="BackSpace">BSPACE</button>
<button class="action" id="code-43" title="TAB">TAB</button>
<button class="action" id="code-44" title="SPACE">SPACE</button>
<button class="action" id="code-57" title="CAPSLOCK">CAPSLOCK</button>
<button class="action" id="code-101" title="APPLICATION">APPLICATION</button>
<button class="action" id="code-50" title="NONUS_HASH">NONUS_HASH</button>
<button class="action" id="code-100" title="NONUS_BSLASH">NONUS_BSLASH</button>
<br>
<br>
<button class="action" id="code-224" title="LCTRL">LCTRL</button>
<button class="action" id="code-225" title="LSHIFT">LSHIFT</button>
<button class="action" id="code-226" title="LALT">LALT</button>
<button class="action" id="code-227" title="LGUI">LGUI</button>
<button class="action" id="code-228" title="RCTRL">RCTRL</button>
<button class="action" id="code-229" title="RSHIFT">RSHIFT</button>
<button class="action" id="code-230" title="RALT">RALT</button>
<button class="action" id="code-231" title="RGUI">RGUI</button>
<br/>
</div>
<!-- Function and Navigation -->
<div id="tabs-other">
<button class="action" id="code-0">NO</button>
<button class="action" id="code-1">TRNS</button>
<br>
<br>
<button class="action" id="code-58" title="F1">F1</button>
<button class="action" id="code-59" title="F2">F2</button>
<button class="action" id="code-60" title="F3">F3</button>
<button class="action" id="code-61" title="F4">F4</button>
<button class="action" id="code-62" title="F5">F5</button>
<button class="action" id="code-63" title="F6">F6</button>
<button class="action" id="code-64" title="F7">F7</button>
<button class="action" id="code-65" title="F8">F8</button>
<button class="action" id="code-66" title="F9">F9</button>
<button class="action" id="code-67" title="F10">F10</button>
<button class="action" id="code-68" title="F11">F11</button>
<button class="action" id="code-69" title="F12">F12</button>
<br>
<button class="action" id="code-104" title="F13">F13</button>
<button class="action" id="code-105" title="F14">F14</button>
<button class="action" id="code-106" title="F15">F15</button>
<button class="action" id="code-107" title="F16">F16</button>
<button class="action" id="code-108" title="F17">F17</button>
<button class="action" id="code-109" title="F18">F18</button>
<button class="action" id="code-110" title="F19">F19</button>
<button class="action" id="code-111" title="F20">F20</button>
<button class="action" id="code-112" title="F21">F21</button>
<button class="action" id="code-113" title="F22">F22</button>
<button class="action" id="code-114" title="F23">F23</button>
<button class="action" id="code-115" title="F24">F24</button>
<br>
<br>
<button class="action" id="code-70" title="PSCREEN">PSCREEN</button>
<button class="action" id="code-71" title="SCROLLLOCK">SCROLLLOCK</button>
<button class="action" id="code-72" title="PAUSE">PAUSE</button>
<br>
<br>
<button class="action" id="code-73" title="INSERT">INSERT</button>
<button class="action" id="code-74" title="HOME">HOME</button>
<button class="action" id="code-75" title="PGUP">PGUP</button>
<button class="action" id="code-76" title="DELETE">DELETE</button>
<button class="action" id="code-77" title="END">END</button>
<button class="action" id="code-78" title="PGDOWN">PGDOWN</button>
<button class="action" id="code-80" title="LEFT">LEFT</button>
<button class="action" id="code-81" title="DOWN">DOWN</button>
<button class="action" id="code-82" title="UP">UP</button>
<button class="action" id="code-79" title="RIGHT">RIGHT</button>
<br>
<br>
Keypad:<br>
<button class="action" id="code-83" title="NUMLOCK">NUMLOCK</button>
<button class="action" id="code-84" title="KP_SLASH">KP_SLASH</button>
<button class="action" id="code-85" title="KP_ASTERISK">KP_ASTERISK</button>
<button class="action" id="code-86" title="KP_MINUS">KP_MINUS</button>
<button class="action" id="code-87" title="KP_PLUS">KP_PLUS</button>
<button class="action" id="code-88" title="KP_ENTER">KP_ENTER</button>
<button class="action" id="code-99" title="KP_DOT">KP_DOT</button>
<button class="action" id="code-103" title="KP_EQUAL">KP_EQUAL</button>
<button class="action" id="code-133" title="KP_COMMA">KP_COMMA</button>
<!--
<button class="action" id="code-134" title="KP_EQUAL_AS400">KP_EQUAL_AS400</button>
-->
<br>
<button class="action" id="code-89" title="KP_1">KP_1</button>
<button class="action" id="code-90" title="KP_2">KP_2</button>
<button class="action" id="code-91" title="KP_3">KP_3</button>
<button class="action" id="code-92" title="KP_4">KP_4</button>
<button class="action" id="code-93" title="KP_5">KP_5</button>
<button class="action" id="code-94" title="KP_6">KP_6</button>
<button class="action" id="code-95" title="KP_7">KP_7</button>
<button class="action" id="code-96" title="KP_8">KP_8</button>
<button class="action" id="code-97" title="KP_9">KP_9</button>
<button class="action" id="code-98" title="KP_0">KP_0</button>
<br>
<br>
Japanese:<br>
<button class="action" id="code-135" title="INT1">INT1</button>
<button class="action" id="code-136" title="INT2">INT2</button>
<button class="action" id="code-137" title="INT3">INT3</button>
<button class="action" id="code-138" title="INT4">INT4</button>
<button class="action" id="code-139" title="INT5">INT5</button>
<br>
<br>
Korean:<br>
<button class="action" id="code-144" title="LANG1">LANG1</button>
<button class="action" id="code-145" title="LANG2">LANG2</button>
<br>
<br>
Mechanical Locking key support:<br>
<button class="action" id="code-130" title="LOCKING_CAPS">LOCKING_CAPS</button>
<button class="action" id="code-131" title="LOCKING_NUM">LOCKING_NUM</button>
<button class="action" id="code-132" title="LOCKING_SCROLL">LOCKING_SCROLL</button>
<!--
<button class="action" id="code-140" title="INT6">INT6</button>
<button class="action" id="code-141" title="INT7">INT7</button>
<button class="action" id="code-142" title="INT8">INT8</button>
<button class="action" id="code-143" title="INT9">INT9</button>
<button class="action" id="code-146" title="LANG3">LANG3</button>
<button class="action" id="code-147" title="LANG4">LANG4</button>
<button class="action" id="code-148" title="LANG5">LANG5</button>
<button class="action" id="code-149" title="LANG6">LANG6</button>
<button class="action" id="code-150" title="LANG7">LANG7</button>
<button class="action" id="code-151" title="LANG8">LANG8</button>
<button class="action" id="code-152" title="LANG9">LANG9</button>
-->
<!--
<button class="action" id="code-116" title="EXECUTE">EXECUTE</button>
<button class="action" id="code-117" title="HELP">HELP</button>
<button class="action" id="code-118" title="MENU">MENU</button>
<button class="action" id="code-119" title="SELECT">SELECT</button>
<button class="action" id="code-120" title="STOP">STOP</button>
<button class="action" id="code-121" title="AGAIN">AGAIN</button>
<button class="action" id="code-122" title="UNDO">UNDO</button>
<button class="action" id="code-123" title="CUT">CUT</button>
<button class="action" id="code-124" title="COPY">COPY</button>
<button class="action" id="code-125" title="PASTE">PASTE</button>
<button class="action" id="code-126" title="FIND">FIND</button>
<button class="action" id="code-127" title="_MUTE">_MUTE</button>
<button class="action" id="code-128" title="_VOLUP">_VOLUP</button>
<button class="action" id="code-129" title="_VOLDOWN">_VOLDOWN</button>
-->
<!--
<button class="action" id="code-102" title="POWER">POWER</button>
<button class="action" id="code-153" title="ALT_ERASE">ALT_ERASE</button>
<button class="action" id="code-154" title="SYSREQ">SYSREQ</button>
<button class="action" id="code-155" title="CANCEL">CANCEL</button>
<button class="action" id="code-156" title="CLEAR">CLEAR</button>
<button class="action" id="code-157" title="PRIOR">PRIOR</button>
<button class="action" id="code-158" title="RETURN">RETURN</button>
<button class="action" id="code-159" title="SEPARATOR">SEPARATOR</button>
<button class="action" id="code-160" title="OUT">OUT</button>
<button class="action" id="code-161" title="OPER">OPER</button>
<button class="action" id="code-162" title="CLEAR_AGAIN">CLEAR_AGAIN</button>
<button class="action" id="code-163" title="CRSEL">CRSEL</button>
<button class="action" id="code-164" title="EXSEL">EXSEL</button>
-->
</div>
<!-- Special key: System, Media and Mouse key -->
<div id="tabs-special">
<button class="action" id="code-0">NO</button>
<button class="action" id="code-1">TRNS</button>
<br>
<br>
System:<br>
<button class="action" id="code-165"></button>
<button class="action" id="code-166"></button>
<button class="action" id="code-167"></button>
<br>
Volume:<br>
<button class="action" id="code-168"></button>
<button class="action" id="code-169"></button>
<button class="action" id="code-170"></button>
<br>
Media:<br>
<button class="action" id="code-171"></button>
<button class="action" id="code-172"></button>
<button class="action" id="code-173"></button>
<button class="action" id="code-174"></button>
<button class="action" id="code-175"></button>
<button class="action" id="code-176"></button>
<br>
Application:<br>
<button class="action" id="code-177"></button>
<button class="action" id="code-178"></button>
<button class="action" id="code-179"></button>
<br>
Web:<br>
<button class="action" id="code-180"></button>
<button class="action" id="code-181"></button>
<button class="action" id="code-182"></button>
<button class="action" id="code-183"></button>
<button class="action" id="code-184"></button>
<button class="action" id="code-185"></button>
<button class="action" id="code-186"></button>
<br>
<br>
<!--
<button class="action" id="code-187"></button>
<button class="action" id="code-188"></button>
<button class="action" id="code-189"></button>
<button class="action" id="code-190"></button>
<button class="action" id="code-191"></button>
-->
Mouse key:<br>
<button class="action" id="code-240"></button>
<button class="action" id="code-241"></button>
<button class="action" id="code-242"></button>
<button class="action" id="code-243"></button>
<br>
<br>
<button class="action" id="code-244"></button>
<button class="action" id="code-245"></button>
<button class="action" id="code-246"></button>
<button class="action" id="code-247"></button>
<button class="action" id="code-248"></button>
<br>
<br>
<button class="action" id="code-249"></button>
<button class="action" id="code-250"></button>
<button class="action" id="code-251"></button>
<button class="action" id="code-252"></button>
<br>
<br>
<button class="action" id="code-253"></button>
<button class="action" id="code-254"></button>
<button class="action" id="code-255"></button>
<br>
</div>
<!-- Layer -->
<div id="tabs-layer">
<button class="action" id="code-0">NO</button>
<button class="action" id="code-1">TRNS</button>
<br>
<br>
<!-- TODO: layer actions -->
<!-- FN0-31 -->
Layer Switch Momentary:<br>
<button class="action" id="code-192"></button>
<button class="action" id="code-193"></button>
<button class="action" id="code-194"></button>
<button class="action" id="code-195"></button>
<button class="action" id="code-196"></button>
<button class="action" id="code-197"></button>
<button class="action" id="code-198"></button>
<br>
Layer Switch Toggle:<br>
<button class="action" id="code-199"></button>
<button class="action" id="code-200"></button>
<button class="action" id="code-201"></button>
<br>
Layer Switch with Tap Toggle:<br>
<button class="action" id="code-202"></button>
<button class="action" id="code-203"></button>
<button class="action" id="code-204"></button>
<br>
Layer switch with Tap key:<br>
<button class="action" id="code-205"></button>
<button class="action" id="code-206"></button>
<button class="action" id="code-207"></button>
<button class="action" id="code-208"></button>
<button class="action" id="code-209"></button>
<button class="action" id="code-210"></button>
<button class="action" id="code-211"></button>
<br>
<br>
Modifier with special function:<br>
<button class="action" id="code-212"></button>
<button class="action" id="code-213"></button>
<button class="action" id="code-214"></button>
<button class="action" id="code-215"></button>
<br>
<button class="action" id="code-216"></button>
<button class="action" id="code-217"></button>
<button class="action" id="code-218"></button>
<br>
<button class="action" id="code-219"></button>
<button class="action" id="code-220"></button>
<button class="action" id="code-221"></button>
<br>
<button class="action" id="code-222"></button>
<button class="action" id="code-223"></button>
<br>
<p>
See <a href="https://github.com/tmk/tmk_keyboard/blob/master/tmk_core/doc/keymap.md#3-layer-switching-example" target="_blank">this</a> for detail of Layer Switching.<br>
See <a href="https://github.com/tmk/tmk_keyboard/blob/master/tmk_core/doc/keymap.md#41-tap-key" target="_blank">this</a> for Tap key(Dual-role Modifier).<br>
See <a href="https://github.com/tmk/tmk_keyboard/blob/master/tmk_core/doc/keymap.md#43-oneshot-modifier" target="_blank">this</a> for OneShot Modifier.</p>
<br>
</div>
</div>
<h3>Firmware Hex File Download:</h3>
<button id="keymap-download" title="save file">Download</button>
<a id="hex-download" style="display:none" ></a>
<h3>Share URL:</h3>
<textarea id="share-url" rows="10" cols="80"></textarea>
<br/>
<button id="keymap-share" title="Share">Share</button>
<button id="shorten-url" title="Shorten">Shorten</button>
<h3>Keymap Output(for debug):</h3>
<textarea id="keymap-output" rows="20" cols="80"></textarea>
<br/>
<button id="keymap-json-generate" title="generate JSON">JSON</button>
<button id="keymap-source-generate" title="generate C source code">C source</button>
<button id="keymap-hex-generate" title="generate Hex">Hex</button>
<button id="keymap-encode" title="generate URL">encode URL</button>
<button id="keymap-decode" title="decode URL">decode URL</button>
</body>
</html>