Recording UI

This commit is contained in:
Atlante45 2014-08-20 18:04:17 -07:00
parent 4922592cfa
commit 8f9a322318
2 changed files with 76 additions and 37 deletions

View file

@ -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 {
}

View file

@ -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;