di0ib/tmk_keyboard
1
0
Fork 0
Code Releases Activity

Add Share and Short URL

Browse Source
This commit is contained in:
tmk 2013-09-07 16:30:28 +09:00
parent bc8e13d0bf
commit 895be29db4
4 changed files with 247 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
editor/hhkb/MEMO.txt
View File

@ -1,5 +1,18 @@
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
@ -20,8 +33,8 @@ TODO
a.className = 'TE_link'; a.className = 'TE_link';
a.click() a.click()
keyboard key text css X keyboard key text css
align of wrapped text X align of wrapped text
edit action for FN key edit action for FN key
action map support action map support
@ -31,10 +44,9 @@ TODO
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

182
editor/hhkb/index.html
View File

@ -4,7 +4,7 @@
<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'>
@ -92,6 +92,13 @@
], ],
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
@ -107,32 +114,32 @@
// 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 * load keymap from URL hash
$(window).bind('beforeunload', function(){ */
return 'CAUTION: You will lost your change.'; 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
@ -143,12 +150,17 @@
$(".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');
@ -158,6 +170,8 @@
$(this).addClass("key-editing"); $(this).addClass("key-editing");
}); });
/* /*
* Keycodes button tab * Keycodes button tab
*/ */
@ -192,10 +206,24 @@
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) {
@ -214,6 +242,13 @@
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);
@ -234,6 +269,27 @@
$("#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>
@ -243,34 +299,37 @@
<h3>Instruction</h3> <h3>Instruction</h3>
How to edit keymap How to edit keymap
<ul> <ol>
<li>Select layer <li>Select layer</li>
<li>Select key to edit <li>Select key to edit</li>
<li>Select keycode to assign to the key <li>Select keycode to assign to the key</li>
<li>Download firmware <li>Download firmware</li>
</ul> </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"> <div id="keyboard-pane" class="keyboard-pane">
<!-- <form>
Layer selector <div id="layer_radio">
--> <input type="radio" name="radio" class="layer" id="layer-0"checked="checked" /><label for="layer-0">Layer 0</label>
<form> <input type="radio" name="radio" class="layer" id="layer-1"/><label for="layer-1">Layer 1</label>
<div id="layer_radio"> <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-0"checked="checked" /><label for="layer-0">Layer 0</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-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-4"/><label for="layer-4">Layer 4</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-5"/><label for="layer-5">Layer 5</label>
</div> <input type="radio" name="radio" class="layer" id="layer-6"/><label for="layer-6">Layer 6</label>
</form> <input type="radio" name="radio" class="layer" id="layer-7"/><label for="layer-7">Layer 7</label>
-->
</div>
</form>
<!-- TODO: set all key to NO or TRANS -->
<!-- TODO: copy layer -->
<!-- <!--
Keyboard keys 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>
@ -286,8 +345,9 @@ Keyboard keys
<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>
@ -302,8 +362,9 @@ Keyboard keys
<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>
@ -317,8 +378,9 @@ Keyboard keys
<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>
@ -332,8 +394,9 @@ Keyboard keys
<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>
@ -342,14 +405,13 @@ Keyboard keys
<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>
@ -675,12 +737,20 @@ TODO: better align of buttons
<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>

99
editor/hhkb/keyboard.css
View File

@ -1,36 +1,40 @@
html * {
font-family:helvetica, arial, sans-serif;
}
.key { .key {
-moz-box-shadow:inset -8px -10px 0px -3px #ffffff; -moz-box-shadow:inset -8px -10px 0px -3px #ffffff;
-webkit-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; box-shadow:inset -8px -10px 0px -3px #ffffff;
background-color:#ededed; background-color:#ededed;
-moz-border-radius:6px; -moz-border-radius:6px;
-webkit-border-radius:6px; -webkit-border-radius:6px;
border-radius:6px; border-radius:6px;
border:2px solid #dcdcdc; border:2px solid #dcdcdc;
display:block; display:block;
float: left; float: left;
color:#777777; color:#777777;
font-family:helvetica, arial, sans-serif; font-family:helvetica, arial, sans-serif;
font-size:16px; font-size:16px;
font-weight:bold; font-weight:bold;
text-decoration:none; text-decoration:none;
padding:4px 16px 16px 4px; padding:4px 16px 16px 4px;
width: 24px; width: 24px;
height: 24px; height: 24px;
overflow: hidden; overflow: hidden;
margin: 1px; margin: 0px 1px 1px 0px;
} }
.key:hover { .key:hover {
background-color:#dfdfdf; background-color:#dfdfdf;
} }
.key:active { .key:active {
position:relative; position:relative;
top:1px; top:1px;
} }
.key-editing { .key-editing {
background-color:#b4b4b4; background-color:#b4b4b4;
position:relative; position:relative;
top:2px; top:2px;
} }
/* This imageless css button was generated by CSSButtonGenerator.com */ /* This imageless css button was generated by CSSButtonGenerator.com */
@ -44,39 +48,37 @@
*/ */
.btn100 { width:24px; } .btn100 { width:24px; }
.btn125 { width:36.5px; } .btn125 { width:36.5px; }
.btn150 { width:49px; } .btn150 { width:47.5px; }
.btn175 { width:61.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; } .btn600 { width:259px; }
.btn625 { width:286.5px; } .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; } .spc150 { width:47.5px; visibility:hidden; }
.spc175 { width:61.5px; visibility:hidden; } .spc175 { width:60px; visibility:hidden; }
.spc200 { width 74px; visibility:hidden; } .spc200 { width 74px; visibility:hidden; }
.clear { .keyboard-row {
clear: left; width: auto;
display: inline-block;
} }
.keyboard { .keyboard-outline {
width: 1000px; }
overflow: nowrap;
.keyboard-pane {
width: 750px;
font-size: 14px; font-size: 14px;
font-weight:bold; font-weight:bold;
} }
.keycode_tabs {
width: 600px;
overflow: auto;
font-size:14px;
font-weight:bold;
}
.action { .action {
font-size:16px; font-size:16px;
@ -84,6 +86,15 @@
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;

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

@ -1,19 +1,27 @@
/* /*
function flatten(obj) * Share URL
*/
function encode_keymap(keymap)
{ {
var a = []; return window.btoa(JSON.stringify(keymap));
if (obj instanceof Array) { }
return obj.map(function(e) {return flatten(e) ;});
} else {
return obj
}
};
*/
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)
{ {
@ -43,6 +51,12 @@ function hex_eof()
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 = [];
@ -62,6 +76,11 @@ function hex_output(address, data) {
return output; return output;
} }
/*
* Source file
*/
function source_output(keymaps) { function source_output(keymaps) {
var output = ''; var output = '';
// fn actions // fn actions
@ -143,7 +162,11 @@ function source_output(keymaps) {
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'},
@ -472,20 +495,20 @@ var code_display = [
{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_U', name: 'Mouse Up', desc: 'Mouse UP'},
{id: 'MS_D', name: 'MS_DOWN', desc: 'MS_DOWN'}, {id: 'MS_D', name: 'Mouse down', desc: 'Mouse Down'},
{id: 'MS_L', name: 'MS_LEFT', desc: 'MS_LEFT'}, {id: 'MS_L', name: 'Mouse left', desc: 'Mouse Left'},
{id: 'MS_R', name: 'MS_RIGHT', desc: 'MS_RIGHT'}, {id: 'MS_R', name: 'Mouse right', desc: 'Mouse Right'},
{id: 'BTN1', name: 'MS_BTN1', desc: 'MS_BTN1'}, {id: 'BTN1', name: 'Mouse Button1', desc: 'Mouse Button1'},
{id: 'BTN2', name: 'MS_BTN2', desc: 'MS_BTN2'}, {id: 'BTN2', name: 'Mouse Button2', desc: 'Mouse Button2'},
{id: 'BTN3', name: 'MS_BTN3', desc: 'MS_BTN3'}, {id: 'BTN3', name: 'Mouse Button3', desc: 'Mouse Button3'},
{id: 'BTN4', name: 'MS_BTN4', desc: 'MS_BTN4'}, {id: 'BTN4', name: 'Mouse Button4', desc: 'Mouse Button4'},
{id: 'BTN5', name: 'MS_BTN5', desc: 'MS_BTN5'}, {id: 'BTN5', name: 'Mouse Button5', desc: 'Mouse Button5'},
{id: 'WH_U', name: 'MS_WH_UP', desc: 'MS_WH_UP'}, {id: 'WH_U', name: 'Wheel UP', desc: 'Wheel UP'},
{id: 'WH_D', name: 'MS_WH_DOWN', desc: 'MS_WH_DOWN'}, {id: 'WH_D', name: 'Wheel DOWN', desc: 'Wheel DOWN'},
{id: 'WH_L', name: 'MS_WH_LEFT', desc: 'MS_WH_LEFT'}, {id: 'WH_L', name: 'Wheel LEFT', desc: 'Wheel LEFT'},
{id: 'WH_R', name: 'MS_WH_RIGHT', desc: 'MS_WH_RIGHT'}, {id: 'WH_R', name: 'Wheel RIGHT', desc: 'Wheel RIGHT'},
{id: 'ACL0', name: 'MS_ACCEL0', desc: 'MS_ACCEL0'}, {id: 'ACL0', name: 'Mouse ACCEL0', desc: 'Mouse ACCEL0'},
{id: 'ACL1', name: 'MS_ACCEL1', desc: 'MS_ACCEL1'}, {id: 'ACL1', name: 'Mouse ACCEL1', desc: 'Mouse ACCEL1'},
{id: 'ACL2', name: 'MS_ACCEL2', desc: 'MS_ACCEL2'}, {id: 'ACL2', name: 'Mouse ACCEL2', desc: 'Mouse ACCEL2'},
]; ];