Archives
/
keyboard-layout-editor
mirror of https://github.com/ijprest/keyboard-layout-editor
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'iandoug-master'

Browse Source
pull/139/head
Ian Prest 9 years ago
parent 7072201394 8d0c2c900b
commit 248bac695a
7 changed files with 281 additions and 23 deletions
Show Stats Download Patch File Download Diff File

74
kb.css
Unescape Escape View File

@ -92,7 +92,7 @@ html, body {
#keyboard .selected .keyborder, #keyboard .selected .decal .keyborder { border-color: red !important; border-style: solid; }
#keyboard .ghosted { opacity: 0.5; }
#keyboard .decal .keyborder { border-style: none !important; background: transparent !important; }
#keyboard .hover .decal .keyborder,
#keyboard .hover .decal .keyborder,
#keyboard .selected .decal .keyborder { border-style: dashed !important; border-width: 1px; }
/* Key labels */
@ -294,7 +294,7 @@ for i in (1..9) {
/* Combining rectangle glyph */
.combine-rect:before {
content: '\25AD';
font-style: normal;
font-style: normal;
/*margin: 0 -0.66em 0 -0.33em;*/
}
@ -372,3 +372,73 @@ table.summarytable th, table.summarytable td {
padding: 2px 5px;
}
settings-key(size, adjust = 0) {
position: relative;
width: size px;
height: size px;
float: left;
outerPad = 6
innerPad = 3
innerSize = (size - outerPad * 2)
labelSize = (innerSize - innerPad * 2)
& .keyborder {
position: absolute;
width: size px;
height: size px;
border-style: solid;
border-width: 1px;
border-color: black;
border-radius: 5px;
background-color: #cccccc;
pointer-events: none;
}
& .keylabels {
position: absolute;
left: outerPad px;
top: 3px;
width: innerSize px;
height: (innerSize - adjust) px;
padding: innerPad px;
border-style: solid;
border-width: 1px;
border-color: rgba(0,0,0,0.1);
background-color: #fcfcfc;
border-radius: 3px;
pointer-events: none;
}
& .keylabel {
position: absolute;
width: labelSize px;
height: (labelSize - adjust) px;
pointer-events: none;
}
& .keylabel div {
position: absolute;
width: labelSize px;
max-width: labelSize px;
height: (labelSize - adjust) px;
pointer-events: none;
}
& .keylabel div * {
pointer-events: all;
}
}
#label-move-src, #label-move-dst {
settings-key(108, 8);
.keylabel9, .keylabel10, .keylabel11 { overflow: visible; }
input { z-index: 1; }
}
#text-align {
settings-key(108);
.keylabel button {
display: inline-block;
font-size: 16px;
width: 28px;
z-index: 1;
float: none;
}
}

77
kb.html
Unescape Escape View File

