diff --git a/examples/Recorder.js b/examples/Recorder.js index 51cdf06211..d691b64481 100644 --- a/examples/Recorder.js +++ b/examples/Recorder.js @@ -15,17 +15,16 @@ var recordingFile = "recording.rec"; var windowDimensions = Controller.getViewportDimensions(); var TOOL_ICON_URL = "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/tools/"; -var TOOL_WIDTH = 50; -var TOOL_HEIGHT = 50; var ALPHA_ON = 1.0; -var ALPHA_OFF = 0.5; +var ALPHA_OFF = 0.7; +Tool.IMAGE_WIDTH *= 0.7; +Tool.IMAGE_HEIGHT *= 0.7; var toolBar = null; var recordIcon; var playIcon; var saveIcon; var loadIcon; -var loadLastIcon; setupToolBar(); function setupToolBar() { @@ -35,48 +34,36 @@ function setupToolBar() { } toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL); + toolBar.setBack({ red: 128, green: 128, blue: 128 }, 0.8); recordIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "add-model-tool.svg", - subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, - width: TOOL_WIDTH, - height: TOOL_HEIGHT, - alpha: ALPHA_ON, + imageURL: "file:/Users/clement/Downloads/svg/camera8.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording()) ? ALPHA_ON : ALPHA_OFF, visible: true - }, true, MyAvatar.isRecording()); + }, false); playIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "add-model-tool.svg", - subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, - width: TOOL_WIDTH, - height: TOOL_HEIGHT, + imageURL: "file:/Users/clement/Downloads/svg/media23.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, alpha: ALPHA_ON, visible: true }, false, false); saveIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "add-model-tool.svg", - subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, - width: TOOL_WIDTH, - height: TOOL_HEIGHT, + imageURL: "file:/Users/clement/Downloads/svg/save15.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, alpha: ALPHA_ON, visible: true }, false, false); loadIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "add-model-tool.svg", - subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, - width: TOOL_WIDTH, - height: TOOL_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false, false); - - loadLastIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "add-model-tool.svg", - subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, - width: TOOL_WIDTH, - height: TOOL_HEIGHT, + imageURL: "file:/Users/clement/Downloads/svg/upload2.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, alpha: ALPHA_ON, visible: true }, false, false); @@ -96,8 +83,13 @@ function mousePressEvent(event) { if (recordIcon === toolBar.clicked(clickedOverlay)) { if (!MyAvatar.isRecording()) { MyAvatar.startRecording(); + toolBar.setAlpha(ALPHA_ON, recordIcon); + toolBar.setBack({ red: 128, green: 0, blue: 0 }, 0.9); } else { MyAvatar.stopRecording(); + MyAvatar.loadLastRecording(); + toolBar.setAlpha(ALPHA_OFF, recordIcon); + toolBar.setBack({ red: 128, green: 128, blue: 128 }, 0.8); } } else if (playIcon === toolBar.clicked(clickedOverlay)) { if (!MyAvatar.isRecording()) { @@ -113,8 +105,6 @@ function mousePressEvent(event) { } else if (loadIcon === toolBar.clicked(clickedOverlay)) { recordingFile = Window.browse("Load recorcding from file", ".", "*.rec"); MyAvatar.loadRecording(recordingFile); - } else if (loadLastIcon === toolBar.clicked(clickedOverlay)) { - MyAvatar.loadLastRecording(); } else { } diff --git a/examples/toolBars.js b/examples/toolBars.js index ede3b80062..064ae372fd 100644 --- a/examples/toolBars.js +++ b/examples/toolBars.js @@ -132,20 +132,34 @@ ToolBar = function(x, y, direction) { this.y = y; this.width = 0; this.height = 0; - + this.back = this.back = Overlays.addOverlay("text", { + backgroundColor: { red: 255, green: 255, blue: 255 }, + x: this.x, + y: this.y, + width: this.width, + height: this.height, + alpha: 1.0, + visible: false + }); this.addTool = function(properties, selectable, selected) { if (direction == ToolBar.HORIZONTAL) { properties.x = this.x + this.width; properties.y = this.y; this.width += properties.width + ToolBar.SPACING; - this.height += Math.max(properties.height, this.height); + this.height = Math.max(properties.height, this.height); } else { properties.x = this.x; properties.y = this.y + this.height; this.width = Math.max(properties.width, this.width); this.height += properties.height + ToolBar.SPACING; } + if (this.back != null) { + Overlays.editOverlay(this.back, { + width: this.width + 2 * ToolBar.SPACING, + height: this.height + 2 * ToolBar.SPACING + }); + } this.tools[this.tools.length] = new Tool(properties, selectable, selected); return ((this.tools.length) - 1); @@ -159,18 +173,48 @@ ToolBar = function(x, y, direction) { for(var tool in this.tools) { this.tools[tool].move(this.tools[tool].x() + dx, this.tools[tool].y() + dy); } + if (this.back != null) { + Overlays.editOverlay(this.back, { + x: x - ToolBar.SPACING, + y: y - ToolBar.SPACING + }); + } } - this.setAlpha = function(alpha) { - for(var tool in this.tools) { + this.setAlpha = function(alpha, tool) { + if(typeof(tool) === 'undefined') { + for(var tool in this.tools) { + this.tools[tool].setAlpha(alpha); + } + if (this.back != null) { + Overlays.editOverlay(this.back, { alpha: alpha}); + } + } else { this.tools[tool].setAlpha(alpha); } } + + this.setBack = function(color, alpha) { + if (color == null) { + Overlays.editOverlay(this.back, { + visible: false + }); + } else { + Overlays.editOverlay(this.back, { + visible: true, + backgroundColor: color, + alpha: alpha + }) + } + } this.show = function(doShow) { for(var tool in this.tools) { this.tools[tool].show(doShow); } + if (this.back != null) { + Overlays.editOverlay(this.back, { visible: doShow}); + } } this.clicked = function(clickedOverlay) { @@ -200,6 +244,11 @@ ToolBar = function(x, y, direction) { delete this.tools[tool]; } + if (this.back != null) { + Overlays.deleteOverlay(this.back); + this.back = null; + } + this.tools = []; this.x = x; this.y = y;