reform

MNT Reform: Open Source Portable Computer
Log (Feed) | Files | Refs (Tags) | README

refkbd.html (4566B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="utf-8"/>
      5   <title>MNT Reform Keyboard Editor</title>
      6   <link rel="stylesheet" href="style.css"></link>
      7   <script src="base64binary.js"></script>
      8   <script src="mnt-reform-keyboard-firmware.js"></script>
      9   <script src="mnt-reform-keyboard.js"></script>
     10 </head>
     11 <body onload="initKeyboard()">
     12 <section>
     13   <h1>MNT Reform Keyboard Editor</h1>
     14   <h2>Layout</h2>
     15 
     16   <div class="keyboard">
     17     <div class="kbd-row">
     18       <div class="kbd-key"></div>
     19       <div class="kbd-key"></div>
     20       <div class="kbd-key"></div>
     21       <div class="kbd-key"></div>
     22       <div class="kbd-key"></div>
     23       <div class="kbd-key"></div>
     24       <div class="kbd-key"></div>
     25       <div class="kbd-key"></div>
     26       <div class="kbd-key"></div>
     27       <div class="kbd-key"></div>
     28       <div class="kbd-key"></div>
     29       <div class="kbd-key"></div>
     30       <div class="kbd-key"></div>
     31       <div class="kbd-key key-1-5"></div>
     32     </div>
     33 
     34     <div class="kbd-row">
     35       <div class="kbd-key"></div>
     36       <div class="kbd-key"></div>
     37       <div class="kbd-key"></div>
     38       <div class="kbd-key"></div>
     39       <div class="kbd-key"></div>
     40       <div class="kbd-key"></div>
     41       <div class="kbd-key"></div>
     42       <div class="kbd-key"></div>
     43       <div class="kbd-key"></div>
     44       <div class="kbd-key"></div>
     45       <div class="kbd-key"></div>
     46       <div class="kbd-key"></div>
     47       <div class="kbd-key"></div>
     48       <div class="kbd-key key-1-5"></div>
     49     </div>
     50 
     51     <div class="kbd-row">
     52       <div class="kbd-key key-1-5"></div>
     53       <div class="kbd-key"></div>
     54       <div class="kbd-key"></div>
     55       <div class="kbd-key"></div>
     56       <div class="kbd-key"></div>
     57       <div class="kbd-key"></div>
     58       <div class="kbd-key"></div>
     59       <div class="kbd-key"></div>
     60       <div class="kbd-key"></div>
     61       <div class="kbd-key"></div>
     62       <div class="kbd-key"></div>
     63       <div class="kbd-key"></div>
     64       <div class="kbd-key"></div>
     65       <div class="kbd-key"></div>
     66     </div>
     67 
     68     <div class="kbd-row">
     69       <div class="kbd-key"></div>
     70       <div class="kbd-key"></div>
     71       <div class="kbd-key"></div>
     72       <div class="kbd-key"></div>
     73       <div class="kbd-key"></div>
     74       <div class="kbd-key"></div>
     75       <div class="kbd-key"></div>
     76       <div class="kbd-key"></div>
     77       <div class="kbd-key"></div>
     78       <div class="kbd-key"></div>
     79       <div class="kbd-key"></div>
     80       <div class="kbd-key"></div>
     81       <div class="kbd-key"></div>
     82       <div class="kbd-key key-1-5"></div>
     83     </div>
     84 
     85     <div class="kbd-row">
     86       <div class="kbd-key key-1-5"></div>
     87       <div class="kbd-key"></div>
     88       <div class="kbd-key"></div>
     89       <div class="kbd-key"></div>
     90       <div class="kbd-key"></div>
     91       <div class="kbd-key"></div>
     92       <div class="kbd-key"></div>
     93       <div class="kbd-key"></div>
     94       <div class="kbd-key"></div>
     95       <div class="kbd-key"></div>
     96       <div class="kbd-key"></div>
     97       <div class="kbd-key"></div>
     98       <div class="kbd-key"></div>
     99       <div class="kbd-key"></div>
    100     </div>
    101 
    102     <div class="kbd-row last-row">
    103       <div class="kbd-key key-1-5"></div>
    104       <div class="kbd-key key-1-5"></div>
    105       <div class="kbd-key key-1-5"></div>
    106       <div class="kbd-key key-1-5"></div>
    107       <div class="kbd-key"></div>
    108       <div class="kbd-key"></div>
    109       <div class="kbd-key key-1-5"></div>
    110       <div class="kbd-key"></div>
    111       <div class="kbd-key"></div>
    112       <div class="kbd-key"></div>
    113       <div class="kbd-key"></div>
    114       <div class="kbd-key"></div>
    115     </div>
    116   </div>
    117 
    118 </section>
    119 <section>
    120   <h2>Key <span id="keyid"></span></h2>
    121   <div>
    122     <label>
    123       Scancode:
    124       <input id="key-scancodename" list="key-scancodes" onchange="applySettingsToKey()">
    125       <datalist id="key-scancodes"></datalist>
    126     </label>
    127   </div>
    128   <div>
    129     <button onclick="enableSwapMode()">Swap with Key…</button>
    130     <span id="swap-message"></span>
    131   </div>
    132 </section>
    133 <section>
    134   <h2>Export</h2>
    135   <div>
    136     <label>
    137       Title:
    138       <input id="title" type="text" value="" placeholder="Title">
    139     </label>
    140   </div>
    141 </section>
    142 <section>
    143   <h2>Instructions</h2>
    144   <button onclick="generateFirmware()">Download Customized Firmware</button>
    145   <p>
    146     After downloading the Keyboard.elf file, flash it like this:
    147   </p>
    148   <code>
    149     objcopy -O ihex Keyboard.elf Keyboard.hex<br>
    150     dfu-programmer atmega32u4 erase --suppress-bootloader-mem<br>
    151     dfu-programmer atmega32u4 flash ./Keyboard.hex --suppress-bootloader-mem<br>
    152     dfu-programmer atmega32u4 start
    153   </code>
    154 </section>
    155 </body>
    156 </html>