Skip to content

Commit

Permalink
Added simple "options" dialog.
Browse files Browse the repository at this point in the history 
1. Currently supports changing the default step/rotate size.
-- Inspired by something @D1SC0tech did in his fork (good idea!).
2. Now rounding values after modifications to avoid floating-point
errors.
3. Also fixed an error when trying to show the help dialog on FireFox.
  • Loading branch information
Ian Prest committed Jul 3, 2015
1 parent 2ebc057 commit 0b223c8
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 46 deletions.
109 changes: 74 additions & 35 deletions kb.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,15 @@
<script type="text/javascript" src="extensions.js"></script>
<script type="text/javascript" src="render.js"></script>
<script type="text/javascript" src="serial.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="kb.js"></script>
</head>
<body ng-controller="kbCtrl"
ng-mouseup="selectRelease($event)"
ng-mousemove="selectMove($event)"
ui-keydown="{'shift-191' : 'showHelp($event)',
112 : 'showHelp($event)',
118 : 'showOptions($event)',
'ctrl-83' : 'save($event)' }">
<div id="wrap">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
Expand Down Expand Up @@ -67,6 +69,7 @@

<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" ng-click="showOptions()"><i class="fa fa-cog"></i> Options</a></li>
<li><a ng-href="{{getPermalink()}}" target="_blank" ng-click="dirty = false"><i class="fa fa-link"></i> Permalink</a></li>
</ul>
</div>
Expand Down Expand Up @@ -106,20 +109,20 @@
<div id="keyboard"
tabindex="0"
ng-style="{height: kbHeight + 'px', 'background-color': keyboard.meta.backcolor}"
ui-keydown="{ left:'moveKeys(-.25,0,$event)',
right:'moveKeys(.25,0,$event)',
up:'moveKeys(0,-.25,$event)',
down:'moveKeys(0,.25,$event)',
'shift-left':'sizeKeys(-.25,0,$event)',
'shift-right':'sizeKeys(.25,0,$event)',
'shift-up':'sizeKeys(0,-.25,$event)',
'shift-down':'sizeKeys(0,.25,$event)',
'pageup':'rotateKeys(-15,$event)',
'pagedown':'rotateKeys(15,$event)',
'ctrl-left':'moveCenterKeys(-.25,0,$event)',
'ctrl-right':'moveCenterKeys(.25,0,$event)',
'ctrl-up':'moveCenterKeys(0,-.25,$event)',
'ctrl-down':'moveCenterKeys(0,.25,$event)',
ui-keydown="{ left:'moveKeys(-moveStep,0,$event)',
right:'moveKeys(moveStep,0,$event)',
up:'moveKeys(0,-moveStep,$event)',
down:'moveKeys(0,moveStep,$event)',
'shift-left':'sizeKeys(-sizeStep,0,$event)',
'shift-right':'sizeKeys(sizeStep,0,$event)',
'shift-up':'sizeKeys(0,-sizeStep,$event)',
'shift-down':'sizeKeys(0,sizeStep,$event)',
'pageup':'rotateKeys(-rotateStep,$event)',
'pagedown':'rotateKeys(rotateStep,$event)',
'ctrl-left':'moveCenterKeys(-moveStep,0,$event)',
'ctrl-right':'moveCenterKeys(moveStep,0,$event)',
'ctrl-up':'moveCenterKeys(0,-moveStep,$event)',
'ctrl-down':'moveCenterKeys(0,moveStep,$event)',
delete:'deleteKeys()',
insert:'addKey()',
74: 'prevKey($event)',
Expand Down Expand Up @@ -226,33 +229,33 @@
<div class="control-group">
<label class="control-label" for="widtheditor">Width:</label>
<div class="controls hint--top hint--rounded" data-hint="Specify the primary and secondary widths for the keycap. The secondary width is used to specify the size of non-rectangular or stepped keys.">
<input id="widtheditor" size="6" type='number' min='0.5' max='12' step='.25' ng-model="multi.width" ng-change="updateMulti('width')" ng-blur="validateMulti('width')" ng-disabled="selectedKeys.length<1">
<input id="widtheditor" size="6" type='number' min='0.5' max='12' step='{{sizeStep}}' ng-model="multi.width" ng-change="updateMulti('width')" ng-blur="validateMulti('width')" ng-disabled="selectedKeys.length<1">
/
<input size="6" type='number' min='0.5' max='12' step='.25' ng-model="multi.width2" ng-change="updateMulti('width2')" ng-blur="validateMulti('width2')" ng-disabled="selectedKeys.length<1">
<input size="6" type='number' min='0.5' max='12' step='{{sizeStep}}' ng-model="multi.width2" ng-change="updateMulti('width2')" ng-blur="validateMulti('width2')" ng-disabled="selectedKeys.length<1">
</div>
</div>
<div class="control-group">
<label class="control-label" for="heighteditor">Height:</label>
<div class="controls hint--top hint--rounded" data-hint="Specify the primary and secondary heights for the keycap. The secondary height is used to specify the size of non-rectangular or stepped keys.">
<input id="heighteditor" size="6" type='number' min='0.5' max='12' step='.25' ng-model="multi.height" ng-change="updateMulti('height')" ng-blur="validateMulti('height')" ng-disabled="selectedKeys.length<1">
<input id="heighteditor" size="6" type='number' min='0.5' max='12' step='{{sizeStep}}' ng-model="multi.height" ng-change="updateMulti('height')" ng-blur="validateMulti('height')" ng-disabled="selectedKeys.length<1">
/
<input size="6" type='number' min='0.5' max='12' step='.25' ng-model="multi.height2" ng-change="updateMulti('height2')" ng-blur="validateMulti('height2')" ng-disabled="selectedKeys.length<1">
<input size="6" type='number' min='0.5' max='12' step='{{sizeStep}}' ng-model="multi.height2" ng-change="updateMulti('height2')" ng-blur="validateMulti('height2')" ng-disabled="selectedKeys.length<1">
</div>
</div>
<div class="control-group">
<label class="control-label" for="xeditor">X:</label>
<div class="controls hint--top hint--rounded" data-hint="Specify the X position of the keycap. An X-offset can also be specified to indicate how non-rectangular keys should be displayed.">
<input id="xeditor" size="6" type='number' min='0' max='36' step='.25' ng-model="multi.x" ng-change="updateMulti('x')" ng-blur="validateMulti('x')" ng-disabled="selectedKeys.length<1">
<input id="xeditor" size="6" type='number' min='0' max='36' step='{{moveStep}}' ng-model="multi.x" ng-change="updateMulti('x')" ng-blur="validateMulti('x')" ng-disabled="selectedKeys.length<1">
+
<input size="6" type='number' min='-6' max='6' step='.25' ng-model="multi.x2" ng-change="updateMulti('x2')" ng-blur="validateMulti('x2')" ng-disabled="selectedKeys.length<1">
<input size="6" type='number' min='-6' max='6' step='{{moveStep}}' ng-model="multi.x2" ng-change="updateMulti('x2')" ng-blur="validateMulti('x2')" ng-disabled="selectedKeys.length<1">
</div>
</div>
<div class="control-group">
<label class="control-label" for="yeditor">Y:</label>
<div class="controls hint--top hint--rounded" data-hint="Specify the Y position of the keycap. A Y-offset can also be specified to indicate how non-rectangular keys should be displayed.">
<input id="yeditor" size="6" type='number' min='0' max='36' step='.25' ng-model="multi.y" ng-change="updateMulti('y')" ng-blur="validateMulti('y')" ng-disabled="selectedKeys.length<1">
<input id="yeditor" size="6" type='number' min='0' max='36' step='{{moveStep}}' ng-model="multi.y" ng-change="updateMulti('y')" ng-blur="validateMulti('y')" ng-disabled="selectedKeys.length<1">
+
<input size="6" type='number' min='-6' max='6' step='.25' ng-model="multi.y2" ng-change="updateMulti('y2')" ng-blur="validateMulti('y2')" ng-disabled="selectedKeys.length<1">
<input size="6" type='number' min='-6' max='6' step='{{moveStep}}' ng-model="multi.y2" ng-change="updateMulti('y2')" ng-blur="validateMulti('y2')" ng-disabled="selectedKeys.length<1">
</div>
</div>
<div class="control-group">
Expand Down Expand Up @@ -283,9 +286,9 @@
<div class="control-group">
<label class="control-label" for="angleeditor">Rotation:</label>
<div class="controls hint--top hint--rounded" data-hint="Specify the angle (in degrees) by which to rotate the keycaps, and the x &amp; y coordinates of the center of rotation.">
<input id="angleeditor" size="3" type="number" min="-180" max="180" step="15" ng-model="multi.rotation_angle" ng-change="updateMulti('rotation_angle')" ng-blur="validateMulti('rotation_angle')" ng-disabled="selectedKeys.length<1">&#176;
<input id="rotxeditor" size="3" type="number" min="0" max="36" step=".25" ng-model="multi.rotation_x" ng-change="updateMulti('rotation_x')" ng-blur="validateMulti('rotation_x')" ng-disabled="selectedKeys.length<1">,
<input id="rotxeditor" size="3" type="number" min="0" max="36" step=".25" ng-model="multi.rotation_y" ng-change="updateMulti('rotation_y')" ng-blur="validateMulti('rotation_y')" ng-disabled="selectedKeys.length<1">
<input id="angleeditor" size="3" type="number" min="-180" max="180" step="{{rotateStep}}" ng-model="multi.rotation_angle" ng-change="updateMulti('rotation_angle')" ng-blur="validateMulti('rotation_angle')" ng-disabled="selectedKeys.length<1">&#176;
<input id="rotxeditor" size="3" type="number" min="0" max="36" step="{{moveStep}}" ng-model="multi.rotation_x" ng-change="updateMulti('rotation_x')" ng-blur="validateMulti('rotation_x')" ng-disabled="selectedKeys.length<1">,
<input id="rotxeditor" size="3" type="number" min="0" max="36" step="{{moveStep}}" ng-model="multi.rotation_y" ng-change="updateMulti('rotation_y')" ng-blur="validateMulti('rotation_y')" ng-disabled="selectedKeys.length<1">
</div>
</div>
<div class="control-group">
Expand Down Expand Up @@ -384,15 +387,15 @@
</div>

