From 18fdb340c1e9d40731817187a86c68c6945caeec Mon Sep 17 00:00:00 2001 From: Atlante45 Date: Wed, 3 Sep 2014 20:30:15 -0700 Subject: [PATCH 1/5] extended toolBars.js --- examples/toolBars.js | 78 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 63 insertions(+), 15 deletions(-) diff --git a/examples/toolBars.js b/examples/toolBars.js index 092ab5992e..dc17f02869 100644 --- a/examples/toolBars.js +++ b/examples/toolBars.js @@ -61,11 +61,10 @@ Overlay2D = function(properties, overlay) { // overlay is an optionnal variable } this.clicked = function(clickedOverlay) { - return (overlay == clickedOverlay ? true : false); + return overlay === clickedOverlay; } this.cleanup = function() { - print("Cleanup"); Overlays.deleteOverlay(overlay); } } @@ -112,9 +111,9 @@ Tool = function(properties, selectable, selected) { // selectable and selected a this.select(selected); this.baseClicked = this.clicked; - this.clicked = function(clickedOverlay) { + this.clicked = function(clickedOverlay, update) { if (this.baseClicked(clickedOverlay)) { - if (selectable) { + if (selectable && update) { this.toggle(); } return true; @@ -141,6 +140,7 @@ ToolBar = function(x, y, direction) { alpha: 1.0, visible: false }); + this.spacing = []; this.addTool = function(properties, selectable, selected) { if (direction == ToolBar.HORIZONTAL) { @@ -154,16 +154,56 @@ ToolBar = function(x, y, direction) { 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 + width: this.width + + ((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING, + height: this.height + + ((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING, }); } this.tools.push(new Tool(properties, selectable, selected)); return ((this.tools.length) - 1); } + + this.addSpacing = function(size) { + if (direction == ToolBar.HORIZONTAL) { + this.width += size; + } else { + this.height += size; + } + this.spacing[this.tools.length] = size; + + return (this.tools.length); + } + + this.changeSpacing = function(size, id) { + if (this.spacing[id] === null) { + this.spacing[id] = 0; + } + var diff = size - this.spacing[id]; + this.spacing[id] = size; + + var dx = (direction == ToolBar.HORIZONTAL) ? diff : 0; + var dy = (direction == ToolBar.VERTICAL) ? diff : 0; + this.width += dx; + this.height += dy; + + for(i = id; i < this.tools.length; i++) { + this.tools[i].move(this.tools[i].x() + dx, + this.tools[i].y() + dy); + } + if (this.back != null) { + Overlays.editOverlay(this.back, { + width: this.width + + ((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING, + height: this.height + + ((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING, + }); + } + } this.removeLastTool = function() { this.tools.pop().cleanup(); @@ -209,18 +249,22 @@ ToolBar = function(x, y, direction) { this.tools[tool].setAlpha(alpha); } } - + this.setBack = function(color, alpha) { if (color == null) { Overlays.editOverlay(this.back, { - visible: false - }); + visible: false + }); } else { Overlays.editOverlay(this.back, { - visible: true, - backgroundColor: color, - alpha: alpha - }) + width: this.width + + ((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING, + height: this.height + + ((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING, + visible: true, + backgroundColor: color, + alpha: alpha + }); } } @@ -233,9 +277,13 @@ ToolBar = function(x, y, direction) { } } - this.clicked = function(clickedOverlay) { + this.clicked = function(clickedOverlay, update) { + if(typeof(update) === 'undefined') { + update = true; + } + for(var tool in this.tools) { - if (this.tools[tool].visible() && this.tools[tool].clicked(clickedOverlay)) { + if (this.tools[tool].visible() && this.tools[tool].clicked(clickedOverlay, update)) { return parseInt(tool); } } From 417393c22e686960b5122e75a2a9aae4629826b7 Mon Sep 17 00:00:00 2001 From: Atlante45 Date: Wed, 3 Sep 2014 20:31:57 -0700 Subject: [PATCH 2/5] New Recorder UI --- examples/Recorder.js | 216 +++++++++++++++++++++++++++---------------- 1 file changed, 136 insertions(+), 80 deletions(-) diff --git a/examples/Recorder.js b/examples/Recorder.js index 7ecf0e2640..bb42e4b292 100644 --- a/examples/Recorder.js +++ b/examples/Recorder.js @@ -13,7 +13,6 @@ Script.include("toolBars.js"); var recordingFile = "recording.rec"; var playFromCurrentLocation = true; -var loop = true; var windowDimensions = Controller.getViewportDimensions(); var TOOL_ICON_URL = "http://s3-us-west-1.amazonaws.com/highfidelity-public/images/tools/"; @@ -21,69 +20,92 @@ var ALPHA_ON = 1.0; var ALPHA_OFF = 0.7; var COLOR_ON = { red: 128, green: 0, blue: 0 }; var COLOR_OFF = { red: 128, green: 128, blue: 128 }; -Tool.IMAGE_WIDTH *= 0.7; -Tool.IMAGE_HEIGHT *= 0.7; +var COLOR_TOOL_BAR = { red: 0, green: 0, blue: 0 }; var toolBar = null; var recordIcon; var playIcon; +var playLoopIcon; var saveIcon; var loadIcon; +var spacing; +var timerOffset; setupToolBar(); var timer = null; setupTimer(); +var watchStop = false; + function setupToolBar() { if (toolBar != null) { print("Multiple calls to Recorder.js:setupToolBar()"); return; } - + Tool.IMAGE_HEIGHT /= 2; + Tool.IMAGE_WIDTH /= 2; + toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL); - toolBar.setBack(COLOR_OFF, ALPHA_OFF); - - recordIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "record.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false); - - playIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "play.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false, false); - - saveIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "save.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false, false); - - loadIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "load.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false, false); + + toolBar.setBack(COLOR_TOOL_BAR, ALPHA_OFF); + + recordIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "recording-record.svg", + subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + x: 0, y: 0, + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: MyAvatar.isPlaying() ? ALPHA_OFF : ALPHA_ON, + visible: true + }, true, MyAvatar.isRecording()); + + playIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "play-pause.svg", + subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON, + visible: true + }, false); + + var playLoopWidthFactor = 1.65; + playLoopIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "play-and-loop.svg", + subImage: { x: 0, y: 0, width: playLoopWidthFactor * Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + width: playLoopWidthFactor * Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON, + visible: true + }, false); + + timerOffset = toolBar.width; + spacing = toolBar.addSpacing(0); + + saveIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "recording-save.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording() || MyAvatar.isPlaying() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON, + visible: true + }, false); + + loadIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "recording-upload.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording() || MyAvatar.isPlaying()) ? ALPHA_OFF : ALPHA_ON, + visible: true + }, false); } function setupTimer() { timer = Overlays.addOverlay("text", { - font: { size: 20 }, + font: { size: 15 }, text: (0.00).toFixed(3), backgroundColor: COLOR_OFF, x: 0, y: 0, - width: 100, - height: 100, + width: 0, + height: 0, alpha: 1.0, visible: true }); @@ -92,7 +114,8 @@ function setupTimer() { function updateTimer() { var text = ""; if (MyAvatar.isRecording()) { - text = formatTime(MyAvatar.recorderElapsed()) + text = formatTime(MyAvatar.recorderElapsed()); + } else { text = formatTime(MyAvatar.playerElapsed()) + " / " + formatTime(MyAvatar.playerLength()); @@ -101,6 +124,7 @@ function updateTimer() { Overlays.editOverlay(timer, { text: text }) + toolBar.changeSpacing(text.length * 8 + ((MyAvatar.isRecording()) ? 15 : 0), spacing); } function formatTime(time) { @@ -127,54 +151,79 @@ function formatTime(time) { } function moveUI() { - var relative = { x: 30, y: 90 }; + var relative = { x: 70, y: 40 }; toolBar.move(relative.x, windowDimensions.y - relative.y); Overlays.editOverlay(timer, { - x: relative.x - 10, - y: windowDimensions.y - relative.y - 35, - width: 0, - height: 0 + x: relative.x + timerOffset - ToolBar.SPACING, + y: windowDimensions.y - relative.y - ToolBar.SPACING }); } function mousePressEvent(event) { clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); - - if (recordIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isPlaying()) { - if (!MyAvatar.isRecording()) { - MyAvatar.startRecording(); - toolBar.setBack(COLOR_ON, ALPHA_ON); - } else { - MyAvatar.stopRecording(); - MyAvatar.loadLastRecording(); - toolBar.setBack(COLOR_OFF, ALPHA_OFF); - } - } else if (playIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isRecording()) { - if (MyAvatar.isPlaying()) { - MyAvatar.stopPlaying(); - } else { - MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); - MyAvatar.setPlayerLoop(loop); - MyAvatar.startPlaying(true); - } - } else if (saveIcon === toolBar.clicked(clickedOverlay)) { - if (!MyAvatar.isRecording()) { - recordingFile = Window.save("Save recording to file", ".", "*.rec"); - if (recordingFile != null) { + + if (recordIcon === toolBar.clicked(clickedOverlay, false) && !MyAvatar.isPlaying()) { + if (!MyAvatar.isRecording()) { + MyAvatar.startRecording(); + toolBar.setAlpha(ALPHA_OFF, playIcon); + toolBar.setAlpha(ALPHA_OFF, playLoopIcon); + toolBar.setAlpha(ALPHA_OFF, saveIcon); + toolBar.setAlpha(ALPHA_OFF, loadIcon); + } else { + MyAvatar.stopRecording(); + MyAvatar.loadLastRecording(); + toolBar.setAlpha(ALPHA_ON, playIcon); + toolBar.setAlpha(ALPHA_ON, playLoopIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + toolBar.setAlpha(ALPHA_ON, loadIcon); + } + } else if (playIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isRecording()) { + if (MyAvatar.isPlaying()) { + MyAvatar.stopPlaying(); + toolBar.setAlpha(ALPHA_ON, recordIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + toolBar.setAlpha(ALPHA_ON, loadIcon); + } else { + MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); + MyAvatar.setPlayerLoop(false); + MyAvatar.startPlaying(); + toolBar.setAlpha(ALPHA_OFF, recordIcon); + toolBar.setAlpha(ALPHA_OFF, saveIcon); + toolBar.setAlpha(ALPHA_OFF, loadIcon); + watchStop = true; + } + } else if (playLoopIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isRecording()) { + if (MyAvatar.isPlaying()) { + MyAvatar.stopPlaying(); + toolBar.setAlpha(ALPHA_ON, recordIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + toolBar.setAlpha(ALPHA_ON, loadIcon); + } else { + MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); + MyAvatar.setPlayerLoop(true); + MyAvatar.startPlaying(); + toolBar.setAlpha(ALPHA_OFF, recordIcon); + toolBar.setAlpha(ALPHA_OFF, saveIcon); + toolBar.setAlpha(ALPHA_OFF, loadIcon); + } + } else if (saveIcon === toolBar.clicked(clickedOverlay)) { + if (!MyAvatar.isRecording() && !MyAvatar.isPlaying() && MyAvatar.playerLength() != 0) { + recordingFile = Window.save("Save recording to file", ".", "*.rec"); + if (!(recordingFile === "null" || recordingFile === null || recordingFile === "")) { MyAvatar.saveRecording(recordingFile); - } - } - } else if (loadIcon === toolBar.clicked(clickedOverlay)) { - if (!MyAvatar.isRecording()) { - recordingFile = Window.browse("Load recorcding from file", ".", "*.rec"); - if (recordingFile != "null") { - MyAvatar.loadRecording(recordingFile); - } - } - } else { - - } + } + } + } else if (loadIcon === toolBar.clicked(clickedOverlay)) { + if (!MyAvatar.isRecording() && !MyAvatar.isPlaying()) { + recordingFile = Window.browse("Load recorcding from file", ".", "*.rec"); + if (!(recordingFile === "null" || recordingFile === null || recordingFile === "")) { + MyAvatar.loadRecording(recordingFile); + } + } + } else { + + } } function update() { @@ -186,6 +235,13 @@ function update() { } updateTimer(); + + if (watchStop && !MyAvatar.isPlaying()) { + watchStop = false; + toolBar.setAlpha(ALPHA_ON, recordIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + toolBar.setAlpha(ALPHA_ON, loadIcon); + } } function scriptEnding() { From ef51782f926a912ec11fd2c90beb7efe1f13034c Mon Sep 17 00:00:00 2001 From: Atlante45 Date: Wed, 3 Sep 2014 20:32:18 -0700 Subject: [PATCH 3/5] New ControlACs UI --- examples/ControlACs.js | 149 ++++++++++++++++++++++------------------- 1 file changed, 81 insertions(+), 68 deletions(-) diff --git a/examples/ControlACs.js b/examples/ControlACs.js index 43eb3290a4..9961db6791 100644 --- a/examples/ControlACs.js +++ b/examples/ControlACs.js @@ -11,7 +11,7 @@ // Set the following variables to the right value var NUM_AC = 3; // This is the number of AC. Their ID need to be unique and between 0 (included) and NUM_AC (excluded) -var NAMES = new Array("Arnold", "Jeff"); // ACs names ordered by IDs (Default name is "ACx", x = ID + 1)) +var NAMES = new Array("Craig", "Clement", "Jeff"); // ACs names ordered by IDs (Default name is "ACx", x = ID + 1)) // Those variables MUST be common to every scripts var controlVoxelSize = 0.25; @@ -40,9 +40,10 @@ var windowDimensions = Controller.getViewportDimensions(); var TOOL_ICON_URL = "http://s3-us-west-1.amazonaws.com/highfidelity-public/images/tools/"; var ALPHA_ON = 1.0; var ALPHA_OFF = 0.7; -var COLOR_TOOL_BAR = { red: 128, green: 128, blue: 128 }; -var COLOR_MASTER = { red: 200, green: 200, blue: 200 }; -var TEXT_HEIGHT = 10; +var COLOR_TOOL_BAR = { red: 0, green: 0, blue: 0 }; +var COLOR_MASTER = { red: 0, green: 0, blue: 0 }; +var TEXT_HEIGHT = 12; +var TEXT_MARGIN = 3; var toolBars = new Array(); var nameOverlays = new Array(); @@ -52,76 +53,87 @@ var playLoopIcon = new Array(); var stopIcon = new Array(); setupToolBars(); + function setupToolBars() { if (toolBars.length > 0) { print("Multiple calls to Recorder.js:setupToolBars()"); return; } - + Tool.IMAGE_HEIGHT /= 2; + Tool.IMAGE_WIDTH /= 2; + for (i = 0; i <= NUM_AC; i++) { toolBars.push(new ToolBar(0, 0, ToolBar.HORIZONTAL)); - nameOverlays.push(Overlays.addOverlay("text", { - font: { size: TEXT_HEIGHT }, - text: (i === NUM_AC) ? "Master" : - ((i < NAMES.length) ? NAMES[i] : - "AC" + (i + 1)), - x: 0, y: 0, - width: 0, - height: 0, - alpha: 1.0, - visible: true - })); - + toolBars[i].setBack((i === NUM_AC) ? COLOR_MASTER : COLOR_TOOL_BAR, ALPHA_OFF); + onOffIcon.push(toolBars[i].addTool({ - imageURL: TOOL_ICON_URL + "models-tool.svg", - subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, true, false)); - playIcon.push(null); - playLoopIcon.push(null); - stopIcon.push(null); + imageURL: TOOL_ICON_URL + "ac-on-off.svg", + subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + x: 0, y: 0, + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: ALPHA_ON, + visible: true + }, true, false)); + + playIcon[i] = toolBars[i].addTool({ + imageURL: TOOL_ICON_URL + "play-pause.svg", + subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: ALPHA_OFF, + visible: true + }, false); + + var playLoopWidthFactor = 1.65; + playLoopIcon[i] = toolBars[i].addTool({ + imageURL: TOOL_ICON_URL + "play-and-loop.svg", + subImage: { x: 0, y: 0, width: playLoopWidthFactor * Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + width: playLoopWidthFactor * Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: ALPHA_OFF, + visible: true + }, false); + + stopIcon[i] = toolBars[i].addTool({ + imageURL: TOOL_ICON_URL + "recording-stop.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: ALPHA_OFF, + visible: true + }, false); + + nameOverlays.push(Overlays.addOverlay("text", { + backgroundColor: { red: 0, green: 0, blue: 0 }, + font: { size: TEXT_HEIGHT }, + text: (i === NUM_AC) ? "Master" : i + ". " + + ((i < NAMES.length) ? NAMES[i] : + "AC" + i), + x: 0, y: 0, + width: toolBars[i].width + ToolBar.SPACING, + height: TEXT_HEIGHT + TEXT_MARGIN, + leftMargin: TEXT_MARGIN, + topMargin: TEXT_MARGIN, + alpha: ALPHA_OFF, + visible: true + })); } } function sendCommand(id, action) { - if (action === SHOW && toolBars[id].numberOfTools() === 1) { + if (action === SHOW) { toolBars[id].selectTool(onOffIcon[id], true); - - playIcon[id] = toolBars[id].addTool({ - imageURL: TOOL_ICON_URL + "play.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false); - - playLoopIcon[id] = toolBars[id].addTool({ - imageURL: TOOL_ICON_URL + "play-loop.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false); - - stopIcon[id] = toolBars[id].addTool({ - imageURL: TOOL_ICON_URL + "stop.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false); - - toolBars[id].setBack((id === NUM_AC) ? COLOR_MASTER : COLOR_TOOL_BAR, ALPHA_OFF); - } else if (action === HIDE && toolBars[id].numberOfTools() != 1) { + toolBars[id].setAlpha(ALPHA_ON, playIcon[id]); + toolBars[id].setAlpha(ALPHA_ON, playLoopIcon[id]); + toolBars[id].setAlpha(ALPHA_ON, stopIcon[id]); + } else if (action === HIDE) { toolBars[id].selectTool(onOffIcon[id], false); - toolBars[id].removeLastTool(); - toolBars[id].removeLastTool(); - toolBars[id].removeLastTool(); - toolBars[id].setBack(null); - } + toolBars[id].setAlpha(ALPHA_OFF, playIcon[id]); + toolBars[id].setAlpha(ALPHA_OFF, playLoopIcon[id]); + toolBars[id].setAlpha(ALPHA_OFF, stopIcon[id]); + } else if (!toolBars[id].toolSelected(onOffIcon[id])) { + return; + } if (id === toolBars.length - 1) { for (i = 0; i < NUM_AC; i++) { @@ -179,17 +191,18 @@ function mousePressEvent(event) { } function moveUI() { - var relative = { x: 70, y: 400 }; + var textSize = TEXT_HEIGHT + 2 * TEXT_MARGIN; + var relative = { x: 70, y: 75 + (NUM_AC) * (Tool.IMAGE_HEIGHT + ToolBar.SPACING + textSize) }; + for (i = 0; i <= NUM_AC; i++) { toolBars[i].move(relative.x, - windowDimensions.y - relative.y + - i * (Tool.IMAGE_HEIGHT + 2 * ToolBar.SPACING + TEXT_HEIGHT)); + windowDimensions.y - relative.y + + i * (Tool.IMAGE_HEIGHT + ToolBar.SPACING + textSize)); + Overlays.editOverlay(nameOverlays[i], { - x: relative.x, - y: windowDimensions.y - relative.y + - i * (Tool.IMAGE_HEIGHT + 2 * ToolBar.SPACING + TEXT_HEIGHT) - - ToolBar.SPACING - 2 * TEXT_HEIGHT - }); + x: toolBars[i].x - ToolBar.SPACING, + y: toolBars[i].y - textSize + }); } } From c0a7334010c502e167ebce763ae91c17aafa8036 Mon Sep 17 00:00:00 2001 From: Atlante45 Date: Thu, 4 Sep 2014 11:34:02 -0700 Subject: [PATCH 4/5] Fixed flipped icons --- examples/ControlACs.js | 70 +++++++++++++++++++++--------------------- examples/Recorder.js | 13 ++++++-- 2 files changed, 45 insertions(+), 38 deletions(-) diff --git a/examples/ControlACs.js b/examples/ControlACs.js index 9961db6791..746a9ddbb3 100644 --- a/examples/ControlACs.js +++ b/examples/ControlACs.js @@ -74,7 +74,7 @@ function setupToolBars() { height: Tool.IMAGE_HEIGHT, alpha: ALPHA_ON, visible: true - }, true, false)); + }, true, true)); playIcon[i] = toolBars[i].addTool({ imageURL: TOOL_ICON_URL + "play-pause.svg", @@ -122,16 +122,16 @@ function setupToolBars() { function sendCommand(id, action) { if (action === SHOW) { - toolBars[id].selectTool(onOffIcon[id], true); + toolBars[id].selectTool(onOffIcon[id], false); toolBars[id].setAlpha(ALPHA_ON, playIcon[id]); toolBars[id].setAlpha(ALPHA_ON, playLoopIcon[id]); toolBars[id].setAlpha(ALPHA_ON, stopIcon[id]); } else if (action === HIDE) { - toolBars[id].selectTool(onOffIcon[id], false); + toolBars[id].selectTool(onOffIcon[id], true); toolBars[id].setAlpha(ALPHA_OFF, playIcon[id]); toolBars[id].setAlpha(ALPHA_OFF, playLoopIcon[id]); toolBars[id].setAlpha(ALPHA_OFF, stopIcon[id]); - } else if (!toolBars[id].toolSelected(onOffIcon[id])) { + } else if (toolBars[id].toolSelected(onOffIcon[id])) { return; } @@ -153,41 +153,41 @@ function sendCommand(id, action) { function mousePressEvent(event) { clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); - + // Check master control var i = toolBars.length - 1; - if (onOffIcon[i] === toolBars[i].clicked(clickedOverlay)) { - if (toolBars[i].toolSelected(onOffIcon[i])) { - sendCommand(i, SHOW); - } else { - sendCommand(i, HIDE); - } - } else if (playIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, PLAY); - } else if (playLoopIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, PLAY_LOOP); - } else if (stopIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, STOP); - } else { - // Check individual controls + if (onOffIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + if (toolBars[i].toolSelected(onOffIcon[i])) { + sendCommand(i, SHOW); + } else { + sendCommand(i, HIDE); + } + } else if (playIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, PLAY); + } else if (playLoopIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, PLAY_LOOP); + } else if (stopIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, STOP); + } else { + // Check individual controls for (i = 0; i < NUM_AC; i++) { - if (onOffIcon[i] === toolBars[i].clicked(clickedOverlay)) { - if (toolBars[i].toolSelected(onOffIcon[i])) { - sendCommand(i, SHOW); - } else { - sendCommand(i, HIDE); - } - } else if (playIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, PLAY); - } else if (playLoopIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, PLAY_LOOP); - } else if (stopIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, STOP); - } else { - - } + if (onOffIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + if (toolBars[i].toolSelected(onOffIcon[i], false)) { + sendCommand(i, SHOW); + } else { + sendCommand(i, HIDE); + } + } else if (playIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, PLAY); + } else if (playLoopIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, PLAY_LOOP); + } else if (stopIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, STOP); + } else { + + } } - } + } } function moveUI() { diff --git a/examples/Recorder.js b/examples/Recorder.js index bb42e4b292..c32e97ffa5 100644 --- a/examples/Recorder.js +++ b/examples/Recorder.js @@ -57,7 +57,7 @@ function setupToolBar() { height: Tool.IMAGE_HEIGHT, alpha: MyAvatar.isPlaying() ? ALPHA_OFF : ALPHA_ON, visible: true - }, true, MyAvatar.isRecording()); + }, true, !MyAvatar.isRecording()); playIcon = toolBar.addTool({ imageURL: TOOL_ICON_URL + "play-pause.svg", @@ -166,12 +166,14 @@ function mousePressEvent(event) { if (recordIcon === toolBar.clicked(clickedOverlay, false) && !MyAvatar.isPlaying()) { if (!MyAvatar.isRecording()) { MyAvatar.startRecording(); + toolBar.selectTool(recordIcon, false); toolBar.setAlpha(ALPHA_OFF, playIcon); toolBar.setAlpha(ALPHA_OFF, playLoopIcon); toolBar.setAlpha(ALPHA_OFF, saveIcon); toolBar.setAlpha(ALPHA_OFF, loadIcon); } else { MyAvatar.stopRecording(); + toolBar.selectTool(recordIcon, true ); MyAvatar.loadLastRecording(); toolBar.setAlpha(ALPHA_ON, playIcon); toolBar.setAlpha(ALPHA_ON, playLoopIcon); @@ -184,7 +186,7 @@ function mousePressEvent(event) { toolBar.setAlpha(ALPHA_ON, recordIcon); toolBar.setAlpha(ALPHA_ON, saveIcon); toolBar.setAlpha(ALPHA_ON, loadIcon); - } else { + } else if (MyAvatar.playerLength() > 0) { MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); MyAvatar.setPlayerLoop(false); MyAvatar.startPlaying(); @@ -199,7 +201,7 @@ function mousePressEvent(event) { toolBar.setAlpha(ALPHA_ON, recordIcon); toolBar.setAlpha(ALPHA_ON, saveIcon); toolBar.setAlpha(ALPHA_ON, loadIcon); - } else { + } else if (MyAvatar.playerLength() > 0) { MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); MyAvatar.setPlayerLoop(true); MyAvatar.startPlaying(); @@ -220,6 +222,11 @@ function mousePressEvent(event) { if (!(recordingFile === "null" || recordingFile === null || recordingFile === "")) { MyAvatar.loadRecording(recordingFile); } + if (MyAvatar.playerLength() > 0) { + toolBar.setAlpha(ALPHA_ON, playIcon); + toolBar.setAlpha(ALPHA_ON, playLoopIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + } } } else { From d7e135c831c210ae973ce50c14b6a7cdf4c8d538 Mon Sep 17 00:00:00 2001 From: Atlante45 Date: Thu, 4 Sep 2014 14:58:30 -0700 Subject: [PATCH 5/5] Changed 2 icons --- examples/ControlACs.js | 2 +- examples/Recorder.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/examples/ControlACs.js b/examples/ControlACs.js index 746a9ddbb3..1b60a9e848 100644 --- a/examples/ControlACs.js +++ b/examples/ControlACs.js @@ -77,7 +77,7 @@ function setupToolBars() { }, true, true)); playIcon[i] = toolBars[i].addTool({ - imageURL: TOOL_ICON_URL + "play-pause.svg", + imageURL: TOOL_ICON_URL + "play.svg", subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT, diff --git a/examples/Recorder.js b/examples/Recorder.js index c32e97ffa5..b3a4c7a4c3 100644 --- a/examples/Recorder.js +++ b/examples/Recorder.js @@ -59,16 +59,15 @@ function setupToolBar() { visible: true }, true, !MyAvatar.isRecording()); + var playLoopWidthFactor = 1.65; playIcon = toolBar.addTool({ imageURL: TOOL_ICON_URL + "play-pause.svg", - subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, - width: Tool.IMAGE_WIDTH, + width: playLoopWidthFactor * Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT, alpha: (MyAvatar.isRecording() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON, visible: true }, false); - var playLoopWidthFactor = 1.65; playLoopIcon = toolBar.addTool({ imageURL: TOOL_ICON_URL + "play-and-loop.svg", subImage: { x: 0, y: 0, width: playLoopWidthFactor * Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT },