di0ib
/
tmk_keyboard
Watch 1
Star 0
Fork 0
Code Releases 4 Activity
Browse Source

Add Share and Short URL

gh-pages
tmk 10 years ago
parent
bc8e13d0bf
commit
895be29db4
4 changed files with 248 additions and 132 deletions
Unified View Show Diff Stats
  1. 16
    4
      editor/hhkb/MEMO.txt
  2. 128
    58
      editor/hhkb/index.html
  3. 55
    44
      editor/hhkb/keyboard.css
  4. 49
    26
      editor/hhkb/keymap_editor.js

+ 16
- 4
editor/hhkb/MEMO.txt View File

TODO TODO
---- ----
Better source output
KEYMAP macro

layer operation
copy, swap, set all, clear...

X Share URL
X shoten service? 09/07

Bootloader jump doesn't work
Keyobard external line graphic

X test on remote site X test on remote site
tmk.github.io/tmk_editor/hhkb/? tmk.github.io/tmk_editor/hhkb/?
github pages github pages
a.className = 'TE_link'; a.className = 'TE_link';
a.click() a.click()


keyboard key text css
align of wrapped text
X keyboard key text css
X align of wrapped text


edit action for FN key edit action for FN key
action map support action map support
Convert table? UI can use position of elemen placing. Convert table? UI can use position of elemen placing.
UI uses matrix posiotn for ID of element. UI uses matrix posiotn for ID of element.


P load/save JSON
X save hex(binary) X save hex(binary)


firmware
X firmware
P load binary P load binary
P Mass Storage or HID comm P Mass Storage or HID comm
X fixed address for keymaps X fixed address for keymaps

+ 128
- 58
editor/hhkb/index.html View File

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <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/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="codes.js"></script>
<script src="keymap_editor.js"></script>
<script src="firmware.js"></script> <script src="firmware.js"></script>
<link href='keyboard.css' rel='stylesheet' type='text/css'> <link href='keyboard.css' rel='stylesheet' type='text/css'>
], ],
no_map(), no_map(),
no_map(), no_map(),

/*
no_map(),
no_map(),
no_map(),
no_map(),
*/
]; ];


// TODO: define proper Fn actions: 32actions*2bytes // TODO: define proper Fn actions: 32actions*2bytes
// layer under editing // layer under editing
var editing_layer = 0; var editing_layer = 0;


// 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 });
}
}
};

$(function() { $(function() {
// Title // Title
document.title = "TMK Keymap Editor for " + KEYBOARD_ID; document.title = "TMK Keymap Editor for " + KEYBOARD_ID;
$("#page-title").text("TMK Keymap Editor for " + KEYBOARD_ID); $("#page-title").text("TMK Keymap Editor for " + KEYBOARD_ID);


// lost keymap under edting when leave the page
/* TODO: Needed when released
$(window).bind('beforeunload', function(){
return 'CAUTION: You will lost your change.';
});
*/
/*
* load keymap from URL hash
*/
var decoded = decode_keymap(document.location.hash.substring(1));
if (decoded != null) {
keymaps = decoded['keymaps'];
}


// load keymap on keyboard key buttons
var load_keymap = 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 });
}
}
};


// load default keymap on startup
load_keymap(0, keymaps[0]);


/* /*
* Layer selector * Layer selector
$(".layer").click(function(ev, ui) { $(".layer").click(function(ev, ui) {
var layer = parseInt($(this).attr('id').match(/layer-(\d+)/)[1]); var layer = parseInt($(this).attr('id').match(/layer-(\d+)/)[1]);
editing_layer = layer; editing_layer = layer;
load_keymap(layer, keymaps[layer]);
load_keymap_on_keyobard(layer, keymaps[layer]);
}); });




/* /*
* Keyboard display(key buttons)
* Keyboard(key buttons)
*/ */
// load default keymap on startup
load_keymap_on_keyobard(0, keymaps[0]);

// Select key button to edit // Select key button to edit
$(".key").click(function(ev, ui) { $(".key").click(function(ev, ui) {
editing_key = $(this).attr('id'); editing_key = $(this).attr('id');
$(this).addClass("key-editing"); $(this).addClass("key-editing");
}); });




/* /*
* Keycodes button tab * Keycodes button tab
*/ */
keymaps[editing_layer][row][col] = parseInt(code); keymaps[editing_layer][row][col] = parseInt(code);
}); });



/* /*
* Output options
* Share URL
*/ */
//$("#keymap-output").resizable(); // resizable textarea
// 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));
});



// Hex Save // Hex Save
$("#keymap-download").click(function(ev, ui) { $("#keymap-download").click(function(ev, ui) {
hex_link[0].click(); hex_link[0].click();
}); });




/*
* Output options
*/
//$("#keymap-output").resizable(); // resizable textarea

