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
Split 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

@@ -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

+ 128
- 58
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" />
<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="codes.js"></script>
<script src="keymap_editor.js"></script>
<script src="firmware.js"></script>
<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(),
*/
];

// 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.';
});
*/
});
</script>
</head>
@@ -243,34 +299,37 @@

<h3>Instruction</h3>
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.

<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-0300" class="key">1</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-0500" 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-0001" class="key">Q</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-0702" class="key">]</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-0004" class="key">A</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-0704" class="key">'</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-0005" class="key">Z</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-0505" class="key btn175">Shift</div>
<div id="key-0504" class="key">Fn</div>
<br class="clear" />
</div>

<div class='keyboard-row'>
<div class="key spc150"></div>
<div id="key-0305" class="key">Sup</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 class="key spc150"></div>
<div class="key spc100"></div>
<br class="clear" />
</div>
<div class="Thank"></div>

</div>
</div>


<!--
Keycodes
TODO: better align of buttons
-->
<h2>Keycodes</h2>
<div id="keycode_tabs" class="keycode_tabs">
<ul>
@@ -675,12 +737,20 @@ TODO: better align of buttons
<button id="keymap-download" title="save file">Download</button>
<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>
<textarea id="keymap-output" rows="20" cols="80"></textarea>
<br/>
<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-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>
</html>

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

@@ -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,46 +48,53 @@
*/
.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;
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;
}



.action {
font-size:16px;
font-weight:bold;
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;

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 = [];
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'},
];

Write Preview
Loading…
Cancel
Save