<!-- Modal -->
<div class="modal fade" id="helpDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="helpDialog" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style='width:70%;left:15%;'>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">How to use keyboard-layout-editor.com</h4>
</div>
<div class="modal-body">
<h5>Getting Started</h5>
<h5>Getting Started:</h5>
<ul>
<li>Try loading one of the preset layouts from the dropdown at the top of the page; it will give you a good idea of the editor's capabilities.</li>
<li>Select a key in the editor by clicking on it; then try changing the various properties in the property-editor form.</li>
Expand All @@ -402,28 +405,33 @@ <h5>Getting Started</h5>
<li>You can save your layout locally by bookmarking the 'Permalink' (at the top of the page) in your bookmarks list.</li>
</ul>

<h5>Keyboard Shortcuts</h5>
<h5>Global Keyboard Shortcuts:</h5>
<table class='shortcuts col-md-6' style='margin-bottom:5px;'>
<tr><td><span class='shortcut'>F1</span> / <span class='shortcut'>?</span></td><td>Show this help dialog</td></tr>
<tr><td><span class='shortcut'>F7</span></td><td>Show the Options dialog</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;S</span></td><td>Save your layout (on the server)</td></tr>
</table>

<h5 style='clear:both'>Editor Keyboard Shortcuts (these require that the editor has input focus):</h5>
<table class='shortcuts col-md-6' style='margin-bottom:5px;'>
<tr><td><span class='shortcut'>F1</span> / <span class='shortcut'>?</span></td><td>Show this help dialog</td></tr>
<tr><td><span class='shortcut'>↑↓←→</span></td><td>Move the selected keys</td></tr>
<tr><td><span class='shortcut'>Shift&ndash;↑↓←→</span></td><td>Resize the selected keys</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;↑↓←→</span></td><td>Move the center of rotation for the selected keys</td></tr>
<tr><td><span class='shortcut'>PgUp</span> / <span class='shortcut'>PgDn</span></td><td>Change the angle of rotation for the selected keys</td></tr>
<tr><td><span class='shortcut'>Ins</span></td><td>Add a new key</td></tr>
<tr><td><span class='shortcut'>Del</span></td><td>Delete the selected keys</td></tr>
<tr><td><span class='shortcut'>F2</span></td><td>Edit the text of the selected key</td></tr>
<tr><td><span class='shortcut'>J</span> / <span class='shortcut'>K</span></td><td>Select the previous / next key in the editor.</td></tr>
</table>
<table class='shortcuts col-md-6' style='margin-bottom:5px;'>
<tr><td><span class='shortcut'>Ctrl&ndash;S</span></td><td>Save your layout (on the server)</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;A</span> / <span class='shortcut'>Esc</span></td><td>Select / deselect all keys</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;A</span> / <span class='shortcut'>Esc</span></td><td>Select / deselect all keys</td></tr>
<tr><td><span class='shortcut'>J</span> / <span class='shortcut'>K</span></td><td>Select the previous / next key in the editor.</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;Z</span></td><td>Undo</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;Shift&ndash;Z</span> or <span class='shortcut'>Ctrl&ndash;Y</span></td><td>Redo</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;X</span> or <span class='shortcut'>Shift&ndash;Del</span></td><td>Cut the selected keys</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;C</span> or <span class='shortcut'>Ctrl&ndash;Ins</span></td><td>Copy the selected keys</td></tr>
<tr><td><span class='shortcut'>Ctrl&ndash;V</span> or <span class='shortcut'>Shift&ndash;Ins</span></td><td>Paste keys from the clipboard</td></tr>
</table>
<P style='clear:both'>Note that most of these keys require that the keyboard editor has input focus.</P>
</table>
<P style='clear:both'></P>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
Expand All @@ -432,7 +440,7 @@ <h5>Keyboard Shortcuts</h5>
</div>
</div>