// Hex output // Hex output
$("#keymap-hex-generate").click(function(ev, ui) { $("#keymap-hex-generate").click(function(ev, ui) {
var keymap_data = fn_actions.concat(keymaps); var keymap_data = fn_actions.concat(keymaps);
$("#keymap-output").text(keymap_output); $("#keymap-output").text(keymap_output);
}); });


// 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.';
});
*/
}); });
</script> </script>
</head> </head>


<h3>Instruction</h3> <h3>Instruction</h3>
How to edit keymap How to edit keymap
<ul>
<li>Select layer
<li>Select key to edit
<li>Select keycode to assign to the key
<li>Download firmware
</ul>
<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/doc/keymap.md" target="_blank">this</a> for detailed description of keymap. See <a href="https://github.com/tmk/tmk_keyboard/blob/master/doc/keymap.md" target="_blank">this</a> for detailed description of keymap.


<h2>Keyboard</h2> <h2>Keyboard</h2>
<div id="keyboard" class="keyboard">
<!--
Layer selector
-->
<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>
</div>
</form>

<!-- TODO: set all key to NO or TRANS -->
<!-- TODO: copy layer -->

<!--
Keyboard keys
-->
<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-0301" class="key">Esc</div> <div id="key-0301" class="key">Esc</div>
<div id="key-0300" class="key">1</div> <div id="key-0300" class="key">1</div>
<div id="key-0000" class="key">2</div> <div id="key-0000" class="key">2</div>
<div id="key-0701" class="key">=</div> <div id="key-0701" class="key">=</div>
<div id="key-0500" class="key">\</div> <div id="key-0500" class="key">\</div>
<div id="key-0501" class="key">`</div> <div id="key-0501" class="key">`</div>
<br class="clear" />
</div>


<div class='keyboard-row'>
<div id="key-0302" class="key btn150">Tab</div> <div id="key-0302" class="key btn150">Tab</div>
<div id="key-0001" class="key">Q</div> <div id="key-0001" class="key">Q</div>
<div id="key-0002" class="key">W</div> <div id="key-0002" class="key">W</div>
<div id="key-0703" class="key">[</div> <div id="key-0703" class="key">[</div>
<div id="key-0702" class="key">]</div> <div id="key-0702" class="key">]</div>
<div id="key-0502" class="key btn150">BSpc</div> <div id="key-0502" class="key btn150">BSpc</div>
<br class="clear" />
</div>


<div class='keyboard-row'>
<div id="key-0303" class="key btn175">Ctrl</div> <div id="key-0303" class="key btn175">Ctrl</div>
<div id="key-0004" class="key">A</div> <div id="key-0004" class="key">A</div>
<div id="key-0003" class="key">S</div> <div id="key-0003" class="key">S</div>
<div id="key-0604" class="key">;</div> <div id="key-0604" class="key">;</div>
<div id="key-0704" class="key">'</div> <div id="key-0704" class="key">'</div>
<div id="key-0503" class="key btn225">Enter</div> <div id="key-0503" class="key btn225">Enter</div>
<br class="clear" />
</div>


<div class='keyboard-row'>
<div id="key-0304" class="key btn225">Shift</div> <div id="key-0304" class="key btn225">Shift</div>
<div id="key-0005" class="key">Z</div> <div id="key-0005" class="key">Z</div>
<div id="key-0006" class="key">X</div> <div id="key-0006" class="key">X</div>
<div id="key-0705" class="key">/</div> <div id="key-0705" class="key">/</div>
<div id="key-0505" class="key btn175">Shift</div> <div id="key-0505" class="key btn175">Shift</div>
<div id="key-0504" class="key">Fn</div> <div id="key-0504" class="key">Fn</div>
<br class="clear" />
</div>


<div class='keyboard-row'>
<div class="key spc150"></div> <div class="key spc150"></div>
<div id="key-0305" class="key">Sup</div> <div id="key-0305" class="key">Sup</div>
<div id="key-0306" class="key btn150">Alt</div> <div id="key-0306" class="key btn150">Alt</div>
<div id="key-0506" class="key">Sup</div> <div id="key-0506" class="key">Sup</div>
<div class="key spc150"></div> <div class="key spc150"></div>
<div class="key spc100"></div> <div class="key spc100"></div>
<br class="clear" />
</div>
<div class="Thank"></div>

</div>
</div> </div>




