nutella_framework 0.4.23 → 0.4.24

data/framework_components/monitoring-interface/js/d3/ui/ui-element.js

@@ -0,0 +1,245 @@
+/*
+// palette 1
+var defaultPalette = {
+    primary: {
+        dark: "#0288D1",
+        normal: "#19BB9B",
+        bright: "#B3E5FC"
+    },
+    text: {
+        dark: "#000000",
+        bright: "#FFFFFF"
+    },
+    accent1: {
+        dark: "#16a689",
+        normal: "#19BB9B",
+        bright: "#1dd9b4"
+    },
+    accent2: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFFFFF"
+    },
+    accent3: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFE0B2"
+    },
+    background: {
+        dark: "#D2D7D3",
+        normal: "#EEEEEE"
+
+    },
+    state: {
+        red: "#C0392B",
+        //red: "#96281B",
+        //red: "#F26A4B",
+        green: "#019875"
+    }
+};
+*/
+
+/*
+// palette 2
+var defaultPalette = {
+    primary: {
+        dark: "#0288D1",
+        normal: "#19BB9B",
+        bright: "#B3E5FC"
+    },
+    text: {
+        dark: "#FFFFFF",
+        bright: "#FFFFFF"
+    },
+    accent1: {
+        dark: "#16a689",
+        normal: "#19BB9B",
+        bright: "#1dd9b4"
+    },
+    accent2: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFFFFF"
+    },
+    accent3: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFE0B2"
+    },
+    background: {
+        dark: "#534f59",
+        normal: "#39363D"
+
+    },
+    state: {
+        red: "#C0392B",
+        //red: "#96281B",
+        //red: "#F26A4B",
+        green: "#019875"
+    }
+};
+*/
+/*
+// palette 3
+var defaultPalette = {
+    primary: {
+        dark: "#0288D1",
+        normal: "#425266",
+        bright: "#B3E5FC"
+    },
+    text: {
+        dark: "#FFFFFF",
+        bright: "#FFFFFF"
+    },
+    accent1: {
+        dark: "#323e4d",
+        normal: "#425266",
+        bright: "#536780"
+    },
+    accent2: {
+        dark: "#FFFFFF",
+        normal: "#FF9800",
+        bright: "#FFFFFF"
+    },
+    accent3: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFE0B2"
+    },
+    background: {
+        dark: "#637b99",
+        normal: "#323e4d"
+
+    },
+    state: {
+        red: "#D24D57",
+        //red: "#E74C3C",
+        //red: "#C0392B",
+        //red: "#96281B",
+        //red: "#F26A4B",
+        green: "#26A65B"
+    }
+};*/
+
+// palette 4
+var defaultPalette = {
+    primary: {
+        dark: "#0288D1",
+        normal: "#425266",
+        bright: "#B3E5FC"
+    },
+    text: {
+        dark: "#636D6E",
+        bright: "#FFFFFF"
+    },
+    accent1: {
+        dark: "#323e4d",
+        normal: "#425266",
+        bright: "#536780"
+    },
+    accent2: {
+        dark: "#FFFFFF",
+        normal: "#FF9800",
+        bright: "#FFFFFF"
+    },
+    accent3: {
+        dark: "#F57C00",
+        normal: "#FF9800",
+        bright: "#FFE0B2"
+    },
+    background: {
+        dark: "#C8CBCC",
+        normal: "#ecf0f1"
+
+    },
+    state: {
+        red: "#CC4B55",
+        //red: "#E74C3C",
+        //red: "#C0392B",
+        //red: "#96281B",
+        //red: "#F26A4B",
+        green: "#26A65B"
+    }
+};
+var UIElement = function(delegate) {
+    var self = {};
+
+    // Public variables
+    self.delegate = undefined;
+
+    // Private variables
+    var view = undefined;
+    var x = 0;
+    var y = 0;
+    var show = true;
+
+    // Protected variables
+    self.palette = defaultPalette;
+
+    // Getter and setter
+    self.__defineGetter__("x", function() {
+        return x;
+    });
+
+    self.__defineGetter__("y", function() {
+        return y;
+    });
+
+    self.__defineGetter__("view", function() {
+        return view;
+    });
+
+    self.__defineGetter__("show", function() {
+        return show;
+    });
+
+
+    self.__defineSetter__("x", function(newX) {
+        x = newX;
+        self.updateViewPosition();
+    });
+
+    self.__defineSetter__("y", function(newY) {
+        y = newY;
+        self.updateViewPosition();
+    });
+
+    self.__defineSetter__("view", function(newView) {
+        view = newView;
+        self.updateViewPosition();
+        self.updateViewOpacity();
+    });
+
+    self.__defineSetter__("show", function(newShow) {
+        if(show != newShow) {
+            show = newShow;
+            self.updateViewOpacity();
+        }
+    });
+
+    self.updateViewPosition = function() {
+        if(view != undefined) {
+            view.attr("transform", "translate(" + x + ", " + y + ")");
+        }
+    };
+
+    self.updateViewOpacity = function() {
+        if(view != undefined) {
+            view.opacity(show?1:0);
+        }
+    };
+
+    // Constructor
+    self.init = function() {
+        self.delegate = delegate;
+        view = self.delegate.newView();
+    }();
+
+    // Destructor
+    self.deinit = function() {
+        view.remove();
+    };
+
+    return self;
+
+};