<div class="modal fade" id="markdownDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="markdownDialog" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style='width:90%;'>
<div class="modal-content">
<div class="modal-header">
Expand All @@ -447,5 +455,36 @@ <h4 class="modal-title">{{markdownTitle}}</h4>
</div>
</div>

<div class="modal fade" id="optionsDialog" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style='width:60%;'>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Options</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<h5>Editor Step Sizes:</h5>
<div class="form-group">
<label for="moveStepEditor" class="col-sm-2 control-label">Move Step:</label>
<input id="moveStepEditor" type="number" min="0.05" max="2.5" step="0.05" size="6" ng-model="moveStep"> units
</div>
<div class="form-group">
<label for="sizeStepEditor" class="col-sm-2 control-label">Size Step:</label>
<input id="sizeStepEditor" type="number" min="0.05" max="2.5" step="0.05" size="6" ng-model="sizeStep"> units
</div>
<div class="form-group">
<label for="rotateStepEditor" class="col-sm-2 control-label">Rotate Step:</label>
<input id="rotateStepEditor" type="number" min="1" max="90" step="1" size="6" ng-model="rotateStep"> degrees
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>

</body>
</html>
35 changes: 24 additions & 11 deletions kb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@
$scope.multi = {};
$scope.meta = {};

// Options
$scope.sizeStep = 0.25;
$scope.moveStep = 0.25;
$scope.rotateStep = 15;

