Add Share and Short URL
This commit is contained in:
tmk
parent
bc8e13d0bf
commit
895be29db4
@ -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
|
||||
|
||||
@ -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,20 +114,8 @@
|
||||
// layer under editing
|
||||
var editing_layer = 0;
|
||||
|
||||
$(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 on keyboard key buttons
|
||||
var load_keymap = function(layer, keymap) {
|
||||
var load_keymap_on_keyobard = function(layer, keymap) {
|
||||
for (var row in keymap) {
|
||||
for (var col in keymap[row]) {
|
||||
var code = keymap[row][col];
|
||||
@ -131,8 +126,20 @@
|
||||
}
|
||||
};
|
||||
|
||||
// load default keymap on startup
|
||||
load_keymap(0, keymaps[0]);
|
||||
$(function() {
|
||||
// Title
|
||||
document.title = "TMK Keymap Editor for " + KEYBOARD_ID;
|
||||
$("#page-title").text("TMK Keymap Editor for " + KEYBOARD_ID);
|
||||
|
||||
/*
|
||||
* load keymap from URL hash
|
||||
*/
|
||||
var decoded = decode_keymap(document.location.hash.substring(1));
|
||||
if (decoded != null) {
|
||||
keymaps = decoded['keymaps'];
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* 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="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>
|
||||
</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-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>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
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;
|
||||
@ -18,7 +22,7 @@
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
margin: 1px;
|
||||
margin: 0px 1px 1px 0px;
|
||||
}
|
||||
.key:hover {
|
||||
background-color:#dfdfdf;
|
||||
@ -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;
|
||||
|
||||
@ -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'},
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user