From 4ae03184ecfcab1377b9ac7911f792a9b34a0061 Mon Sep 17 00:00:00 2001 From: bwent Date: Tue, 21 Jul 2015 10:23:41 -0700 Subject: [PATCH] add subpanel functionality --- examples/utilities/tools/cookies.js | 242 +++++++++++++++++++++++++--- 1 file changed, 223 insertions(+), 19 deletions(-) diff --git a/examples/utilities/tools/cookies.js b/examples/utilities/tools/cookies.js index 8b4d739c02..2949626252 100644 --- a/examples/utilities/tools/cookies.js +++ b/examples/utilities/tools/cookies.js @@ -92,7 +92,6 @@ Slider = function(x,y,width,thumbSize) { this.isMoving = false; }; - // Public members: this.setNormalizedValue = function(value) { if (value < 0.0) { @@ -113,10 +112,19 @@ Slider = function(x,y,width,thumbSize) { this.setNormalizedValue(normValue); }; + this.reset = function(resetValue) { + this.setValue(resetValue); + this.onValueChanged(resetValue); + }; + this.getValue = function() { return this.getNormalizedValue() * (this.maxValue - this.minValue) + this.minValue; }; + this.getHeight = function() { + return 1.5 * this.thumbSize; + } + this.onValueChanged = function(value) {}; this.destroy = function() { @@ -130,6 +138,7 @@ Slider = function(x,y,width,thumbSize) { this.setBackgroundColor = function(color) { Overlays.editOverlay(this.background, {backgroundColor: { red: color.x*255, green: color.y*255, blue: color.z*255 }}); }; + } // The Checkbox class @@ -158,10 +167,12 @@ Checkbox = function(x,y,width,thumbSize) { visible: true }); - + this.thumbSize = thumbSize; var checkX = x + (0.25 * thumbSize); var checkY = y + (0.25 * thumbSize); + var boxCheckStatus; + var clickedBox = false; var checkMark = Overlays.addOverlay("text", { @@ -181,22 +192,22 @@ Checkbox = function(x,y,width,thumbSize) { width: thumbSize / 2.5, height: thumbSize / 2.5, alpha: 1.0, - visible: boxCheckStatus + visible: !boxCheckStatus }); - - var boxCheckStatus; - var clickedBox = false; - this.updateThumb = function() { - if (clickedBox) { - boxCheckStatus = !boxCheckStatus; - if (boxCheckStatus) { - Overlays.editOverlay(unCheckMark, { visible: false }); - } else { - Overlays.editOverlay(unCheckMark, { visible: true }); - } + this.updateThumb = function() { + if(!clickedBox) { + return; + } + + boxCheckStatus = !boxCheckStatus; + if (boxCheckStatus) { + Overlays.editOverlay(unCheckMark, { visible: false }); + } else { + Overlays.editOverlay(unCheckMark, { visible: true }); } + }; this.isClickableOverlayItem = function(item) { @@ -215,10 +226,12 @@ Checkbox = function(x,y,width,thumbSize) { this.onValueChanged(this.getValue()); }; + this.onMouseReleaseEvent = function(event) { this.clickedBox = false; }; + // Public members: this.setNormalizedValue = function(value) { boxCheckStatus = value; @@ -232,10 +245,26 @@ Checkbox = function(x,y,width,thumbSize) { this.setNormalizedValue(value); }; + this.reset = function(resetValue) { + this.setValue(resetValue); + + this.onValueChanged(resetValue); + }; + this.getValue = function() { return boxCheckStatus; }; + this.getHeight = function() { + return 1.5 * this.thumbSize; + } + + this.setterFromWidget = function(value) { + var status = boxCheckStatus; + this.onValueChanged(boxCheckStatus); + this.updateThumb(); + }; + this.onValueChanged = function(value) {}; this.destroy = function() { @@ -267,6 +296,8 @@ ColorBox = function(x,y,width,thumbSize) { this.green.setBackgroundColor({x: 0, y: 1, z: 0}); this.blue.setBackgroundColor({x: 0, y: 0, z: 1}); + + this.isClickableOverlayItem = function(item) { return this.red.isClickableOverlayItem(item) || this.green.isClickableOverlayItem(item) @@ -293,6 +324,7 @@ ColorBox = function(x,y,width,thumbSize) { this.blue.onMousePressEvent(event, clickedOverlay); }; + this.onMouseReleaseEvent = function(event) { this.red.onMouseReleaseEvent(event); this.green.onMouseReleaseEvent(event); @@ -323,11 +355,20 @@ ColorBox = function(x,y,width,thumbSize) { this.updateRGBSliders(value); }; + this.reset = function(resetValue) { + this.setValue(resetValue); + this.onValueChanged(resetValue); + }; + this.getValue = function() { var value = {x:this.red.getValue(), y:this.green.getValue(),z:this.blue.getValue()}; return value; }; + this.getHeight = function() { + return 1.5 * this.thumbSize; + } + this.destroy = function() { this.red.destroy(); this.green.destroy(); @@ -345,6 +386,8 @@ DirectionBox = function(x,y,width,thumbSize) { var sliderWidth = width; this.yaw = new Slider(x, y, width, slideHeight); this.pitch = new Slider(x, y + slideHeight, width, slideHeight); + + this.yaw.setThumbColor({x: 1, y: 0, z: 0}); this.yaw.minValue = -180; @@ -400,6 +443,11 @@ DirectionBox = function(x,y,width,thumbSize) { this.pitch.setValue(direction.y); }; + this.reset = function(resetValue) { + this.setValue(resetValue); + this.onValueChanged(resetValue); + }; + this.getValue = function() { var dirZ = this.pitch.getValue(); var yaw = this.yaw.getValue() * Math.PI / 180; @@ -408,6 +456,10 @@ DirectionBox = function(x,y,width,thumbSize) { return value; }; + this.getHeight = function() { + return 1.5 * this.thumbSize; + } + this.destroy = function() { this.yaw.destroy(); this.pitch.destroy(); @@ -420,6 +472,48 @@ DirectionBox = function(x,y,width,thumbSize) { var textFontSize = 12; +// TODO: Make collapsable +function CollapsablePanelItem(name, x, y, textWidth, height) { + this.name = name; + this.height = height; + + var topMargin = (height - textFontSize); + + this.thumb = Overlays.addOverlay("text", { + backgroundColor: { red: 220, green: 220, blue: 220 }, + textFontSize: 10, + x: x, + y: y, + width: rawHeight, + height: rawHeight, + alpha: 1.0, + backgroundAlpha: 1.0, + visible: true + }); + + this.title = Overlays.addOverlay("text", { + backgroundColor: { red: 255, green: 255, blue: 255 }, + x: x + rawHeight, + y: y, + width: textWidth, + height: height, + alpha: 1.0, + backgroundAlpha: 0.5, + visible: true, + text: name, + font: {size: textFontSize}, + topMargin: topMargin, + }); + + this.destroy = function() { + Overlays.deleteOverlay(this.title); + Overlays.deleteOverlay(this.thumb); + if (this.widget != null) { + this.widget.destroy(); + } + } +} + function PanelItem(name, setter, getter, displayer, x, y, textWidth, valueWidth, height) { //print("creating panel item: " + name); @@ -548,15 +642,18 @@ Panel = function(x, y) { // Reset panel item upon double-clicking this.mouseDoublePressEvent = function(event) { + var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y}); for (var i in this.items) { var item = this.items[i]; var widget = item.widget; - if (item.title == clickedOverlay || item.value == clickedOverlay) { - widget.updateThumb(); - widget.onValueChanged(item.resetValue); + if (clickedOverlay == item.title) { + item.activeWidget = widget; + + item.activeWidget.reset(item.resetValue); + break; } } @@ -569,8 +666,56 @@ Panel = function(x, y) { this.activeWidget = null; }; - this.newSlider = function(name, minValue, maxValue, setValue, getValue, displayValue) { + this.onMousePressEvent = function(event, clickedOverlay) { + for (var i in this.items) { + var item = this.items[i]; + if(item.widget.isClickableOverlayItem(clickedOverlay)) { + item.activeWidget = item.widget; + item.activeWidget.onMousePressEvent(event,clickedOverlay); + } + } + } + this.reset = function() { + for (var i in this.items) { + var item = this.items[i]; + if (item.activeWidget) { + item.activeWidget.reset(item.resetValue); + } + } + } + + this.onMouseMoveEvent = function(event) { + for (var i in this.items) { + var item = this.items[i]; + if (item.activeWidget) { + item.activeWidget.onMouseMoveEvent(event); + } + } + } + + this.onMouseReleaseEvent = function(event, clickedOverlay) { + for (var i in this.items) { + var item = this.items[i]; + if (item.activeWidget) { + item.activeWidget.onMouseReleaseEvent(event); + } + item.activeWidget = null; + } + } + + this.onMouseDoublePressEvent = function(event, clickedOverlay) { + + for (var i in this.items) { + var item = this.items[i]; + if (item.activeWidget) { + item.activeWidget.onMouseDoublePressEvent(event); + } + } + } + + this.newSlider = function(name, minValue, maxValue, setValue, getValue, displayValue) { + this.nextY = this.y + this.getHeight(); var item = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight); var slider = new Slider(this.widgetX, this.nextY, widgetWidth, rawHeight); @@ -591,6 +736,8 @@ Panel = function(x, y) { } else if (displayValue == false) { display = function() {return "Off";}; } + + this.nextY = this.y + this.getHeight(); var item = new PanelItem(name, setValue, getValue, display, this.x, this.nextY, textWidth, valueWidth, rawHeight); @@ -600,11 +747,12 @@ Panel = function(x, y) { item.widget.onValueChanged = function(value) { item.setterFromWidget(value); }; item.setter(getValue()); this.items[name] = item; - this.nextY += rawYDelta; + //print("created Item... checkbox=" + name); }; this.newColorBox = function(name, setValue, getValue, displayValue) { + this.nextY = this.y + this.getHeight(); var item = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight); @@ -618,7 +766,12 @@ Panel = function(x, y) { // print("created Item... colorBox=" + name); }; +<<<<<<< Updated upstream this.newDirectionBox = function(name, setValue, getValue, displayValue) { +======= + this.newDirectionBox= function(name, setValue, getValue, displayValue) { + this.nextY = this.y + this.getHeight(); +>>>>>>> Stashed changes var item = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight); @@ -632,6 +785,7 @@ Panel = function(x, y) { // print("created Item... directionBox=" + name); }; +<<<<<<< Updated upstream this.newSubPanel = function(name) { var item = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight); @@ -645,6 +799,32 @@ Panel = function(x, y) { }; +======= + var indentation = 30; + + this.newSubPanel = function(name) { + //TODO: make collapsable, fix double-press event + this.nextY = this.y + this.getHeight(); + + var item = new CollapsablePanelItem(name, this.x, this.nextY, textWidth, rawHeight, panel); + item.isSubPanel = true; + + this.nextY += 1.5 * item.height; + + var subPanel = new Panel(this.x + indentation, this.nextY); + + item.widget = subPanel; + this.items[name] = item; + return subPanel; + // print("created Item... subPanel=" + name); + }; + + this.onValueChanged = function(value) { + for (var i in this.items) { + this.items[i].widget.onValueChanged(value); + } + } +>>>>>>> Stashed changes this.destroy = function() { for (var i in this.items) { @@ -652,6 +832,7 @@ Panel = function(x, y) { } } + this.set = function(name, value) { var item = this.items[name]; if (item != null) { @@ -676,6 +857,29 @@ Panel = function(x, y) { return null; } + this.isClickableOverlayItem = function(item) { + for (var i in this.items) { + if (this.items[i].widget.isClickableOverlayItem(item)) { + return true; + } + } + return false; + } + + this.getHeight = function() { + var height = 0; + + for (var i in this.items) { + height += this.items[i].widget.getHeight(); + if(this.items[i].isSubPanel) { + height += 1.5 * rawHeight; + } + } + + + return height; + } + };