mirror of
https://github.com/Armored-Dragon/overte.git
synced 2025-03-11 16:13:16 +01:00
New Recorder UI
This commit is contained in:
parent
18fdb340c1
commit
417393c22e
1 changed files with 136 additions and 80 deletions
|
@ -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() {
|
||||||
|
|
Loading…
Reference in a new issue