From 823d40c77053c8fb30359de896d7e30b85de2a3a Mon Sep 17 00:00:00 2001 From: Tobi Oetiker Date: Sun, 18 Nov 2007 12:04:33 +0000 Subject: more updates --- qooxdoo/source/class/Smokeping/Application.js | 2 +- qooxdoo/source/class/Smokeping/ui/Graph.js | 101 ++++++----- qooxdoo/source/class/Smokeping/ui/GraphList.js | 22 +-- .../source/class/Smokeping/ui/LoadingAnimation.js | 52 ++++++ qooxdoo/source/class/Smokeping/ui/Navigator.js | 77 ++++++++- qooxdoo/source/class/Smokeping/ui/TargetTree.js | 52 +++--- qooxdoo/source/class/Smokeping/ui/Zoomer.js | 191 +++++++++++++++++++++ qooxdoo/source/translation/C.po | 4 +- qooxdoo/source/translation/de.po | 4 +- qooxdoo/source/translation/en.po | 4 +- qooxdoo/source/translation/fr.po | 4 +- qooxdoo/source/translation/messages.pot | 4 +- 12 files changed, 411 insertions(+), 106 deletions(-) create mode 100644 qooxdoo/source/class/Smokeping/ui/LoadingAnimation.js create mode 100644 qooxdoo/source/class/Smokeping/ui/Zoomer.js (limited to 'qooxdoo') 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 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 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 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; + } + } + } + + +}); + + diff --git a/qooxdoo/source/translation/C.po b/qooxdoo/source/translation/C.po index 6a80991..29f49af 100644 --- a/qooxdoo/source/translation/C.po +++ b/qooxdoo/source/translation/C.po @@ -7,7 +7,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2007-11-16 20:02-0600\n" +"POT-Creation-Date: 2007-11-17 12:18-0600\n" "PO-Revision-Date: 2007-10-19 09:30+0200\n" "Last-Translator: Automatically generated\n" "Language-Team: none\n" @@ -15,6 +15,6 @@ msgstr "" "Content-Type: text/plain; charset=ASCII\n" "Content-Transfer-Encoding: 8bit\n" -#: source/class/Smokeping/ui/Navigator.js:26 +#: source/class/Smokeping/ui/Navigator.js:29 msgid "Smokeping Graph Navigator" msgstr "" diff --git a/qooxdoo/source/translation/de.po b/qooxdoo/source/translation/de.po index 2d5e140..8242a2f 100644 --- a/qooxdoo/source/translation/de.po +++ b/qooxdoo/source/translation/de.po @@ -7,7 +7,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2007-11-16 20:02-0600\n" +"POT-Creation-Date: 2007-11-17 12:18-0600\n" "PO-Revision-Date: 2007-10-19 09:30+0200\n" "Last-Translator: Automatically generated\n" "Language-Team: none\n" @@ -16,7 +16,7 @@ msgstr "" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1);\n" -#: source/class/Smokeping/ui/Navigator.js:26 +#: source/class/Smokeping/ui/Navigator.js:29 msgid "Smokeping Graph Navigator" msgstr "" diff --git a/qooxdoo/source/translation/en.po b/qooxdoo/source/translation/en.po index a132e08..5bdff5f 100644 --- a/qooxdoo/source/translation/en.po +++ b/qooxdoo/source/translation/en.po @@ -7,7 +7,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2007-11-16 20:02-0600\n" +"POT-Creation-Date: 2007-11-17 12:18-0600\n" "PO-Revision-Date: 2007-10-26 23:25+0200\n" "Last-Translator: Automatically generated\n" "Language-Team: none\n" @@ -16,7 +16,7 @@ msgstr "" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1);\n" -#: source/class/Smokeping/ui/Navigator.js:26 +#: source/class/Smokeping/ui/Navigator.js:29 msgid "Smokeping Graph Navigator" msgstr "" diff --git a/qooxdoo/source/translation/fr.po b/qooxdoo/source/translation/fr.po index df14233..9e384bd 100644 --- a/qooxdoo/source/translation/fr.po +++ b/qooxdoo/source/translation/fr.po @@ -7,7 +7,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2007-11-16 20:02-0600\n" +"POT-Creation-Date: 2007-11-17 12:18-0600\n" "PO-Revision-Date: 2007-10-19 09:30+0200\n" "Last-Translator: Automatically generated\n" "Language-Team: none\n" @@ -16,6 +16,6 @@ msgstr "" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n > 1);\n" -#: source/class/Smokeping/ui/Navigator.js:26 +#: source/class/Smokeping/ui/Navigator.js:29 msgid "Smokeping Graph Navigator" msgstr "" diff --git a/qooxdoo/source/translation/messages.pot b/qooxdoo/source/translation/messages.pot index 80b6732..49e0525 100644 --- a/qooxdoo/source/translation/messages.pot +++ b/qooxdoo/source/translation/messages.pot @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2007-11-17 09:18-0600\n" +"POT-Creation-Date: 2007-11-17 18:07-0500\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME \n" "Language-Team: LANGUAGE \n" @@ -16,6 +16,6 @@ msgstr "" "Content-Type: text/plain; charset=CHARSET\n" "Content-Transfer-Encoding: 8bit\n" -#: source/class/Smokeping/ui/Navigator.js:26 +#: source/class/Smokeping/ui/Navigator.js:29 msgid "Smokeping Graph Navigator" msgstr "" -- cgit v1.2.3-24-g4f1b