New Recorder UI

This commit is contained in:
Atlante45 2014-09-03 20:31:57 -07:00
parent 18fdb340c1
commit 417393c22e

View file

@ -13,7 +13,6 @@ Script.include("toolBars.js");
var recordingFile = "recording.rec"; var recordingFile = "recording.rec";
var playFromCurrentLocation = true; var playFromCurrentLocation = true;
var loop = true;
var windowDimensions = Controller.getViewportDimensions(); var windowDimensions = Controller.getViewportDimensions();
var TOOL_ICON_URL = "http://s3-us-west-1.amazonaws.com/highfidelity-public/images/tools/"; 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 ALPHA_OFF = 0.7;
var COLOR_ON = { red: 128, green: 0, blue: 0 }; var COLOR_ON = { red: 128, green: 0, blue: 0 };
var COLOR_OFF = { red: 128, green: 128, blue: 128 }; var COLOR_OFF = { red: 128, green: 128, blue: 128 };
Tool.IMAGE_WIDTH *= 0.7; var COLOR_TOOL_BAR = { red: 0, green: 0, blue: 0 };
Tool.IMAGE_HEIGHT *= 0.7;
var toolBar = null; var toolBar = null;
var recordIcon; var recordIcon;
var playIcon; var playIcon;
var playLoopIcon;
var saveIcon; var saveIcon;
var loadIcon; var loadIcon;
var spacing;
var timerOffset;
setupToolBar(); setupToolBar();
var timer = null; var timer = null;
setupTimer(); setupTimer();
var watchStop = false;
function setupToolBar() { function setupToolBar() {
if (toolBar != null) { if (toolBar != null) {
print("Multiple calls to Recorder.js:setupToolBar()"); print("Multiple calls to Recorder.js:setupToolBar()");
return; return;
} }
Tool.IMAGE_HEIGHT /= 2;
Tool.IMAGE_WIDTH /= 2;
toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL); toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
toolBar.setBack(COLOR_OFF, ALPHA_OFF);
toolBar.setBack(COLOR_TOOL_BAR, ALPHA_OFF);
recordIcon = toolBar.addTool({
imageURL: TOOL_ICON_URL + "record.svg", recordIcon = toolBar.addTool({
width: Tool.IMAGE_WIDTH, imageURL: TOOL_ICON_URL + "recording-record.svg",
height: Tool.IMAGE_HEIGHT, subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT },
alpha: ALPHA_ON, x: 0, y: 0,
visible: true width: Tool.IMAGE_WIDTH,
}, false); height: Tool.IMAGE_HEIGHT,
alpha: MyAvatar.isPlaying() ? ALPHA_OFF : ALPHA_ON,
playIcon = toolBar.addTool({ visible: true
imageURL: TOOL_ICON_URL + "play.svg", }, true, MyAvatar.isRecording());
width: Tool.IMAGE_WIDTH,
height: Tool.IMAGE_HEIGHT, playIcon = toolBar.addTool({
alpha: ALPHA_ON, imageURL: TOOL_ICON_URL + "play-pause.svg",
visible: true subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT },
}, false, false); width: Tool.IMAGE_WIDTH,
height: Tool.IMAGE_HEIGHT,
saveIcon = toolBar.addTool({ alpha: (MyAvatar.isRecording() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON,
imageURL: TOOL_ICON_URL + "save.svg", visible: true
width: Tool.IMAGE_WIDTH, }, false);
height: Tool.IMAGE_HEIGHT,
alpha: ALPHA_ON, var playLoopWidthFactor = 1.65;
visible: true playLoopIcon = toolBar.addTool({
}, false, false); imageURL: TOOL_ICON_URL + "play-and-loop.svg",
subImage: { x: 0, y: 0, width: playLoopWidthFactor * Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT },
loadIcon = toolBar.addTool({ width: playLoopWidthFactor * Tool.IMAGE_WIDTH,
imageURL: TOOL_ICON_URL + "load.svg", height: Tool.IMAGE_HEIGHT,
width: Tool.IMAGE_WIDTH, alpha: (MyAvatar.isRecording() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON,
height: Tool.IMAGE_HEIGHT, visible: true
alpha: ALPHA_ON, }, false);
visible: true
}, false, 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() { function setupTimer() {
timer = Overlays.addOverlay("text", { timer = Overlays.addOverlay("text", {
font: { size: 20 }, font: { size: 15 },
text: (0.00).toFixed(3), text: (0.00).toFixed(3),
backgroundColor: COLOR_OFF, backgroundColor: COLOR_OFF,
x: 0, y: 0, x: 0, y: 0,
width: 100, width: 0,
height: 100, height: 0,
alpha: 1.0, alpha: 1.0,
visible: true visible: true
}); });
@ -92,7 +114,8 @@ function setupTimer() {
function updateTimer() { function updateTimer() {
var text = ""; var text = "";
if (MyAvatar.isRecording()) { if (MyAvatar.isRecording()) {
text = formatTime(MyAvatar.recorderElapsed()) text = formatTime(MyAvatar.recorderElapsed());
} else { } else {
text = formatTime(MyAvatar.playerElapsed()) + " / " + text = formatTime(MyAvatar.playerElapsed()) + " / " +
formatTime(MyAvatar.playerLength()); formatTime(MyAvatar.playerLength());
@ -101,6 +124,7 @@ function updateTimer() {
Overlays.editOverlay(timer, { Overlays.editOverlay(timer, {
text: text text: text
}) })
toolBar.changeSpacing(text.length * 8 + ((MyAvatar.isRecording()) ? 15 : 0), spacing);
} }
function formatTime(time) { function formatTime(time) {
@ -127,54 +151,79 @@ function formatTime(time) {
} }
function moveUI() { function moveUI() {
var relative = { x: 30, y: 90 }; var relative = { x: 70, y: 40 };
toolBar.move(relative.x, toolBar.move(relative.x,
windowDimensions.y - relative.y); windowDimensions.y - relative.y);
Overlays.editOverlay(timer, { Overlays.editOverlay(timer, {
x: relative.x - 10, x: relative.x + timerOffset - ToolBar.SPACING,
y: windowDimensions.y - relative.y - 35, y: windowDimensions.y - relative.y - ToolBar.SPACING
width: 0,
height: 0
}); });
} }
function mousePressEvent(event) { function mousePressEvent(event) {
clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y });
if (recordIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isPlaying()) { if (recordIcon === toolBar.clicked(clickedOverlay, false) && !MyAvatar.isPlaying()) {
if (!MyAvatar.isRecording()) { if (!MyAvatar.isRecording()) {
MyAvatar.startRecording(); MyAvatar.startRecording();
toolBar.setBack(COLOR_ON, ALPHA_ON); toolBar.setAlpha(ALPHA_OFF, playIcon);
} else { toolBar.setAlpha(ALPHA_OFF, playLoopIcon);
MyAvatar.stopRecording(); toolBar.setAlpha(ALPHA_OFF, saveIcon);
MyAvatar.loadLastRecording(); toolBar.setAlpha(ALPHA_OFF, loadIcon);
toolBar.setBack(COLOR_OFF, ALPHA_OFF); } else {
} MyAvatar.stopRecording();
} else if (playIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isRecording()) { MyAvatar.loadLastRecording();
if (MyAvatar.isPlaying()) { toolBar.setAlpha(ALPHA_ON, playIcon);
MyAvatar.stopPlaying(); toolBar.setAlpha(ALPHA_ON, playLoopIcon);
} else { toolBar.setAlpha(ALPHA_ON, saveIcon);
MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); toolBar.setAlpha(ALPHA_ON, loadIcon);
MyAvatar.setPlayerLoop(loop); }
MyAvatar.startPlaying(true); } else if (playIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isRecording()) {
} if (MyAvatar.isPlaying()) {
} else if (saveIcon === toolBar.clicked(clickedOverlay)) { MyAvatar.stopPlaying();
if (!MyAvatar.isRecording()) { toolBar.setAlpha(ALPHA_ON, recordIcon);
recordingFile = Window.save("Save recording to file", ".", "*.rec"); toolBar.setAlpha(ALPHA_ON, saveIcon);
if (recordingFile != null) { 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); MyAvatar.saveRecording(recordingFile);
} }
} }
} else if (loadIcon === toolBar.clicked(clickedOverlay)) { } else if (loadIcon === toolBar.clicked(clickedOverlay)) {
if (!MyAvatar.isRecording()) { if (!MyAvatar.isRecording() && !MyAvatar.isPlaying()) {
recordingFile = Window.browse("Load recorcding from file", ".", "*.rec"); recordingFile = Window.browse("Load recorcding from file", ".", "*.rec");
if (recordingFile != "null") { if (!(recordingFile === "null" || recordingFile === null || recordingFile === "")) {
MyAvatar.loadRecording(recordingFile); MyAvatar.loadRecording(recordingFile);
} }
} }
} else { } else {
} }
} }
function update() { function update() {
@ -186,6 +235,13 @@ function update() {
} }
updateTimer(); updateTimer();
if (watchStop && !MyAvatar.isPlaying()) {
watchStop = false;
toolBar.setAlpha(ALPHA_ON, recordIcon);
toolBar.setAlpha(ALPHA_ON, saveIcon);
toolBar.setAlpha(ALPHA_ON, loadIcon);
}
} }
function scriptEnding() { function scriptEnding() {