<!--
Keycodes
TODO: better align of buttons
-->
<h2>Keycodes</h2> <h2>Keycodes</h2>
<div id="keycode_tabs" class="keycode_tabs"> <div id="keycode_tabs" class="keycode_tabs">
<ul> <ul>
<button id="keymap-download" title="save file">Download</button> <button id="keymap-download" title="save file">Download</button>
<a id="hex-download" style="display:none" ></a> <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:</h3> <h3>Keymap Output:</h3>
<textarea id="keymap-output" rows="20" cols="80"></textarea> <textarea id="keymap-output" rows="20" cols="80"></textarea>
<br/> <br/>
<button id="keymap-json-generate" title="generate JSON">JSON</button> <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-source-generate" title="generate C source code">C source</button>
<button id="keymap-hex-generate" title="generate Hex">Hex</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> </body>
</html> </html>

+ 55
- 44
editor/hhkb/keyboard.css View File

html * {
font-family:helvetica, arial, sans-serif;
}

.key { .key {
-moz-box-shadow:inset -8px -10px 0px -3px #ffffff;
-webkit-box-shadow:inset -8px -10px 0px -3px #ffffff;
box-shadow:inset -8px -10px 0px -3px #ffffff;
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:2px solid #dcdcdc;
display:block;
float: left;
color:#777777;
font-family:helvetica, arial, sans-serif;
font-size:16px;
font-weight:bold;
text-decoration:none;
padding:4px 16px 16px 4px;
width: 24px;
height: 24px;
overflow: hidden;
margin: 1px;
-moz-box-shadow:inset -8px -10px 0px -3px #ffffff;
-webkit-box-shadow:inset -8px -10px 0px -3px #ffffff;
box-shadow:inset -8px -10px 0px -3px #ffffff;
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:2px solid #dcdcdc;
display:block;
float: left;
color:#777777;
font-family:helvetica, arial, sans-serif;
font-size:16px;
font-weight:bold;
text-decoration:none;
padding:4px 16px 16px 4px;
width: 24px;
height: 24px;
overflow: hidden;
margin: 0px 1px 1px 0px;
} }
.key:hover { .key:hover {
background-color:#dfdfdf;
background-color:#dfdfdf;
} }
.key:active { .key:active {
position:relative;
top:1px;
position:relative;
top:1px;
} }
.key-editing { .key-editing {
background-color:#b4b4b4;
position:relative;
top:2px;
background-color:#b4b4b4;
position:relative;
top:2px;
} }
/* This imageless css button was generated by CSSButtonGenerator.com */ /* This imageless css button was generated by CSSButtonGenerator.com */


*/ */
.btn100 { width:24px; } .btn100 { width:24px; }
.btn125 { width:36.5px; } .btn125 { width:36.5px; }
.btn150 { width:49px; }
.btn175 { width:61.5px; }
.btn150 { width:47.5px; }
.btn175 { width:60px; }
.btn200 { width:74px; } .btn200 { width:74px; }
.btn225 { width:86.5px; }
.btn225 { width:83px; }
.btn250 { width:99px; } .btn250 { width:99px; }
.btn275 { width:111.5px; } .btn275 { width:111.5px; }
.btn600 { width:274px; }
.btn625 { width:286.5px; }
.btn600 { width:259px; }
.btn625 { width:270px; }
.btn700 { width:324px; } .btn700 { width:324px; }


.spc100 { width:24px; visibility:hidden; } .spc100 { width:24px; visibility:hidden; }
.spc125 { width:36.5px; visibility:hidden; } .spc125 { width:36.5px; visibility:hidden; }
.spc150 { width:49px; visibility:hidden; }
.spc175 { width:61.5px; visibility:hidden; }
.spc150 { width:47.5px; visibility:hidden; }
.spc175 { width:60px; visibility:hidden; }
.spc200 { width 74px; visibility:hidden; } .spc200 { width 74px; visibility:hidden; }


.clear {
clear: left;
.keyboard-row {
width: auto;
display: inline-block;
} }


.keyboard {
width: 1000px;
overflow: nowrap;
font-size: 14px;
font-weight:bold;
.keyboard-outline {
} }


.keycode_tabs {
width: 600px;
overflow: auto;
font-size:14px;
.keyboard-pane {
width: 750px;
font-size: 14px;
font-weight:bold; font-weight:bold;
} }




.action { .action {
font-size:16px; font-size:16px;
font-weight:bold; font-weight:bold;
min-width: 30px; min-width: 30px;
} }


.keycode_tabs {
max-width: 750px;
overflow: auto;
font-size:14px;
font-weight:bold;
}