@ -47,8 +47,8 @@ All rights reserved.
118 : 'showOptions($event)',
'ctrl-83' : 'save($event)' }">
<style type="text/css" ng-bind-html="customStyles"></style>
<div id='body_all'><!-- this wrapper is to allow the magic that prints just the summary -->
<div id="wrap">
<div id='body_all'><!-- this wrapper is to allow the magic that prints just the summary -->
<!--***********************************************
Nav Bar / Header
************************************************-->
@ -86,8 +86,8 @@ Nav Bar / Header
<a class="dropdown-toggle" dropdown-toggle><i class="fa fa-th"></i> Color Swatches <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-repeat="pal in palettes"><a ng-click="loadPalette(pal)" href="#">{{pal.name}}</a></li>
<li class="divider"></li>
<li><a ng-click="makePaletteFromKeys()" href="#">Current key colors</a></li>
<li class="divider"></li>
<li><a ng-click="makePaletteFromKeys()" href="#">Current key colors</a></li>
</ul>
</li>
@ -262,6 +262,7 @@ Nav Bar / Header
<li ng-class="{active:selTab==3}"><a ng-click="selTab=3" data-toggle="tab"><i class="fa fa-file-text-o"></i> Custom Styles</a></li>
<li ng-class="{active:selTab==2}"><a ng-click="selTab=2" data-toggle="tab"><i class="fa fa-code"></i> Raw data</a></li>
<li ng-class="{active:selTab==4}"><a ng-click="selTab=4" data-toggle="tab"><i class="fa fa-file-text-o"></i> Summary</a></li>
<li ng-class="{active:selTab==5}"><a ng-click="selTab=5" data-toggle="tab"><i class="fa fa-wrench"></i> Tools</a></li>
</ul>
<div id="tab-content" class='col-md-12 col-lg-12 row' ui-keydown="{esc:'focusKb()'}" ng-cloak>
@ -835,7 +836,73 @@ Nav Bar / Header
<br><button type="button" class="btn btn-success" ng-click="printDiv('printSummary')"><i class="fa fa-print"></i> Print summary</button>
</div>
</div>
</div>
<div id="tools" ng-class="{hidden:selTab!=5}">
<div class="col-md-4 col-lg-4 row">
<h5>Remove Legends:</h5>
<div class="form-group form-group-sm form-horizontal">
<div ng-repeat="button in removeLegendsButtons" class="btn-group btn-group-xs" style="margin-right: 3px;" role="group">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="{{button.tooltip}}" ng-click="removeLegends(button)">{{button.label}}</button>
</div>
</div>
<h5>Misc:</h5>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Convert decals back into normal keys." ng-click="unhideDecals()"> Unhide decals</button>
</div>
</div>
<div class="col-md-2 col-lg-2 row">
<h5>Align Legends:</h5>
<div class="keycap" id="text-align">
<div class="keyborder"></div>
<div class="keylabels">
<div ng-repeat="(i,button) in alignLegendsButtons" class="keylabel keylabel{{i}}">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-success" ng-click="alignLegends(button.flags)" ng-bind-html="button.label"></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 row">
<h5>Move Legends:</h5>
<form>
<div class="keycap" id="label-move-src">
<div class="keyborder"></div>
<div class="keylabels">
<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9,10,11]" class="keylabel keylabel{{i}}">
<div><input type='radio' name='fromId' ng-model="$parent.moveFromId" ng-value='i'></div>
</div>
</div>
</div>
<div style="float:left;margin-top:40px;">&nbsp;<i class="fa fa-arrow-right"></i>&nbsp;</div>
<div class="keycap" id="label-move-dst">
<div class="keyborder"></div>
<div class="keylabels">
<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9,10,11]" class="keylabel keylabel{{i}}">
<div><input type='radio' name='toId' ng-model="$parent.moveToId" ng-value='i'></div>
</div>
</div>
</div>
&nbsp;
<button type="button" class="btn btn-success hint--top hint--rounded" data-hint="Move the legends in the From spot to the To spot." ng-click="moveSingleLegends()">Go</button>
</form>
</div>
<div class="col-md-4 col-lg-4 row">
<alert type="warning" style="margin-top:10px; margin-right:15px;" ng-hide="toolsAlertHidden" close="toolsAlertHidden = true">
<i class="fa fa-info-circle"></i> All tools will affect the selected keys only; if no keys are selected, tools will affect all keys.
</alert>
</div>
</div>
</div> <!-- END OF TAB CONTENT -->
<div class="col-md-12 col-lg-12 row" style="margin-top:1em;margin-left:0px;">
<alert type="success" ng-hide="!saved" close="saved=false" ng-cloak>
@ -853,8 +920,8 @@ Nav Bar / Header
</alert>
</div>
</div>
</div> <!-- body -->
</div> <!-- body_all -->
</div> <!-- wrap -->
<!--***********************************************

141
kb.js
Unescape Escape View File

@ -280,11 +280,11 @@
thisk += key.width + " x " + key.height;
if(!key.decal) {
var foo = key.color; // next line refused to work with key.color.
var colourname = reverseColors[foo];
var colourname = reverseColors[foo];
if(!colourname) { // not a defined name
colourname = "";
}
thisk += " " + colourname + " (" + key.color + ")";
thisk += " " + colourname + " (" + key.color + ")";
}
if(kcounts[thisk]) {
kcounts[thisk]++;
@ -327,17 +327,128 @@
};
// for printing the summary only. Modified from http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only/7532581#7532581 answered Feb 27 '14 at 17:47
$scope.printDiv = function(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("summary_print").innerHTML = printContents;
document.getElementById("body_all").style.display = "none";
document.getElementById("summary_print").style.display = "";
window.print();
document.getElementById("summary_print").innerHTML = "";
document.getElementById("body_all").style.display = "";
document.getElementById("summary_print").style.display = "none";
};
$scope.printDiv = function(divName) {
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("summary_print").innerHTML = printContents;
document.getElementById("body_all").style.display = "none";
document.getElementById("summary_print").style.display = "";
window.print();
document.getElementById("summary_print").innerHTML = "";
document.getElementById("body_all").style.display = "";
document.getElementById("summary_print").style.display = "none";
};
$scope.removeLegendsButtons = [
{ label: "All", re: /.*/, tooltip: "Remove all the legends from all the keys. Does not remove decals." },
{ label: "Alphas", re: /^[A-Za-z]$/, tooltip: "Remove the legends from all the Alphabetical keys." },
{ label: "Numbers", re: /^[0-9]*$/, tooltip: "Remove the legends from all the Number keys." },
{ label: "Punctuation", re: /^[\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$/, tooltip: "Remove the legends from all the Punctuation keys." },
{ label: "Function", re: /F\d\d?/, tooltip: "Remove the legends from all the Function keys." },
{ label: "Specials", re: /<.*>/, tooltip: "Remove the special legends, like FontAwesome, WebFont, images, etc, and anything between them in the same slot." },
{ label: "Others", re: /^[^A-Za-z0-9\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$|^[A-Za-z\s][A-Za-z\s]+$|\&\#.*|\&.*?;/, tooltip: "Remove the legends from (almost) all the other keys except decals." },
{ label: "Decals", re: /.*/, decals: true, tooltip: "Remove the legends from all the Decals." },
];
$scope.removeLegends = function(button) {
var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
transaction("remove-legends", function() {
angular.forEach(keys, function(key) {
if(key.decal === (!!button.decals)) {
for(var i=0; i<12; i++) {
if(key.labels[i]) {
update(key,"labels",key.labels[i].replace(button.re,''),i); // should we wipe the textSize and textColor too?
renderKey(key);
}
}
}
});
});
};
var align = { hmask:0x0f, hcenter:0x00, left:0x01, right:0x02, vmask:0xf0, vcenter:0x00, top:0x10, bottom:0x20, center:0x00, };
$scope.alignLegendsButtons = [
{ label: "&#8598;", flags: align.left | align.top },
{ label: "&#8593;", flags: align.hcenter | align.top },
{ label: "&#8599;", flags: align.right | align.top },
{ label: "&#8592;", flags: align.left | align.vcenter },
{ label: "&#9679;", flags: align.hcenter | align.vcenter },
{ label: "&#8594;", flags: align.right | align.vcenter },
{ label: "&#8601;", flags: align.left | align.bottom },
{ label: "&#8595;", flags: align.hcenter | align.bottom },
{ label: "&#8600;", flags: align.right | align.bottom },
];
function moveLabel(key, from, to) {
key.labels[to] = key.labels[from];
key.labels[from] = '';
key.textColor[to] = key.textColor[from];
key.textColor[from] = '';
key.textSize[to] = key.textSize[from];
key.textSize[from] = 0;
}
function alignSingleRow(key, flags, left, middle, right) {
var render = false;
switch(flags) {
case align.left:
if(!key.labels[left]) { render = true; moveLabel(key, middle, left); moveLabel(key, right, middle); }
if(!key.labels[left]) { render = true; moveLabel(key, middle, left); }
break;
case align.right:
if(!key.labels[right]) { render = true; moveLabel(key, middle, right); moveLabel(key, left, middle); }
if(!key.labels[right]) { render = true; moveLabel(key, middle, right); }
break;
case align.hcenter:
if(key.labels[left] && !key.labels[middle] && !key.labels[right]) { render = true; moveLabel(key, left, middle); }
if(key.labels[right] && !key.labels[middle] && !key.labels[left]) { render = true; moveLabel(key, right, middle); }
break;
}
return render;
}
$scope.alignLegends = function(flags) {
var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
transaction("align-legends", function() {
angular.forEach(keys, function(key) {
if(!key.decal) {
var render = false;
for(var i = 0; i < 12; i += 3) // horizontal alignment
render = alignSingleRow(key, flags & align.hmask, i, i+1, i+2) || render;
for(var i = 0; i < 3; i += 1) // vertical alignment
render = alignSingleRow(key, (flags & align.vmask) >> 4, i, i+3, i+6) || render;
if(render) renderKey(key);
}
});
});
};
$scope.unhideDecals = function() {
var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
transaction("unhide-decals", function() {
angular.forEach(keys, function(key) {
if(key.decal) {
update(key,'decal',false);
renderKey(key);
}
});
});
};
$scope.moveFromId = null;
$scope.moveToId = null;
$scope.moveSingleLegends = function() {
var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
if($scope.moveFromId >= 0 && $scope.moveToId >= 0) {
transaction("move-legends", function() {
angular.forEach(keys, function(key) {
if(!key.decal && key.labels[$scope.moveFromId] && !key.labels[$scope.moveToId]) {
moveLabel(key, $scope.moveFromId, $scope.moveToId);
renderKey(key);
}
});
});
}
};
// Helper function to select a single key
function selectKey(key,event) {
if(key) {
@ -427,14 +538,14 @@
var reverseColors = {}; // array to provide fast reverse lookups of colour names for Summary.
// might be an issue if a colour features twice... only last will stick
// The set of known palettes
// The set of known palettes
$scope.palettes = {};
$http.get('colors.json').success(function(data) {
$scope.palettes = data;
$scope.palettes.forEach(function(palette) {
palette.colors.forEach(function(color) {
color.css = $color.sRGB8(color.r,color.g,color.b).hex();
reverseColors[color.css] = palette.name + " " + color.name;
reverseColors[color.css] = palette.name + " " + color.name;
});
});
});

12
switches.json
Unescape Escape View File

@ -1,5 +1,8 @@
{
"cherry": { "mount": "cherry", "name": "Cherry MX Mount", "brands": {
"aula": { "brand": "aula", "name": "AULA (HiDeep Inc.)", "switches": {
"Blue": { "part": "Blue", "name": "AULA Blue", "feel": "clicky", "weight": 50 }
}},
"cherry": { "brand": "cherry", "name": "Cherry Electrical Products", "switches": {
"MX1A-A1xx": { "part": "MX1A-A1xx", "name": "MX White", "feel": "clicky", "weight": 70 },
"MX1A-11xx": { "part": "MX1A-11xx", "name": "MX Black", "feel": "linear", "weight": 60 },
@ -55,6 +58,13 @@
"PG151101D64/D10": { "part": "PG151101D64/D10", "name": "Kailh Blue", "feel": "clicky", "weight": 60 },
"PG151101D49/D09": { "part": "PG151101D49/D09", "name": "Kailh Brown", "feel": "tactile", "weight": 55 },
"PG151101D05/D43": { "part": "PG151101D05/D43", "name": "Kailh Red", "feel": "linear", "weight": 50 }
}},
"nimxo": { "brand": "nimxo", "name": "NIMXO (Ni Mosuo)", "switches": {
"Gray": { "part": "Gray", "name": "NIMXO Gray", "feel": "clicky", "weight": 60 }
}},
"razor": { "brand": "razor", "name": "Razor Inc.", "switches": {
"Green": { "part": "Green", "name": "Razor Green", "feel": "clicky", "weight": 50 },
"Orange": { "part": "Orange", "name": "Razor Orange", "feel": "tactile", "weight": 45 }
}}
}},
"alps": { "mount": "alps", "name": "Alps Mount", "brands": {
@ -68,4 +78,4 @@
"PG155B01": { "part": "PG155B01", "name": "Quiet Click", "feel": "tactile", "weight": 60 }
}}
}}
}
}

BIN
tests/screenshots/gb-ccng.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

BIN
tests/screenshots/gb-retro-dsa.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 107 KiB

BIN
tests/screenshots/stealth-black.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 57 KiB

Write Preview
Loading…
Cancel
Save