From 895be29db445c29997cdc592816c2eaeed178a44 Mon Sep 17 00:00:00 2001 From: tmk Date: Sat, 7 Sep 2013 16:30:28 +0900 Subject: [PATCH] Add Share and Short URL --- editor/hhkb/MEMO.txt | 20 ++- editor/hhkb/index.html | 182 ++++++++++++++------- editor/hhkb/keyboard.css | 99 ++++++----- editor/hhkb/{codes.js => keymap_editor.js} | 77 ++++++--- 4 files changed, 247 insertions(+), 131 deletions(-) rename editor/hhkb/{codes.js => keymap_editor.js} (94%) diff --git a/editor/hhkb/MEMO.txt b/editor/hhkb/MEMO.txt index a72f8bb8..b381fb88 100644 --- a/editor/hhkb/MEMO.txt +++ b/editor/hhkb/MEMO.txt @@ -1,5 +1,18 @@ 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 tmk.github.io/tmk_editor/hhkb/? github pages @@ -20,8 +33,8 @@ TODO a.className = 'TE_link'; 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 action map support @@ -31,10 +44,9 @@ TODO Convert table? UI can use position of elemen placing. UI uses matrix posiotn for ID of element. - P load/save JSON X save hex(binary) - firmware + X firmware P load binary P Mass Storage or HID comm X fixed address for keymaps diff --git a/editor/hhkb/index.html b/editor/hhkb/index.html index 08e50014..879bcead 100644 --- a/editor/hhkb/index.html +++ b/editor/hhkb/index.html @@ -4,7 +4,7 @@ - + @@ -92,6 +92,13 @@ ], no_map(), no_map(), + + /* + no_map(), + no_map(), + no_map(), + no_map(), + */ ]; // TODO: define proper Fn actions: 32actions*2bytes @@ -107,32 +114,32 @@ // layer under editing 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() { // Title document.title = "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 @@ -143,12 +150,17 @@ $(".layer").click(function(ev, ui) { var layer = parseInt($(this).attr('id').match(/layer-(\d+)/)[1]); 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 $(".key").click(function(ev, ui) { editing_key = $(this).attr('id'); @@ -158,6 +170,8 @@ $(this).addClass("key-editing"); }); + + /* * Keycodes button tab */ @@ -192,10 +206,24 @@ 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 $("#keymap-download").click(function(ev, ui) { @@ -214,6 +242,13 @@ hex_link[0].click(); }); + + + /* + * Output options + */ + //$("#keymap-output").resizable(); // resizable textarea + // Hex output $("#keymap-hex-generate").click(function(ev, ui) { var keymap_data = fn_actions.concat(keymaps); @@ -234,6 +269,27 @@ $("#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.'; + }); + */ }); @@ -243,34 +299,37 @@

Instruction

How to edit keymap - +
    +
  1. Select layer
    2. +
  2. Select key to edit
    3. +
  3. Select keycode to assign to the key
    4. +
  4. Download firmware
    5. +
See this for detailed description of keymap.

Keyboard

-
- -
-
- - - - -
-
+
+
+
+ + + + + +
+
- - - + +
+
Esc
1
2
@@ -286,8 +345,9 @@ Keyboard keys
=
\
`
-
+
+
Tab
Q
W
@@ -302,8 +362,9 @@ Keyboard keys
[
]
BSpc
-
+
+
Ctrl
A
S
@@ -317,8 +378,9 @@ Keyboard keys
;
'
Enter
-
+
+
Shift
Z
X
@@ -332,8 +394,9 @@ Keyboard keys
/
Shift
Fn
-
+
+
Sup
Alt
@@ -342,14 +405,13 @@ Keyboard keys
Sup
-
+
+
+ +
-

Keycodes

    @@ -675,12 +737,20 @@ TODO: better align of buttons +

    Share URL:

    + +
    + + +

    Keymap Output:


    + + diff --git a/editor/hhkb/keyboard.css b/editor/hhkb/keyboard.css index 496ecc07..584aff61 100644 --- a/editor/hhkb/keyboard.css +++ b/editor/hhkb/keyboard.css @@ -1,36 +1,40 @@ +html * { + font-family:helvetica, arial, sans-serif; +} + .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 { - background-color:#dfdfdf; + background-color:#dfdfdf; } .key:active { - position:relative; - top:1px; + position:relative; + top:1px; } .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 */ @@ -44,39 +48,37 @@ */ .btn100 { width:24px; } .btn125 { width:36.5px; } -.btn150 { width:49px; } -.btn175 { width:61.5px; } +.btn150 { width:47.5px; } +.btn175 { width:60px; } .btn200 { width:74px; } -.btn225 { width:86.5px; } +.btn225 { width:83px; } .btn250 { width:99px; } .btn275 { width:111.5px; } -.btn600 { width:274px; } -.btn625 { width:286.5px; } +.btn600 { width:259px; } +.btn625 { width:270px; } .btn700 { width:324px; } .spc100 { width:24px; 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; } -.clear { - clear: left; +.keyboard-row { + width: auto; + display: inline-block; } -.keyboard { - width: 1000px; - overflow: nowrap; +.keyboard-outline { +} + +.keyboard-pane { + width: 750px; font-size: 14px; font-weight:bold; } -.keycode_tabs { - width: 600px; - overflow: auto; - font-size:14px; - font-weight:bold; -} + .action { font-size:16px; @@ -84,6 +86,15 @@ 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 */ .resizable { resize: both; diff --git a/editor/hhkb/codes.js b/editor/hhkb/keymap_editor.js similarity index 94% rename from editor/hhkb/codes.js rename to editor/hhkb/keymap_editor.js index 38c962ac..0ece491a 100644 --- a/editor/hhkb/codes.js +++ b/editor/hhkb/keymap_editor.js @@ -1,19 +1,27 @@ /* -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) { return ('0'+ b.toString(16)).substr(-2).toUpperCase(); -}; +} function hex_line(address, record_type, data) { @@ -43,6 +51,12 @@ function hex_eof() return ":00000001FF\r\n"; } +/* +function flatten(array) +{ +}; +*/ + function hex_output(address, data) { var output = ''; var line = []; @@ -62,6 +76,11 @@ function hex_output(address, data) { return output; } + + +/* + * Source file + */ function source_output(keymaps) { var output = ''; // fn actions @@ -143,7 +162,11 @@ function source_output(keymaps) { return output; }; -/* keycode to display */ + + +/* + * keycodes + */ var code_display = [ // {id, name(text), description(tooltip)} {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-239', name: 'RESERVED-239', desc: 'RESERVED-239'}, /* 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'}, ];