/* http://www.w3schools.com/cssref/css3_pr_resize.asp */ /* http://www.w3schools.com/cssref/css3_pr_resize.asp */
.resizable { .resizable {
resize: both; resize: both;

editor/hhkb/codes.js → editor/hhkb/keymap_editor.js View File

/* /*
function flatten(obj)
* Share URL
*/
function encode_keymap(keymap)
{ {
var a = [];
if (obj instanceof Array) {
return obj.map(function(e) {return flatten(e) ;});
} else {
return obj
return window.btoa(JSON.stringify(keymap));
}

function decode_keymap(hash)
{
try {
return JSON.parse(window.atob(hash));
} catch (err) {
return null;
} }
};
*/
}


/*
* Hex file
*/
function hexstr2(b) function hexstr2(b)
{ {
return ('0'+ b.toString(16)).substr(-2).toUpperCase(); return ('0'+ b.toString(16)).substr(-2).toUpperCase();
};
}


function hex_line(address, record_type, data) function hex_line(address, record_type, data)
{ {
return ":00000001FF\r\n"; return ":00000001FF\r\n";
} }


/*
function flatten(array)
{
};
*/

function hex_output(address, data) { function hex_output(address, data) {
var output = ''; var output = '';
var line = []; var line = [];
return output; return output;
} }




/*
* Source file
*/
function source_output(keymaps) { function source_output(keymaps) {
var output = ''; var output = '';
// fn actions // fn actions
return output; return output;
}; };


/* keycode to display */


/*
* keycodes
*/
var code_display = [ var code_display = [
// {id, name(text), description(tooltip)} // {id, name(text), description(tooltip)}
{id: 'NO ', name: 'NO', desc: 'No action'}, {id: 'NO ', name: 'NO', desc: 'No action'},
{id: 'RESERVED-238', name: 'RESERVED-238', desc: 'RESERVED-238'}, {id: 'RESERVED-238', name: 'RESERVED-238', desc: 'RESERVED-238'},
{id: 'RESERVED-239', name: 'RESERVED-239', desc: 'RESERVED-239'}, {id: 'RESERVED-239', name: 'RESERVED-239', desc: 'RESERVED-239'},
/* Mousekey */ /* Mousekey */
{id: 'MS_U', name: 'MS_UP', desc: 'MS_UP'},
{id: 'MS_D', name: 'MS_DOWN', desc: 'MS_DOWN'},
{id: 'MS_L', name: 'MS_LEFT', desc: 'MS_LEFT'},
{id: 'MS_R', name: 'MS_RIGHT', desc: 'MS_RIGHT'},
{id: 'BTN1', name: 'MS_BTN1', desc: 'MS_BTN1'},
{id: 'BTN2', name: 'MS_BTN2', desc: 'MS_BTN2'},
{id: 'BTN3', name: 'MS_BTN3', desc: 'MS_BTN3'},
{id: 'BTN4', name: 'MS_BTN4', desc: 'MS_BTN4'},
{id: 'BTN5', name: 'MS_BTN5', desc: 'MS_BTN5'},
{id: 'WH_U', name: 'MS_WH_UP', desc: 'MS_WH_UP'},
{id: 'WH_D', name: 'MS_WH_DOWN', desc: 'MS_WH_DOWN'},
{id: 'WH_L', name: 'MS_WH_LEFT', desc: 'MS_WH_LEFT'},
{id: 'WH_R', name: 'MS_WH_RIGHT', desc: 'MS_WH_RIGHT'},
{id: 'ACL0', name: 'MS_ACCEL0', desc: 'MS_ACCEL0'},
{id: 'ACL1', name: 'MS_ACCEL1', desc: 'MS_ACCEL1'},
{id: 'ACL2', name: 'MS_ACCEL2', desc: 'MS_ACCEL2'},
{id: 'MS_U', name: 'Mouse Up', desc: 'Mouse UP'},
{id: 'MS_D', name: 'Mouse down', desc: 'Mouse Down'},
{id: 'MS_L', name: 'Mouse left', desc: 'Mouse Left'},
{id: 'MS_R', name: 'Mouse right', desc: 'Mouse Right'},
{id: 'BTN1', name: 'Mouse Button1', desc: 'Mouse Button1'},
{id: 'BTN2', name: 'Mouse Button2', desc: 'Mouse Button2'},
{id: 'BTN3', name: 'Mouse Button3', desc: 'Mouse Button3'},
{id: 'BTN4', name: 'Mouse Button4', desc: 'Mouse Button4'},
{id: 'BTN5', name: 'Mouse Button5', desc: 'Mouse Button5'},
{id: 'WH_U', name: 'Wheel UP', desc: 'Wheel UP'},
{id: 'WH_D', name: 'Wheel DOWN', desc: 'Wheel DOWN'},
{id: 'WH_L', name: 'Wheel LEFT', desc: 'Wheel LEFT'},
{id: 'WH_R', name: 'Wheel RIGHT', desc: 'Wheel RIGHT'},
{id: 'ACL0', name: 'Mouse ACCEL0', desc: 'Mouse ACCEL0'},
{id: 'ACL1', name: 'Mouse ACCEL1', desc: 'Mouse ACCEL1'},
{id: 'ACL2', name: 'Mouse ACCEL2', desc: 'Mouse ACCEL2'},
]; ];

Write Preview
Loading…
Cancel
Save