GUI -- Adding Key Bindings cheat sheet... WIP.

Change-Id: Idf5ea6d405d9a5dfb83f43c0a4da458727bd9ab4

@@ -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() {

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

+/*
+ * 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;
+}
+

+/*
+ * 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));

@@ -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)) {

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