data/framework_components/monitoring-interface/js/d3/ui/ui-legend.js

@@ -0,0 +1,174 @@
+var UILegend = function(delegate, name) {
+    var self = UIElement(delegate);
+
+    // Static attributes
+    UILegend.style = {
+        legendBoxWidth: 100,
+        legendRightMargin: 50,
+        bottomMargin: 50,
+        legendPositionYExpanded: -70,
+        headerSpacing: 10,
+        legendSpacing: 20,
+        arrow_thick: 11,
+        arrow_ratio: 1.5,
+        square_side: 10.0
+    };
+
+    // Public variables
+
+    // Private variables
+    self._legendGroup = undefined;
+    self._legendName = undefined;
+    self._arrowGroup = undefined;
+    self._squareGroup = undefined;
+    self._expanded = false;
+
+    self.legendAction = function(){
+        self._expanded = !self._expanded;
+        self.render();
+    };
+
+    self.render = function() {
+
+        var layer = self.view;
+
+        // function for the rendering of the triangle and square
+        var lineFunction = d3.svg.line()
+            .x(function(d) { return d.x; })
+            .y(function(d) { return d.y; })
+            .interpolate("linear");
+        // Triangle data
+        var arrowData = [
+            { "x":  0.0, "y": 0.0},
+            { "x":  1*UILegend.style.arrow_thick/UILegend.style.arrow_ratio, "y": 1*UILegend.style.arrow_thick},
+            { "x": -1*UILegend.style.arrow_thick/UILegend.style.arrow_ratio, "y": 1*UILegend.style.arrow_thick}
+        ];
+
+        if(self._legendGroup == undefined) {
+            self._legendGroup = layer
+                .append("g")
+                .class("legendGroup")
+                .attr("transform", "translate(" + (windowViewController.width / 2 - UILegend.style.legendBoxWidth - UILegend.style.legendRightMargin) + "," + (windowViewController.height / 2 - UILegend.style.bottomMargin) +")");
+        }
+        else {
+            // Move during window resize
+            self._legendGroup
+                .attr("transform", "translate(" + (windowViewController.width / 2 - UILegend.style.legendBoxWidth - UILegend.style.legendRightMargin) + "," + (windowViewController.height / 2 - UILegend.style.bottomMargin) +")");
+        }
+
+        if(self._arrowGroup == undefined){
+            self._arrowGroup = self._legendGroup
+                .append("g")
+                .class("arrowGroup")
+                .opacity(0);
+
+            self._arrowGroup
+                .append("text")
+                .class("explanation")
+                .text("subscribed channel")
+                .x(5)
+                .y(3);
+
+            self._arrowGroup
+                .append("path")
+                .class("subscribeTriangle")
+                .attr("d", lineFunction(arrowData))
+                .attr("fill", self.palette.accent1.dark)
+                .attr("transform", "rotate(90)")
+                .x(0)
+                .y(0);
+        }
+
+        if(self._squareGroup == undefined){
+            self._squareGroup = self._legendGroup
+                .append("g")
+                .class("arrowGroup")
+                .opacity(0);
+
+            self._squareGroup
+                .append("text")
+                .class("explanation")
+                .text("handle-requests channel")
+                .x(5);
+
+            self._squareGroup
+                .append("rect")
+                .height(UILegend.style.square_side)
+                .width(UILegend.style.square_side)
+                .attr("fill", self.palette.accent1.dark)
+                .x(-11)
+                .y(-8);
+        }
+
+        if(self._legendName == undefined) {
+            self._legendName = self._legendGroup
+                .append("text")
+                .class("legendName")
+                .class("title")
+                .fill(defaultPalette.text.dark)
+                .on("mouseover", function() {
+                    self._legendName.fill("black");
+                })
+                .on("mouseout", function() {
+                    self._legendName.fill(defaultPalette.text.dark);
+                })
+                .text("Legend")
+                .class("pointer")
+                .y(0)
+                .on("click", self.legendAction);
+        }
+
+        if(self._expanded){
+            self._legendName
+                .on("mouseout", null)
+                .transition()
+                .y(UILegend.style.legendPositionYExpanded)
+                .fill("black");
+
+            self._arrowGroup
+                .attr("transform", "translate(0," + (UILegend.style.legendPositionYExpanded + UILegend.style.headerSpacing + UILegend.style.legendSpacing) +")")
+                .transition()
+                .delay(500)
+                .opacity(1);
+
+            self._squareGroup
+                .attr("transform", "translate(0," + (UILegend.style.legendPositionYExpanded + UILegend.style.headerSpacing + UILegend.style.legendSpacing * 2) +")")
+                .transition()
+                .delay(500)
+                .opacity(1);
+        }
+
+        if(!self._expanded){
+            self._legendName
+                .on("mouseout", function() {
+                    self._legendName.fill(defaultPalette.text.dark);
+                })
+                .transition()
+                .y(0)
+                .fill(defaultPalette.text.dark);
+
+            self._arrowGroup
+                .attr("transform", "translate(0,0)")
+                .opacity(0);
+
+            self._squareGroup
+                .attr("transform", "translate(0,0)")
+                .opacity(0);
+        }
+
+        notificationCenter.subscribe(Notifications.ui.APPLICATION_REDUCTION_FINISHED, function() {
+            self._expanded = false;
+        });
+    };
+
+    // Constructor
+    self.init = function() {
+    }();
+
+    // Destructor
+    self.deinit = function() {
+    };
+
+    return self;
+
+};