// The keyboard data
$scope.keyboard = { keys: [], meta: {} };
$scope.keys = function(newKeys) { if(newKeys) { $scope.keyboard.keys = newKeys; } return $scope.keyboard.keys; };
Expand Down Expand Up @@ -443,8 +448,8 @@

transaction("move", function() {
$scope.selectedKeys.forEach(function(selectedKey) {
selectedKey.x = Math.max(0,selectedKey.x + x);
selectedKey.y = Math.max(0,selectedKey.y + y);
selectedKey.x = Math.round10(Math.max(0,selectedKey.x + x),-2);
selectedKey.y = Math.round10(Math.max(0,selectedKey.y + y),-2);
renderKey(selectedKey);
});
$scope.multi = angular.copy($scope.selectedKeys.last());
Expand All @@ -459,14 +464,15 @@
}
transaction("size", function() {
$scope.selectedKeys.forEach(function(selectedKey) {
update(selectedKey, 'width', Math.max(1,selectedKey.width + x));
update(selectedKey, 'height', Math.max(1,selectedKey.height + y));
update(selectedKey, 'width', Math.round10(Math.max(1,selectedKey.width + x,-2)));
update(selectedKey, 'height', Math.round10(Math.max(1,selectedKey.height + y,-2)));
renderKey(selectedKey);
});
$scope.multi = angular.copy($scope.selectedKeys.last());
});
if(y!==0) { $scope.calcKbHeight(); }
};

