diff options
Diffstat (limited to 'qooxdoo/source/class')
-rw-r--r-- | qooxdoo/source/class/Smokeping/Application.js | 2 | ||||
-rw-r--r-- | qooxdoo/source/class/Smokeping/ui/Graph.js | 101 | ||||
-rw-r--r-- | qooxdoo/source/class/Smokeping/ui/GraphList.js | 22 | ||||
-rw-r--r-- | qooxdoo/source/class/Smokeping/ui/LoadingAnimation.js | 52 | ||||
-rw-r--r-- | qooxdoo/source/class/Smokeping/ui/Navigator.js | 77 | ||||
-rw-r--r-- | qooxdoo/source/class/Smokeping/ui/TargetTree.js | 52 | ||||
-rw-r--r-- | qooxdoo/source/class/Smokeping/ui/Zoomer.js | 191 |
7 files changed, 401 insertions, 96 deletions
diff --git a/qooxdoo/source/class/Smokeping/Application.js b/qooxdoo/source/class/Smokeping/Application.js index 9662880..b980d7e 100644 --- a/qooxdoo/source/class/Smokeping/Application.js +++ b/qooxdoo/source/class/Smokeping/Application.js @@ -42,7 +42,7 @@ qx.Class.define( } prime.add(title); - var splitpane = new qx.ui.splitpane.HorizontalSplitPane('1*', '3*'); + var splitpane = new qx.ui.splitpane.HorizontalSplitPane(200, '1*'); splitpane.setEdge(0); splitpane.setHeight('1*'); splitpane.setShowKnob(true); diff --git a/qooxdoo/source/class/Smokeping/ui/Graph.js b/qooxdoo/source/class/Smokeping/ui/Graph.js index c1b8032..955374a 100644 --- a/qooxdoo/source/class/Smokeping/ui/Graph.js +++ b/qooxdoo/source/class/Smokeping/ui/Graph.js @@ -6,8 +6,8 @@ * a widget showing the smokeping graph overview */ -var default_width = null; -var default_height = null; +var Smokeping_ui_Graph_default_width = null; +var Smokeping_ui_Graph_default_height = null; qx.Class.define('Smokeping.ui.Graph', { @@ -24,55 +24,56 @@ qx.Class.define('Smokeping.ui.Graph', * */ - construct: function (src) { - with(this){ - base(arguments); - if (default_width){ - setWidth(default_width) - } - else { - setWidth('auto'); - } - if (default_height){ - setHeight(default_height); - } - else { - setHeight('auto'); - }; - setBorder(new qx.ui.core.Border(1)); - setHorizontalChildrenAlign('center'); - setVerticalChildrenAlign('middle'); - _highlight(); - var loader = new qx.ui.basic.Image(qx.io.Alias.getInstance().resolve('SP/image/ajax-loader.gif')); - add(loader); - _preloader = qx.io.image.PreloaderManager.getInstance().create(src); - if (_preloader.isLoaded()){ - qx.client.Timer.once(_image_loader,this,0); - } else { - _preloader.addEventListener('load', _image_loader, this); - } - addEventListener('mouseover',_highlight,this); - addEventListener('mouseout',_unhighlight,this); + construct: function (src,width,height) { + this.base(arguments); + this._src=src; + this._width=width; + this._height=height; + if ( Smokeping_ui_Graph_default_width){ + this.setWidth( Smokeping_ui_Graph_default_width) + this.setHeight( Smokeping_ui_Graph_default_height); + } + else { + this.setWidth('auto'); + this.setHeight('auto'); + }; + this.set({ + border : new qx.ui.core.Border(1,'dotted','transparent'), + horizontalChildrenAlign: 'center', + verticalChildrenAlign: 'middle' + }); + this._highlight(); + var loader = new Smokeping.ui.LoadingAnimation(); + this.add(loader); + this._preloader = qx.io.image.PreloaderManager.getInstance().create(this._src+';w='+this._width+';h='+this._height); + if (this._preloader.isLoaded()){ + qx.client.Timer.once(this._image_loader,this,0); + } else { + this._preloader.addEventListener('load', this._image_loader, this); } + this.addEventListener('mouseover',this._highlight,this); + this.addEventListener('mouseout',this._unhighlight,this); }, members: { _image_loader: function(e) { + Smokeping_ui_Graph_default_width = this._preloader.getWidth(); + Smokeping_ui_Graph_default_height = this._preloader.getHeight(); + var image = new qx.ui.basic.Image(); + image.setPreloader(this._preloader); + qx.io.image.PreloaderManager.getInstance().remove(this._preloader); with(this){ - default_width = _preloader.getWidth(); - default_height = _preloader.getHeight(); - _image = new qx.ui.basic.Image(_preloader.getSource()); + removeAll(); + add(image); + addEventListener('click',this._open_navigator,this); _unhighlight(); - removeAll() - add(_image); - addEventListener('click',_open_navigator,this); } }, _open_navigator: function(e){ with(this){ setEnabled(false); _unhighlight(); - _window = new Smokeping.ui.Navigator(_image); + this._window = new Smokeping.ui.Navigator(this._src,this._width,this._height); _window.addToDocument(); _window.positionRelativeTo(getElement(),2,-4); addEventListener('beforeDisappear',_kill_window,this); @@ -84,25 +85,21 @@ qx.Class.define('Smokeping.ui.Graph', this.setEnabled(true); }, _kill_window: function(e){ - with(this){ - _window.close(); - _window.dispose(); - } + this._window.close(); + this._window.dispose(); }, - _highlight: function(e){ + _highlight: function(e){ this.setBackgroundColor('#f8f8f8'); - with(this.getBorder()){ - setStyle('dotted'); - setColor('#808080'); - } + this.getBorder().set({ + color: '#808080' + }); }, _unhighlight: function(e){ this.setBackgroundColor('transparent'); - with(this.getBorder()){ - setStyle('solid'); - setColor('transparent'); - } - }, + this.getBorder().set({ + color: 'transparent' + }); + } } diff --git a/qooxdoo/source/class/Smokeping/ui/GraphList.js b/qooxdoo/source/class/Smokeping/ui/GraphList.js index a7419dc..ef7c3ac 100644 --- a/qooxdoo/source/class/Smokeping/ui/GraphList.js +++ b/qooxdoo/source/class/Smokeping/ui/GraphList.js @@ -25,14 +25,16 @@ qx.Class.define('Smokeping.ui.GraphList', with(this){ base(arguments); - setOverflow('scrollY'); - setBackgroundColor('white'); - setBorder(new qx.ui.core.Border(1,'solid','#a0a0a0')); - setWidth('100%'); - setHeight('100%'); - setVerticalSpacing(10); - setHorizontalSpacing(10); - setPadding(10); + set({ + overflow: 'auto', + backgroundColor: 'white', + border: new qx.ui.core.Border(1,'solid','#a0a0a0'), + width: '100%', + height: '100%', + verticalSpacing: 10, + horizontalSpacing: 10, + padding: 10 + }) }; this._url = url; qx.event.message.Bus.subscribe('sp.menu.folder',this._load_graphs,this); @@ -43,8 +45,8 @@ qx.Class.define('Smokeping.ui.GraphList', var files = m.getData() this.removeAll(); for(var i=0;i<files.length;i++){ - var button = new Smokeping.ui.Graph(this._url + 'grapher.cgi?g=' + files[i]); - this.add(button); + var image = new Smokeping.ui.Graph(this._url + 'grapher.cgi?g=' + files[i],300,150); + this.add(image); } } } diff --git a/qooxdoo/source/class/Smokeping/ui/LoadingAnimation.js b/qooxdoo/source/class/Smokeping/ui/LoadingAnimation.js new file mode 100644 index 0000000..c06ccc4 --- /dev/null +++ b/qooxdoo/source/class/Smokeping/ui/LoadingAnimation.js @@ -0,0 +1,52 @@ +/* ************************************************************************ +#module(Smokeping) +************************************************************************ */ + +/** + * The widget showing a detail graph + */ + +qx.Class.define('Smokeping.ui.LoadingAnimation', +{ + extend: qx.ui.layout.CanvasLayout, + + /* + ***************************************************************************** + CONSTRUCTOR + ***************************************************************************** + */ + + /** + * @param graph_url {String} Url to the explorable graph + * + */ + + construct: function () { + this.base(arguments); + this.set({ + width: '100%', + height: '100%' + }); + var plane = new qx.ui.basic.Terminator(); + plane.set({ + width: '100%', + height: '100%', + backgroundColor: '#f0f0f0', + opacity: 1 + }); + this.add(plane); + + var centerbox = new qx.ui.layout.BoxLayout(); + centerbox.set({ + width: '100%', + height: '100%', + horizontalChildrenAlign: 'center', + verticalChildrenAlign: 'middle' + }); + var animation = new qx.ui.basic.Image(qx.io.Alias.getInstance().resolve('SP/image/ajax-loader.gif')); + centerbox.add(animation); + this.add(centerbox); + } +}); + + diff --git a/qooxdoo/source/class/Smokeping/ui/Navigator.js b/qooxdoo/source/class/Smokeping/ui/Navigator.js index 6247930..b61d91e 100644 --- a/qooxdoo/source/class/Smokeping/ui/Navigator.js +++ b/qooxdoo/source/class/Smokeping/ui/Navigator.js @@ -21,15 +21,78 @@ qx.Class.define('Smokeping.ui.Navigator', * */ - construct: function (image) { + construct: function (src,width,height) { + this._graph_src = src; + this._graph_width = width; + this._graph_height = height; with(this){ - base(arguments,this.tr("Smokeping Graph Navigator")); - var plot = new qx.ui.basic.Image(image.getSource()); - setZIndex(100000); - add(plot); + base(arguments,tr("Smokeping Graph Navigator")); + set({ + showMaximize: false, + showMinimize: false, + width: width, + height: height, + minWidth: 120, + minHeight: 80, + backgroundColor: '#f0f0f0' + }); } - - } + this._lastrun = 0; + this._loader = new Smokeping.ui.LoadingAnimation(); + this._update_image(); + }, + members: { + // resizable objects have a changeWidth method + // which we can override to take part in the fun + // why I have to access this._graph_width without the this. + // in this case + _changeWidth: function(newWidth) { + var diff = newWidth - this.getBoxWidth(); + this.debug(this.getBoxWidth()); + this.debug(this.getBoxHeight()); + this.base(arguments, newWidth); + this.add(this._loader); + this._graph_width = this._graph_width + diff; + qx.client.Timer.once(this._update_image,this,250); + }, + _changeHeight: function(newHeight) { + var diff = newHeight - this.getBoxHeight(); + this.base(arguments, newHeight); + this.add(this._loader); + this._graph_height = this._graph_height + diff; + qx.client.Timer.once(this._update_image,this,250); + + }, + _update_image: function(){ + var now = (new Date()).getTime(); + if (this._lastrun + 1000 < now) { + this._preloader = qx.io.image.PreloaderManager.getInstance().create( + this._graph_src+';w='+this._graph_width+';h='+this._graph_height); + if (this._preloader.isLoaded()){ + qx.client.Timer.once(this._show_image,this,0); + } else { + this._preloader.addEventListener('load', this._show_image, this); + } + this._lastrun = now; + } + else { + this.debug('Skipping update since previous update less tahn 1 second') + } + }, + _show_image: function(e){ + with(this){ + set({ + width: 'auto', + height: 'auto' + }); + var image = new qx.ui.basic.Image(); + image.setPreloader(this._preloader); + qx.io.image.PreloaderManager.getInstance().remove(this._preloader); + removeAll(); + add(image); + } + } + } }); diff --git a/qooxdoo/source/class/Smokeping/ui/TargetTree.js b/qooxdoo/source/class/Smokeping/ui/TargetTree.js index 479d17e..fbd5004 100644 --- a/qooxdoo/source/class/Smokeping/ui/TargetTree.js +++ b/qooxdoo/source/class/Smokeping/ui/TargetTree.js @@ -24,41 +24,32 @@ qx.Class.define('Smokeping.ui.TargetTree', */ construct: function (rpc) { - with(this){ base(arguments,'root node'); - setBackgroundColor('white'); - setBorder(new qx.ui.core.Border(1,'solid','#a0a0a0')); - setOverflow('scrollY'); - setWidth('100%'); - setHeight('100%'); - setPadding(5); - setHideNode(true); - }; - - var self = this; - + set({ + backgroundColor: 'white', + border: new qx.ui.core.Border(1,'solid','#a0a0a0'), + overflow: 'auto', + width: '100%', + height: '100%', + padding: 5, + hideNode: true + }); + getManager().addEventListener('changeSelection', this._send_event,this) + }; + var self = this; var fill_tree = function(data,exc,id){ if (exc == null){ var nodes = data.length; for(var i=0;i<nodes;i++){ - Smokeping.ui.TargetTree.__fill_folder(self,data[i]); + Smokeping.ui.TargetTree._fill_folder(self,data[i]); } } else { alert(exc); } }; - - this.getManager().addEventListener('changeSelection', function(e) { - if (e.getData().length > 0) { - if ( e.getData()[0].basename == 'TreeFolder' ){ - qx.event.message.Bus.dispatch('sp.menu.folder',e.getData()[0].getUserData('ids')); - } - } - },this); - - rpc.callAsync(fill_tree,'get_tree'); + rpc.callAsync(fill_tree,'get_tree'); }, /* @@ -87,7 +78,7 @@ qx.Class.define('Smokeping.ui.TargetTree', */ - __fill_folder: function(node,data){ + _fill_folder: function(node,data){ // in data[0] we have the id of the folder var folder = new qx.ui.tree.TreeFolder(data[1]); node.add(folder); @@ -95,7 +86,7 @@ qx.Class.define('Smokeping.ui.TargetTree', var length = data.length; for (var i=2;i<length;i++){ if(qx.util.Validation.isValidArray(data[i])){ - Smokeping.ui.TargetTree.__fill_folder(folder,data[i]); + Smokeping.ui.TargetTree._fill_folder(folder,data[i]); } else { i++; // skip the node id for now var file = new qx.ui.tree.TreeFile(data[i]); @@ -106,7 +97,16 @@ qx.Class.define('Smokeping.ui.TargetTree', folder.setUserData('ids',files); } - } + }, + members: { + _send_event: function(e) { + if (e.getData().length > 0) { + if ( e.getData()[0].basename == 'TreeFolder' ){ + qx.event.message.Bus.dispatch('sp.menu.folder',e.getData()[0].getUserData('ids')); + } + } + } + } }); diff --git a/qooxdoo/source/class/Smokeping/ui/Zoomer.js b/qooxdoo/source/class/Smokeping/ui/Zoomer.js new file mode 100644 index 0000000..742e43f --- /dev/null +++ b/qooxdoo/source/class/Smokeping/ui/Zoomer.js @@ -0,0 +1,191 @@ +/* ************************************************************************ +#module(Smokeping) +************************************************************************ */ + +/** + * Zoom into the graph + */ + +qx.Class.define('Smokeping.ui.Zoomer', +{ + extend: qx.ui.layout.CanvasLayout, + + /* + ***************************************************************************** + CONSTRUCTOR + ***************************************************************************** + */ + + /** + * @param width {Integer} Width of the canvas + * + * @param height {Integer} Height ot the canvas + * + * @param right {Integer} Distance from the right edge + * + * @param top {Integer} Dist from the top + * + */ + + construct: function (width,height,top,right) { + this._width = width; + this._height = height; + this._top = top; + this._right = right; + with(this){ + base(arguments); + set({ + width: '100%', + height: '100%' + }); + } + var zoomer_defaults = { + visibility: false, + opacity: 0.1, + backgroundColor: 'black', + overflow: 'hidden' // important to make box go to 'zero height' on ie6 + }; + var dir = ['left','right','top','bottom' ]; + for(var i=0;i<dir.length;i++){ + this._zoomer[dir[i]] = new qx.ui.basic.Terminator(); + this._zoomer[dir[i]].set(zoomer_defaults); + this.add(this._zoomer[dir[i]]); + } + + this._zoomer['frame'] = new qx.ui.basic.Terminator(); + this._zoomer['frame'].set(zoomer_defaults); + this._zoomer['frame'].set({ + opacity: 1, + backgroundColor: 'transparent', + border: new qx.ui.core.Border(1,'dotted','#808080') + }); + + this.add(this._zoomer['frame']); + + this.addEventListener("mousedown", this._zoom_start,this); + this.addEventListener("mousemove", this._zoom_move,this); + this.addEventListener("mouseup", this._zoom_stop,this); + }, + + members: { + _init_cache: function(){ + var el = this.getElement(); + this._page_left = qx.html.Location.getPageAreaLeft(el); + this._page_top = qx.html.Location.getPageAreaTop(el); + this._image_width = qx.html.Location.getPageAreaWidth(el); + this._image_height = qx.html.Location.getPageAreaHeight(el); + this._canvas_top = this._top; + this._canvas_left = this._image_width-this._width-this._right; + this._canvas_right = this._right; + this._canvas_bottom = this._image_height-this._height-this._top; + }, + + _zoom_start: function(e){ + var z = this._zoomer; + this._init_cache(); + var mouse_y = e.getPageY()-this._page_top; + var mouse_x = e.getPageX()-this._page_left; + + if (mouse_y < this._canvas_top) { + mouse_y = this._canvas_top; + } + if (mouse_y > this._canvas_top + this._height) { + mouse_y = this._canvas_top + this._height; + } + + this._selector_start_y = mouse_y; + + this.setCapture(true); + + z['top'].set({ + left: this._canvas_left, + width: this._width, + top: 0, + height: mouse_y, + visibility: true + }); + + z['bottom'].set({ + left: this._canvas_left, + width: this._width, + height: this._image_height - mouse_y, + top: mouse_y, + visibility: true + }); + + z['left'].set({ + width: this._canvas_left, + height: this._image_height, + visibility: true, + + z['right'].set({ + left: this._image_width - this._canvas_right, + width: this._canvas_right, + height: this._image_height, + visibility: true + }); + + z['frame'].set({ + left: this._canvas_left, + width: this._width, + top: mouse_y, + visibility: true + }); + }, + + _zoom_move: function(e){ + var z = this._zoomer; + if (plot.getCapture()){ + var mouse_y = e.getPageY()-this._page_top; + var mouse_x = e.getPageX()-this._page_left; + + if (mouse_y < this._canvas_top) { + mouse_y = this._canvas_top; + } + if (mouse_y > this._canvas_top + this._height) { + mouse_y = this._canvas_top + this._height; + } + + if (mouse_y > this._selector_start_y) { + z['bottom'].set({ + height: this._image_height - mouse_y, + top: mouse_y + }); + } else { + z['top'].setHeight(mouse_y); + } + z['frame'].set({ + top: z['top'].getHeight(), + height: z['bottom'].getTop()-z['top'].getHeight() + }); + } + }, + _zoom_end: function(e){ + var z = this._zoomer; + this.setCapture(false); + z['top'].setVisibility(false); + z['left'].setVisibility(false); + z['right'].setVisibility(false); + z['bottom'].setVisibility(false); + z['frame'].setVisibility(false); + + if (z['bottom'].getTop() == z['top'].getTop()+z['top'].getHeight()){ + this._zoom_factor_top = 0; + this._zoom_factor_bottom = 0; + } + else { + var prev_factor = 1 - this._zoom_factor_top - this._zoom_factor_bottom; + this._zoom_factor_top = + (z['top'].getHeight()-this._canvas_top)/this._height * prev_factor + + this._zoom_factor_top; + this.zoom_factor_bottom = + (z['bottom'].getHeight()-this._canvas_bottom)/this._height * prev_factor + + this._zoom_factor_bottom; + } + } + } + + +}); + + |