From 823d40c77053c8fb30359de896d7e30b85de2a3a Mon Sep 17 00:00:00 2001
From: Tobi Oetiker <tobi@oetiker.ch>
Date: Sun, 18 Nov 2007 12:04:33 +0000
Subject: more updates

---
 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 +++++++++++++++++++++
 6 files changed, 400 insertions(+), 95 deletions(-)
 create mode 100644 qooxdoo/source/class/Smokeping/ui/LoadingAnimation.js
 create mode 100644 qooxdoo/source/class/Smokeping/ui/Zoomer.js

(limited to 'qooxdoo/source/class/Smokeping/ui')

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;
+             }
+		}
+	}
+
+
+});
+ 
+ 
-- 
cgit v1.2.3-24-g4f1b