[Pkg-nagios-changes] [SCM] UNNAMED PROJECT branch, debian/master, updated. 810edbdd3feedbfe37f4a65bee50b57b2f60fa2a

nap naparuba at gmail.com
Tue Feb 28 22:06:44 UTC 2012


The following commit has been merged in the debian/master branch:
commit fe4fe393c6024df9940925c59923c660b2b0408d
Author: nap <naparuba at gmail.com>
Date:   Thu Nov 17 22:09:03 2011 +0100

    Add : first attemps of a /flow page. Need to rework image management to get our divs instead like in /wall.

diff --git a/contrib/alternative-installation/shinken-install/tools/__init__.py b/shinken/webui/plugins/flow/__init__.py
similarity index 100%
copy from contrib/alternative-installation/shinken-install/tools/__init__.py
copy to shinken/webui/plugins/flow/__init__.py
diff --git a/shinken/webui/plugins/wall/wall.py b/shinken/webui/plugins/flow/flow.py
similarity index 97%
copy from shinken/webui/plugins/wall/wall.py
copy to shinken/webui/plugins/flow/flow.py
index 1f39786..eed9941 100644
--- a/shinken/webui/plugins/wall/wall.py
+++ b/shinken/webui/plugins/flow/flow.py
@@ -96,5 +96,5 @@ def get_page():
     return {'app' : app, 'user' : user, 'impacts' : impacts, 'problems' : all_pbs}
 
 
-pages = {get_page : { 'routes' : ['/wall/'], 'view' : 'wall', 'static' : True}}
+pages = {get_page : { 'routes' : ['/flow/'], 'view' : 'flow', 'static' : True}}
 
