Merge pull request #4513 from ctrlaltdavid/20421

CR for Job #20421 - Add scrollbar to Users Online window
This commit is contained in:
Brad Hefta-Gaub 2015-03-26 16:50:30 -07:00
commit 7f74bd1ae9

View file

@ -11,7 +11,7 @@
var usersWindow = (function () { var usersWindow = (function () {
var WINDOW_WIDTH_2D = 150, var WINDOW_WIDTH_2D = 160,
WINDOW_MARGIN_2D = 12, WINDOW_MARGIN_2D = 12,
WINDOW_FONT_2D = { size: 12 }, WINDOW_FONT_2D = { size: 12 },
WINDOW_FOREGROUND_COLOR_2D = { red: 240, green: 240, blue: 240 }, WINDOW_FOREGROUND_COLOR_2D = { red: 240, green: 240, blue: 240 },
@ -22,6 +22,17 @@ var usersWindow = (function () {
WINDOW_BACKGROUND_ALPHA_2D = 0.7, WINDOW_BACKGROUND_ALPHA_2D = 0.7,
windowPane2D, windowPane2D,
windowHeading2D, windowHeading2D,
SCROLLBAR_BACKGROUND_WIDTH_2D = 12,
SCROLLBAR_BACKGROUND_COLOR_2D = { red: 80, green: 80, blue: 80 },
SCROLLBAR_BACKGROUND_ALPHA_2D = 0.8,
scrollbarBackground2D,
SCROLLBAR_BAR_MIN_HEIGHT = 5,
SCROLLBAR_BAR_COLOR_2D = { red: 180, green: 180, blue: 180 },
SCROLLBAR_BAR_ALPHA_2D = 0.8,
SCROLLBAR_BAR_SELECTED_ALPHA_2D = 0.9,
scrollbarBar2D,
scrollbarBackgroundHeight,
scrollbarBarHeight,
VISIBILITY_SPACER_2D = 12, // Space between list of users and visibility controls VISIBILITY_SPACER_2D = 12, // Space between list of users and visibility controls
visibilityHeading2D, visibilityHeading2D,
VISIBILITY_RADIO_SPACE = 16, VISIBILITY_RADIO_SPACE = 16,
@ -33,6 +44,8 @@ var usersWindow = (function () {
usersOnline, // Raw users data usersOnline, // Raw users data
linesOfUsers = [], // Array of indexes pointing into usersOnline linesOfUsers = [], // Array of indexes pointing into usersOnline
numUsersToDisplay = 0,
firstUserToDisplay = 0,
API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online", API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online",
HTTP_GET_TIMEOUT = 60000, // ms = 1 minute HTTP_GET_TIMEOUT = 60000, // ms = 1 minute
@ -54,6 +67,15 @@ var usersWindow = (function () {
isVisible = true, isVisible = true,
viewportHeight, viewportHeight,
isMirrorDisplay = false,
isFullscreenMirror = false,
isUsingScrollbars = false,
isMovingScrollbar = false,
scrollbarBackgroundPosition = {},
scrollbarBarPosition = {},
scrollbarBarClickedAt, // 0.0 .. 1.0
scrollbarValue = 0.0, // 0.0 .. 1.0
HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/", HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/",
RADIO_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/radio-button.svg", RADIO_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/radio-button.svg",
@ -62,10 +84,32 @@ var usersWindow = (function () {
radioButtonDiameter; radioButtonDiameter;
function calculateWindowHeight() { function calculateWindowHeight() {
var AUDIO_METER_HEIGHT = 52,
MIRROR_HEIGHT = 220,
nonUsersHeight,
maxWindowHeight;
// Reserve 5 lines for window heading plus visibility heading and controls // Reserve 5 lines for window heading plus visibility heading and controls
// Subtract windowLineSpacing for both end of user list and end of controls // Subtract windowLineSpacing for both end of user list and end of controls
windowHeight = (linesOfUsers.length > 0 ? linesOfUsers.length + 5 : 5) * windowLineHeight nonUsersHeight = 5 * windowLineHeight - 2 * windowLineSpacing + VISIBILITY_SPACER_2D + 2 * WINDOW_MARGIN_2D;
- 2 * windowLineSpacing + VISIBILITY_SPACER_2D + 2 * WINDOW_MARGIN_2D;
// Limit window to height of viewport minus VU meter and mirror if displayed
windowHeight = linesOfUsers.length * windowLineHeight + nonUsersHeight;
maxWindowHeight = viewportHeight - AUDIO_METER_HEIGHT;
if (isMirrorDisplay && !isFullscreenMirror) {
maxWindowHeight -= MIRROR_HEIGHT;
}
windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight);
// Corresponding number of users to actually display
numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0);
isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length;
if (isUsingScrollbars) {
firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
} else {
firstUserToDisplay = 0;
scrollbarValue = 0.0;
}
} }
function updateOverlayPositions() { function updateOverlayPositions() {
@ -78,6 +122,16 @@ var usersWindow = (function () {
Overlays.editOverlay(windowHeading2D, { Overlays.editOverlay(windowHeading2D, {
y: viewportHeight - windowHeight + WINDOW_MARGIN_2D y: viewportHeight - windowHeight + WINDOW_MARGIN_2D
}); });
scrollbarBackgroundPosition.y = viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight;
Overlays.editOverlay(scrollbarBackground2D, {
y: scrollbarBackgroundPosition.y
});
scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1
+ scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
Overlays.editOverlay(scrollbarBar2D, {
y: scrollbarBarPosition.y
});
Overlays.editOverlay(visibilityHeading2D, { Overlays.editOverlay(visibilityHeading2D, {
y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D
}); });
@ -104,57 +158,59 @@ var usersWindow = (function () {
function updateUsersDisplay() { function updateUsersDisplay() {
var displayText = "", var displayText = "",
myUsername,
user, user,
userText, userText,
textWidth, textWidth,
maxTextWidth, maxTextWidth,
ellipsisWidth,
reducedTextWidth,
i; i;
myUsername = GlobalServices.username; maxTextWidth = WINDOW_WIDTH_2D - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH_2D : 0) - 2 * WINDOW_MARGIN_2D;
linesOfUsers = []; ellipsisWidth = Overlays.textSize(windowPane2D, "...").width;
for (i = 0; i < usersOnline.length; i += 1) { reducedTextWidth = maxTextWidth - ellipsisWidth;
user = usersOnline[i];
if (user.username !== myUsername && user.online) {
userText = user.username;
if (user.location.root) {
userText += " @ " + user.location.root.name;
}
textWidth = Overlays.textSize(windowPane2D, userText).width;
maxTextWidth = WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D; for (i = 0; i < numUsersToDisplay; i += 1) {
if (textWidth > maxTextWidth) { user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
// Trim and append "..." to fit window width userText = user.text;
maxTextWidth = maxTextWidth - Overlays.textSize(windowPane2D, "...").width; textWidth = user.textWidth;
while (textWidth > maxTextWidth) {
userText = userText.slice(0, -1); if (textWidth > maxTextWidth) {
textWidth = Overlays.textSize(windowPane2D, userText).width; // Trim and append "..." to fit window width
} maxTextWidth = maxTextWidth - Overlays.textSize(windowPane2D, "...").width;
userText += "..."; while (textWidth > reducedTextWidth) {
userText = userText.slice(0, -1);
textWidth = Overlays.textSize(windowPane2D, userText).width; textWidth = Overlays.textSize(windowPane2D, userText).width;
} }
userText += "...";
usersOnline[i].textWidth = textWidth;
linesOfUsers.push(i);
displayText += "\n" + userText;
} }
displayText += "\n" + userText;
} }
displayText = displayText.slice(1); // Remove leading "\n". displayText = displayText.slice(1); // Remove leading "\n".
calculateWindowHeight();
Overlays.editOverlay(windowPane2D, { Overlays.editOverlay(windowPane2D, {
y: viewportHeight - windowHeight,
height: windowHeight, height: windowHeight,
text: displayText text: displayText
}); });
Overlays.editOverlay(windowHeading2D, { Overlays.editOverlay(windowHeading2D, {
y: viewportHeight - windowHeight + WINDOW_MARGIN_2D,
text: linesOfUsers.length > 0 ? "Users online" : "No users online" text: linesOfUsers.length > 0 ? "Users online" : "No users online"
}); });
scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
Overlays.editOverlay(scrollbarBackground2D, {
height: scrollbarBackgroundHeight,
visible: isUsingScrollbars
});
scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
SCROLLBAR_BAR_MIN_HEIGHT);
Overlays.editOverlay(scrollbarBar2D, {
height: scrollbarBarHeight,
visible: isUsingScrollbars
});
updateOverlayPositions(); updateOverlayPositions();
} }
@ -168,7 +224,11 @@ var usersWindow = (function () {
} }
processUsers = function () { processUsers = function () {
var response; var response,
myUsername,
user,
userText,
i;
if (usersRequest.readyState === usersRequest.DONE) { if (usersRequest.readyState === usersRequest.DONE) {
if (usersRequest.status === 200) { if (usersRequest.status === 200) {
@ -185,7 +245,26 @@ var usersWindow = (function () {
} }
usersOnline = response.data.users; usersOnline = response.data.users;
myUsername = GlobalServices.username;
linesOfUsers = [];
for (i = 0; i < usersOnline.length; i += 1) {
user = usersOnline[i];
if (user.username !== myUsername && user.online) {
userText = user.username;
if (user.location.root) {
userText += " @ " + user.location.root.name;
}
usersOnline[i].text = userText;
usersOnline[i].textWidth = Overlays.textSize(windowPane2D, userText).width;
linesOfUsers.push(i);
}
}
calculateWindowHeight();
updateUsersDisplay(); updateUsersDisplay();
} else { } else {
print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText); print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText);
usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
@ -226,6 +305,8 @@ var usersWindow = (function () {
Overlays.editOverlay(windowPane2D, { visible: isVisible }); Overlays.editOverlay(windowPane2D, { visible: isVisible });
Overlays.editOverlay(windowHeading2D, { visible: isVisible }); Overlays.editOverlay(windowHeading2D, { visible: isVisible });
Overlays.editOverlay(scrollbarBackground2D, { visible: isVisible && isUsingScrollbars });
Overlays.editOverlay(scrollbarBar2D, { visible: isVisible && isUsingScrollbars });
Overlays.editOverlay(visibilityHeading2D, { visible: isVisible }); Overlays.editOverlay(visibilityHeading2D, { visible: isVisible });
for (i = 0; i < visibilityControls2D.length; i += 1) { for (i = 0; i < visibilityControls2D.length; i += 1) {
Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { visible: isVisible }); Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { visible: isVisible });
@ -247,8 +328,10 @@ var usersWindow = (function () {
minY, minY,
maxY, maxY,
lineClicked, lineClicked,
userClicked,
i, i,
visibilityChanged; visibilityChanged,
delta;
if (!isVisible) { if (!isVisible) {
return; return;
@ -261,7 +344,7 @@ var usersWindow = (function () {
overlayX = event.x - WINDOW_MARGIN_2D; overlayX = event.x - WINDOW_MARGIN_2D;
overlayY = event.y - viewportHeight + windowHeight - WINDOW_MARGIN_2D - windowLineHeight; overlayY = event.y - viewportHeight + windowHeight - WINDOW_MARGIN_2D - windowLineHeight;
numLinesBefore = Math.floor(overlayY / windowLineHeight); numLinesBefore = Math.round(overlayY / windowLineHeight);
minY = numLinesBefore * windowLineHeight; minY = numLinesBefore * windowLineHeight;
maxY = minY + windowTextHeight; maxY = minY + windowTextHeight;
@ -270,10 +353,12 @@ var usersWindow = (function () {
lineClicked = numLinesBefore; lineClicked = numLinesBefore;
} }
if (0 <= lineClicked && lineClicked < linesOfUsers.length userClicked = firstUserToDisplay + lineClicked;
&& 0 <= overlayX && overlayX <= usersOnline[linesOfUsers[lineClicked]].textWidth) {
//print("Go to " + usersOnline[linesOfUsers[lineClicked]].username); if (0 <= userClicked && userClicked < linesOfUsers.length
location.goToUser(usersOnline[linesOfUsers[lineClicked]].username); && 0 <= overlayX && overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
//print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
} }
} }
@ -292,13 +377,74 @@ var usersWindow = (function () {
} }
updateVisibilityControls(); updateVisibilityControls();
} }
if (clickedOverlay === scrollbarBar2D) {
scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight;
Overlays.editOverlay(scrollbarBar2D, {
backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA_2D
});
isMovingScrollbar = true;
}
if (clickedOverlay === scrollbarBackground2D) {
delta = scrollbarBarHeight / (scrollbarBackgroundHeight - scrollbarBarHeight);
if (event.y < scrollbarBarPosition.y) {
scrollbarValue = Math.max(scrollbarValue - delta, 0.0);
} else {
scrollbarValue = Math.min(scrollbarValue + delta, 1.0);
}
firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
updateOverlayPositions();
updateUsersDisplay();
}
}
function onMouseMoveEvent(event) {
if (isMovingScrollbar) {
if (scrollbarBackgroundPosition.x - WINDOW_MARGIN_2D <= event.x
&& event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH_2D + WINDOW_MARGIN_2D
&& scrollbarBackgroundPosition.y - WINDOW_MARGIN_2D <= event.y
&& event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN_2D) {
scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y)
/ (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0);
firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
updateOverlayPositions();
updateUsersDisplay();
} else {
Overlays.editOverlay(scrollbarBar2D, {
backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D
});
isMovingScrollbar = false;
}
}
}
function onMouseReleaseEvent() {
Overlays.editOverlay(scrollbarBar2D, {
backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D
});
isMovingScrollbar = false;
} }
function onScriptUpdate() { function onScriptUpdate() {
var oldViewportHeight = viewportHeight; var oldViewportHeight = viewportHeight,
oldIsMirrorDisplay = isMirrorDisplay,
oldIsFullscreenMirror = isFullscreenMirror,
MIRROR_MENU_ITEM = "Mirror",
FULLSCREEN_MIRROR_MENU_ITEM = "Fullscreen Mirror";
viewportHeight = Controller.getViewportDimensions().y; viewportHeight = Controller.getViewportDimensions().y;
if (viewportHeight !== oldViewportHeight) { isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM);
isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM);
if (viewportHeight !== oldViewportHeight
|| isMirrorDisplay !== oldIsMirrorDisplay
|| isFullscreenMirror !== oldIsFullscreenMirror) {
calculateWindowHeight();
updateUsersDisplay();
updateOverlayPositions(); updateOverlayPositions();
} }
} }
@ -314,10 +460,10 @@ var usersWindow = (function () {
radioButtonDiameter = RADIO_BUTTON_DISPLAY_SCALE * windowTextHeight; radioButtonDiameter = RADIO_BUTTON_DISPLAY_SCALE * windowTextHeight;
Overlays.deleteOverlay(textSizeOverlay); Overlays.deleteOverlay(textSizeOverlay);
calculateWindowHeight();
viewportHeight = Controller.getViewportDimensions().y; viewportHeight = Controller.getViewportDimensions().y;
calculateWindowHeight();
windowPane2D = Overlays.addOverlay("text", { windowPane2D = Overlays.addOverlay("text", {
x: 0, x: 0,
y: viewportHeight, // Start up off-screen y: viewportHeight, // Start up off-screen
@ -349,6 +495,36 @@ var usersWindow = (function () {
visible: isVisible visible: isVisible
}); });
scrollbarBackgroundPosition = {
x: WINDOW_WIDTH_2D - 0.5 * WINDOW_MARGIN_2D - SCROLLBAR_BACKGROUND_WIDTH_2D,
y: viewportHeight
};
scrollbarBackground2D = Overlays.addOverlay("text", {
x: scrollbarBackgroundPosition.x,
y: scrollbarBackgroundPosition.y,
width: SCROLLBAR_BACKGROUND_WIDTH_2D,
height: windowTextHeight,
backgroundColor: SCROLLBAR_BACKGROUND_COLOR_2D,
backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA_2D,
text: "",
visible: isVisible && isUsingScrollbars
});
scrollbarBarPosition = {
x: WINDOW_WIDTH_2D - 0.5 * WINDOW_MARGIN_2D - SCROLLBAR_BACKGROUND_WIDTH_2D + 1,
y: viewportHeight
};
scrollbarBar2D = Overlays.addOverlay("text", {
x: scrollbarBarPosition.x,
y: scrollbarBarPosition.y,
width: SCROLLBAR_BACKGROUND_WIDTH_2D - 2,
height: windowTextHeight,
backgroundColor: SCROLLBAR_BAR_COLOR_2D,
backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D,
text: "",
visible: isVisible && isUsingScrollbars
});
visibilityHeading2D = Overlays.addOverlay("text", { visibilityHeading2D = Overlays.addOverlay("text", {
x: WINDOW_MARGIN_2D, x: WINDOW_MARGIN_2D,
y: viewportHeight, y: viewportHeight,
@ -390,7 +566,7 @@ var usersWindow = (function () {
textOverlay: Overlays.addOverlay("text", { textOverlay: Overlays.addOverlay("text", {
x: WINDOW_MARGIN_2D, x: WINDOW_MARGIN_2D,
y: viewportHeight, y: viewportHeight,
width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, width: WINDOW_WIDTH_2D - SCROLLBAR_BACKGROUND_WIDTH_2D - 2 * WINDOW_MARGIN_2D,
height: windowTextHeight, height: windowTextHeight,
topMargin: 0, topMargin: 0,
leftMargin: VISIBILITY_RADIO_SPACE, leftMargin: VISIBILITY_RADIO_SPACE,
@ -429,6 +605,8 @@ var usersWindow = (function () {
updateVisibilityControls(); updateVisibilityControls();
Controller.mousePressEvent.connect(onMousePressEvent); Controller.mousePressEvent.connect(onMousePressEvent);
Controller.mouseMoveEvent.connect(onMouseMoveEvent);
Controller.mouseReleaseEvent.connect(onMouseReleaseEvent);
Menu.addMenuItem({ Menu.addMenuItem({
menuName: MENU_NAME, menuName: MENU_NAME,
@ -456,6 +634,8 @@ var usersWindow = (function () {
Script.clearTimeout(usersTimer); Script.clearTimeout(usersTimer);
Overlays.deleteOverlay(windowPane2D); Overlays.deleteOverlay(windowPane2D);
Overlays.deleteOverlay(windowHeading2D); Overlays.deleteOverlay(windowHeading2D);
Overlays.deleteOverlay(scrollbarBackground2D);
Overlays.deleteOverlay(scrollbarBar2D);
Overlays.deleteOverlay(visibilityHeading2D); Overlays.deleteOverlay(visibilityHeading2D);
for (i = 0; i <= visibilityControls2D.length; i += 1) { for (i = 0; i <= visibilityControls2D.length; i += 1) {
Overlays.deleteOverlay(visibilityControls2D[i].textOverlay); Overlays.deleteOverlay(visibilityControls2D[i].textOverlay);