1
0

Add Share and Short URL

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

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

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

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,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;

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