mirror of
https://github.com/overte-org/overte.git
synced 2025-04-19 15:43:50 +02:00
Recording UI
This commit is contained in:
parent
4922592cfa
commit
8f9a322318
2 changed files with 76 additions and 37 deletions
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue