Skip to content

Commit

Permalink
Misc changes, mostly for per-key switch type
Browse files Browse the repository at this point in the history 
-- Switches.json -> now using hash for "switches" for easy lookup
-- Serialization changed so that we use "" for default switch types, and
this round-trips properly.
-- Had to switch from <select> to bootstrap-style dropdowns; when I
started trying to handle the 'default' settings better (i.e., when the
per-key setting was blank), Angular was throwing errors using the
<select> element.
-- Changing switch mount blanks out brand/type, etc.
-- Now disabling switch mount/brand/type controls when appropriate
-- PNG rendering now only doing #keyboard-bg, which allows me to make
#keyboard full-width again.
  • Loading branch information
Ian Prest committed Aug 11, 2015
1 parent 319fbde commit 5b972cf
Show file tree
Hide file tree
Showing 6 changed files with 166 additions and 126 deletions.
2 changes: 1 addition & 1 deletion extensions.js
View file
Expand Up @@ -112,7 +112,7 @@
};

// Polyfill for HTMLCanvasElement.toBlob, which is currently only available on Firefox
if (!HTMLCanvasElement.prototype.toBlob) {
if (typeof(HTMLCanvasElement) !== 'undefined' && !HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
Expand Down
29 changes: 29 additions & 0 deletions kb.css
View file
Expand Up @@ -308,3 +308,32 @@ for i in (1..9) {
line-height: 1.5;
border-radius: 3px;
}


.dropdown-fixedwidth {
width:110px;
max-width:110px;
height: 26px;
}
.dropdown-fixedwidth>:first-child {
display: block;
left: 5px;
width: calc(100% - 12px);
text-align: left;
overflow: hidden;
}
.dropdown-fixedwidth .caret {
display: block;
position: absolute;
right: 5px;
top: 11px;
}

.dropdown-select {
max-height: 40vh;
overflow-y: auto;
}

.dropdown-fixedwidth:disabled {
background-color: #eee !important;
}
95 changes: 51 additions & 44 deletions kb.html
View file
Expand Up @@ -193,7 +193,7 @@
<!--***********************************************
Main Keyboard Preview/Editor area
************************************************-->
<div id="keyboard" ng-cloak tabindex="0" style="width:{{kbWidth+30}}px; border:0"
<div id="keyboard" ng-cloak tabindex="0"
ui-keydown="{ left:'moveKeys(-moveStep,0,$event)',
right:'moveKeys(moveStep,0,$event)',
up:'moveKeys(0,-moveStep,$event)',
Expand Down Expand Up @@ -475,43 +475,48 @@

<!-- Keyswitch options-->
<div class="form-group form-group-sm">
<label class="control-label col-md-3 col-lg-3 text-nowrap" for="thisswitcheditor">Switch:</label>

<!-- Keyswitch style-->
<label class="control-label col-md-3 col-lg-3 text-nowrap" for="switcheditor">Switch:</label>
<div class="form-inline form-outdent col-md-9 col-lg-9">
<div class="hint--top hint--rounded" data-hint="Specify the style of switch for this key.">
<select id="thisswitcheditor" class="form-control input-sm dropdown"
ng-model="multi.sm"
ng-change="updateMulti('sm')"
ng-blur="validateMulti('sm')">
<option value="">Mount Style Not Specified</option>
<option ng-repeat="(k,v) in switches" value="{{k}}" ng-selected="multi.sm == k">{{v.name}}</option>
</select>

<!-- Keyswitch mount style-->
<div class="hint--bottom hint--rounded" data-hint="Specify the mount style of switch for this key.">
<div class="btn-group btn-group-sm-form dropup" dropdown>
<button id="switcheditor" type="button" class="btn btn-default dropdown-toggle dropdown-fixedwidth" ng-disabled="selectedKeys.length<1 || multi.decal" dropdown-toggle>
<div>{{(multi.sm || meta.switchMount) ? switches[multi.sm || meta.switchMount].name : 'Mount N/A'}}</div>
<b class="caret"></b>
</button>
<ul class="dropdown-menu dropdown-select" role="menu">
<li ng-repeat="(k,v) in switches"><a ng-click="setMulti('sm',k)">{{v.name + (meta.switchMount===k ? ' (default)' : '')}}</a></li>
</ul>
</div>
</div>

<!-- Keyswitch brand-->
<div class="hint--top hint--rounded"
data-hint="Specify the default brand of key switch for this key.">
<select class="form-control input-sm dropdown"
ng-model="multi.sb"
ng-change="updateMulti('sb')"
ng-blur="validateMulti('sb')">
<option value="">Brand Not Specified</option>
<option ng-repeat="(k,v) in switches[multi.sm].brands" value="{{k}}" ng-selected="multi.sb == k">{{v.name}}</option>
</select>
<div class="hint--bottom hint--rounded" data-hint="Specify the brand of key switch for this key.">
<div class="btn-group btn-group-sm-form dropup" dropdown>
<button type="button" class="btn btn-default dropdown-toggle dropdown-fixedwidth" dropdown-toggle ng-disabled="selectedKeys.length<1 || !(multi.sm || meta.switchMount) || multi.decal">
<div>{{(multi.sb || meta.switchBrand) ? switches[multi.sm || meta.switchMount].brands[multi.sb || meta.switchBrand].name : 'Brand N/A'}}</div>
<b class="caret"></b>
</button>
<ul class="dropdown-menu dropdown-select" role="menu">
<li ng-repeat="(k,v) in switches[multi.sm || meta.switchMount].brands"><a ng-click="setMulti('sb',k)">{{v.name + (meta.switchBrand===k ? ' (default)' : '')}}</a></li>
</ul>
</div>
</div>

<!-- Keyswitch type-->
<div class=" hint--top hint--rounded"
data-hint="Specify the default type of key switch for this key.">
<select class="form-control input-sm dropdown"
ng-model="multi.st"
ng-change="updateMulti('st')"
ng-blur="validateMulti('st')">
<option value="">Switch Type Not Specified</option>
<option ng-repeat="v in switches[multi.sb].brands[multi.sb].switches" value="{{v.part}}" ng-selected="multi.st == v.part">{{v.name + (v.feel ? ', '+v.feel : '') + (v.weight ? ', '+v.weight.toString()+' cN' : '')}}</option>
</select>
<div class="hint--bottom hint--rounded" data-hint="Specify the type of key switch for this key.">
<div class="btn-group btn-group-sm-form dropup" dropdown>
<button type="button" class="btn btn-default dropdown-toggle dropdown-fixedwidth" dropdown-toggle ng-disabled="selectedKeys.length<1 || !(multi.sm || meta.switchMount) || !(multi.sb || meta.switchBrand) || multi.decal">
<div>{{(multi.st || meta.switchType) ? switches[multi.sm || meta.switchMount].brands[multi.sb || meta.switchBrand].switches[multi.st || meta.switchType].name : 'Switch N/A'}}</div>
<b class="caret"></b>
</button>
<ul class="dropdown-menu dropdown-select" role="menu">
<li ng-repeat="(k,v) in switches[multi.sm || meta.switchMount].brands[multi.sb || meta.switchBrand].switches"><a ng-click="setMulti('st',k)">{{v.name + (v.feel ? ', '+v.feel : '') + (v.weight ? ', '+v.weight.toString()+' cN' : '') + (meta.switchType===k ? ' (default)' : '')}}</a></li>
</ul>
</div>
</div>

</div>
</div>

Expand Down Expand Up @@ -601,7 +606,7 @@
<div class="input-group input-group-sm hint--top hint--rounded" data-hint="Specify the background texture for the keyboard.">
<div class="btn-group btn-group-sm-form" dropdown>
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>{{meta.background ? meta.background.name : 'No Texture'}} <b class="caret"></b></button>
<ul class="dropdown-menu" role="menu" style="max-height:40vh;overflow-y:scroll;">
<ul class="dropdown-menu dropdown-select" role="menu">
<li><a ng-click='setBackground()'>None</a></li>
<li class="divider"></li>
<li ng-repeat="category in backgrounds">
Expand All @@ -617,7 +622,7 @@

<!-- Corner radii -->
<div class="form-group form-group-sm">
<label class="control-label text-nowrap" for="kbdradiieditor">Radii:</label>
<label class="control-label text-nowrap" style='margin-left: 5px;' for="kbdradiieditor">Radii:</label>

<div class="hint--top hint--rounded"
data-hint="Specify the corner radii for this keyboard, in CSS3 format.
Expand Down Expand Up @@ -664,12 +669,12 @@

<!-- Default keyswitch options-->
<div class="form-group form-group-sm">
<label class="control-label col-md-2 col-lg-1 text-nowrap" for="switcheditor">Default switch:</label>
<label class="control-label col-md-2 col-lg-1 text-nowrap" for="defaultswitcheditor">Default switch:</label>

<!-- Default keyswitch style-->
<!-- Default keyswitch mount style-->
<div class="form-inline form-outdent col-md-10 col-lg-11">
<div class="hint--top hint--rounded" data-hint="Specify the default style of switch for this keyboard layout.">
<select id="switcheditor" class="form-control input-sm dropdown"
<div class="hint--top hint--rounded" data-hint="Specify the default mount style of switch for this keyboard layout.">
<select id="defaultswitcheditor" class="form-control input-sm dropdown"
ng-model="meta.switchMount"
ng-change="updateMeta('switchMount')"
ng-blur="validateMeta('switchMount')">
Expand All @@ -684,7 +689,8 @@
<select class="form-control input-sm dropdown"
ng-model="meta.switchBrand"
ng-change="updateMeta('switchBrand')"
ng-blur="validateMeta('switchBrand')">
ng-blur="validateMeta('switchBrand')"
ng-disabled="!meta.switchMount">
<option value="">Brand Not Specified</option>
<option ng-repeat="(k,v) in switches[meta.switchMount].brands" value="{{k}}" ng-selected="meta.switchBrand == k">{{v.name}}</option>
</select>
Expand All @@ -696,30 +702,31 @@
<select class="form-control input-sm dropdown"
ng-model="meta.switchType"
ng-change="updateMeta('switchType')"
ng-blur="validateMeta('switchType')">
ng-blur="validateMeta('switchType')"
ng-disabled="!meta.switchMount || !meta.switchBrand">
<option value="">Switch Type Not Specified</option>
<option ng-repeat="v in switches[meta.switchMount].brands[meta.switchBrand].switches" value="{{v.part}}" ng-selected="meta.switchType == v.part">{{v.name + (v.feel ? ', '+v.feel : '') + (v.weight ? ', '+v.weight.toString()+' cN' : '')}}</option>
</select>
</div>

<!-- Switch mounting -->
<div class="form-group form-group-sm form-horizontal">
<label class="control-label text-nowrap" for="pcb">Mounted on:</label>
<label class="control-label text-nowrap" style='margin-left: 5px;' for="pcb">Mounted on:</label>
<div class="checkbox hint--top hint--rounded" data-hint="Specify if the switches are PCB mounted.">
<label>
<label style='margin-bottom: -3px;'>
<input type="checkbox" id="pcb" class="checkbox"
ng-model="meta.pcb"
ng-change="updateMeta('pcb')"
ng-blur="validateMeta('pcb')" field="pcb">
ng-blur="validateMeta('pcb')">
PCB
</label>
</div>
<div class="checkbox hint--top hint--rounded" data-hint="Specify if the switches are plate mounted.">
<label>
<label style='margin-bottom: -3px;'>
<input type="checkbox" id="plate" class="checkbox"
ng-model="meta.plate"
ng-change="updateMeta('plate')"
ng-blur="validateMeta('plate')" field="plate">
ng-blur="validateMeta('plate')">
Plate
</label>
</div>
Expand Down
11 changes: 9 additions & 2 deletions kb.js
View file
Expand Up @@ -194,7 +194,7 @@
saveAs(blob, "keyboard-layout.svg");
};
$scope.downloadPng = function() {
html2canvas($("#keyboard"), {
html2canvas($("#keyboard-bg"), {
useCORS: true,
onrendered: function(canvas) {
canvas.toBlob(function(blob) {
Expand Down Expand Up @@ -554,7 +554,7 @@
}
};

// Validate a key's property values (in the case of an array property, only validates a single value)
// Validate a key's property values
function validate(key,prop,value) {
var v = {
_ : function() { return value; },
Expand Down Expand Up @@ -599,6 +599,9 @@
ghost : function() { if(!key.decal) key[prop] = value; },
decal : function() { key[prop] = value; key.x2 = key.y2 = 0; key.width2 = key.width; key.height2 = key.height; key.nub = key.stepped = key.ghost = false; },
rotation_angle : function() { key.rotation_angle = value; key.rotation_x = $scope.multi.rotation_x; key.rotation_y = $scope.multi.rotation_y; },
sm : function() { if(value===$scope.meta.switchMount) value=''; if(value != key.sm) { key.sm = value; key.sb = key.st = ''; } },
sb : function() { if(value===$scope.meta.switchBrand) value=''; if(value != key.sb) { key.sb = value; key.st = ''; } },
st : function() { if(value===$scope.meta.switchType) value=''; if(value != key.st) { key.st = value; } },
};
return (u[prop] || u._)();
}
Expand All @@ -621,6 +624,10 @@
$scope.multi = angular.copy($scope.selectedKeys.last());
});
};
$scope.setMulti = function(prop, value) {
$scope.multi[prop] = value;
$scope.updateMulti(prop);
};

$scope.validateMulti = function(prop, index) {
if($scope.multi[prop] == null) {
Expand Down
25 changes: 11 additions & 14 deletions serial.js
View file
Expand Up @@ -100,14 +100,14 @@ var $serial = (typeof(exports) !== 'undefined') ? exports : {};
};

var _defaultKeyProps = {
x: 0, y: 0, x2: 0, y2: 0, // position
width: 1, height: 1, width2: 1, height2: 1, // size
rotation_angle: 0, rotation_x: 0, rotation_y: 0, // rotation
labels:[], textColor: [], textSize: [], // label properties
default: { textColor: "#000000", textSize: 3 }, // label defaults
color: "#cccccc", profile: "", nub: false, // cap appearance
ghost: false, stepped: false, decal: false, // miscellaneous options
sm: "", sb:"", st:"" // switch
x: 0, y: 0, x2: 0, y2: 0, // position
width: 1, height: 1, width2: 1, height2: 1, // size
rotation_angle: 0, rotation_x: 0, rotation_y: 0, // rotation
labels:[], textColor: [], textSize: [], // label properties
default: { textColor: "#000000", textSize: 3 }, // label defaults
color: "#cccccc", profile: "", nub: false, // cap appearance
ghost: false, stepped: false, decal: false, // miscellaneous options
sm: "", sb:"", st:"" // switch
};

var _defaultMetaData = { backcolor: '#eeeeee', name: '', author: '', notes: '', background: undefined, radii: '', switchMount: '', switchBrand: '', switchType: '' };
Expand Down Expand Up @@ -355,12 +355,9 @@ var $serial = (typeof(exports) !== 'undefined') ? exports : {};
if(key.l) { current.stepped = key.l; }
if(key.d) { current.decal = key.d; }
if(key.g != null) { current.ghost = key.g; }
if(key.sm != null) { current.sm = key.sm; }
else { key.sm = current.sm = meta.switchMount; }
if(key.sb != null) { current.sb = key.sb; }
else { key.sb = current.sb = meta.switchBrand; }
if(key.st != null) { current.st = key.st; }
else { key.st = current.st = meta.switchType; }
if(key.sm) { current.sm = key.sm; }
if(key.sb) { current.sb = key.sb; }
if(key.st) { current.st = key.st; }
}
}

Expand Down

0 comments on commit 5b972cf

Please sign in to comment.