Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-04 06:23:35 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change visibility radio buttons to pop-up menu

Browse source
This commit is contained in:
David Rowe 2015-04-07 10:43:50 -07:00
parent a844b73fcc
commit 7acc413c66
1 changed files with 89 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

245
examples/users.js
View file

@ -28,7 +28,7 @@ var PopUpMenu = function (properties) {
var y, var y,
i; i;
y = properties.y - (properties.values.length - 1) * properties.lineHeight; y = properties.y - (properties.values.length - 1) * properties.lineHeight - OPTION_MARGIN;
for (i = 0; i < properties.values.length; i += 1) { for (i = 0; i < properties.values.length; i += 1) {
Overlays.editOverlay(optionOverlays[i], { y: y }); Overlays.editOverlay(optionOverlays[i], { y: y });
@ -52,7 +52,7 @@ var PopUpMenu = function (properties) {
alpha: properties.optionAlpha, alpha: properties.optionAlpha,
backgroundColor: properties.popupBackgroundColor, backgroundColor: properties.popupBackgroundColor,
backgroundAlpha: properties.popupBackgroundAlpha, backgroundAlpha: properties.popupBackgroundAlpha,
text: properties.values[i], text: properties.displayValues[i],
font: properties.font, font: properties.font,
visible: true visible: true
}); });
@ -86,7 +86,7 @@ var PopUpMenu = function (properties) {
for (i = 0; i < optionOverlays.length; i += 1) { for (i = 0; i < optionOverlays.length; i += 1) {
if (overlay === optionOverlays[i]) { if (overlay === optionOverlays[i]) {
value = properties.values[i]; value = properties.values[i];
Overlays.editOverlay(valueOverlay, { text: value }); Overlays.editOverlay(valueOverlay, { text: properties.displayValues[i] });
clicked = true; clicked = true;
} }
} }
@ -128,6 +128,16 @@ var PopUpMenu = function (properties) {
return value; return value;
} }
function setValue(newValue) {
var index;
index = properties.values.indexOf(newValue);
if (index !== -1) {
value = newValue;
Overlays.editOverlay(valueOverlay, { text: properties.displayValues[index] });
}
}
promptOverlay = Overlays.addOverlay("text", { promptOverlay = Overlays.addOverlay("text", {
x: properties.x, x: properties.x,
y: properties.y, y: properties.y,
@ -155,7 +165,7 @@ var PopUpMenu = function (properties) {
alpha: properties.optionAlpha, alpha: properties.optionAlpha,
backgroundColor: properties.optionBackgroundColor, backgroundColor: properties.optionBackgroundColor,
backgroundAlpha: properties.optionBackgroundAlpha, backgroundAlpha: properties.optionBackgroundAlpha,
text: value, text: properties.displayValues[properties.values.indexOf(value)],
font: properties.font, font: properties.font,
visible: properties.visible visible: properties.visible
}); });
@ -177,7 +187,8 @@ var PopUpMenu = function (properties) {
setVisible: setVisible, setVisible: setVisible,
handleClick: handleClick, handleClick: handleClick,
tearDown: tearDown, tearDown: tearDown,
value: getValue getValue: getValue,
setValue: setValue
}; };
}; };
@ -216,7 +227,7 @@ var usersWindow = (function () {
scrollbarBar, scrollbarBar,
scrollbarBackgroundHeight, scrollbarBackgroundHeight,
scrollbarBarHeight, scrollbarBarHeight,
FRIENDS_BUTTON_SPACER = 12, // Space before add/remove friends button FRIENDS_BUTTON_SPACER = 6, // Space before add/remove friends button
FRIENDS_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/add-remove-friends.svg", FRIENDS_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/add-remove-friends.svg",
FRIENDS_BUTTON_SVG_WIDTH = 107, FRIENDS_BUTTON_SVG_WIDTH = 107,
FRIENDS_BUTTON_SVG_HEIGHT = 27, FRIENDS_BUTTON_SVG_HEIGHT = 27,
@ -228,20 +239,28 @@ var usersWindow = (function () {
OPTION_BACKGROUND_COLOR = { red: 60, green: 60, blue: 60 }, OPTION_BACKGROUND_COLOR = { red: 60, green: 60, blue: 60 },
OPTION_BACKGROUND_ALPHA = 0.8, OPTION_BACKGROUND_ALPHA = 0.8,
DISPLAY_SPACER = 12, // Space before display control DISPLAY_SPACER = 12, // Space before display control
DISPLAY_PROMPT = "Show me:", DISPLAY_PROMPT = "Show me:",
DISPLAY_PROMPT_WIDTH = 60, DISPLAY_PROMPT_WIDTH = 60,
DISPLAY_EVERYONE_TEXT = "everyone", DISPLAY_EVERYONE = "everyone",
DISPLAY_FRIENDS_TEXT = "friends", DISPLAY_FRIENDS = "friends",
DISPLAY_VALUES = [DISPLAY_EVERYONE_TEXT, DISPLAY_FRIENDS_TEXT], DISPLAY_VALUES = [DISPLAY_EVERYONE, DISPLAY_FRIENDS],
DISPLAY_DISPLAY_VALUES = DISPLAY_VALUES,
DISPLAY_OPTIONS_BACKGROUND_COLOR = { red: 40, green: 40, blue: 40 }, DISPLAY_OPTIONS_BACKGROUND_COLOR = { red: 40, green: 40, blue: 40 },
DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.95, DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.95,
displayControl, displayControl,
VISIBILITY_SPACER = 6, // Space before visibility controls VISIBILITY_SPACER = 6, // Space before visibility control
visibilityHeading, VISIBILITY_PROMPT = "Visible to:",
VISIBILITY_RADIO_SPACE = 16, VISIBILITY_PROMPT_WIDTH = 60,
visibilityControls, VISIBILITY_ALL = "all",
VISIBILITY_FRIENDS = "friends",
VISIBILITY_NONE = "none",
VISIBILITY_VALUES = [VISIBILITY_ALL, VISIBILITY_FRIENDS, VISIBILITY_NONE],
VISIBILITY_DISPLAY_VALUES = ["everyone", "friends", "no one"],
visibilityControl,
windowHeight, windowHeight,
windowTextHeight, windowTextHeight,
windowLineSpacing, windowLineSpacing,
@ -262,7 +281,6 @@ var usersWindow = (function () {
USERS_UPDATE_TIMEOUT = 5000, // ms = 5s USERS_UPDATE_TIMEOUT = 5000, // ms = 5s
myVisibility, myVisibility,
VISIBILITY_VALUES = ["all", "friends", "none"],
MENU_NAME = "Tools", MENU_NAME = "Tools",
MENU_ITEM = "Users Online", MENU_ITEM = "Users Online",
@ -280,12 +298,7 @@ var usersWindow = (function () {
scrollbarBackgroundPosition = {}, scrollbarBackgroundPosition = {},
scrollbarBarPosition = {}, scrollbarBarPosition = {},
scrollbarBarClickedAt, // 0.0 .. 1.0 scrollbarBarClickedAt, // 0.0 .. 1.0
scrollbarValue = 0.0, // 0.0 .. 1.0 scrollbarValue = 0.0; // 0.0 .. 1.0
RADIO_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/radio-button.svg",
RADIO_BUTTON_SVG_DIAMETER = 14,
RADIO_BUTTON_DISPLAY_SCALE = 0.7, // 1.0 = windowTextHeight
radioButtonDiameter;
function calculateWindowHeight() { function calculateWindowHeight() {
var AUDIO_METER_HEIGHT = 52, var AUDIO_METER_HEIGHT = 52,
@ -298,11 +311,11 @@ var usersWindow = (function () {
return; return;
} }
// Reserve 5 lines for window heading plus display and visibility controls // Reserve space for title, friends button, and option controls
// Subtract windowLineSpacing for both end of user list and end of controls nonUsersHeight = WINDOW_MARGIN + windowLineHeight
nonUsersHeight = 6 * windowLineHeight - 2 * windowLineSpacing
+ FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT + FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT
+ DISPLAY_SPACER + VISIBILITY_SPACER + WINDOW_MARGIN + WINDOW_BASE_MARGIN; + DISPLAY_SPACER + windowLineHeight
+ VISIBILITY_SPACER + windowLineHeight + WINDOW_BASE_MARGIN;
// Limit window to height of viewport minus VU meter and mirror if displayed // Limit window to height of viewport minus VU meter and mirror if displayed
windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight; windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight;
@ -324,8 +337,7 @@ var usersWindow = (function () {
} }
function updateOverlayPositions() { function updateOverlayPositions() {
var i, var y;
y;
Overlays.editOverlay(windowPane, { Overlays.editOverlay(windowPane, {
y: viewportHeight - windowHeight y: viewportHeight - windowHeight
@ -348,39 +360,16 @@ var usersWindow = (function () {
y: scrollbarBarPosition.y y: scrollbarBarPosition.y
}); });
Overlays.editOverlay(friendsButton, { y = viewportHeight - FRIENDS_BUTTON_HEIGHT
y: viewportHeight - FRIENDS_BUTTON_HEIGHT - DISPLAY_SPACER - windowLineHeight
- DISPLAY_SPACER - windowTextHeight - VISIBILITY_SPACER - windowLineHeight - WINDOW_BASE_MARGIN;
- VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN Overlays.editOverlay(friendsButton, { y: y });
});
y = viewportHeight y += FRIENDS_BUTTON_HEIGHT + DISPLAY_SPACER;
- windowTextHeight
- VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN;
displayControl.updatePosition(WINDOW_MARGIN, y); displayControl.updatePosition(WINDOW_MARGIN, y);
Overlays.editOverlay(visibilityHeading, { y += windowLineHeight + VISIBILITY_SPACER;
y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN visibilityControl.updatePosition(WINDOW_MARGIN, y);
});
for (i = 0; i < visibilityControls.length; i += 1) {
y = viewportHeight - (3 - i) * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN;
Overlays.editOverlay(visibilityControls[i].radioOverlay, { y: y });
Overlays.editOverlay(visibilityControls[i].textOverlay, { y: y });
}
}
function updateVisibilityControls() {
var i,
color;
for (i = 0; i < visibilityControls.length; i += 1) {
color = visibilityControls[i].selected ? WINDOW_FOREGROUND_COLOR : WINDOW_HEADING_COLOR;
Overlays.editOverlay(visibilityControls[i].radioOverlay, {
color: color,
subImage: { y: visibilityControls[i].selected ? 0 : RADIO_BUTTON_SVG_DIAMETER }
});
Overlays.editOverlay(visibilityControls[i].textOverlay, { color: color });
}
} }
function updateUsersDisplay() { function updateUsersDisplay() {
@ -444,7 +433,7 @@ var usersWindow = (function () {
function pollUsers() { function pollUsers() {
var url = API_URL; var url = API_URL;
if (displayControl.value() === DISPLAY_FRIENDS_TEXT) { if (displayControl.getValue() === DISPLAY_FRIENDS) {
url += API_FRIENDS_FILTER; url += API_FRIENDS_FILTER;
} }
@ -515,8 +504,6 @@ var usersWindow = (function () {
}; };
function updateOverlayVisibility() { function updateOverlayVisibility() {
var i;
Overlays.editOverlay(windowPane, { visible: isVisible }); Overlays.editOverlay(windowPane, { visible: isVisible });
Overlays.editOverlay(windowHeading, { visible: isVisible }); Overlays.editOverlay(windowHeading, { visible: isVisible });
Overlays.editOverlay(minimizeButton, { visible: isVisible }); Overlays.editOverlay(minimizeButton, { visible: isVisible });
@ -524,11 +511,7 @@ var usersWindow = (function () {
Overlays.editOverlay(scrollbarBar, { visible: isVisible && isUsingScrollbars && !isMinimized }); Overlays.editOverlay(scrollbarBar, { visible: isVisible && isUsingScrollbars && !isMinimized });
Overlays.editOverlay(friendsButton, { visible: isVisible && !isMinimized }); Overlays.editOverlay(friendsButton, { visible: isVisible && !isMinimized });
displayControl.setVisible(isVisible && !isMinimized); displayControl.setVisible(isVisible && !isMinimized);
Overlays.editOverlay(visibilityHeading, { visible: isVisible && !isMinimized }); visibilityControl.setVisible(isVisible && !isMinimized);
for (i = 0; i < visibilityControls.length; i += 1) {
Overlays.editOverlay(visibilityControls[i].radioOverlay, { visible: isVisible && !isMinimized });
Overlays.editOverlay(visibilityControls[i].textOverlay, { visible: isVisible && !isMinimized });
}
} }
function setVisible(visible) { function setVisible(visible) {
@ -562,13 +545,11 @@ var usersWindow = (function () {
} }
function onFindableByChanged(event) { function onFindableByChanged(event) {
var i; if (VISIBILITY_VALUES.indexOf(event) !== -1) {
visibilityControl.setValue(event);
for (i = 0; i < visibilityControls.length; i += 1) { } else {
visibilityControls[i].selected = event === VISIBILITY_VALUES[i]; print("Error: Unrecognized onFindableByChanged value: " + myVisibility);
} }
updateVisibilityControls();
} }
function onMousePressEvent(event) { function onMousePressEvent(event) {
@ -580,7 +561,6 @@ var usersWindow = (function () {
maxY, maxY,
lineClicked, lineClicked,
userClicked, userClicked,
i,
delta; delta;
if (!isVisible) { if (!isVisible) {
@ -598,6 +578,11 @@ var usersWindow = (function () {
return; return;
} }
if (visibilityControl.handleClick(clickedOverlay)) {
GlobalServices.findableBy = visibilityControl.getValue();
return;
}
if (clickedOverlay === windowPane) { if (clickedOverlay === windowPane) {
overlayX = event.x - WINDOW_MARGIN; overlayX = event.x - WINDOW_MARGIN;
@ -623,14 +608,6 @@ var usersWindow = (function () {
return; return;
} }
for (i = 0; i < visibilityControls.length; i += 1) {
// Don't need to test radioOverlay if it us under textOverlay.
if (clickedOverlay === visibilityControls[i].textOverlay && event.x <= visibilityControls[i].optionWidth) {
GlobalServices.findableBy = VISIBILITY_VALUES[i];
return;
}
}
if (clickedOverlay === minimizeButton) { if (clickedOverlay === minimizeButton) {
setMinimized(!isMinimized); setMinimized(!isMinimized);
calculateWindowHeight(); calculateWindowHeight();
@ -717,14 +694,12 @@ var usersWindow = (function () {
} }
function setUp() { function setUp() {
var textSizeOverlay, var textSizeOverlay;
optionText;
textSizeOverlay = Overlays.addOverlay("text", { font: WINDOW_FONT, visible: false }); textSizeOverlay = Overlays.addOverlay("text", { font: WINDOW_FONT, visible: false });
windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height); windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height);
windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight); windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight);
windowLineHeight = windowTextHeight + windowLineSpacing; windowLineHeight = windowTextHeight + windowLineSpacing;
radioButtonDiameter = RADIO_BUTTON_DISPLAY_SCALE * windowTextHeight;
Overlays.deleteOverlay(textSizeOverlay); Overlays.deleteOverlay(textSizeOverlay);
viewportHeight = Controller.getViewportDimensions().y; viewportHeight = Controller.getViewportDimensions().y;
@ -819,6 +794,7 @@ var usersWindow = (function () {
prompt: DISPLAY_PROMPT, prompt: DISPLAY_PROMPT,
value: DISPLAY_VALUES[0], value: DISPLAY_VALUES[0],
values: DISPLAY_VALUES, values: DISPLAY_VALUES,
displayValues: DISPLAY_DISPLAY_VALUES,
x: WINDOW_MARGIN, x: WINDOW_MARGIN,
y: viewportHeight, y: viewportHeight,
width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
@ -841,85 +817,38 @@ var usersWindow = (function () {
visible: isVisible && !isMinimized visible: isVisible && !isMinimized
}); });
visibilityHeading = Overlays.addOverlay("text", {
x: WINDOW_MARGIN,
y: viewportHeight,
width: WINDOW_WIDTH - 2 * WINDOW_MARGIN,
height: windowTextHeight,
topMargin: 0,
leftMargin: 0,
color: WINDOW_HEADING_COLOR,
alpha: WINDOW_HEADING_ALPHA,
backgroundAlpha: 0.0,
text: "I am visible to:",
font: WINDOW_FONT,
visible: isVisible && !isMinimized
});
myVisibility = GlobalServices.findableBy; myVisibility = GlobalServices.findableBy;
if (!/^(all|friends|none)$/.test(myVisibility)) { if (VISIBILITY_VALUES.indexOf(myVisibility) === -1) {
print("Error: Unrecognized findableBy value"); print("Error: Unrecognized findableBy value: " + myVisibility);
myVisibility = ""; myVisibility = VISIBILITY_ALL;
} }
optionText = "everyone"; visibilityControl = new PopUpMenu({
visibilityControls = [{ prompt: VISIBILITY_PROMPT,
radioOverlay: Overlays.addOverlay("image", { // Create first so that it is under textOverlay. value: myVisibility,
values: VISIBILITY_VALUES,
displayValues: VISIBILITY_DISPLAY_VALUES,
x: WINDOW_MARGIN, x: WINDOW_MARGIN,
y: viewportHeight, y: viewportHeight,
width: radioButtonDiameter, width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
height: radioButtonDiameter, promptWidth: VISIBILITY_PROMPT_WIDTH,
imageURL: RADIO_BUTTON_SVG, lineHeight: windowLineHeight,
subImage: { textHeight: windowTextHeight,
x: 0,
y: RADIO_BUTTON_SVG_DIAMETER, // Off
width: RADIO_BUTTON_SVG_DIAMETER,
height: RADIO_BUTTON_SVG_DIAMETER
},
color: WINDOW_HEADING_COLOR,
alpha: WINDOW_FOREGROUND_ALPHA,
visible: isVisible && !isMinimized
}),
textOverlay: Overlays.addOverlay("text", {
x: WINDOW_MARGIN,
y: viewportHeight,
width: WINDOW_WIDTH - SCROLLBAR_BACKGROUND_WIDTH - 2 * WINDOW_MARGIN,
height: windowTextHeight,
topMargin: 0,
leftMargin: VISIBILITY_RADIO_SPACE,
color: WINDOW_HEADING_COLOR,
alpha: WINDOW_FOREGROUND_ALPHA,
backgroundAlpha: 0.0,
text: optionText,
font: WINDOW_FONT, font: WINDOW_FONT,
promptColor: WINDOW_HEADING_COLOR,
promptAlpha: WINDOW_HEADING_ALPHA,
promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
promptBackgroundAlpha: 0.0,
optionColor: WINDOW_FOREGROUND_COLOR,
optionAlpha: WINDOW_FOREGROUND_ALPHA,
optionBackgroundColor: OPTION_BACKGROUND_COLOR,
optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
buttonColor: MIN_MAX_BUTTON_COLOR,
buttonAlpha: MIN_MAX_BUTTON_ALPHA,
visible: isVisible && !isMinimized visible: isVisible && !isMinimized
}), });
selected: myVisibility === VISIBILITY_VALUES[0]
}];
visibilityControls[0].optionWidth = WINDOW_MARGIN + VISIBILITY_RADIO_SPACE
+ Overlays.textSize(visibilityControls[0].textOverlay, optionText).width;
optionText = "my friends";
visibilityControls[1] = {
radioOverlay: Overlays.cloneOverlay(visibilityControls[0].radioOverlay),
textOverlay: Overlays.cloneOverlay(visibilityControls[0].textOverlay),
selected: myVisibility === VISIBILITY_VALUES[1]
};
Overlays.editOverlay(visibilityControls[1].textOverlay, { text: optionText });
visibilityControls[1].optionWidth = WINDOW_MARGIN + VISIBILITY_RADIO_SPACE
+ Overlays.textSize(visibilityControls[1].textOverlay, optionText).width;
optionText = "no one";
visibilityControls[2] = {
radioOverlay: Overlays.cloneOverlay(visibilityControls[0].radioOverlay),
textOverlay: Overlays.cloneOverlay(visibilityControls[0].textOverlay),
selected: myVisibility === VISIBILITY_VALUES[2]
};
Overlays.editOverlay(visibilityControls[2].textOverlay, { text: optionText });
visibilityControls[2].optionWidth = WINDOW_MARGIN + VISIBILITY_RADIO_SPACE
+ Overlays.textSize(visibilityControls[2].textOverlay, optionText).width;
updateVisibilityControls();
Controller.mousePressEvent.connect(onMousePressEvent); Controller.mousePressEvent.connect(onMousePressEvent);
Controller.mouseMoveEvent.connect(onMouseMoveEvent); Controller.mouseMoveEvent.connect(onMouseMoveEvent);
@ -943,8 +872,6 @@ var usersWindow = (function () {
} }
function tearDown() { function tearDown() {
var i;
Menu.removeMenuItem(MENU_NAME, MENU_ITEM); Menu.removeMenuItem(MENU_NAME, MENU_ITEM);
Script.clearTimeout(usersTimer); Script.clearTimeout(usersTimer);
@ -955,11 +882,7 @@ var usersWindow = (function () {
Overlays.deleteOverlay(scrollbarBar); Overlays.deleteOverlay(scrollbarBar);
Overlays.deleteOverlay(friendsButton); Overlays.deleteOverlay(friendsButton);
displayControl.tearDown(); displayControl.tearDown();
Overlays.deleteOverlay(visibilityHeading); visibilityControl.tearDown();
for (i = 0; i <= visibilityControls.length; i += 1) {
Overlays.deleteOverlay(visibilityControls[i].textOverlay);
Overlays.deleteOverlay(visibilityControls[i].radioOverlay);
}
} }
setUp(); setUp();