GUI -- Adding Key Bindings cheat sheet... WIP.
Change-Id: Idf5ea6d405d9a5dfb83f43c0a4da458727bd9ab4
diff --git a/web/gui/src/main/webapp/feedback.js b/web/gui/src/main/webapp/feedback.js
index f1776df..03324b2 100644
--- a/web/gui/src/main/webapp/feedback.js
+++ b/web/gui/src/main/webapp/feedback.js
@@ -45,11 +45,13 @@
// DOM elements and the like
var fb = d3.select('#feedback');
- var svg = fb.append('svg').attr({
- width: w,
- height: h,
- viewBox: vb
- });
+ var svg;
+
+ //var svg = fb.append('svg').attr({
+ // width: w,
+ // height: h,
+ // viewBox: vb
+ //});
function computeBox(el) {
var text = el.select('text'),
@@ -69,6 +71,14 @@
}
function updateFeedback() {
+ if (!svg) {
+ svg = fb.append('svg').attr({
+ width: w,
+ height: h,
+ viewBox: vb
+ });
+ }
+
var items = svg.selectAll('.feedbackItem')
.data(data);
@@ -98,6 +108,13 @@
.duration(fade)
.attr({ opacity: 0})
.remove();
+
+ if (svg && data.length === 0) {
+ svg.transition()
+ .delay(fade + 10)
+ .remove();
+ svg = null;
+ }
}
function clearFlash() {
diff --git a/web/gui/src/main/webapp/index2.html b/web/gui/src/main/webapp/index2.html
index a847a06..52b84bd 100644
--- a/web/gui/src/main/webapp/index2.html
+++ b/web/gui/src/main/webapp/index2.html
@@ -43,6 +43,7 @@
<link rel="stylesheet" href="mast2.css">
<link rel="stylesheet" href="floatPanel.css">
<link rel="stylesheet" href="feedback.css">
+ <link rel="stylesheet" href="keymap.css">
<!-- This is where contributed stylesheets get INJECTED -->
<!-- TODO: replace with template marker and inject refs server-side -->
@@ -75,6 +76,9 @@
<div id="feedback">
<!-- NOTE: feedback to user -->
</div>
+ <div id="keymap">
+ <!-- NOTE: key bindings map -->
+ </div>
</div>
<!-- Initialize the UI...-->
@@ -94,6 +98,7 @@
<!-- Framework module files included here -->
<script src="mast2.js"></script>
<script src="feedback.js"></script>
+ <script src="keymap.js"></script>
<!-- View Module Templates; REMOVE THESE LINES, FOR PRODUCTION -->
<script src="module-svg-template.js"></script>
diff --git a/web/gui/src/main/webapp/keymap.css b/web/gui/src/main/webapp/keymap.css
new file mode 100644
index 0000000..bf19036
--- /dev/null
+++ b/web/gui/src/main/webapp/keymap.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2014 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Key map layer -- CSS file
+
+ @author Simon Hunt
+ */
+
+#keymap svg {
+ position: absolute;
+ bottom: 40px;
+ opacity: 0.5;
+}
+
+#keymap svg text.title {
+ font-size: 12pt;
+ font-style: italic;
+ fill: #666;
+ text-anchor: middle;
+}
+
diff --git a/web/gui/src/main/webapp/keymap.js b/web/gui/src/main/webapp/keymap.js
new file mode 100644
index 0000000..292f7fe
--- /dev/null
+++ b/web/gui/src/main/webapp/keymap.js
@@ -0,0 +1,200 @@
+/*
+ * Copyright 2014 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Keymap Layer
+
+ Defines the key-map layer for the UI. Used to give user a list of
+ key bindings; both global, and for the current view.
+
+ @author Simon Hunt
+ */
+
+(function (onos){
+ 'use strict';
+
+ // API's
+ var api = onos.api;
+
+ // Config variables
+ var w = '100%',
+ h = '80%',
+ fade = 750,
+ vb = '-200 -200 400 400',
+ xpad = 20,
+ ypad = 10;
+
+ // State variables
+ var data = [];
+
+ // DOM elements and the like
+ var kmdiv = d3.select('#keymap');
+
+ function computeBox(el) {
+ var text = el.select('text'),
+ box = text.node().getBBox();
+
+ // center
+ box.x = -box.width / 2;
+ box.y = -box.height / 2;
+
+ // add some padding
+ box.x -= xpad;
+ box.width += xpad * 2;
+ box.y -= ypad;
+ box.height += ypad * 2;
+
+ return box;
+ }
+
+ function updateKeymap() {
+ var items = svg.selectAll('.bindingItem')
+ .data(data);
+
+ var entering = items.enter()
+ .append('g')
+ .attr({
+ class: 'bindingItem',
+ opacity: 0
+ })
+ .transition()
+ .duration(fade)
+ .attr('opacity', 1);
+
+ entering.each(function (d) {
+ var el = d3.select(this),
+ box;
+
+ d.el = el;
+ el.append('rect').attr({ rx: 10, ry: 10});
+ el.append('text').text(d.label);
+ box = computeBox(el);
+ el.select('rect').attr(box);
+ });
+
+ items.exit()
+ .transition()
+ .duration(fade)
+ .attr({ opacity: 0})
+ .remove();
+ }
+
+ function clearFlash() {
+ if (timer) {
+ clearInterval(timer);
+ }
+ data = [];
+ updateFeedback();
+ }
+
+ // for now, simply display some text feedback
+ function flash(text) {
+ // cancel old scheduled event if there was one
+ if (timer) {
+ clearInterval(timer);
+ }
+ timer = setInterval(function () {
+ clearFlash();
+ }, showFor);
+
+ data = [{
+ label: text
+ }];
+ updateFeedback();
+ }
+
+ // =====================================
+ var svg = kmdiv.select('svg');
+
+ function populateBindings(bindings) {
+ svg.append('g')
+ .attr({
+ class: 'keyBindings',
+ transform: 'translate(-200,-120)',
+ opacity: 0
+ })
+ .transition()
+ .duration(fade)
+ .attr('opacity', 1);
+
+ var g = svg.select('g');
+
+ g.append('rect')
+ .attr({
+ width: 400,
+ height: 240,
+ rx: 8
+ });
+
+ g.append('text')
+ .text('Key Bindings')
+ .attr({
+ x: 200,
+ y: 0,
+ dy: '1.4em',
+ class: 'title'
+ });
+
+ // TODO: append .keyItems to rectangle
+ }
+
+ function fadeBindings() {
+ svg.selectAll('g')
+ .transition()
+ .duration(fade)
+ .attr('opacity', 0);
+ }
+
+ function addSvg() {
+ svg = kmdiv.append('svg')
+ .attr({
+ width: w,
+ height: h,
+ viewBox: vb
+ });
+ }
+
+ function removeSvg() {
+ svg.transition()
+ .delay(fade + 20)
+ .remove();
+ }
+
+ function showKeyMap(bindings) {
+ svg = kmdiv.select('svg');
+ if (svg.empty()) {
+ addSvg();
+ populateBindings(bindings);
+ console.log("SHOW KEY MAP");
+ }
+ }
+
+ function hideKeyMap() {
+ svg = kmdiv.select('svg');
+ if (!svg.empty()) {
+ fadeBindings();
+ removeSvg();
+ console.log("HIDE KEY MAP");
+ return true;
+ }
+ return false;
+ }
+
+ onos.ui.addLib('keymap', {
+ show: showKeyMap,
+ hide: hideKeyMap
+ });
+}(ONOS));
diff --git a/web/gui/src/main/webapp/onos2.js b/web/gui/src/main/webapp/onos2.js
index 384c64c..ae7119e 100644
--- a/web/gui/src/main/webapp/onos2.js
+++ b/web/gui/src/main/webapp/onos2.js
@@ -93,6 +93,7 @@
case 40: return 'downArrow';
case 91: return 'cmdLeft';
case 93: return 'cmdRight';
+ case 191: return 'slash';
default:
if ((code >= 48 && code <= 57) ||
(code >= 65 && code <= 90)) {
@@ -268,6 +269,11 @@
return $.isFunction(f) ? f : null;
}
+ // returns the reference if it is an array, null otherwise
+ function isA(a) {
+ return $.isArray(a) ? a : null;
+ }
+
// ..........................................................
// View life-cycle functions
@@ -407,17 +413,27 @@
function setupGlobalKeys() {
keyHandler.globalKeys = {
+ slash: keyMap,
esc: escapeKey,
T: toggleTheme
};
// Masked keys are global key handlers that always return true.
// That is, the view will never see the event for that key.
keyHandler.maskedKeys = {
+ slash: true,
T: true
};
}
+ function keyMap(view, key, code, ev) {
+ libApi.keymap.show(keyHandler);
+ return true;
+ }
+
function escapeKey(view, key, code, ev) {
+ if (libApi.keymap.hide()) {
+ return true;
+ }
if (alerts.open) {
closeAlerts();
return true;
@@ -461,7 +477,8 @@
keyCode = event.keyCode,
key = whatKey(keyCode),
gcb = isF(keyHandler.globalKeys[key]),
- vcb = isF(keyHandler.viewKeys[key]) || isF(keyHandler.viewFn);
+ vk = keyHandler.viewKeys[key],
+ vcb = isF(vk) || (isA(vk) && isF(vk[0])) || isF(keyHandler.viewFn);
// global callback?
if (gcb && gcb(current.view.token(), key, keyCode, event)) {
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 4013ade..696c92a 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -136,12 +136,13 @@
// key bindings
var keyDispatch = {
- M: testMe, // TODO: remove (testing only)
- S: injectStartupEvents, // TODO: remove (testing only)
- space: injectTestEvent, // TODO: remove (testing only)
+ // TODO: remove these "development only" bindings
+ M: testMe,
+ S: injectStartupEvents,
+ space: injectTestEvent,
- B: toggleBg,
- L: cycleLabels,
+ B: [toggleBg, 'Toggle background image'],
+ L: [cycleLabels, 'Cycle Device labels'],
P: togglePorts,
U: unpin,
R: resetZoomPan,