Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-08-09 08:53:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Recording UI

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

56
examples/Recorder.js
View file

@ -15,17 +15,16 @@ var recordingFile = "recording.rec";
var windowDimensions = Controller.getViewportDimensions(); var windowDimensions = Controller.getViewportDimensions();
var TOOL_ICON_URL = "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/tools/"; 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_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 toolBar = null;
var recordIcon; var recordIcon;
var playIcon; var playIcon;
var saveIcon; var saveIcon;
var loadIcon; var loadIcon;
var loadLastIcon;
setupToolBar(); setupToolBar();
function setupToolBar() { function setupToolBar() {
@ -35,48 +34,36 @@ function setupToolBar() {
} }
toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL); toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
toolBar.setBack({ red: 128, green: 128, blue: 128 }, 0.8);
recordIcon = toolBar.addTool({ recordIcon = toolBar.addTool({
imageURL: TOOL_ICON_URL + "add-model-tool.svg", imageURL: "file:/Users/clement/Downloads/svg/camera8.svg",
subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, width: Tool.IMAGE_WIDTH,
width: TOOL_WIDTH, height: Tool.IMAGE_HEIGHT,
height: TOOL_HEIGHT, alpha: (MyAvatar.isRecording()) ? ALPHA_ON : ALPHA_OFF,
alpha: ALPHA_ON,
visible: true visible: true
}, true, MyAvatar.isRecording()); }, false);
playIcon = toolBar.addTool({ playIcon = toolBar.addTool({
imageURL: TOOL_ICON_URL + "add-model-tool.svg", imageURL: "file:/Users/clement/Downloads/svg/media23.svg",
subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, width: Tool.IMAGE_WIDTH,
width: TOOL_WIDTH, height: Tool.IMAGE_HEIGHT,
height: TOOL_HEIGHT,
alpha: ALPHA_ON, alpha: ALPHA_ON,
visible: true visible: true
}, false, false); }, false, false);
saveIcon = toolBar.addTool({ saveIcon = toolBar.addTool({
imageURL: TOOL_ICON_URL + "add-model-tool.svg", imageURL: "file:/Users/clement/Downloads/svg/save15.svg",
subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, width: Tool.IMAGE_WIDTH,
width: TOOL_WIDTH, height: Tool.IMAGE_HEIGHT,
height: TOOL_HEIGHT,
alpha: ALPHA_ON, alpha: ALPHA_ON,
visible: true visible: true
}, false, false); }, false, false);
loadIcon = toolBar.addTool({ loadIcon = toolBar.addTool({
imageURL: TOOL_ICON_URL + "add-model-tool.svg", imageURL: "file:/Users/clement/Downloads/svg/upload2.svg",
subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, width: Tool.IMAGE_WIDTH,
width: TOOL_WIDTH, height: Tool.IMAGE_HEIGHT,
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,
alpha: ALPHA_ON, alpha: ALPHA_ON,
visible: true visible: true
}, false, false); }, false, false);
@ -96,8 +83,13 @@ function mousePressEvent(event) {
if (recordIcon === toolBar.clicked(clickedOverlay)) { if (recordIcon === toolBar.clicked(clickedOverlay)) {
if (!MyAvatar.isRecording()) { if (!MyAvatar.isRecording()) {
MyAvatar.startRecording(); MyAvatar.startRecording();
toolBar.setAlpha(ALPHA_ON, recordIcon);
toolBar.setBack({ red: 128, green: 0, blue: 0 }, 0.9);
} else { } else {
MyAvatar.stopRecording(); 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)) { } else if (playIcon === toolBar.clicked(clickedOverlay)) {
if (!MyAvatar.isRecording()) { if (!MyAvatar.isRecording()) {
@ -113,8 +105,6 @@ function mousePressEvent(event) {
} else if (loadIcon === toolBar.clicked(clickedOverlay)) { } else if (loadIcon === toolBar.clicked(clickedOverlay)) {
recordingFile = Window.browse("Load recorcding from file", ".", "*.rec"); recordingFile = Window.browse("Load recorcding from file", ".", "*.rec");
MyAvatar.loadRecording(recordingFile); MyAvatar.loadRecording(recordingFile);
} else if (loadLastIcon === toolBar.clicked(clickedOverlay)) {
MyAvatar.loadLastRecording();
} else { } else {
} }

57
examples/toolBars.js
View file

@ -132,20 +132,34 @@ ToolBar = function(x, y, direction) {
this.y = y; this.y = y;
this.width = 0; this.width = 0;
this.height = 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) { this.addTool = function(properties, selectable, selected) {
if (direction == ToolBar.HORIZONTAL) { if (direction == ToolBar.HORIZONTAL) {
properties.x = this.x + this.width; properties.x = this.x + this.width;
properties.y = this.y; properties.y = this.y;
this.width += properties.width + ToolBar.SPACING; this.width += properties.width + ToolBar.SPACING;
this.height += Math.max(properties.height, this.height); this.height = Math.max(properties.height, this.height);
} else { } else {
properties.x = this.x; properties.x = this.x;
properties.y = this.y + this.height; properties.y = this.y + this.height;
this.width = Math.max(properties.width, this.width); this.width = Math.max(properties.width, this.width);
this.height += properties.height + ToolBar.SPACING; 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); this.tools[this.tools.length] = new Tool(properties, selectable, selected);
return ((this.tools.length) - 1); return ((this.tools.length) - 1);
@ -159,18 +173,48 @@ ToolBar = function(x, y, direction) {
for(var tool in this.tools) { for(var tool in this.tools) {
this.tools[tool].move(this.tools[tool].x() + dx, this.tools[tool].y() + dy); 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) { this.setAlpha = function(alpha, tool) {
for(var tool in this.tools) { 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.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) { this.show = function(doShow) {
for(var tool in this.tools) { for(var tool in this.tools) {
this.tools[tool].show(doShow); this.tools[tool].show(doShow);
} }
if (this.back != null) {
Overlays.editOverlay(this.back, { visible: doShow});
}
} }
this.clicked = function(clickedOverlay) { this.clicked = function(clickedOverlay) {
@ -200,6 +244,11 @@ ToolBar = function(x, y, direction) {
delete this.tools[tool]; delete this.tools[tool];
} }
if (this.back != null) {
Overlays.deleteOverlay(this.back);
this.back = null;
}
this.tools = []; this.tools = [];
this.x = x; this.x = x;
this.y = y; this.y = y;