$scope.rotateKeys = function(angle,$event) {
$event.preventDefault();
if($scope.selectedKeys.length<1) {
Expand All @@ -476,7 +482,7 @@
$scope.selectedKeys.forEach(function(selectedKey) {
var newangle = (selectedKey.rotation_angle+angle+360)%360;
while(newangle > 180) { newangle -= 360; }
update(selectedKey, 'rotation_angle', newangle);
update(selectedKey, 'rotation_angle', Math.round(newangle));
renderKey(selectedKey);
});
$scope.multi = angular.copy($scope.selectedKeys.last());
Expand All @@ -490,8 +496,8 @@
}
transaction("moveCenter", function() {
$scope.selectedKeys.forEach(function(selectedKey) {
update(selectedKey, 'rotation_x', validate(selectedKey, 'rotation_x', $scope.multi.rotation_x + x));
update(selectedKey, 'rotation_y', validate(selectedKey, 'rotation_y', $scope.multi.rotation_y + y));
update(selectedKey, 'rotation_x', validate(selectedKey, 'rotation_x', Math.round10($scope.multi.rotation_x + x,-2)));
update(selectedKey, 'rotation_y', validate(selectedKey, 'rotation_y', Math.round10($scope.multi.rotation_y + y,-2)));
renderKey(selectedKey);
});
$scope.multi = angular.copy($scope.selectedKeys.last());
Expand Down Expand Up @@ -813,18 +819,25 @@
$scope.markdownContent = $sce.trustAsHtml(marked(data));
});
}
$('#helpDialog').modal('hide');
$('.modal:not(#markdownDialog)').modal('hide');
$('#markdownDialog').modal('show');
event.preventDefault();
};

$scope.showHelp = function(event) {
if(event.srcElement.nodeName !== "INPUT" && event.srcElement.nodeName !== "TEXTAREA") {
event.preventDefault();
$('#markdownDialog').modal('hide');
if(!event.srcElement || (event.srcElement.nodeName !== "INPUT" && event.srcElement.nodeName !== "TEXTAREA")) {
$('.modal:not(#helpDialog)').modal('hide');
$('#helpDialog').modal('show');
event.preventDefault();
}
};

$scope.showOptions = function(event) {
$('.modal:not(#optionsDialog)').modal('hide');
$('#optionsDialog').modal('show');
event.preventDefault();
};

// Clipboard functions
var clipboard = {};
$scope.cut = function(event) {
Expand Down
Loading

2 comments on commit 0b223c8

@iandoug
Copy link
Contributor

@iandoug iandoug commented on 0b223c8 Jul 3, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually d1sc0tech got it from me but no matter, I see you extended it quite a bit.

@jordiorlando
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ijprest I just forked it from @iandoug, it's all his work! Again, sorry about the terrible mess of a repository I have...

Please sign in to comment.