From 7c4ea855a838c2668fc0fffbaa1b297f5752b097 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 25 Mar 2015 14:50:25 -0700 Subject: [PATCH 01/10] Limit height of users window per screen space available --- examples/users.js | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/examples/users.js b/examples/users.js index 22fe89389f..18404340c5 100644 --- a/examples/users.js +++ b/examples/users.js @@ -54,6 +54,8 @@ var usersWindow = (function () { isVisible = true, viewportHeight, + isMirrorDisplay = false, + isFullscreenMirror = false, HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/", RADIO_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/radio-button.svg", @@ -62,10 +64,21 @@ var usersWindow = (function () { radioButtonDiameter; function calculateWindowHeight() { + var AUDIO_METER_HEIGHT = 52, + MIRROR_HEIGHT = 220, + maxWindowHeight; + // Reserve 5 lines for window heading plus visibility heading and controls // Subtract windowLineSpacing for both end of user list and end of controls windowHeight = (linesOfUsers.length > 0 ? linesOfUsers.length + 5 : 5) * windowLineHeight - 2 * windowLineSpacing + VISIBILITY_SPACER_2D + 2 * WINDOW_MARGIN_2D; + + // Limit to height of window minus VU meter and mirror if displayed + maxWindowHeight = viewportHeight - AUDIO_METER_HEIGHT; + if (isMirrorDisplay && !isFullscreenMirror) { + maxWindowHeight -= MIRROR_HEIGHT; + } + windowHeight = Math.min(windowHeight, maxWindowHeight); } function updateOverlayPositions() { @@ -295,10 +308,20 @@ var usersWindow = (function () { } 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; - if (viewportHeight !== oldViewportHeight) { + isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM); + isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM); + + if (viewportHeight !== oldViewportHeight + || isMirrorDisplay !== oldIsMirrorDisplay + || isFullscreenMirror !== oldIsFullscreenMirror) { + calculateWindowHeight(); updateOverlayPositions(); } } From 8e66f5998a9e555f5495871b706d29351b707823 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 25 Mar 2015 16:29:57 -0700 Subject: [PATCH 02/10] Add scrollbar background and bar --- examples/users.js | 54 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 51 insertions(+), 3 deletions(-) diff --git a/examples/users.js b/examples/users.js index 18404340c5..3efe2ff19a 100644 --- a/examples/users.js +++ b/examples/users.js @@ -11,7 +11,7 @@ var usersWindow = (function () { - var WINDOW_WIDTH_2D = 150, + var WINDOW_WIDTH_2D = 160, WINDOW_MARGIN_2D = 12, WINDOW_FONT_2D = { size: 12 }, WINDOW_FOREGROUND_COLOR_2D = { red: 240, green: 240, blue: 240 }, @@ -22,6 +22,13 @@ var usersWindow = (function () { WINDOW_BACKGROUND_ALPHA_2D = 0.7, windowPane2D, 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_COLOR_2D = { red: 180, green: 180, blue: 180 }, + SCROLLBAR_BAR_ALPHA_2D = 0.8, + scrollbarBar2D, VISIBILITY_SPACER_2D = 12, // Space between list of users and visibility controls visibilityHeading2D, VISIBILITY_RADIO_SPACE = 16, @@ -91,6 +98,12 @@ var usersWindow = (function () { Overlays.editOverlay(windowHeading2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D }); + Overlays.editOverlay(scrollbarBackground2D, { + y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + }); + Overlays.editOverlay(scrollbarBar2D, { + y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + 1 + }); Overlays.editOverlay(visibilityHeading2D, { y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D }); @@ -135,7 +148,7 @@ var usersWindow = (function () { } textWidth = Overlays.textSize(windowPane2D, userText).width; - maxTextWidth = WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D; + maxTextWidth = WINDOW_WIDTH_2D - SCROLLBAR_BACKGROUND_WIDTH_2D - 2 * WINDOW_MARGIN_2D; if (textWidth > maxTextWidth) { // Trim and append "..." to fit window width maxTextWidth = maxTextWidth - Overlays.textSize(windowPane2D, "...").width; @@ -168,6 +181,15 @@ var usersWindow = (function () { text: linesOfUsers.length > 0 ? "Users online" : "No users online" }); + Overlays.editOverlay(scrollbarBackground2D, { + y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight, + height: linesOfUsers.length * windowLineHeight - windowLineSpacing / 2 + }); + Overlays.editOverlay(scrollbarBar2D, { + y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + 1, + height: linesOfUsers.length * windowLineHeight / 3 // TODO + }); + updateOverlayPositions(); } @@ -239,6 +261,8 @@ var usersWindow = (function () { Overlays.editOverlay(windowPane2D, { visible: isVisible }); Overlays.editOverlay(windowHeading2D, { visible: isVisible }); + Overlays.editOverlay(scrollbarBackground2D, { visible: isVisible }); + Overlays.editOverlay(scrollbarBar2D, { visible: isVisible }); Overlays.editOverlay(visibilityHeading2D, { visible: isVisible }); for (i = 0; i < visibilityControls2D.length; i += 1) { Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { visible: isVisible }); @@ -372,6 +396,28 @@ var usersWindow = (function () { visible: isVisible }); + scrollbarBackground2D = Overlays.addOverlay("text", { + x: WINDOW_WIDTH_2D - 0.5 * WINDOW_MARGIN_2D - SCROLLBAR_BACKGROUND_WIDTH_2D, + y: viewportHeight, + width: SCROLLBAR_BACKGROUND_WIDTH_2D, + height: windowTextHeight, + backgroundColor: SCROLLBAR_BACKGROUND_COLOR_2D, + backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA_2D, + text: "", + visible: isVisible + }); + + scrollbarBar2D = Overlays.addOverlay("text", { + x: WINDOW_WIDTH_2D - 0.5 * WINDOW_MARGIN_2D - SCROLLBAR_BACKGROUND_WIDTH_2D + 1, + y: viewportHeight, + width: SCROLLBAR_BACKGROUND_WIDTH_2D - 2, + height: windowTextHeight, + backgroundColor: SCROLLBAR_BAR_COLOR_2D, + backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D, + text: "", + visible: isVisible + }); + visibilityHeading2D = Overlays.addOverlay("text", { x: WINDOW_MARGIN_2D, y: viewportHeight, @@ -413,7 +459,7 @@ var usersWindow = (function () { textOverlay: Overlays.addOverlay("text", { x: WINDOW_MARGIN_2D, y: viewportHeight, - width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, + width: WINDOW_WIDTH_2D - SCROLLBAR_BACKGROUND_WIDTH_2D - 2 * WINDOW_MARGIN_2D, height: windowTextHeight, topMargin: 0, leftMargin: VISIBILITY_RADIO_SPACE, @@ -479,6 +525,8 @@ var usersWindow = (function () { Script.clearTimeout(usersTimer); Overlays.deleteOverlay(windowPane2D); Overlays.deleteOverlay(windowHeading2D); + Overlays.deleteOverlay(scrollbarBackground2D); + Overlays.deleteOverlay(scrollbarBar2D); Overlays.deleteOverlay(visibilityHeading2D); for (i = 0; i <= visibilityControls2D.length; i += 1) { Overlays.deleteOverlay(visibilityControls2D[i].textOverlay); From 567375368e7f02c23b9613a786a30e9340916ee9 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 25 Mar 2015 17:44:14 -0700 Subject: [PATCH 03/10] Show first N users that can fit --- examples/users.js | 90 +++++++++++++++++++++++++++++------------------ 1 file changed, 56 insertions(+), 34 deletions(-) diff --git a/examples/users.js b/examples/users.js index 3efe2ff19a..2eef3e3816 100644 --- a/examples/users.js +++ b/examples/users.js @@ -40,6 +40,7 @@ var usersWindow = (function () { usersOnline, // Raw users data linesOfUsers = [], // Array of indexes pointing into usersOnline + numUsersToDisplay = 0, API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online", HTTP_GET_TIMEOUT = 60000, // ms = 1 minute @@ -73,19 +74,23 @@ var usersWindow = (function () { function calculateWindowHeight() { var AUDIO_METER_HEIGHT = 52, MIRROR_HEIGHT = 220, + nonUsersHeight, maxWindowHeight; // Reserve 5 lines for window heading plus visibility heading and controls // Subtract windowLineSpacing for both end of user list and end of controls - windowHeight = (linesOfUsers.length > 0 ? linesOfUsers.length + 5 : 5) * windowLineHeight - - 2 * windowLineSpacing + VISIBILITY_SPACER_2D + 2 * WINDOW_MARGIN_2D; + nonUsersHeight = 5 * windowLineHeight - 2 * windowLineSpacing + VISIBILITY_SPACER_2D + 2 * WINDOW_MARGIN_2D; - // Limit to height of window minus VU meter and mirror if displayed + // 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.min(windowHeight, maxWindowHeight); + + // Corresponding number of users to actually display + numUsersToDisplay = Math.round((windowHeight - nonUsersHeight) / windowLineHeight); } function updateOverlayPositions() { @@ -130,46 +135,39 @@ var usersWindow = (function () { function updateUsersDisplay() { var displayText = "", - myUsername, user, userText, textWidth, maxTextWidth, + ellipsisWidth, + reducedTextWidth, i; - 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; - } - textWidth = Overlays.textSize(windowPane2D, userText).width; + maxTextWidth = WINDOW_WIDTH_2D - SCROLLBAR_BACKGROUND_WIDTH_2D - 2 * WINDOW_MARGIN_2D; + ellipsisWidth = Overlays.textSize(windowPane2D, "...").width; + reducedTextWidth = maxTextWidth - ellipsisWidth; - maxTextWidth = WINDOW_WIDTH_2D - SCROLLBAR_BACKGROUND_WIDTH_2D - 2 * WINDOW_MARGIN_2D; - if (textWidth > maxTextWidth) { - // Trim and append "..." to fit window width - maxTextWidth = maxTextWidth - Overlays.textSize(windowPane2D, "...").width; - while (textWidth > maxTextWidth) { - userText = userText.slice(0, -1); - textWidth = Overlays.textSize(windowPane2D, userText).width; - } - userText += "..."; + for (i = 0; i < numUsersToDisplay; i += 1) { + user = usersOnline[linesOfUsers[i]]; + userText = user.text; + print(userText); + textWidth = user.textWidth; + + if (textWidth > maxTextWidth) { + // Trim and append "..." to fit window width + maxTextWidth = maxTextWidth - Overlays.textSize(windowPane2D, "...").width; + while (textWidth > reducedTextWidth) { + userText = userText.slice(0, -1); textWidth = Overlays.textSize(windowPane2D, userText).width; } - - usersOnline[i].textWidth = textWidth; - linesOfUsers.push(i); - displayText += "\n" + userText; + userText += "..."; } + + displayText += "\n" + userText; } displayText = displayText.slice(1); // Remove leading "\n". - calculateWindowHeight(); - Overlays.editOverlay(windowPane2D, { y: viewportHeight - windowHeight, height: windowHeight, @@ -183,11 +181,11 @@ var usersWindow = (function () { Overlays.editOverlay(scrollbarBackground2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight, - height: linesOfUsers.length * windowLineHeight - windowLineSpacing / 2 + height: numUsersToDisplay * windowLineHeight - windowLineSpacing / 2 }); Overlays.editOverlay(scrollbarBar2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + 1, - height: linesOfUsers.length * windowLineHeight / 3 // TODO + height: numUsersToDisplay * windowLineHeight / 3 // TODO }); updateOverlayPositions(); @@ -203,7 +201,11 @@ var usersWindow = (function () { } processUsers = function () { - var response; + var response, + myUsername, + user, + userText, + i; if (usersRequest.readyState === usersRequest.DONE) { if (usersRequest.status === 200) { @@ -220,7 +222,26 @@ var usersWindow = (function () { } 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(); + } else { print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText); usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. @@ -346,6 +367,7 @@ var usersWindow = (function () { || isMirrorDisplay !== oldIsMirrorDisplay || isFullscreenMirror !== oldIsFullscreenMirror) { calculateWindowHeight(); + updateUsersDisplay(); updateOverlayPositions(); } } @@ -361,10 +383,10 @@ var usersWindow = (function () { radioButtonDiameter = RADIO_BUTTON_DISPLAY_SCALE * windowTextHeight; Overlays.deleteOverlay(textSizeOverlay); - calculateWindowHeight(); - viewportHeight = Controller.getViewportDimensions().y; + calculateWindowHeight(); + windowPane2D = Overlays.addOverlay("text", { x: 0, y: viewportHeight, // Start up off-screen From ba1a7c67610d443d7a700c586ac1c12b9acff61f Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 25 Mar 2015 18:35:51 -0700 Subject: [PATCH 04/10] Show/hide scrollbar depending on whether needed or not --- examples/users.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/examples/users.js b/examples/users.js index 2eef3e3816..2d35315ae3 100644 --- a/examples/users.js +++ b/examples/users.js @@ -65,6 +65,8 @@ var usersWindow = (function () { isMirrorDisplay = false, isFullscreenMirror = false, + isUsingScrollbars = false, + HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/", RADIO_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/radio-button.svg", RADIO_BUTTON_SVG_DIAMETER = 14, @@ -91,6 +93,7 @@ var usersWindow = (function () { // Corresponding number of users to actually display numUsersToDisplay = Math.round((windowHeight - nonUsersHeight) / windowLineHeight); + isUsingScrollbars = numUsersToDisplay < linesOfUsers.length; } function updateOverlayPositions() { @@ -143,14 +146,13 @@ var usersWindow = (function () { reducedTextWidth, i; - maxTextWidth = WINDOW_WIDTH_2D - SCROLLBAR_BACKGROUND_WIDTH_2D - 2 * WINDOW_MARGIN_2D; + maxTextWidth = WINDOW_WIDTH_2D - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH_2D : 0) - 2 * WINDOW_MARGIN_2D; ellipsisWidth = Overlays.textSize(windowPane2D, "...").width; reducedTextWidth = maxTextWidth - ellipsisWidth; for (i = 0; i < numUsersToDisplay; i += 1) { user = usersOnline[linesOfUsers[i]]; userText = user.text; - print(userText); textWidth = user.textWidth; if (textWidth > maxTextWidth) { @@ -181,11 +183,13 @@ var usersWindow = (function () { Overlays.editOverlay(scrollbarBackground2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight, - height: numUsersToDisplay * windowLineHeight - windowLineSpacing / 2 + height: numUsersToDisplay * windowLineHeight - windowLineSpacing / 2, + visible: isUsingScrollbars }); Overlays.editOverlay(scrollbarBar2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + 1, - height: numUsersToDisplay * windowLineHeight / 3 // TODO + height: numUsersToDisplay * windowLineHeight / 3, // TODO + visible: isUsingScrollbars }); updateOverlayPositions(); @@ -282,8 +286,8 @@ var usersWindow = (function () { Overlays.editOverlay(windowPane2D, { visible: isVisible }); Overlays.editOverlay(windowHeading2D, { visible: isVisible }); - Overlays.editOverlay(scrollbarBackground2D, { visible: isVisible }); - Overlays.editOverlay(scrollbarBar2D, { visible: isVisible }); + Overlays.editOverlay(scrollbarBackground2D, { visible: isVisible && isUsingScrollbars }); + Overlays.editOverlay(scrollbarBar2D, { visible: isVisible && isUsingScrollbars }); Overlays.editOverlay(visibilityHeading2D, { visible: isVisible }); for (i = 0; i < visibilityControls2D.length; i += 1) { Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { visible: isVisible }); @@ -426,7 +430,7 @@ var usersWindow = (function () { backgroundColor: SCROLLBAR_BACKGROUND_COLOR_2D, backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA_2D, text: "", - visible: isVisible + visible: isVisible && isUsingScrollbars }); scrollbarBar2D = Overlays.addOverlay("text", { @@ -437,7 +441,7 @@ var usersWindow = (function () { backgroundColor: SCROLLBAR_BAR_COLOR_2D, backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D, text: "", - visible: isVisible + visible: isVisible && isUsingScrollbars }); visibilityHeading2D = Overlays.addOverlay("text", { From 98c88aab046d0def09ba1c7c13ced34c2177f41a Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 25 Mar 2015 19:13:33 -0700 Subject: [PATCH 05/10] Handle no users able to be displayed, insufficient screen height --- examples/users.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/users.js b/examples/users.js index 2d35315ae3..ef0aa9f48d 100644 --- a/examples/users.js +++ b/examples/users.js @@ -89,11 +89,11 @@ var usersWindow = (function () { if (isMirrorDisplay && !isFullscreenMirror) { maxWindowHeight -= MIRROR_HEIGHT; } - windowHeight = Math.min(windowHeight, maxWindowHeight); + windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight); // Corresponding number of users to actually display - numUsersToDisplay = Math.round((windowHeight - nonUsersHeight) / windowLineHeight); - isUsingScrollbars = numUsersToDisplay < linesOfUsers.length; + numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0); + isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length; } function updateOverlayPositions() { From 1e1a2770653f9f8465741f374efef2fc5e361990 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 25 Mar 2015 19:25:35 -0700 Subject: [PATCH 06/10] Scrollbar bar height varies with percentage of users displayed --- examples/users.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/examples/users.js b/examples/users.js index ef0aa9f48d..46ec38112d 100644 --- a/examples/users.js +++ b/examples/users.js @@ -26,9 +26,12 @@ var usersWindow = (function () { 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, scrollbarBar2D, + scrollbarBackgroundHeight, + scrollbarBarHeight, VISIBILITY_SPACER_2D = 12, // Space between list of users and visibility controls visibilityHeading2D, VISIBILITY_RADIO_SPACE = 16, @@ -181,14 +184,16 @@ var usersWindow = (function () { text: linesOfUsers.length > 0 ? "Users online" : "No users online" }); + scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2; Overlays.editOverlay(scrollbarBackground2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight, - height: numUsersToDisplay * windowLineHeight - windowLineSpacing / 2, + height: scrollbarBackgroundHeight, visible: isUsingScrollbars }); + scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight, SCROLLBAR_BAR_MIN_HEIGHT); Overlays.editOverlay(scrollbarBar2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + 1, - height: numUsersToDisplay * windowLineHeight / 3, // TODO + height: scrollbarBarHeight, visible: isUsingScrollbars }); From 14e92eecad08504998b5dd272abd9f480c793561 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Thu, 26 Mar 2015 10:54:20 -0700 Subject: [PATCH 07/10] Click and drag scrollbar --- examples/users.js | 63 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 52 insertions(+), 11 deletions(-) diff --git a/examples/users.js b/examples/users.js index 46ec38112d..f4daaed078 100644 --- a/examples/users.js +++ b/examples/users.js @@ -69,6 +69,11 @@ var usersWindow = (function () { 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/", RADIO_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/radio-button.svg", @@ -109,11 +114,15 @@ var usersWindow = (function () { Overlays.editOverlay(windowHeading2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D }); + + scrollbarBackgroundPosition.y = viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight; Overlays.editOverlay(scrollbarBackground2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + y: scrollbarBackgroundPosition.y }); + scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 + + scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2); Overlays.editOverlay(scrollbarBar2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + 1 + y: scrollbarBarPosition.y }); Overlays.editOverlay(visibilityHeading2D, { y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D @@ -174,25 +183,22 @@ var usersWindow = (function () { displayText = displayText.slice(1); // Remove leading "\n". Overlays.editOverlay(windowPane2D, { - y: viewportHeight - windowHeight, height: windowHeight, text: displayText }); Overlays.editOverlay(windowHeading2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D, text: linesOfUsers.length > 0 ? "Users online" : "No users online" }); scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2; Overlays.editOverlay(scrollbarBackground2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight, height: scrollbarBackgroundHeight, visible: isUsingScrollbars }); - scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight, SCROLLBAR_BAR_MIN_HEIGHT); + scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight, + SCROLLBAR_BAR_MIN_HEIGHT); Overlays.editOverlay(scrollbarBar2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight + 1, height: scrollbarBarHeight, visible: isUsingScrollbars }); @@ -359,6 +365,31 @@ var usersWindow = (function () { } updateVisibilityControls(); } + + if (clickedOverlay === scrollbarBar2D) { + scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight; + isMovingScrollbar = true; + } + } + + 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); + updateOverlayPositions(); + } else { + isMovingScrollbar = false; + } + } + } + + function onMouseReleaseEvent() { + isMovingScrollbar = false; } function onScriptUpdate() { @@ -427,9 +458,13 @@ var usersWindow = (function () { visible: isVisible }); - scrollbarBackground2D = Overlays.addOverlay("text", { + scrollbarBackgroundPosition = { x: WINDOW_WIDTH_2D - 0.5 * WINDOW_MARGIN_2D - SCROLLBAR_BACKGROUND_WIDTH_2D, - y: viewportHeight, + y: viewportHeight + }; + scrollbarBackground2D = Overlays.addOverlay("text", { + x: scrollbarBackgroundPosition.x, + y: scrollbarBackgroundPosition.y, width: SCROLLBAR_BACKGROUND_WIDTH_2D, height: windowTextHeight, backgroundColor: SCROLLBAR_BACKGROUND_COLOR_2D, @@ -438,9 +473,13 @@ var usersWindow = (function () { visible: isVisible && isUsingScrollbars }); - scrollbarBar2D = Overlays.addOverlay("text", { + scrollbarBarPosition = { x: WINDOW_WIDTH_2D - 0.5 * WINDOW_MARGIN_2D - SCROLLBAR_BACKGROUND_WIDTH_2D + 1, - y: viewportHeight, + 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, @@ -529,6 +568,8 @@ var usersWindow = (function () { updateVisibilityControls(); Controller.mousePressEvent.connect(onMousePressEvent); + Controller.mouseMoveEvent.connect(onMouseMoveEvent); + Controller.mouseReleaseEvent.connect(onMouseReleaseEvent); Menu.addMenuItem({ menuName: MENU_NAME, From c7fe7aa15773dc3f405913f808693046c43cf2db Mon Sep 17 00:00:00 2001 From: David Rowe Date: Thu, 26 Mar 2015 11:21:56 -0700 Subject: [PATCH 08/10] Update users displayed per scrollbar position --- examples/users.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/examples/users.js b/examples/users.js index f4daaed078..ed1703c329 100644 --- a/examples/users.js +++ b/examples/users.js @@ -44,6 +44,7 @@ var usersWindow = (function () { usersOnline, // Raw users data linesOfUsers = [], // Array of indexes pointing into usersOnline numUsersToDisplay = 0, + firstUserToDisplay = 0, API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online", HTTP_GET_TIMEOUT = 60000, // ms = 1 minute @@ -102,6 +103,12 @@ var usersWindow = (function () { // 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() { @@ -163,7 +170,7 @@ var usersWindow = (function () { reducedTextWidth = maxTextWidth - ellipsisWidth; for (i = 0; i < numUsersToDisplay; i += 1) { - user = usersOnline[linesOfUsers[i]]; + user = usersOnline[linesOfUsers[firstUserToDisplay + i]]; userText = user.text; textWidth = user.textWidth; @@ -320,6 +327,7 @@ var usersWindow = (function () { minY, maxY, lineClicked, + userClicked, i, visibilityChanged; @@ -334,7 +342,7 @@ var usersWindow = (function () { overlayX = event.x - WINDOW_MARGIN_2D; overlayY = event.y - viewportHeight + windowHeight - WINDOW_MARGIN_2D - windowLineHeight; - numLinesBefore = Math.floor(overlayY / windowLineHeight); + numLinesBefore = Math.round(overlayY / windowLineHeight); minY = numLinesBefore * windowLineHeight; maxY = minY + windowTextHeight; @@ -343,10 +351,12 @@ var usersWindow = (function () { lineClicked = numLinesBefore; } - if (0 <= lineClicked && lineClicked < linesOfUsers.length - && 0 <= overlayX && overlayX <= usersOnline[linesOfUsers[lineClicked]].textWidth) { - //print("Go to " + usersOnline[linesOfUsers[lineClicked]].username); - location.goToUser(usersOnline[linesOfUsers[lineClicked]].username); + userClicked = firstUserToDisplay + lineClicked; + + if (0 <= userClicked && userClicked < linesOfUsers.length + && 0 <= overlayX && overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) { + //print("Go to " + usersOnline[linesOfUsers[userClicked]].username); + location.goToUser(usersOnline[linesOfUsers[userClicked]].username); } } @@ -381,7 +391,9 @@ var usersWindow = (function () { 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 { isMovingScrollbar = false; } From 876f3e8a2351c2b5bdd92f09d393f9f4f7ae6a9b Mon Sep 17 00:00:00 2001 From: David Rowe Date: Thu, 26 Mar 2015 11:50:17 -0700 Subject: [PATCH 09/10] Scroll when click above or below bar --- examples/users.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/examples/users.js b/examples/users.js index ed1703c329..59263e0607 100644 --- a/examples/users.js +++ b/examples/users.js @@ -329,7 +329,8 @@ var usersWindow = (function () { lineClicked, userClicked, i, - visibilityChanged; + visibilityChanged, + delta; if (!isVisible) { return; @@ -380,6 +381,20 @@ var usersWindow = (function () { scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight; 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) { From ef9d66514632575bc03824f8f3bc52780dc2a52b Mon Sep 17 00:00:00 2001 From: David Rowe Date: Thu, 26 Mar 2015 12:17:20 -0700 Subject: [PATCH 10/10] Highlight scrollbar when it is being moved --- examples/users.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/examples/users.js b/examples/users.js index 59263e0607..ebd59886aa 100644 --- a/examples/users.js +++ b/examples/users.js @@ -29,6 +29,7 @@ var usersWindow = (function () { 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, @@ -379,6 +380,9 @@ var usersWindow = (function () { if (clickedOverlay === scrollbarBar2D) { scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight; + Overlays.editOverlay(scrollbarBar2D, { + backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA_2D + }); isMovingScrollbar = true; } @@ -410,12 +414,18 @@ var usersWindow = (function () { 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; }