2013-08-30 02:28:41 +00:00
< html >
< head >
2013-09-05 02:11:34 +00:00
< title > TMK Keymap Editor< / title >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-07 07:30:28 +00:00
< script src = "keymap_editor.js" > < / script >
2013-09-05 02:11:34 +00:00
< script src = "firmware.js" > < / script >
2013-08-30 02:28:41 +00:00
< link href = 'keyboard.css' rel = 'stylesheet' type = 'text/css' >
< script >
// key id under editing
var editing_key;
// layer under editing
var editing_layer = 0;
2013-09-07 07:30:28 +00:00
// load keymap on keyboard key buttons
var load_keymap_on_keyobard = function(layer, keymap) {
for (var row in keymap) {
for (var col in keymap[row]) {
var code = keymap[row][col];
var key = code_display[code];
$("#key-0" + row + "0" + col).text(key.name);
$("#key-0" + row + "0" + col).attr({ title: key.desc });
}
}
};
2013-08-30 02:28:41 +00:00
$(function() {
2013-09-05 02:11:34 +00:00
// Title
2015-04-12 06:22:02 +00:00
document.title = "TMK Keymap Editor for " + KEYBOARD_DESC;
$("#page-title").text("TMK Keymap Editor for " + KEYBOARD_DESC);
2013-09-05 02:11:34 +00:00
2013-09-07 07:30:28 +00:00
/*
* load keymap from URL hash
*/
var decoded = decode_keymap(document.location.hash.substring(1));
if (decoded != null) {
keymaps = decoded['keymaps'];
}
2013-08-30 02:28:41 +00:00
/*
* Layer selector
*/
$("#layer_radio").buttonset();
// layer change
$(".layer").click(function(ev, ui) {
var layer = parseInt($(this).attr('id').match(/layer-(\d+)/)[1]);
editing_layer = layer;
2013-09-07 07:30:28 +00:00
load_keymap_on_keyobard(layer, keymaps[layer]);
2013-08-30 02:28:41 +00:00
});
2013-09-07 07:30:28 +00:00
2013-08-30 02:28:41 +00:00
/*
2013-09-07 07:30:28 +00:00
* Keyboard(key buttons)
2013-08-30 02:28:41 +00:00
*/
2013-09-07 07:30:28 +00:00
// load default keymap on startup
load_keymap_on_keyobard(0, keymaps[0]);
2013-08-30 02:28:41 +00:00
// Select key button to edit
$(".key").click(function(ev, ui) {
editing_key = $(this).attr('id');
// grey-out key to indicate being under editing
$(".key").removeClass("key-editing");
$(this).addClass("key-editing");
2013-09-10 06:31:15 +00:00
}).focus(function(ev, ui) {
// select editing_key with tab key focus
$(this).click();
2013-08-30 02:28:41 +00:00
});
2013-09-07 07:30:28 +00:00
2013-08-30 02:28:41 +00:00
/*
* Keycodes button tab
*/
$("#keycode_tabs").tabs({
heightStyle: "auto",
});
// Keycodes: read name and description from code table
$(".action").each(function(index) {
// get code from code button id: code-[0x]CCCC where CCCC is dec or hex number
var code = parseInt($(this).attr('id').match(/code-((0x){0,1}[0-9a-fA-F]+)/)[1]);
$(this).text(code_display[code].name);
$(this).attr({ title: code_display[code].desc });
//console.log(index + ": " + code + " " + code_display[code].desc);
});
$(".action").click(function(ev,ui) {
2013-09-10 06:31:15 +00:00
console.log("action click");
2013-08-30 02:28:41 +00:00
if (!editing_key) return;
// get matrix position from key id: key-RRCC where RR is row and CC is column in dec
var pos = editing_key.match(/key-(\d\d)(\d\d)/i);
if (!pos) return;
var row = parseInt(pos[1]), col = parseInt(pos[2]);
// set text and tooltip to key button under editing
$("#" + editing_key).text($(this).text());
$("#" + editing_key).attr({ title: $(this).attr('title'), });
// change keymap array
// get code from keycode button id: code-[0x]CC where CC is dec or hex number
var code = $(this).attr('id').match(/code-((0x){0,1}[0-9a-fA-F]+)/)[1];
keymaps[editing_layer][row][col] = parseInt(code);
2013-09-10 06:31:15 +00:00
// give focus on editing_key for next tab key operation
$("#" + editing_key).focus();
2013-08-30 02:28:41 +00:00
});
2013-09-07 07:30:28 +00:00
2013-08-30 02:28:41 +00:00
/*
2013-09-07 07:30:28 +00:00
* Share URL
2013-08-30 02:28:41 +00:00
*/
2013-09-07 07:30:28 +00:00
// Share URL
$("#keymap-share").click(function(ev, ui) {
var hash = encode_keymap({ keymaps: keymaps });
$("#share-url").text(document.location.origin + document.location.pathname + "#" + hash);
});
// Shorten URL
$("#shorten-url").click(function(ev, ui) {
var hash = encode_keymap({ keymaps: keymaps });
var editor_url = document.location.origin + document.location.pathname;
window.open("https://bitly.com/shorten/?url=" + encodeURIComponent(editor_url + "#" + hash));
//window.open("http://tinyurl.com/create.php?url=" + encodeURIComponent(editor_url + "#" + hash));
});
2013-09-05 02:11:34 +00:00
// Hex Save
$("#keymap-download").click(function(ev, ui) {
var keymap_data = fn_actions.concat(keymaps);
var content = firmware_hex() +
hex_output(KEYMAP_START_ADDRESS, keymap_data) +
hex_eof();
// download hex file
var blob = new Blob([content], {type: "application/octet-stream"});
2013-09-05 07:53:02 +00:00
var hex_link = $("#hex-download");
2013-09-05 02:11:34 +00:00
hex_link.attr('href', window.URL.createObjectURL(blob));
hex_link.attr('download', KEYBOARD_ID + "_firmware.hex");
// jQuery click() doesn't work straight for 'a' element
// http://stackoverflow.com/questions/1694595/
hex_link[0].click();
});
2013-08-30 02:28:41 +00:00
2013-09-07 07:30:28 +00:00
/*
* Output options
*/
//$("#keymap-output").resizable(); // resizable textarea
2013-09-05 02:11:34 +00:00
// Hex output
2013-08-30 02:28:41 +00:00
$("#keymap-hex-generate").click(function(ev, ui) {
2013-09-05 02:11:34 +00:00
var keymap_data = fn_actions.concat(keymaps);
2013-09-05 02:44:50 +00:00
$("#keymap-output").text(hex_output(KEYMAP_START_ADDRESS, keymap_data));
2013-08-30 02:28:41 +00:00
});
// C source output
$("#keymap-source-generate").click(function(ev, ui) {
2013-09-05 02:11:34 +00:00
$("#keymap-output").text(source_output(keymaps));
2013-08-30 02:28:41 +00:00
});
// JSON output
2013-09-05 02:11:34 +00:00
//$("#keymap-json-generate").css('display', 'none'); // hide
2013-08-30 02:28:41 +00:00
$("#keymap-json-generate").click(function(ev, ui) {
var keymap_output;
//keymap_output = JSON.stringify(keymaps, null, 4);
keymap_output = JSON.stringify({ keymaps: keymaps });
2013-09-05 02:11:34 +00:00
$("#keymap-output").text(keymap_output);
2013-08-30 02:28:41 +00:00
});
2013-09-07 07:30:28 +00:00
// encode keymap
$("#keymap-encode").click(function(ev, ui) {
var keymap_output = encode_keymap({ keymaps: keymaps });
$("#keymap-output").text(keymap_output);
});
// decode keymap
$("#keymap-decode").click(function(ev, ui) {
var hash = $("#keymap-output").text();
var keymap_output = decode_keymap(hash);
$("#keymap-output").text(JSON.stringify(keymap_output));
});
// lost keymap under edting when leave the page
/* TODO: Needed when released
$(window).bind('beforeunload', function(){
return 'CAUTION: You will lost your change.';
});
*/
2013-08-30 02:28:41 +00:00
});
< / script >
< / head >
< body >
2013-09-05 02:11:34 +00:00
< h1 id = "page-title" > TMK Keymap Editor< / h1 >
< h3 > Instruction< / h3 >
How to edit keymap
2013-09-07 07:30:28 +00:00
< 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 >
2013-09-05 02:11:34 +00:00
See < a href = "https://github.com/tmk/tmk_keyboard/blob/master/doc/keymap.md" target = "_blank" > this< / a > for detailed description of keymap.
2013-08-30 02:28:41 +00:00
< h2 > Keyboard< / h2 >
2013-09-07 07:30:28 +00:00
< 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' >
2013-09-10 06:31:15 +00:00
< div id = "key-0301" class = "key" tabindex = "1" > Esc< / div >
< div id = "key-0300" class = "key" tabindex = "1" > 1< / div >
< div id = "key-0000" class = "key" tabindex = "1" > 2< / div >
< div id = "key-0100" class = "key" tabindex = "1" > 3< / div >
< div id = "key-0101" class = "key" tabindex = "1" > 4< / div >
< div id = "key-0200" class = "key" tabindex = "1" > 5< / div >
< div id = "key-0201" class = "key" tabindex = "1" > 6< / div >
< div id = "key-0400" class = "key" tabindex = "1" > 7< / div >
< div id = "key-0401" class = "key" tabindex = "1" > 8< / div >
< div id = "key-0600" class = "key" tabindex = "1" > 9< / div >
< div id = "key-0601" class = "key" tabindex = "1" > 0< / div >
< div id = "key-0700" class = "key" tabindex = "1" > -< / div >
< div id = "key-0701" class = "key" tabindex = "1" > =< / div >
< div id = "key-0500" class = "key" tabindex = "1" > \< / div >
< div id = "key-0501" class = "key" tabindex = "1" > `< / div >
2013-09-07 07:30:28 +00:00
< / div >
2013-08-30 02:28:41 +00:00
2013-09-07 07:30:28 +00:00
< div class = 'keyboard-row' >
2013-09-10 06:31:15 +00:00
< div id = "key-0302" class = "key btn150" tabindex = "2" > Tab< / div >
< div id = "key-0001" class = "key" tabindex = "2" > Q< / div >
< div id = "key-0002" class = "key" tabindex = "2" > W< / div >
< div id = "key-0103" class = "key" tabindex = "2" > E< / div >
< div id = "key-0102" class = "key" tabindex = "2" > R< / div >
< div id = "key-0203" class = "key" tabindex = "2" > T< / div >
< div id = "key-0202" class = "key" tabindex = "2" > Y< / div >
< div id = "key-0402" class = "key" tabindex = "2" > U< / div >
< div id = "key-0403" class = "key" tabindex = "2" > I< / div >
< div id = "key-0602" class = "key" tabindex = "2" > O< / div >
< div id = "key-0603" class = "key" tabindex = "2" > P< / div >
< div id = "key-0703" class = "key" tabindex = "2" > [< / div >
< div id = "key-0702" class = "key" tabindex = "2" > ]< / div >
< div id = "key-0502" class = "key btn150" tabindex = "2" > BSpc< / div >
2013-09-07 07:30:28 +00:00
< / div >
2013-08-30 02:28:41 +00:00
2013-09-07 07:30:28 +00:00
< div class = 'keyboard-row' >
2013-09-10 06:31:15 +00:00
< div id = "key-0303" class = "key btn175" tabindex = "3" > Ctrl< / div >
< div id = "key-0004" class = "key" tabindex = "3" > A< / div >
< div id = "key-0003" class = "key" tabindex = "3" > S< / div >
< div id = "key-0104" class = "key" tabindex = "3" > D< / div >
< div id = "key-0105" class = "key" tabindex = "3" > F< / div >
< div id = "key-0204" class = "key" tabindex = "3" > G< / div >
< div id = "key-0205" class = "key" tabindex = "3" > H< / div >
< div id = "key-0405" class = "key" tabindex = "3" > J< / div >
< div id = "key-0404" class = "key" tabindex = "3" > K< / div >
< div id = "key-0605" class = "key" tabindex = "3" > L< / div >
< div id = "key-0604" class = "key" tabindex = "3" > ;< / div >
< div id = "key-0704" class = "key" tabindex = "3" > '< / div >
< div id = "key-0503" class = "key btn225" tabindex = "3" > Enter< / div >
2013-09-07 07:30:28 +00:00
< / div >
2013-08-30 02:28:41 +00:00
2013-09-07 07:30:28 +00:00
< div class = 'keyboard-row' >
2013-09-10 06:31:15 +00:00
< div id = "key-0304" class = "key btn225" tabindex = "4" > Shift< / div >
< div id = "key-0005" class = "key" tabindex = "4" > Z< / div >
< div id = "key-0006" class = "key" tabindex = "4" > X< / div >
< div id = "key-0007" class = "key" tabindex = "4" > C< / div >
< div id = "key-0106" class = "key" tabindex = "4" > V< / div >
< div id = "key-0107" class = "key" tabindex = "4" > B< / div >
< div id = "key-0206" class = "key" tabindex = "4" > N< / div >
< div id = "key-0406" class = "key" tabindex = "4" > M< / div >
< div id = "key-0606" class = "key" tabindex = "4" > ,< / div >
< div id = "key-0706" class = "key" tabindex = "4" > .< / div >
< div id = "key-0705" class = "key" tabindex = "4" > /< / div >
< div id = "key-0505" class = "key btn175" tabindex = "4" > Shift< / div >
< div id = "key-0504" class = "key" tabindex = "4" > Fn< / div >
2013-09-07 07:30:28 +00:00
< / div >
2013-08-30 02:28:41 +00:00
2013-09-07 07:30:28 +00:00
< div class = 'keyboard-row' >
2013-08-30 02:28:41 +00:00
< div class = "key spc150" > < / div >
2013-09-10 06:31:15 +00:00
< div id = "key-0305" class = "key" tabindex = "5" > LGui< / div >
< div id = "key-0306" class = "key btn150" tabindex = "5" > RAlt< / div >
< div id = "key-0307" class = "key btn600" tabindex = "5" > Space< / div >
< div id = "key-0507" class = "key btn150" tabindex = "5" > RAlt< / div >
< div id = "key-0506" class = "key" tabindex = "5" > RGui< / div >
2013-08-30 02:28:41 +00:00
< div class = "key spc150" > < / div >
< div class = "key spc100" > < / div >
2013-09-07 07:30:28 +00:00
< / div >
< div class = "Thank" > < / div >
< / div >
2013-08-30 02:28:41 +00:00
< / div >
< h2 > Keycodes< / h2 >
2013-09-05 07:53:02 +00:00
< div id = "keycode_tabs" class = "keycode_tabs" >
2013-08-30 02:28:41 +00:00
< ul >
2013-09-09 15:36:44 +00:00
< 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 >
2013-08-30 02:28:41 +00:00
< / ul >
<!-- Main -->
2013-09-09 15:36:44 +00:00
< div id = "tabs-main" >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-0" > NO< / button >
< button class = "action" id = "code-1" > TRNS< / button >
2013-09-09 15:36:44 +00:00
< br >
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
2013-08-30 02:28:41 +00:00
< 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 -->
2013-09-09 15:36:44 +00:00
< div id = "tabs-other" >
< button class = "action" id = "code-0" > NO< / button >
< button class = "action" id = "code-1" > TRNS< / button >
< br >
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
Keypad:< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
<!--
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-134" title = "KP_EQUAL_AS400" > KP_EQUAL_AS400< / button >
2013-09-09 15:36:44 +00:00
-->
< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
Japanese:< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< 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 >
2013-08-30 02:28:41 +00:00
<!--
< 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 >
2013-09-09 15:36:44 +00:00
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
<!-- 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 >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-165" > < / button >
< button class = "action" id = "code-166" > < / button >
< button class = "action" id = "code-167" > < / button >
2013-09-09 15:36:44 +00:00
< br >
2013-08-30 02:28:41 +00:00
2013-09-09 15:36:44 +00:00
Volume:< br >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-168" > < / button >
< button class = "action" id = "code-169" > < / button >
< button class = "action" id = "code-170" > < / button >
2013-09-09 15:36:44 +00:00
< br >
Media:< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
Application:< br >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-177" > < / button >
< button class = "action" id = "code-178" > < / button >
< button class = "action" id = "code-179" > < / button >
2013-09-09 15:36:44 +00:00
< br >
Web:< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
2013-08-30 02:28:41 +00:00
<!--
< 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 >
-->
2013-09-09 15:36:44 +00:00
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 >
2013-08-30 02:28:41 +00:00
< / div >
<!-- Layer -->
2013-09-09 15:36:44 +00:00
< div id = "tabs-layer" >
< button class = "action" id = "code-0" > NO< / button >
< button class = "action" id = "code-1" > TRNS< / button >
< br >
< br >
2013-08-30 02:28:41 +00:00
<!-- TODO: layer actions -->
<!-- FN0 - 31 -->
2013-09-09 15:36:44 +00:00
Layer Switch Momentary:< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
Layer Switch Toggle:< br >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-199" > < / button >
< button class = "action" id = "code-200" > < / button >
< button class = "action" id = "code-201" > < / button >
2013-09-09 15:36:44 +00:00
< br >
Layer Switch with Tap Toggle:< br >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-202" > < / button >
< button class = "action" id = "code-203" > < / button >
< button class = "action" id = "code-204" > < / button >
2013-09-09 15:36:44 +00:00
< br >
Layer switch with Tap key:< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
< br >
Modifier with special function:< br >
2013-08-30 02:28:41 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< br >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-216" > < / button >
< button class = "action" id = "code-217" > < / button >
< button class = "action" id = "code-218" > < / button >
2013-09-09 15:36:44 +00:00
< br >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-219" > < / button >
< button class = "action" id = "code-220" > < / button >
< button class = "action" id = "code-221" > < / button >
2013-09-09 15:36:44 +00:00
< br >
2013-08-30 02:28:41 +00:00
< button class = "action" id = "code-222" > < / button >
< button class = "action" id = "code-223" > < / button >
2013-09-09 15:36:44 +00:00
< br >
< p >
See < a href = "https://github.com/tmk/tmk_keyboard/blob/master/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/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/doc/keymap.md#43-one-shot-modifier" target = "_blank" > this< / a > for OneShot Modifier.< / p >
< br >
2013-08-30 02:28:41 +00:00
< / div >
< / div >
2013-09-05 02:11:34 +00:00
< h3 > Firmware Hex File Download:< / h3 >
< button id = "keymap-download" title = "save file" > Download< / button >
2013-09-05 07:53:02 +00:00
< a id = "hex-download" style = "display:none" > < / a >
2013-09-05 02:11:34 +00:00
2013-09-07 07:30:28 +00:00
< 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 >
2013-09-09 15:36:44 +00:00
< h3 > Keymap Output(for debug):< / h3 >
2013-09-05 02:11:34 +00:00
< textarea id = "keymap-output" rows = "20" cols = "80" > < / textarea >
2013-08-30 02:28:41 +00:00
< br / >
< button id = "keymap-json-generate" title = "generate JSON" > JSON< / button >
2013-09-05 02:11:34 +00:00
< button id = "keymap-source-generate" title = "generate C source code" > C source< / button >
2013-08-30 02:28:41 +00:00
< button id = "keymap-hex-generate" title = "generate Hex" > Hex< / button >
2013-09-07 07:30:28 +00:00
< button id = "keymap-encode" title = "generate URL" > encode URL< / button >
< button id = "keymap-decode" title = "decode URL" > decode URL< / button >
2013-08-30 02:28:41 +00:00
< / body >
< / html >