data/framework_components/monitoring-interface/js/d3/ui/ui-notification.js

@@ -0,0 +1,90 @@
+var UINotification = function(delegate) {
+    var self = UIElement(delegate);
+
+    // Static attributes
+    UINotification.style = {
+        notificationRadius: 10,
+        notificationFontSize: 14,
+        margin: {x: 0, y: 10}
+    };
+
+    // Public attributes
+    self.name = undefined;   // Name of the notification
+
+    // Private variables
+    var notificationGroup = undefined;
+    var notificationCircle = undefined;
+    var notificationText = undefined;
+
+    self.render = function() {
+
+        var layer = self.view;
+
+        if(notificationGroup == undefined)
+            notificationGroup = layer.layerWithName("notificationGroup");
+
+        if(notificationCircle == undefined) {
+            notificationCircle = notificationGroup
+                .append("circle")
+                .class("notificationCircle")
+                .cx(0)
+                .cy(0)
+                .r(UINotification.style.notificationRadius)
+                .fill(self.palette.accent2.normal);
+        }
+
+        if(notificationText == undefined) {
+            notificationText = notificationGroup
+                .append("text")
+                .class("no_interaction")
+                .class("notificationText")
+                .attr("text-anchor", "middle")
+                .attr("font-size", UINotification.style.notificationFontSize);
+        }
+
+        if(self.show == false) {
+            notificationGroup
+                .transition()
+                .duration(Animations.notification.NOTIFICATION_FADE_OUT.duration)
+                .delay(Animations.notification.NOTIFICATION_FADE_OUT.delay)
+                .opacity(0);
+
+            notificationCircle
+                .cx(0)
+                .cy(0)
+                .r(0);
+        }
+        else {
+            notificationGroup
+                .transition()
+                .duration(Animations.notification.NOTIFICATION_FADE_IN.duration)
+                .delay(Animations.notification.NOTIFICATION_FADE_IN.delay)
+                .opacity(1);
+
+            notificationCircle
+                .cx(0)
+                .cy(0)
+                .r(UINotification.style.notificationRadius);
+
+        }
+
+
+
+        notificationText
+            .y(UINotification.style.notificationFontSize/3)
+            .text(delegate.notification(self.name));
+    };
+
+    // Constructor
+    self.init = function() {
+
+    }();
+
+    // Destructor
+    self.deinit = function() {
+        // Place here the code for dealloc eventual objects
+
+    };
+
+    return self;
+};