Web UI -- added fs.debug(...) function for conditional debug messages to console
- precache loading... images.
Change-Id: Ie93262b78e72f6c740ba851d8662b8170a91ab75
diff --git a/web/gui/src/main/webapp/app/fw/layer/loading.js b/web/gui/src/main/webapp/app/fw/layer/loading.js
index 81bdaf4..86dd56d 100644
--- a/web/gui/src/main/webapp/app/fw/layer/loading.js
+++ b/web/gui/src/main/webapp/app/fw/layer/loading.js
@@ -23,12 +23,13 @@
'use strict';
// injected references
- var $log, $timeout, ts;
+ var $log, $timeout, ts, fs;
// constants
var id = 'loading-anim',
dir = 'data/img/loading/',
pfx = '/load-',
+ nImgs = 16,
speed = 100,
waitDelay = 500;
@@ -38,26 +39,51 @@
th,
idx,
task,
- wait;
+ wait,
+ images = [];
- function fname(i) {
+ function dbg() {
+ var args = Array.prototype.slice.call(arguments);
+ args.unshift('loading');
+ fs.debug.apply(this, args);
+ }
+
+ function preloadImages() {
+ var idx;
+
+ function addImg(th) {
+ var img = new Image();
+ img.src = fname(idx, th);
+ images.push(img);
+ }
+
+ dbg('preload images start...');
+ for (idx=1; idx<=nImgs; idx++) {
+ addImg('light');
+ addImg('dark');
+ }
+ dbg('preload images DONE!', images);
+ }
+
+ function fname(i, th) {
var z = i > 9 ? '' : '0';
return dir + th + pfx + z + i + '.png';
}
function nextFrame() {
idx = idx === 16 ? 1 : idx + 1;
- img.attr('src', fname(idx));
+ img.attr('src', fname(idx, th));
task = $timeout(nextFrame, speed);
}
// start displaying 'loading...' animation (idempotent)
function startAnim() {
+ dbg('start ANIMATION');
th = ts.theme();
div = d3.select('#'+id);
if (div.empty()) {
div = d3.select('body').append('div').attr('id', id);
- img = div.append('img').attr('src', fname(1));
+ img = div.append('img').attr('src', fname(1, th));
idx = 1;
task = $timeout(nextFrame, speed);
}
@@ -65,6 +91,7 @@
// stop displaying 'loading...' animation (idempotent)
function stopAnim() {
+ dbg('*stop* ANIMATION');
if (task) {
$timeout.cancel(task);
task = null;
@@ -74,12 +101,14 @@
// schedule function to start animation in the future
function start() {
+ dbg('start (schedule)');
wait = $timeout(startAnim, waitDelay);
}
// cancel future start, if any; stop the animation
function stop() {
if (wait) {
+ dbg('start CANCELED');
$timeout.cancel(wait);
wait = null;
}
@@ -92,11 +121,16 @@
}
angular.module('onosLayer')
- .factory('LoadingService', ['$log', '$timeout', 'ThemeService',
- function (_$log_, _$timeout_, _ts_) {
+ .factory('LoadingService',
+ ['$log', '$timeout', 'ThemeService', 'FnService',
+
+ function (_$log_, _$timeout_, _ts_, _fs_) {
$log = _$log_;
$timeout = _$timeout_;
ts = _ts_;
+ fs = _fs_;
+
+ preloadImages();
return {
start: start,
diff --git a/web/gui/src/main/webapp/app/fw/util/fn.js b/web/gui/src/main/webapp/app/fw/util/fn.js
index 14060b9..2b2ba0e 100644
--- a/web/gui/src/main/webapp/app/fw/util/fn.js
+++ b/web/gui/src/main/webapp/app/fw/util/fn.js
@@ -251,6 +251,17 @@
return debugFlags[tag];
}
+ // output debug message to console, if debug tag set...
+ // e.g. fs.debug('mytag', arg1, arg2, ...)
+ function debug(tag) {
+ var args;
+ if (debugOn(tag)) {
+ args = Array.prototype.slice.call(arguments, 1);
+ args.unshift('['+tag+']');
+ $log.debug.apply(this, args);
+ }
+ }
+
angular.module('onosUtil')
.factory('FnService',
['$window', '$location', '$log', function (_$window_, $loc, _$log_) {
@@ -273,6 +284,7 @@
isSafari: isSafari,
isFirefox: isFirefox,
debugOn: debugOn,
+ debug: debug,
find: find,
inArray: inArray,
removeFromArray: removeFromArray,