GUI -- Implemented the flash service.
Change-Id: I4fb03f4c8df687ab499921d1bf2b8cb424ec306e
diff --git a/web/gui/src/main/webapp/app/fw/layer/flash.css b/web/gui/src/main/webapp/app/fw/layer/flash.css
new file mode 100644
index 0000000..0206462
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/layer/flash.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2014,2015 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 -- Flash Service -- CSS file
+ */
+
+#flash {
+ z-index: 1400;
+}
+
+#flash svg {
+ position: absolute;
+ bottom: 0;
+ opacity: 0.8;
+}
+
+.light #flash svg g.flashItem rect {
+ fill: #ccc;
+}
+.dark #flash svg g.flashItem rect {
+ fill: #555;
+}
+
+#flash svg g.flashItem text {
+ stroke: none;
+ text-anchor: middle;
+ alignment-baseline: middle;
+ font-size: 16pt;
+}
+.light #flash svg g.flashItem text {
+ fill: #333;
+}
+.dark #flash svg g.flashItem text {
+ fill: #999;
+}
diff --git a/web/gui/src/main/webapp/app/fw/layer/flash.js b/web/gui/src/main/webapp/app/fw/layer/flash.js
new file mode 100644
index 0000000..5ae0ca9
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/layer/flash.js
@@ -0,0 +1,156 @@
+/*
+ * Copyright 2015 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 -- Layer -- Flash Service
+
+ Provides a mechanism to flash short informational messages to the screen
+ to alert the user of something, e.g. "Hosts visible" or "Hosts hidden".
+ */
+(function () {
+ 'use strict';
+
+ // injected references
+ var $log, $timeout;
+
+ // configuration
+ var defaultSettings = {
+ fade: 200,
+ showFor: 1200
+ },
+ w = '100%',
+ h = 200,
+ xpad = 20,
+ ypad = 10,
+ rx = 10,
+ vbox = '-200 -' + (h/2) + ' 400 ' + h;
+
+ // internal state
+ var settings,
+ timer = null,
+ data = [];
+
+ // DOM elements
+ var flashDiv, svg;
+
+
+ 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 updateFlash() {
+ if (!svg) {
+ svg = flashDiv.append('svg').attr({
+ width: w,
+ height: h,
+ viewBox: vbox
+ });
+ }
+
+ var items = svg.selectAll('.flashItem')
+ .data(data);
+
+ // this is when there is an existing item
+ items.each(function (msg) {
+ var el = d3.select(this),
+ box;
+
+ el.select('text').text(msg);
+ box = computeBox(el);
+ el.select('rect').attr(box);
+ });
+
+
+ // this is when there is no existing item
+ var entering = items.enter()
+ .append('g')
+ .attr({
+ class: 'flashItem',
+ opacity: 0
+ })
+ .transition()
+ .duration(settings.fade)
+ .attr('opacity', 1);
+
+ entering.each(function (msg) {
+ var el = d3.select(this),
+ box;
+
+ el.append('rect').attr('rx', rx);
+ el.append('text').text(msg);
+ box = computeBox(el);
+ el.select('rect').attr(box);
+ });
+
+ items.exit()
+ .transition()
+ .duration(settings.fade)
+ .attr('opacity', 0)
+ .remove();
+
+ if (svg && data.length === 0) {
+ svg.transition()
+ .delay(settings.fade + 10)
+ .remove();
+ svg = null;
+ }
+ }
+
+ function flash(msg) {
+ if (timer) {
+ $timeout.cancel(timer);
+ }
+
+ timer = $timeout(function () {
+ data = [];
+ updateFlash();
+ }, settings.showFor);
+
+ data = [msg];
+ updateFlash();
+ }
+
+ angular.module('onosLayer')
+ .factory('FlashService', ['$log', '$timeout',
+ function (_$log_, _$timeout_) {
+ $log = _$log_;
+ $timeout = _$timeout_;
+
+ function initFlash(opts) {
+ settings = angular.extend({}, defaultSettings, opts);
+ flashDiv = d3.select('#flash');
+ }
+
+ return {
+ initFlash: initFlash,
+ flash: flash
+ };
+ }]);
+
+}());
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index 4086ec0..da9efb0 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -60,6 +60,7 @@
<script src="fw/layer/layer.js"></script>
<script src="fw/layer/panel.js"></script>
+ <script src="fw/layer/flash.js"></script>
<!-- Framework and library stylesheets included here -->
<!-- TODO: use a single catenated-minified file here -->
@@ -69,6 +70,7 @@
<link rel="stylesheet" href="fw/svg/glyph.css">
<link rel="stylesheet" href="fw/svg/icon.css">
<link rel="stylesheet" href="fw/layer/panel.css">
+ <link rel="stylesheet" href="fw/layer/flash.css">
<link rel="stylesheet" href="fw/nav/nav.css">
<!-- This is where contributed javascript will get injected -->
diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js
index 23e777c..43ce845 100644
--- a/web/gui/src/main/webapp/app/onos.js
+++ b/web/gui/src/main/webapp/app/onos.js
@@ -65,8 +65,9 @@
.controller('OnosCtrl', [
'$log', '$route', '$routeParams', '$location',
'KeyService', 'ThemeService', 'GlyphService', 'PanelService',
+ 'FlashService',
- function ($log, $route, $routeParams, $location, ks, ts, gs, ps) {
+ function ($log, $route, $routeParams, $location, ks, ts, gs, ps, flash) {
var self = this;
self.$route = $route;
@@ -79,6 +80,7 @@
ks.installOn(d3.select('body'));
gs.init();
ps.init();
+ flash.initFlash();
$log.log('OnosCtrl has been created');