diff --git a/shinken/webui/plugins/wall/htdocs/css/wall.css b/shinken/webui/plugins/flow/htdocs/css/wall.css
similarity index 100%
copy from shinken/webui/plugins/wall/htdocs/css/wall.css
copy to shinken/webui/plugins/flow/htdocs/css/wall.css
diff --git a/shinken/webui/plugins/flow/htdocs/css/zflow.css b/shinken/webui/plugins/flow/htdocs/css/zflow.css
new file mode 100644
index 0000000..e2de830
--- /dev/null
+++ b/shinken/webui/plugins/flow/htdocs/css/zflow.css
@@ -0,0 +1,61 @@
+/*
+    Copyright (C) 2008, 2009 Charles Ying. All Rights Reserved.
+    
+    This distribution is released under the BSD license.
+
+    http://css-vfx.googlecode.com/
+    
+    See the README for documentation and license.
+*/
+
+.zflow
+{
+    -webkit-touch-callout: none;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.zflow div.centering
+{
+/*
+    position: absolute;
+*/
+    -webkit-perspective: 600;
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform: translate3d(0, 0, 0);
+}
+
+.zflow div.tray
+{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform: translate3d(0, 0, 0);
+
+    -webkit-transition-property: -webkit-transform;
+    -webkit-transition-duration: 0.4s;
+    -webkit-transition-timing-function: ease-out;
+}
+
+.zflow div.cell
+{
+    position: absolute;
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform: translate3d(0, 0, 0);
+
+    -webkit-transition-property: -webkit-transform opacity;
+    -webkit-transition-duration: 0.4s;
+    -webkit-transition-timing-function: ease-out;
+}
+
+.zflow div.cell img
+{
+    position: absolute;
+}
+
+.zflow div.cell canvas
+{
+    position: absolute;
+}
\ No newline at end of file
diff --git a/shinken/webui/plugins/eltdetail/htdocs/js/graphs.js b/shinken/webui/plugins/flow/htdocs/js/init.js
similarity index 85%
copy from shinken/webui/plugins/eltdetail/htdocs/js/graphs.js
copy to shinken/webui/plugins/flow/htdocs/js/init.js
index 828eb6b..852c8c0 100644
--- a/shinken/webui/plugins/eltdetail/htdocs/js/graphs.js
+++ b/shinken/webui/plugins/flow/htdocs/js/init.js
@@ -21,8 +21,13 @@
  along with Shinken.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-/* When the page load, we will look at the graph tab to show up
-   all element graph */
 
+/* We will initialize the WALL panel with our data*/
 window.addEvent('domready', function(){
+
+
+    /*options = {'autoslide' : true};
+    snowstack_init(images, options);*/
+    zflow(images, "#tray");
 });
+
diff --git a/shinken/webui/plugins/flow/htdocs/js/zflow.js b/shinken/webui/plugins/flow/htdocs/js/zflow.js
new file mode 100644
index 0000000..66f3775
--- /dev/null
+++ b/shinken/webui/plugins/flow/htdocs/js/zflow.js
@@ -0,0 +1,335 @@
+/*
+    Copyright (C) 2008, 2009 Charles Ying. All Rights Reserved.
+    
+    This distribution is released under the BSD license.
+
+    http://css-vfx.googlecode.com/
+    
+    See the README for documentation and license.
+*/
+
+(function () {  // Module pattern
+
+    var global = this;
+
+/*
+    Utilities (avoid jQuery dependencies)
+*/
+
+    function utils_extend(obj, dict)
+    {
+	for (var key in dict)
+	{
+            obj[key] = dict[key];
+	}
+    }
+
+    function utils_setsize(elem, w, h)
+    {
+	elem.style.width = w.toString() + "px";
+	elem.style.height = h.toString() + "px";
+    }
+
+    function utils_setxy(elem, x, y)
+    {
+	elem.style.left = Math.round(x).toString() + "px";
+	elem.style.top = Math.round(y).toString() + "px";
+    }
+
+/*
+    TrayController is a horizontal touch event controller that tracks cumulative offsets and passes events to a delegate. 
+*/
+
+    TrayController = function ()
+    {
+	return this;
+    }
+
+    TrayController.prototype.init = function (elem)
+    {
+	this.currentX = 0;
+	this.elem = elem;
+    }
+
+    TrayController.prototype.touchstart = function (event)
+    {
+	this.startX = event.touches[0].pageX - this.currentX;
+	this.touchMoved = false;
+
+	window.addEventListener("touchmove", this, true);
+	window.addEventListener("touchend", this, true);
+
+	this.elem.style.webkitTransitionDuration = "0s";
+    }
+
+    TrayController.prototype.touchmove = function (e)
+    {
+	this.touchMoved = true;
+	this.lastX = this.currentX;
+	this.lastMoveTime = new Date();
+	this.currentX = event.touches[0].pageX - this.startX;
+	this.delegate.update(this.currentX);
+    }
+
+    TrayController.prototype.touchend = function (e)
+    {
+	window.removeEventListener("touchmove", this, true);
+	window.removeEventListener("touchend", this, true);
+
+	this.elem.style.webkitTransitionDuration = "0.4s";
+
+	if (this.touchMoved)
+	{
+        /* Approximate some inertia -- the transition function takes care of the decay over 0.4s for us, but we need to amplify the last movement */
+            var delta = this.currentX - this.lastX;
+            var dt = (new Date()) - this.lastMoveTime + 1;
+        /* dx * 400 / dt */
+
+            this.currentX = this.currentX + delta * 200 / dt;
+            this.delegate.updateTouchEnd(this);
+	}
+    else
+	{
+            this.delegate.clicked(this.currentX);
+	}
+    }
+
+    TrayController.prototype.handleEvent = function (event)
+    {
+	this[event.type](event);
+	event.preventDefault();
+    }
+
+/*
+    These variables define how the zflow presentation is made.
+*/
+
+    const CSIZE = 150;
+    const CGAP = CSIZE / 2;
+
+    const FLOW_ANGLE = 70;
+    const FLOW_THRESHOLD = CGAP / 2;
+    const FLOW_ZFOCUS = CSIZE;
+    const FLOW_XGAP = CSIZE / 3;
+
+    const T_NEG_ANGLE = "rotateY(" + (- FLOW_ANGLE) + "deg)";
+    const T_ANGLE = "rotateY(" + FLOW_ANGLE + "deg)";
+    const T_ZFOCUS = "translate3d(0, 0, " + FLOW_ZFOCUS + "px)";
+
+    FlowDelegate = function ()
+    {
+	this.cells = new Array();
+	this.transforms = new Array();
+    }
+
+    FlowDelegate.prototype.init = function (elem)
+    {
+	this.elem = elem;
+    }
+
+    FlowDelegate.prototype.updateTouchEnd = function (controller)
+    {
+	this.lastFocus = undefined;
+
+    // Snap to nearest position
+	var i = this.getFocusedCell(controller.currentX);
+
+	controller.currentX = - i * CGAP;
+	this.update(controller.currentX);
+    }
+
+    FlowDelegate.prototype.clicked = function (currentX)
+    {
+	var i = - Math.round(currentX / CGAP);
+	var cell = this.cells[i];
+
+	var transform = this.transformForCell(cell, i, currentX);
+
+	if ((this.lastFocus == undefined) || this.lastFocus != i)
+	{
+            transform += " translate3d(0, 0, 150px) rotateY(180deg)";
+            this.lastFocus = i;
+	}
+    else
+	{
+            this.lastFocus = undefined;
+	}
+
+	this.setTransformForCell(cell, i, transform);
+    }
+
+    FlowDelegate.prototype.getFocusedCell = function (currentX)
+    {
+    // Snap to nearest position
+	var i = - Math.round(currentX / CGAP);
+
+    // Clamp to cells array boundary
+	return Math.min(Math.max(i, 0), this.cells.length - 1);
+    }
+
+    FlowDelegate.prototype.transformForCell = function (cell, i, offset)
+    {
+    /* 
+        This function needs to be fast, so we avoid function calls, divides, Math.round,
+        and precalculate any invariants we can.
+    */
+	var x = (i * CGAP);
+	var ix = x + offset;
+
+	if ((ix < FLOW_THRESHOLD) && (ix >= -FLOW_THRESHOLD))
+	{
+        // yangle = 0, zpos = FLOW_ZFOCUS
+            return T_ZFOCUS + " translate3d(" + x + "px, 0, 0)";
+	}
+	else if (ix > 0)
+	{
+        // yangle = -FLOW_ANGLE, x + FLOW_XGAP
+            return "translate3d(" + (x + FLOW_XGAP) + "px, 0, 0) " + T_NEG_ANGLE;
+	}
+    else
+	{
+        // yangle = FLOW_ANGLE, x - FLOW_XGAP
+            return "translate3d(" + (x - FLOW_XGAP) + "px, 0, 0) " + T_ANGLE;
+	}
+    }
+
+    FlowDelegate.prototype.setTransformForCell = function (cell, i, transform)
+    {
+	if (this.transforms[i] != transform)
+	{
+            cell.style.webkitTransform = transform;
+            this.transforms[i] = transform;
+	}
+    }
+
+    FlowDelegate.prototype.update = function (currentX)
+    {
+	this.elem.style.webkitTransform = "translate3d(" + (currentX) + "px, 0, 0)";
+
+    /*
+        It would be nice if we only updated dirty cells... for now, we use a cache
+    */
+	for (var i in this.cells)
+	{
+            var cell = this.cells[i];
+            this.setTransformForCell(cell, i, this.transformForCell(cell, i, currentX));
+            i += 1;
+	}
+    }
+
+    global.zflow = function (images, selector)
+    {
+	var controller = new TrayController();
+	var delegate = new FlowDelegate();
+	var tray = document.querySelector(selector);
+
+	controller.init(tray);
+	delegate.init(tray);
+
+	controller.delegate = delegate;
+
+	var imagesLeft = images.length;
+    
+	var cellCSS = {
+            top: Math.round(-CSIZE * 0.65) + "px",
+            left: Math.round(-CSIZE / 2) + "px",
+            width: CSIZE + "px",
+            height: Math.round(CSIZE * 1.5) + "px",
+            opacity: 0,
+	}
+
+	images.forEach(function (url, i)
+		       {
+			   var cell = document.createElement("div");
+			   var image = document.createElement("img");
+			   var canvas = document.createElement("canvas");
+
+			   cell.className = "cell";
+			   cell.appendChild(image);
+			   cell.appendChild(canvas);
+
+			   image.src = url;
+
+			   image.addEventListener("load", function ()
+						  {
+						      imagesLeft -= 1;
+
+						      var iwidth = image.width;
+						      var iheight = image.height;
+            
+						      var ratio = Math.min(CSIZE / iheight, CSIZE / iwidth);
+            
+						      iwidth *= ratio;
+						      iheight *= ratio;
+
+						      utils_setsize(image, iwidth, iheight);
+
+						      utils_extend(cell.style, cellCSS);
+
+						      utils_setxy(image, (CSIZE - iwidth) / 2, CSIZE - iheight);
+						      utils_setxy(canvas, (CSIZE - iwidth) / 2, CSIZE);
+
+						      reflect(image, iwidth, iheight, canvas);
+
+						      delegate.setTransformForCell(cell, delegate.cells.length, delegate.transformForCell(cell, delegate.cells.length, controller.currentX));
+						      delegate.cells.push(cell);
+
+            // Start at 0 opacity
+						      tray.appendChild(cell);
+
+            // Set to 1 to fade element in.
+						      cell.style.opacity = 1.0;
+
+						      if (imagesLeft == 0)
+						      {
+							  window.setTimeout( function() { window.scrollTo(0, 0); }, 100 );
+						      }
+						  });
+		       });
+
+	tray.addEventListener('touchstart', controller, false);
+
+	/* Limited keyboard support for now */
+	window.addEventListener('keydown', function (e)
+				{
+				    if (e.keyCode == 37)
+				    {
+					/* Left Arrow */
+					controller.currentX += CGAP;
+					delegate.updateTouchEnd(controller);
+				    }
+				    else if (e.keyCode == 39)
+				    {
+					/* Right Arrow */
+					controller.currentX -= CGAP;
+					delegate.updateTouchEnd(controller);
+				    }
+				});
+    }
+
+    function reflect(image, iwidth, iheight, canvas)
+    {
+	canvas.width = iwidth;
+	canvas.height = iheight / 2;
+
+	var ctx = canvas.getContext("2d");
+
+	ctx.save();
+
+	ctx.translate(0, iheight - 1);
+	ctx.scale(1, -1);
+	ctx.drawImage(image, 0, 0, iwidth, iheight);
+
+	ctx.restore();
+
+	ctx.globalCompositeOperation = "destination-out";
+
+	var gradient = ctx.createLinearGradient(0, 0, 0, iheight / 2);
+	gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
+	gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
+    
+	ctx.fillStyle = gradient;
+	ctx.fillRect(0, 0, iwidth, iheight / 2);
+    }
+
+})();
\ No newline at end of file
diff --git a/shinken/webui/plugins/flow/views/flow.tpl b/shinken/webui/plugins/flow/views/flow.tpl
new file mode 100644
index 0000000..27b0ca9
--- /dev/null
+++ b/shinken/webui/plugins/flow/views/flow.tpl
@@ -0,0 +1,18 @@
+%helper = app.helper
+
+%rebase layout css=['flow/css/zflow.css', 'wall/css/wall.css'], title='Flow view', js=['flow/js/zflow.js', 'flow/js/init.js'], refresh=True, user=user, print_menu=False, print_header=True
+
+
+
+<body class="zflow">
+
+<div class="centering">
+    <div id="tray" class="tray"></div>
+</div>
+
+
+<script type="text/javascript">
+var images = {{!impacts}};
+</script>
+
+

-- 
UNNAMED PROJECT



More information about the Pkg-nagios-changes mailing list