di0ib
/
tmk_keyboard
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Laidieni 4 Aktivitāte
Keyboard firmwares for Atmel AVR and Cortex-M
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
7 Revīzijas
3 Atzari
Koks: 895be29db4
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no '895be29db4'
${ noResults }
tmk_keyboard/editor/hhkb/index.html

index.html 34KB
Neapstrādāts Vainot Vēsture

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756 
  1. <html>

  2. <head>

  3.     <title>TMK Keymap Editor</title>

  4.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

  5.     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  6.     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  7.     <script src="keymap_editor.js"></script>

  8.     <script src="firmware.js"></script>

  9.     <link href='keyboard.css' rel='stylesheet' type='text/css'>

  10.             

  11.     <script>

  12.         /* HHKB pro keymap editor

  13.          *

  14.          * Key matrix:

  15.          *   COL 0     1       2       3       4       5       6       7

  16.          * ROW,---------------------------------------------------------------

  17.          *   0|  2     q       w       s       a       z       x       c

  18.          *   1|  3     4       r       e       d       f       v       b

  19.          *   2|  5     6       y       t       g       h       n       _NONE_

  20.          *   3|  1     Esc     Tab     Control LShift  LAlt    LMeta   Space

  21.          *   4|  7     8       u       i       k       j       m       _NONE_

  22.          *   5|  \     `       Delete  Return  Fn      RShift  RAlt    RMeta

  23.          *   6|  9     0       o       p       ;       l       ,       _NONE_

  24.          *   7|  -     +       ]       [       '       /       .       _NONE_

  25.          *

  26.          * Default keymap

  27.          * ,-----------------------------------------------------------.

  28.          * |Esc|  1|  2|  3|  4|  5|  6|  7|  8|  9|  0|  -|  =|  \|  `|

  29.          * |-----------------------------------------------------------|

  30.          * |Tab  |  Q|  W|  E|  R|  T|  Y|  U|  I|  O|  P|  [|  ]|Backs|

  31.          * |-----------------------------------------------------------|

  32.          * |Contro|  A|  S|  D|  F|  G|  H|  J|  K|  L|  ;|  '|Enter   |

  33.          * |-----------------------------------------------------------|

  34.          * |Shift   |  Z|  X|  C|  V|  B|  N|  M|  ,|  .|  /|Shift |Fn |

  35.          * `-----------------------------------------------------------'

  36.          *       |Gui|Alt  |         Space         |Alt  |Gui|

  37.          *       `-------------------------------------------'

  38.          * ,-----------------------------------------------------------.

  39.          * |Esc| F1| F2| F3| F4| F5| F6| F7| F8| F9|F10|F11|F12|Ins|Del|

  40.          * |-----------------------------------------------------------|

  41.          * |Caps |   |   |   |   |   |   |   |Psc|Slk|Pus|Up |   |Backs|

  42.          * |-----------------------------------------------------------|

  43.          * |Contro|VoD|VoU|Mut|   |   |  *|  /|Hom|PgU|Lef|Rig|Enter   |

  44.          * |-----------------------------------------------------------|

  45.          * |Shift   |   |   |   |   |   |  +|  -|End|PgD|Dow|Shift |Fn |

  46.          * `-----------------------------------------------------------'

  47.          *       |Gui|Alt  |         Space         |Alt  |Gui|

  48.          *       `-------------------------------------------'

  49.          */

  50.         var no_map = function() { return [

  51.             [0,0,0,0,0,0,0,0],

  52.             [0,0,0,0,0,0,0,0],

  53.             [0,0,0,0,0,0,0,0],

  54.             [0,0,0,0,0,0,0,0],

  55.             [0,0,0,0,0,0,0,0],

  56.             [0,0,0,0,0,0,0,0],

  57.             [0,0,0,0,0,0,0,0],

  58.             [0,0,0,0,0,0,0,0],

  59.         ]; };

  60.         var transparent_map = function() { return [

  61.             [1,1,1,1,1,1,1,1],

  62.             [1,1,1,1,1,1,1,1],

  63.             [1,1,1,1,1,1,1,1],

  64.             [1,1,1,1,1,1,1,1],

  65.             [1,1,1,1,1,1,1,1],

  66.             [1,1,1,1,1,1,1,1],

  67.             [1,1,1,1,1,1,1,1],

  68.             [1,1,1,1,1,1,1,1],

  69.         ]; };

  70. 

  71.         // default keymap

  72.         var keymaps = [

  73.             [

  74.                 [ 0x1f,0x14,0x1a,0x16,0x04,0x1d,0x1b,0x06, ],

  75.                 [ 0x20,0x21,0x15,0x08,0x07,0x09,0x19,0x05, ],

  76.                 [ 0x22,0x23,0x1c,0x17,0x0a,0x0b,0x11,0x00, ],

  77.                 [ 0x1e,0x29,0x2b,0xe0,0xe1,0xe3,0xe2,0x2c, ],

  78.                 [ 0x24,0x25,0x18,0x0c,0x0e,0x0d,0x10,0x00, ],

  79.                 [ 0x31,0x35,0x2a,0x28,0xc1,0xe5,0xe7,0xe6, ],

  80.                 [ 0x26,0x27,0x12,0x13,0x33,0x0f,0x36,0x00, ],

  81.                 [ 0x2d,0x2e,0x30,0x2f,0x34,0x38,0x37,0x00, ],

  82.             ],

  83.             [

  84.                 [ 0x3b,0x00,0x00,0xa9,0xaa,0x00,0x00,0x00, ],

  85.                 [ 0x3c,0x3d,0x00,0x00,0xa8,0x00,0x00,0x00, ],

  86.                 [ 0x3e,0x3f,0x00,0x00,0x00,0x55,0x57,0x00, ],

  87.                 [ 0x3a,0x01,0x39,0x01,0x01,0x01,0x01,0x01, ],

  88.                 [ 0x40,0x41,0x00,0x46,0x4a,0x54,0x56,0x00, ],

  89.                 [ 0x49,0x4c,0x01,0x58,0x01,0x01,0x01,0x01, ],

  90.                 [ 0x42,0x43,0x47,0x48,0x50,0x4b,0x4d,0x00, ],

  91.                 [ 0x44,0x45,0x00,0x52,0x4f,0x51,0x4e,0x00, ]

  92.             ],

  93.             no_map(),

  94.             no_map(),

  95. 

  96.             /*

  97.             no_map(),

  98.             no_map(),

  99.             no_map(),

  100.             no_map(),

  101.             */

  102.         ];

  103. 

  104.         // TODO: define proper Fn actions: 32actions*2bytes

  105.         var fn_actions = [

  106.             0xF1,0xA0,0xF1,0xA1,0xF1,0xA2,0xF1,0xA3,0x01,0x8A,0x02,0x8A,0x04,0x8A,0x08,0x8A,

  107.             0xF0,0xA0,0xF0,0xA1,0xF0,0xA2,0xF0,0xA3,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

  108.             0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

  109.             0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

  110.         ];

  111. 

  112.         // key id under editing

  113.         var editing_key;

  114.         // layer under editing

  115.         var editing_layer = 0;

  116. 

  117.         // load keymap on keyboard key buttons

  118.         var load_keymap_on_keyobard = function(layer, keymap) {

  119.             for (var row in keymap) {

  120.                 for (var col in keymap[row]) {

  121.                     var code = keymap[row][col];

  122.                     var key = code_display[code];

  123.                     $("#key-0" + row + "0" + col).text(key.name);

  124.                     $("#key-0" + row + "0" + col).attr({ title: key.desc });

  125.                 }

  126.             }

  127.         };

  128. 

  129.         $(function() {

  130.             // Title

  131.             document.title = "TMK Keymap Editor for " + KEYBOARD_ID;

  132.             $("#page-title").text("TMK Keymap Editor for " + KEYBOARD_ID);

  133. 

  134.             /* 

  135.              * load keymap from URL hash

  136.              */

  137.             var decoded = decode_keymap(document.location.hash.substring(1));

  138.             if (decoded != null) {

  139.                 keymaps = decoded['keymaps'];

  140.             }

  141. 

  142. 

  143. 

  144.             /*

  145.              * Layer selector

  146.              */

  147.             $("#layer_radio").buttonset();

  148. 

  149.             // layer change

  150.             $(".layer").click(function(ev, ui) {

  151.                 var layer = parseInt($(this).attr('id').match(/layer-(\d+)/)[1]);

  152.                 editing_layer = layer;

  153.                 load_keymap_on_keyobard(layer, keymaps[layer]);

  154.             });

  155. 

  156. 

  157. 

  158.             /*

  159.              * Keyboard(key buttons)

  160.              */

  161.             // load default keymap on startup

  162.             load_keymap_on_keyobard(0, keymaps[0]);

  163. 

  164.             // Select key button to edit

  165.             $(".key").click(function(ev, ui) {

  166.                 editing_key = $(this).attr('id');

  167. 

  168.                 // grey-out key to indicate being under editing

  169.                 $(".key").removeClass("key-editing");

  170.                 $(this).addClass("key-editing");

  171.             });

  172. 

  173. 

  174. 

  175.             /*

  176.              * Keycodes button tab

  177.              */

  178.             $("#keycode_tabs").tabs({

  179.                 heightStyle: "auto",

  180.             });

  181. 

  182.             // Keycodes: read name and description from code table

  183.             $(".action").each(function(index) {

  184.                 // get code from code button id: code-[0x]CCCC where CCCC is dec or hex number

  185.                 var code = parseInt($(this).attr('id').match(/code-((0x){0,1}[0-9a-fA-F]+)/)[1]);

  186.                 $(this).text(code_display[code].name);

  187.                 $(this).attr({ title: code_display[code].desc });

  188.                 //console.log(index + ": " + code + " " + code_display[code].desc);

  189.             });

  190. 

  191.             $(".action").click(function(ev,ui) {

  192.                 if (!editing_key) return;

  193. 

  194.                 // get matrix position from key id: key-RRCC where RR is row and CC is column in dec

  195.                 var pos = editing_key.match(/key-(\d\d)(\d\d)/i);

  196.                 if (!pos) return;

  197.                 var row = parseInt(pos[1]), col = parseInt(pos[2]);

  198. 

  199.                 // set text and tooltip to key button under editing

  200.                 $("#" + editing_key).text($(this).text());

  201.                 $("#" + editing_key).attr({ title: $(this).attr('title'), });

  202. 

  203.                 // change keymap array

  204.                 // get code from keycode button id: code-[0x]CC where CC is dec or hex number

  205.                 var code = $(this).attr('id').match(/code-((0x){0,1}[0-9a-fA-F]+)/)[1];

  206.                 keymaps[editing_layer][row][col] = parseInt(code);

  207.             });

  208. 

  209. 

  210.             /*

  211.              * Share URL

  212.              */

  213.             // Share URL

  214.             $("#keymap-share").click(function(ev, ui) {

  215.                 var hash = encode_keymap({ keymaps: keymaps });

  216.                 $("#share-url").text(document.location.origin + document.location.pathname + "#" + hash);

  217.             });

  218. 

  219.             // Shorten URL

  220.             $("#shorten-url").click(function(ev, ui) {

  221.                 var hash = encode_keymap({ keymaps: keymaps });

  222.                 var editor_url = document.location.origin + document.location.pathname;

  223.                 window.open("https://bitly.com/shorten/?url=" + encodeURIComponent(editor_url + "#" + hash));

  224.                 //window.open("http://tinyurl.com/create.php?url=" + encodeURIComponent(editor_url + "#" + hash));

  225.             });

  226. 

  227. 

  228.             // Hex Save

  229.             $("#keymap-download").click(function(ev, ui) {

  230.                 var keymap_data = fn_actions.concat(keymaps);

  231.                 var content = firmware_hex() +

  232.                               hex_output(KEYMAP_START_ADDRESS, keymap_data) +

  233.                               hex_eof();

  234. 

  235.                 // download hex file

  236.                 var blob = new Blob([content], {type: "application/octet-stream"});

  237.                 var hex_link = $("#hex-download");

  238.                 hex_link.attr('href', window.URL.createObjectURL(blob));

  239.                 hex_link.attr('download', KEYBOARD_ID + "_firmware.hex");

  240.                 // jQuery click() doesn't work straight for 'a' element

  241.                 // http://stackoverflow.com/questions/1694595/

  242.                 hex_link[0].click();

  243.             });

  244. 

  245. 

  246. 

  247.             /*

  248.              * Output options

  249.              */

  250.             //$("#keymap-output").resizable();  // resizable textarea

  251. 

  252.             // Hex output

  253.             $("#keymap-hex-generate").click(function(ev, ui) {

  254.                 var keymap_data = fn_actions.concat(keymaps);

  255.                 $("#keymap-output").text(hex_output(KEYMAP_START_ADDRESS, keymap_data));

  256.             });

  257. 

  258.             // C source output

  259.             $("#keymap-source-generate").click(function(ev, ui) {

  260.                 $("#keymap-output").text(source_output(keymaps));

  261.             });

  262. 

  263.             // JSON output

  264.             //$("#keymap-json-generate").css('display', 'none');  // hide

  265.             $("#keymap-json-generate").click(function(ev, ui) {

  266.                 var keymap_output;

  267.                 //keymap_output = JSON.stringify(keymaps, null, 4);

  268.                 keymap_output = JSON.stringify({ keymaps: keymaps });

  269.                 $("#keymap-output").text(keymap_output);

  270.             });

  271. 

  272.             // encode keymap

  273.             $("#keymap-encode").click(function(ev, ui) {

  274.                 var keymap_output = encode_keymap({ keymaps: keymaps });

  275.                 $("#keymap-output").text(keymap_output);

  276.             });

  277. 

  278.             // decode  keymap

  279.             $("#keymap-decode").click(function(ev, ui) {

  280.                 var hash = $("#keymap-output").text();

  281.                 var keymap_output = decode_keymap(hash);

  282.                 $("#keymap-output").text(JSON.stringify(keymap_output));

  283.             });

  284. 

  285. 

  286. 

  287.             // lost keymap under edting when leave the page

  288.             /* TODO: Needed when released

  289.             $(window).bind('beforeunload', function(){

  290.                   return 'CAUTION: You will lost your change.';

  291.             });

  292.             */

  293.         });

  294.     </script>

  295. </head>

  296. 

  297. <body>

  298. <h1 id="page-title">TMK Keymap Editor</h1>

  299. 

  300. <h3>Instruction</h3>

  301. How to edit keymap

  302. <ol>

  303.     <li>Select layer</li>

  304.     <li>Select key to edit</li>

  305.     <li>Select keycode to assign to the key</li>

  306.     <li>Download firmware</li>

  307. </ol>

  308. See <a href="https://github.com/tmk/tmk_keyboard/blob/master/doc/keymap.md" target="_blank">this</a> for detailed description of keymap.

  309. 

  310. <h2>Keyboard</h2>

  311. <div id="keyboard-pane" class="keyboard-pane">

  312.     <form>

  313.         <div id="layer_radio">

  314.         <input type="radio" name="radio" class="layer" id="layer-0"checked="checked" /><label for="layer-0">Layer 0</label>

  315.         <input type="radio" name="radio" class="layer" id="layer-1"/><label for="layer-1">Layer 1</label>

  316.         <input type="radio" name="radio" class="layer" id="layer-2"/><label for="layer-2">Layer 2</label>

  317.         <input type="radio" name="radio" class="layer" id="layer-3"/><label for="layer-3">Layer 3</label>

  318.         <!--

  319.         <input type="radio" name="radio" class="layer" id="layer-4"/><label for="layer-4">Layer 4</label>

  320.         <input type="radio" name="radio" class="layer" id="layer-5"/><label for="layer-5">Layer 5</label>

  321.         <input type="radio" name="radio" class="layer" id="layer-6"/><label for="layer-6">Layer 6</label>

  322.         <input type="radio" name="radio" class="layer" id="layer-7"/><label for="layer-7">Layer 7</label>

  323.         -->

  324.         </div>

  325.     </form> 

  326. 

  327. 

  328.     <!-- 

  329.     Keyboard keys

  330.     -->

  331.     <div id="keyboard-outline" class="keyboard-outline">

  332.     <div class='keyboard-row'>

  333.     <div id="key-0301" class="key">Esc</div>

  334.     <div id="key-0300" class="key">1</div>

  335.     <div id="key-0000" class="key">2</div>

  336.     <div id="key-0100" class="key">3</div>

  337.     <div id="key-0101" class="key">4</div>

  338.     <div id="key-0200" class="key">5</div>

  339.     <div id="key-0201" class="key">6</div>

  340.     <div id="key-0400" class="key">7</div>

  341.     <div id="key-0401" class="key">8</div>

  342.     <div id="key-0600" class="key">9</div>

  343.     <div id="key-0601" class="key">0</div>

  344.     <div id="key-0700" class="key">-</div>

  345.     <div id="key-0701" class="key">=</div>

  346.     <div id="key-0500" class="key">\</div>

  347.     <div id="key-0501" class="key">`</div>

  348.     </div>

  349. 

  350.     <div class='keyboard-row'>

  351.     <div id="key-0302" class="key btn150">Tab</div>

  352.     <div id="key-0001" class="key">Q</div>

  353.     <div id="key-0002" class="key">W</div>

  354.     <div id="key-0103" class="key">E</div>

  355.     <div id="key-0102" class="key">R</div>

  356.     <div id="key-0203" class="key">T</div>

  357.     <div id="key-0202" class="key">Y</div>

  358.     <div id="key-0402" class="key">U</div>

  359.     <div id="key-0403" class="key">I</div>

  360.     <div id="key-0602" class="key">O</div>

  361.     <div id="key-0603" class="key">P</div>

  362.     <div id="key-0703" class="key">[</div>

  363.     <div id="key-0702" class="key">]</div>

  364.     <div id="key-0502" class="key btn150">BSpc</div>

  365.     </div>

  366. 

  367.     <div class='keyboard-row'>

  368.     <div id="key-0303" class="key btn175">Ctrl</div>

  369.     <div id="key-0004" class="key">A</div>

  370.     <div id="key-0003" class="key">S</div>

  371.     <div id="key-0104" class="key">D</div>

  372.     <div id="key-0105" class="key">F</div>

  373.     <div id="key-0204" class="key">G</div>

  374.     <div id="key-0205" class="key">H</div>

  375.     <div id="key-0405" class="key">J</div>

  376.     <div id="key-0404" class="key">K</div>

  377.     <div id="key-0605" class="key">L</div>

  378.     <div id="key-0604" class="key">;</div>

  379.     <div id="key-0704" class="key">'</div>

  380.     <div id="key-0503" class="key btn225">Enter</div>

  381.     </div>

  382. 

  383.     <div class='keyboard-row'>

  384.     <div id="key-0304" class="key btn225">Shift</div>

  385.     <div id="key-0005" class="key">Z</div>

  386.     <div id="key-0006" class="key">X</div>

  387.     <div id="key-0007" class="key">C</div>

  388.     <div id="key-0106" class="key">V</div>

  389.     <div id="key-0107" class="key">B</div>

  390.     <div id="key-0206" class="key">N</div>

  391.     <div id="key-0406" class="key">M</div>

  392.     <div id="key-0606" class="key">,</div>

  393.     <div id="key-0706" class="key">.</div>

  394.     <div id="key-0705" class="key">/</div>

  395.     <div id="key-0505" class="key btn175">Shift</div>

  396.     <div id="key-0504" class="key">Fn</div>

  397.     </div>

  398. 

  399.     <div class='keyboard-row'>

  400.     <div class="key spc150"></div>

  401.     <div id="key-0305" class="key">Sup</div>

  402.     <div id="key-0306" class="key btn150">Alt</div>

  403.     <div id="key-0307" class="key btn600"></div>

  404.     <div id="key-0507" class="key btn150">Alt</div>

  405.     <div id="key-0506" class="key">Sup</div>

  406.     <div class="key spc150"></div>

  407.     <div class="key spc100"></div>

  408.     </div>

  409.     <div class="Thank"></div>

  410. 

  411.     </div>

  412. </div>

  413. 

  414. 

  415. <h2>Keycodes</h2>

  416. <div id="keycode_tabs" class="keycode_tabs">

  417.     <ul>

  418.     <li><a href="#tabs-1">Main</a></li>

  419.     <li><a href="#tabs-2">Function and Navigation</a></li>

  420.     <li><a href="#tabs-3">Keypad</a></li>

  421.     <li><a href="#tabs-4">Media and System</a></li>

  422.     <li><a href="#tabs-5">Layer</a></li>

  423.     </ul>

  424. 

  425.     <!-- Main -->

  426.     <div id="tabs-1">

  427.         <button class="action" id="code-0">NO</button>

  428.         <button class="action" id="code-1">TRNS</button>

  429.         <br/>

  430.         <button class="action" id="code-4" title="A">A</button>

  431.         <button class="action" id="code-5" title="B">B</button>

  432.         <button class="action" id="code-6" title="C">C</button>

  433.         <button class="action" id="code-7" title="D">D</button>

  434.         <button class="action" id="code-8" title="E">E</button>

  435.         <button class="action" id="code-9" title="F">F</button>

  436.         <button class="action" id="code-10" title="G">G</button>

  437.         <button class="action" id="code-11" title="H">H</button>

  438.         <button class="action" id="code-12" title="I">I</button>

  439.         <button class="action" id="code-13" title="J">J</button>

  440.         <button class="action" id="code-14" title="K">K</button>

  441.         <button class="action" id="code-15" title="L">L</button>

  442.         <button class="action" id="code-16" title="M">M</button>

  443.         <button class="action" id="code-17" title="N">N</button>

  444.         <button class="action" id="code-18" title="O">O</button>

  445.         <button class="action" id="code-19" title="P">P</button>

  446.         <button class="action" id="code-20" title="Q">Q</button>

  447.         <button class="action" id="code-21" title="R">R</button>

  448.         <button class="action" id="code-22" title="S">S</button>

  449.         <button class="action" id="code-23" title="T">T</button>

  450.         <button class="action" id="code-24" title="U">U</button>

  451.         <button class="action" id="code-25" title="V">V</button>

  452.         <button class="action" id="code-26" title="W">W</button>

  453.         <button class="action" id="code-27" title="X">X</button>

  454.         <button class="action" id="code-28" title="Y">Y</button>

  455.         <button class="action" id="code-29" title="Z">Z</button>

  456.         <br/>

  457.         <button class="action" id="code-30" title="1">1</button>

  458.         <button class="action" id="code-31" title="2">2</button>

  459.         <button class="action" id="code-32" title="3">3</button>

  460.         <button class="action" id="code-33" title="4">4</button>

  461.         <button class="action" id="code-34" title="5">5</button>

  462.         <button class="action" id="code-35" title="6">6</button>

  463.         <button class="action" id="code-36" title="7">7</button>

  464.         <button class="action" id="code-37" title="8">8</button>

  465.         <button class="action" id="code-38" title="9">9</button>

  466.         <button class="action" id="code-39" title="0">0</button>

  467.         <br/>

  468.         <button class="action" id="code-45" title="MINUS">MINUS</button>

  469.         <button class="action" id="code-46" title="EQUAL">EQUAL</button>

  470.         <button class="action" id="code-47" title="LBRACKET">LBRACKET</button>

  471.         <button class="action" id="code-48" title="RBRACKET">RBRACKET</button>

  472.         <button class="action" id="code-49" title="BSLASH">BSLASH</button>

  473.         <button class="action" id="code-51" title="SCOLON">SCOLON</button>

  474.         <button class="action" id="code-52" title="QUOTE">QUOTE</button>

  475.         <button class="action" id="code-53" title="GRAVE">GRAVE</button>

  476.         <button class="action" id="code-54" title="COMMA">COMMA</button>

  477.         <button class="action" id="code-55" title="DOT">DOT</button>

  478.         <button class="action" id="code-56" title="SLASH">SLASH</button>

  479.         <br/>

  480.         <button class="action" id="code-40" title="ENTER">ENTER</button>

  481.         <button class="action" id="code-41" title="ESCAPE">ESCAPE</button>

  482.         <button class="action" id="code-42" title="BackSpace">BSPACE</button>

  483.         <button class="action" id="code-43" title="TAB">TAB</button>

  484.         <button class="action" id="code-44" title="SPACE">SPACE</button>

  485.         <button class="action" id="code-57" title="CAPSLOCK">CAPSLOCK</button>

  486.         <button class="action" id="code-101" title="APPLICATION">APPLICATION</button>

  487.         <br/>

  488.         <button class="action" id="code-50" title="NONUS_HASH">NONUS_HASH</button>

  489.         <button class="action" id="code-100" title="NONUS_BSLASH">NONUS_BSLASH</button>

  490.         <br/>

  491.         Modifier:

  492.         <button class="action" id="code-224" title="LCTRL">LCTRL</button>

  493.         <button class="action" id="code-225" title="LSHIFT">LSHIFT</button>

  494.         <button class="action" id="code-226" title="LALT">LALT</button>

  495.         <button class="action" id="code-227" title="LGUI">LGUI</button>

  496.         <button class="action" id="code-228" title="RCTRL">RCTRL</button>

  497.         <button class="action" id="code-229" title="RSHIFT">RSHIFT</button>

  498.         <button class="action" id="code-230" title="RALT">RALT</button>

  499.         <button class="action" id="code-231" title="RGUI">RGUI</button>

  500.         <br/>

  501.     </div>

  502. 

  503.     <!-- Function and Navigation -->

  504.     <div id="tabs-2">

  505.         <button class="action" id="code-58" title="F1">F1</button>

  506.         <button class="action" id="code-59" title="F2">F2</button>

  507.         <button class="action" id="code-60" title="F3">F3</button>

  508.         <button class="action" id="code-61" title="F4">F4</button>

  509.         <button class="action" id="code-62" title="F5">F5</button>

  510.         <button class="action" id="code-63" title="F6">F6</button>

  511.         <button class="action" id="code-64" title="F7">F7</button>

  512.         <button class="action" id="code-65" title="F8">F8</button>

  513.         <button class="action" id="code-66" title="F9">F9</button>

  514.         <button class="action" id="code-67" title="F10">F10</button>

  515.         <button class="action" id="code-68" title="F11">F11</button>

  516.         <button class="action" id="code-69" title="F12">F12</button>

  517.         <br/>

  518.         <button class="action" id="code-104" title="F13">F13</button>

  519.         <button class="action" id="code-105" title="F14">F14</button>

  520.         <button class="action" id="code-106" title="F15">F15</button>

  521.         <button class="action" id="code-107" title="F16">F16</button>

  522.         <button class="action" id="code-108" title="F17">F17</button>

  523.         <button class="action" id="code-109" title="F18">F18</button>

  524.         <button class="action" id="code-110" title="F19">F19</button>

  525.         <button class="action" id="code-111" title="F20">F20</button>

  526.         <button class="action" id="code-112" title="F21">F21</button>

  527.         <button class="action" id="code-113" title="F22">F22</button>

  528.         <button class="action" id="code-114" title="F23">F23</button>

  529.         <button class="action" id="code-115" title="F24">F24</button>

  530.         <br/>

  531.         <br/>

  532.         <button class="action" id="code-70" title="PSCREEN">PSCREEN</button>

  533.         <button class="action" id="code-71" title="SCROLLLOCK">SCROLLLOCK</button>

  534.         <button class="action" id="code-72" title="PAUSE">PAUSE</button>

  535.         <br/>

  536.         <button class="action" id="code-73" title="INSERT">INSERT</button>

  537.         <button class="action" id="code-74" title="HOME">HOME</button>

  538.         <button class="action" id="code-75" title="PGUP">PGUP</button>

  539.         <br/>

  540.         <button class="action" id="code-76" title="DELETE">DELETE</button>

  541.         <button class="action" id="code-77" title="END">END</button>

  542.         <button class="action" id="code-78" title="PGDOWN">PGDOWN</button>

  543.         <br/>

  544.         <button class="action" id="code-80" title="LEFT">LEFT</button>

  545.         <button class="action" id="code-81" title="DOWN">DOWN</button>

  546.         <button class="action" id="code-82" title="UP">UP</button>

  547.         <button class="action" id="code-79" title="RIGHT">RIGHT</button>

  548.     </div>

  549. 

  550.     <!-- Keypad -->

  551.     <div id="tabs-3">

  552.         <button class="action" id="code-83" title="NUMLOCK">NUMLOCK</button>

  553.         <button class="action" id="code-84" title="KP_SLASH">KP_SLASH</button>

  554.         <button class="action" id="code-85" title="KP_ASTERISK">KP_ASTERISK</button>

  555.         <button class="action" id="code-86" title="KP_MINUS">KP_MINUS</button>

  556.         <button class="action" id="code-87" title="KP_PLUS">KP_PLUS</button>

  557.         <button class="action" id="code-88" title="KP_ENTER">KP_ENTER</button>

  558.         <button class="action" id="code-99" title="KP_DOT">KP_DOT</button>

  559.         <button class="action" id="code-103" title="KP_EQUAL">KP_EQUAL</button>

  560.         <button class="action" id="code-133" title="KP_COMMA">KP_COMMA</button>

  561.         <button class="action" id="code-134" title="KP_EQUAL_AS400">KP_EQUAL_AS400</button>

  562.         <br/>

  563.         <button class="action" id="code-89" title="KP_1">KP_1</button>

  564.         <button class="action" id="code-90" title="KP_2">KP_2</button>

  565.         <button class="action" id="code-91" title="KP_3">KP_3</button>

  566.         <button class="action" id="code-92" title="KP_4">KP_4</button>

  567.         <button class="action" id="code-93" title="KP_5">KP_5</button>

  568.         <button class="action" id="code-94" title="KP_6">KP_6</button>

  569.         <button class="action" id="code-95" title="KP_7">KP_7</button>

  570.         <button class="action" id="code-96" title="KP_8">KP_8</button>

  571.         <button class="action" id="code-97" title="KP_9">KP_9</button>

  572.         <button class="action" id="code-98" title="KP_0">KP_0</button>

  573.         <br/>

  574.         <br/>

  575.         Japanese:

  576.         <button class="action" id="code-135" title="INT1">INT1</button>

  577.         <button class="action" id="code-136" title="INT2">INT2</button>

  578.         <button class="action" id="code-137" title="INT3">INT3</button>

  579.         <button class="action" id="code-138" title="INT4">INT4</button>

  580.         <button class="action" id="code-139" title="INT5">INT5</button>

  581.         <!--

  582.         <br/>

  583.         <button class="action" id="code-140" title="INT6">INT6</button>

  584.         <button class="action" id="code-141" title="INT7">INT7</button>

  585.         <button class="action" id="code-142" title="INT8">INT8</button>

  586.         <button class="action" id="code-143" title="INT9">INT9</button>

  587.         -->

  588.         <!--

  589.         <br/>

  590.         <button class="action" id="code-144" title="LANG1">LANG1</button>

  591.         <button class="action" id="code-145" title="LANG2">LANG2</button>

  592.         <button class="action" id="code-146" title="LANG3">LANG3</button>

  593.         <button class="action" id="code-147" title="LANG4">LANG4</button>

  594.         <button class="action" id="code-148" title="LANG5">LANG5</button>

  595.         <button class="action" id="code-149" title="LANG6">LANG6</button>

  596.         <button class="action" id="code-150" title="LANG7">LANG7</button>

  597.         <button class="action" id="code-151" title="LANG8">LANG8</button>

  598.         <button class="action" id="code-152" title="LANG9">LANG9</button>

  599.         -->

  600. 

  601.         <!--

  602.         <br/>

  603.         <br/>

  604.         <button class="action" id="code-116" title="EXECUTE">EXECUTE</button>

  605.         <button class="action" id="code-117" title="HELP">HELP</button>

  606.         <button class="action" id="code-118" title="MENU">MENU</button>

  607.         <button class="action" id="code-119" title="SELECT">SELECT</button>

  608.         <button class="action" id="code-120" title="STOP">STOP</button>

  609.         <button class="action" id="code-121" title="AGAIN">AGAIN</button>

  610.         <button class="action" id="code-122" title="UNDO">UNDO</button>

  611.         <button class="action" id="code-123" title="CUT">CUT</button>

  612.         <button class="action" id="code-124" title="COPY">COPY</button>

  613.         <button class="action" id="code-125" title="PASTE">PASTE</button>

  614.         <button class="action" id="code-126" title="FIND">FIND</button>

  615.         <button class="action" id="code-127" title="_MUTE">_MUTE</button>

  616.         <button class="action" id="code-128" title="_VOLUP">_VOLUP</button>

  617.         <button class="action" id="code-129" title="_VOLDOWN">_VOLDOWN</button>

  618.         -->

  619. 

  620.         <!--

  621.         <br/>

  622.         <button class="action" id="code-102" title="POWER">POWER</button>

  623.         <button class="action" id="code-153" title="ALT_ERASE">ALT_ERASE</button>

  624.         <button class="action" id="code-154" title="SYSREQ">SYSREQ</button>

  625.         <button class="action" id="code-155" title="CANCEL">CANCEL</button>

  626.         <button class="action" id="code-156" title="CLEAR">CLEAR</button>

  627.         <button class="action" id="code-157" title="PRIOR">PRIOR</button>

  628.         <button class="action" id="code-158" title="RETURN">RETURN</button>

  629.         <button class="action" id="code-159" title="SEPARATOR">SEPARATOR</button>

  630.         <button class="action" id="code-160" title="OUT">OUT</button>

  631.         <button class="action" id="code-161" title="OPER">OPER</button>

  632.         <button class="action" id="code-162" title="CLEAR_AGAIN">CLEAR_AGAIN</button>

  633.         <button class="action" id="code-163" title="CRSEL">CRSEL</button>

  634.         <button class="action" id="code-164" title="EXSEL">EXSEL</button>

  635.         -->

  636.     </div>

  637. 

  638.     <!-- Media and System -->

  639.     <div id="tabs-4">

  640.         <button class="action" id="code-165"></button>

  641.         <button class="action" id="code-166"></button>

  642.         <button class="action" id="code-167"></button>

  643. 

  644.         <br/>

  645.         <br/>

  646.         <button class="action" id="code-168"></button>

  647.         <button class="action" id="code-169"></button>

  648.         <button class="action" id="code-170"></button>

  649.         <button class="action" id="code-171"></button>

  650.         <button class="action" id="code-172"></button>

  651.         <button class="action" id="code-173"></button>

  652.         <button class="action" id="code-174"></button>

  653.         <button class="action" id="code-175"></button>

  654.         <button class="action" id="code-176"></button>

  655.         <button class="action" id="code-177"></button>

  656.         <button class="action" id="code-178"></button>

  657.         <button class="action" id="code-179"></button>

  658. 

  659.         <br/>

  660.         <br/>

  661.         <button class="action" id="code-180"></button>

  662.         <button class="action" id="code-181"></button>

  663.         <button class="action" id="code-182"></button>

  664.         <button class="action" id="code-183"></button>

  665.         <button class="action" id="code-184"></button>

  666.         <button class="action" id="code-185"></button>

  667.         <button class="action" id="code-186"></button>

  668. 

  669.         <!--

  670.         <button class="action" id="code-187"></button>

  671.         <button class="action" id="code-188"></button>

  672.         <button class="action" id="code-189"></button>

  673.         <button class="action" id="code-190"></button>

  674.         <button class="action" id="code-191"></button>

  675.         -->

  676. 

  677.         <br/>

  678.         <br/>

  679.         <button class="action" id="code-130" title="LOCKING_CAPS">LOCKING_CAPS</button>

  680.         <button class="action" id="code-131" title="LOCKING_NUM">LOCKING_NUM</button>

  681.         <button class="action" id="code-132" title="LOCKING_SCROLL">LOCKING_SCROLL</button>

  682.     </div>

  683. 

  684.     <!-- Layer -->

  685.     <div id="tabs-5">

  686.         <!-- TODO: layer actions -->

  687.         <!-- FN0-31 -->

  688.         <h3>Layer Switch</h3>

  689.         Momentary:

  690.         <button class="action" id="code-192"></button>

  691.         <button class="action" id="code-193"></button>

  692.         <button class="action" id="code-194"></button>

  693.         <button class="action" id="code-195"></button>

  694.         <br/>

  695.         Toggle:

  696.         <button class="action" id="code-196"></button>

  697.         <button class="action" id="code-197"></button>

  698.         <button class="action" id="code-198"></button>

  699.         <button class="action" id="code-199"></button>

  700.         <br/>

  701.         Momentary with Tap Toggle:

  702.         <button class="action" id="code-200"></button>

  703.         <button class="action" id="code-201"></button>

  704.         <button class="action" id="code-202"></button>

  705.         <button class="action" id="code-203"></button>

  706.         <br/>

  707.         <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.</p>

  708. 

  709.         <!--

  710.         <button class="action" id="code-204"></button>

  711.         <button class="action" id="code-205"></button>

  712.         <button class="action" id="code-206"></button>

  713.         <button class="action" id="code-207"></button>

  714.         <br/>

  715.         <button class="action" id="code-208"></button>

  716.         <button class="action" id="code-209"></button>

  717.         <button class="action" id="code-210"></button>

  718.         <button class="action" id="code-211"></button>

  719.         <button class="action" id="code-212"></button>

  720.         <button class="action" id="code-213"></button>

  721.         <button class="action" id="code-214"></button>

  722.         <button class="action" id="code-215"></button>

  723.         <br/>

  724.         <button class="action" id="code-216"></button>

  725.         <button class="action" id="code-217"></button>

  726.         <button class="action" id="code-218"></button>

  727.         <button class="action" id="code-219"></button>

  728.         <button class="action" id="code-220"></button>

  729.         <button class="action" id="code-221"></button>

  730.         <button class="action" id="code-222"></button>

  731.         <button class="action" id="code-223"></button>

  732.         -->

  733.     </div>

  734. </div>

  735. 

  736. <h3>Firmware Hex File Download:</h3>

  737. <button id="keymap-download" title="save file">Download</button>

  738. <a id="hex-download" style="display:none" ></a>

  739. 

  740. <h3>Share URL:</h3>

  741. <textarea id="share-url" rows="10" cols="80"></textarea>

  742. <br/>

  743. <button id="keymap-share" title="Share">Share</button>

  744. <button id="shorten-url" title="Shorten">Shorten</button>

  745. 

  746. <h3>Keymap Output:</h3>

  747. <textarea id="keymap-output" rows="20" cols="80"></textarea>

  748. <br/>

  749. <button id="keymap-json-generate" title="generate JSON">JSON</button>

  750. <button id="keymap-source-generate" title="generate C source code">C source</button>

  751. <button id="keymap-hex-generate" title="generate Hex">Hex</button>

  752. <button id="keymap-encode" title="generate URL">encode URL</button>

  753. <button id="keymap-decode" title="decode URL">decode URL</button>

  754. 

  755. </body>

  756. </html>