From 5a86f21506db3a16e96ccac2ed51c39ed8b75c9f Mon Sep 17 00:00:00 2001 From: David Rowe Date: Mon, 6 Apr 2015 18:39:30 -0700 Subject: [PATCH 1/7] Remove "2D" from identifiers --- examples/users.js | 354 +++++++++++++++++++++++----------------------- 1 file changed, 177 insertions(+), 177 deletions(-) diff --git a/examples/users.js b/examples/users.js index f6406efe60..f99c5cffb7 100644 --- a/examples/users.js +++ b/examples/users.js @@ -13,50 +13,50 @@ var usersWindow = (function () { var HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/", - WINDOW_WIDTH_2D = 160, - WINDOW_MARGIN_2D = 12, - WINDOW_BASE_MARGIN_2D = 6, // A little less is needed in order look correct - WINDOW_FONT_2D = { size: 12 }, - WINDOW_FOREGROUND_COLOR_2D = { red: 240, green: 240, blue: 240 }, - WINDOW_FOREGROUND_ALPHA_2D = 0.9, - WINDOW_HEADING_COLOR_2D = { red: 180, green: 180, blue: 180 }, - WINDOW_HEADING_ALPHA_2D = 0.9, - WINDOW_BACKGROUND_COLOR_2D = { red: 80, green: 80, blue: 80 }, - WINDOW_BACKGROUND_ALPHA_2D = 0.7, - windowPane2D, - windowHeading2D, + WINDOW_WIDTH = 160, + WINDOW_MARGIN = 12, + WINDOW_BASE_MARGIN = 6, // A little less is needed in order look correct + WINDOW_FONT = { size: 12 }, + WINDOW_FOREGROUND_COLOR = { red: 240, green: 240, blue: 240 }, + WINDOW_FOREGROUND_ALPHA = 0.9, + WINDOW_HEADING_COLOR = { red: 180, green: 180, blue: 180 }, + WINDOW_HEADING_ALPHA = 0.9, + WINDOW_BACKGROUND_COLOR = { red: 80, green: 80, blue: 80 }, + WINDOW_BACKGROUND_ALPHA = 0.7, + windowPane, + windowHeading, MINIMIZE_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/min-max-toggle.svg", MINIMIZE_BUTTON_SVG_WIDTH = 17.1, MINIMIZE_BUTTON_SVG_HEIGHT = 32.5, - MINIMIZE_BUTTON_WIDTH_2D = 14, - MINIMIZE_BUTTON_HEIGHT_2D = MINIMIZE_BUTTON_WIDTH_2D, - MINIMIZE_BUTTON_COLOR_2D = { red: 255, green: 255, blue: 255 }, - MINIMIZE_BUTTON_ALPHA_2D = 0.9, - minimizeButton2D, - SCROLLBAR_BACKGROUND_WIDTH_2D = 12, - SCROLLBAR_BACKGROUND_COLOR_2D = { red: 80, green: 80, blue: 80 }, - SCROLLBAR_BACKGROUND_ALPHA_2D = 0.8, - scrollbarBackground2D, + MINIMIZE_BUTTON_WIDTH = 14, + MINIMIZE_BUTTON_HEIGHT = MINIMIZE_BUTTON_WIDTH, + MINIMIZE_BUTTON_COLOR = { red: 255, green: 255, blue: 255 }, + MINIMIZE_BUTTON_ALPHA = 0.9, + minimizeButton, + SCROLLBAR_BACKGROUND_WIDTH = 12, + SCROLLBAR_BACKGROUND_COLOR = { red: 80, green: 80, blue: 80 }, + SCROLLBAR_BACKGROUND_ALPHA = 0.8, + scrollbarBackground, 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, + SCROLLBAR_BAR_COLOR = { red: 180, green: 180, blue: 180 }, + SCROLLBAR_BAR_ALPHA = 0.8, + SCROLLBAR_BAR_SELECTED_ALPHA = 0.9, + scrollbarBar, scrollbarBackgroundHeight, scrollbarBarHeight, - FRIENDS_BUTTON_SPACER_2D = 12, // Space before add/remove friends button + FRIENDS_BUTTON_SPACER = 12, // Space before add/remove friends button FRIENDS_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/add-remove-friends.svg", FRIENDS_BUTTON_SVG_WIDTH = 107, FRIENDS_BUTTON_SVG_HEIGHT = 27, - FRIENDS_BUTTON_WIDTH_2D = FRIENDS_BUTTON_SVG_WIDTH, - FRIENDS_BUTTON_HEIGHT_2D = FRIENDS_BUTTON_SVG_HEIGHT, - FRIENDS_BUTTON_COLOR_2D = { red: 255, green: 255, blue: 255 }, - FRIENDS_BUTTON_ALPHA_2D = 0.9, - friendsButton2D, - VISIBILITY_SPACER_2D = 12, // Space between before visibility controls - visibilityHeading2D, + FRIENDS_BUTTON_WIDTH = FRIENDS_BUTTON_SVG_WIDTH, + FRIENDS_BUTTON_HEIGHT = FRIENDS_BUTTON_SVG_HEIGHT, + FRIENDS_BUTTON_COLOR = { red: 255, green: 255, blue: 255 }, + FRIENDS_BUTTON_ALPHA = 0.9, + friendsButton, + VISIBILITY_SPACER = 12, // Space between before visibility controls + visibilityHeading, VISIBILITY_RADIO_SPACE = 16, - visibilityControls2D, + visibilityControls, windowHeight, windowTextHeight, windowLineSpacing, @@ -108,15 +108,15 @@ var usersWindow = (function () { maxWindowHeight; if (isMinimized) { - windowHeight = windowTextHeight + WINDOW_MARGIN_2D + WINDOW_BASE_MARGIN_2D; + windowHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN; return; } // Reserve 5 lines for window heading plus visibility heading and controls // Subtract windowLineSpacing for both end of user list and end of controls nonUsersHeight = 5 * windowLineHeight - 2 * windowLineSpacing - + FRIENDS_BUTTON_SPACER_2D + FRIENDS_BUTTON_HEIGHT_2D - + VISIBILITY_SPACER_2D + WINDOW_MARGIN_2D + WINDOW_BASE_MARGIN_2D; + + FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT + + VISIBILITY_SPACER + WINDOW_MARGIN + WINDOW_BASE_MARGIN; // Limit window to height of viewport minus VU meter and mirror if displayed windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight; // DJRTODO: - windowLineSpacing or not? @@ -141,39 +141,39 @@ var usersWindow = (function () { var i, y; - Overlays.editOverlay(windowPane2D, { + Overlays.editOverlay(windowPane, { y: viewportHeight - windowHeight }); - Overlays.editOverlay(windowHeading2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + Overlays.editOverlay(windowHeading, { + y: viewportHeight - windowHeight + WINDOW_MARGIN }); - Overlays.editOverlay(minimizeButton2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D / 2 + Overlays.editOverlay(minimizeButton, { + y: viewportHeight - windowHeight + WINDOW_MARGIN / 2 }); - scrollbarBackgroundPosition.y = viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight; - Overlays.editOverlay(scrollbarBackground2D, { + scrollbarBackgroundPosition.y = viewportHeight - windowHeight + WINDOW_MARGIN + windowTextHeight; + Overlays.editOverlay(scrollbarBackground, { y: scrollbarBackgroundPosition.y }); scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 + scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2); - Overlays.editOverlay(scrollbarBar2D, { + Overlays.editOverlay(scrollbarBar, { y: scrollbarBarPosition.y }); - Overlays.editOverlay(friendsButton2D, { - y: viewportHeight - FRIENDS_BUTTON_HEIGHT_2D - VISIBILITY_SPACER_2D - - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN_2D + Overlays.editOverlay(friendsButton, { + y: viewportHeight - FRIENDS_BUTTON_HEIGHT - VISIBILITY_SPACER + - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN }); - Overlays.editOverlay(visibilityHeading2D, { - y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN_2D + Overlays.editOverlay(visibilityHeading, { + y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN }); - for (i = 0; i < visibilityControls2D.length; i += 1) { - y = viewportHeight - (3 - i) * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN_2D; - Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { y: y }); - Overlays.editOverlay(visibilityControls2D[i].textOverlay, { y: 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 }); } } @@ -181,13 +181,13 @@ var usersWindow = (function () { var i, color; - for (i = 0; i < visibilityControls2D.length; i += 1) { - color = visibilityControls2D[i].selected ? WINDOW_FOREGROUND_COLOR_2D : WINDOW_HEADING_COLOR_2D; - Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { + 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: visibilityControls2D[i].selected ? 0 : RADIO_BUTTON_SVG_DIAMETER } + subImage: { y: visibilityControls[i].selected ? 0 : RADIO_BUTTON_SVG_DIAMETER } }); - Overlays.editOverlay(visibilityControls2D[i].textOverlay, { color: color }); + Overlays.editOverlay(visibilityControls[i].textOverlay, { color: color }); } } @@ -202,8 +202,8 @@ var usersWindow = (function () { i; if (!isMinimized) { - maxTextWidth = WINDOW_WIDTH_2D - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH_2D : 0) - 2 * WINDOW_MARGIN_2D; - ellipsisWidth = Overlays.textSize(windowPane2D, "...").width; + maxTextWidth = WINDOW_WIDTH - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH : 0) - 2 * WINDOW_MARGIN; + ellipsisWidth = Overlays.textSize(windowPane, "...").width; reducedTextWidth = maxTextWidth - ellipsisWidth; for (i = 0; i < numUsersToDisplay; i += 1) { @@ -213,10 +213,10 @@ var usersWindow = (function () { if (textWidth > maxTextWidth) { // Trim and append "..." to fit window width - maxTextWidth = maxTextWidth - Overlays.textSize(windowPane2D, "...").width; + maxTextWidth = maxTextWidth - Overlays.textSize(windowPane, "...").width; while (textWidth > reducedTextWidth) { userText = userText.slice(0, -1); - textWidth = Overlays.textSize(windowPane2D, userText).width; + textWidth = Overlays.textSize(windowPane, userText).width; } userText += "..."; } @@ -227,24 +227,24 @@ var usersWindow = (function () { displayText = displayText.slice(1); // Remove leading "\n". scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2; - Overlays.editOverlay(scrollbarBackground2D, { + Overlays.editOverlay(scrollbarBackground, { height: scrollbarBackgroundHeight, visible: isUsingScrollbars }); scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight, SCROLLBAR_BAR_MIN_HEIGHT); - Overlays.editOverlay(scrollbarBar2D, { + Overlays.editOverlay(scrollbarBar, { height: scrollbarBarHeight, visible: isUsingScrollbars }); } - Overlays.editOverlay(windowPane2D, { + Overlays.editOverlay(windowPane, { height: windowHeight, text: displayText }); - Overlays.editOverlay(windowHeading2D, { + Overlays.editOverlay(windowHeading, { text: linesOfUsers.length > 0 ? "Users online" : "No users online" }); } @@ -291,7 +291,7 @@ var usersWindow = (function () { } usersOnline[i].text = userText; - usersOnline[i].textWidth = Overlays.textSize(windowPane2D, userText).width; + usersOnline[i].textWidth = Overlays.textSize(windowPane, userText).width; linesOfUsers.push(i); } @@ -319,16 +319,16 @@ var usersWindow = (function () { function updateOverlayVisibility() { var i; - Overlays.editOverlay(windowPane2D, { visible: isVisible }); - Overlays.editOverlay(windowHeading2D, { visible: isVisible }); - Overlays.editOverlay(minimizeButton2D, { visible: isVisible }); - Overlays.editOverlay(scrollbarBackground2D, { visible: isVisible && isUsingScrollbars && !isMinimized }); - Overlays.editOverlay(scrollbarBar2D, { visible: isVisible && isUsingScrollbars && !isMinimized }); - Overlays.editOverlay(friendsButton2D, { visible: isVisible && !isMinimized }); - Overlays.editOverlay(visibilityHeading2D, { visible: isVisible && !isMinimized }); - for (i = 0; i < visibilityControls2D.length; i += 1) { - Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { visible: isVisible && !isMinimized }); - Overlays.editOverlay(visibilityControls2D[i].textOverlay, { visible: isVisible && !isMinimized }); + Overlays.editOverlay(windowPane, { visible: isVisible }); + Overlays.editOverlay(windowHeading, { visible: isVisible }); + Overlays.editOverlay(minimizeButton, { visible: isVisible }); + Overlays.editOverlay(scrollbarBackground, { visible: isVisible && isUsingScrollbars && !isMinimized }); + Overlays.editOverlay(scrollbarBar, { visible: isVisible && isUsingScrollbars && !isMinimized }); + Overlays.editOverlay(friendsButton, { visible: isVisible && !isMinimized }); + Overlays.editOverlay(visibilityHeading, { visible: 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 }); } } @@ -350,7 +350,7 @@ var usersWindow = (function () { function setMinimized(minimized) { isMinimized = minimized; - Overlays.editOverlay(minimizeButton2D, { + Overlays.editOverlay(minimizeButton, { subImage: { y: isMinimized ? MINIMIZE_BUTTON_SVG_HEIGHT / 2 : 0 } }); updateOverlayVisibility(); @@ -365,8 +365,8 @@ var usersWindow = (function () { function onFindableByChanged(event) { var i; - for (i = 0; i < visibilityControls2D.length; i += 1) { - visibilityControls2D[i].selected = event === VISIBILITY_VALUES[i]; + for (i = 0; i < visibilityControls.length; i += 1) { + visibilityControls[i].selected = event === VISIBILITY_VALUES[i]; } updateVisibilityControls(); @@ -390,10 +390,10 @@ var usersWindow = (function () { clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); - if (clickedOverlay === windowPane2D) { + if (clickedOverlay === windowPane) { - overlayX = event.x - WINDOW_MARGIN_2D; - overlayY = event.y - viewportHeight + windowHeight - WINDOW_MARGIN_2D - windowLineHeight; + overlayX = event.x - WINDOW_MARGIN; + overlayY = event.y - viewportHeight + windowHeight - WINDOW_MARGIN - windowLineHeight; numLinesBefore = Math.round(overlayY / windowLineHeight); minY = numLinesBefore * windowLineHeight; @@ -415,15 +415,15 @@ var usersWindow = (function () { return; } - for (i = 0; i < visibilityControls2D.length; i += 1) { + for (i = 0; i < visibilityControls.length; i += 1) { // Don't need to test radioOverlay if it us under textOverlay. - if (clickedOverlay === visibilityControls2D[i].textOverlay && event.x <= visibilityControls2D[i].optionWidth) { + if (clickedOverlay === visibilityControls[i].textOverlay && event.x <= visibilityControls[i].optionWidth) { GlobalServices.findableBy = VISIBILITY_VALUES[i]; return; } } - if (clickedOverlay === minimizeButton2D) { + if (clickedOverlay === minimizeButton) { setMinimized(!isMinimized); calculateWindowHeight(); updateOverlayPositions(); @@ -431,16 +431,16 @@ var usersWindow = (function () { return; } - if (clickedOverlay === scrollbarBar2D) { + if (clickedOverlay === scrollbarBar) { scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight; - Overlays.editOverlay(scrollbarBar2D, { - backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA_2D + Overlays.editOverlay(scrollbarBar, { + backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA }); isMovingScrollbar = true; return; } - if (clickedOverlay === scrollbarBackground2D) { + if (clickedOverlay === scrollbarBackground) { delta = scrollbarBarHeight / (scrollbarBackgroundHeight - scrollbarBarHeight); if (event.y < scrollbarBarPosition.y) { @@ -455,17 +455,17 @@ var usersWindow = (function () { return; } - if (clickedOverlay === friendsButton2D) { + if (clickedOverlay === friendsButton) { GlobalServices.editFriends(); } } 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) { + if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x + && event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN + && scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y + && event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) { scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) / (scrollbarBackgroundHeight - scrollbarBarHeight - 2); scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0); @@ -473,8 +473,8 @@ var usersWindow = (function () { updateOverlayPositions(); updateUsersDisplay(); } else { - Overlays.editOverlay(scrollbarBar2D, { - backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D + Overlays.editOverlay(scrollbarBar, { + backgroundAlpha: SCROLLBAR_BAR_ALPHA }); isMovingScrollbar = false; } @@ -482,8 +482,8 @@ var usersWindow = (function () { } function onMouseReleaseEvent() { - Overlays.editOverlay(scrollbarBar2D, { - backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D + Overlays.editOverlay(scrollbarBar, { + backgroundAlpha: SCROLLBAR_BAR_ALPHA }); isMovingScrollbar = false; } @@ -512,7 +512,7 @@ var usersWindow = (function () { var textSizeOverlay, optionText; - textSizeOverlay = Overlays.addOverlay("text", { font: WINDOW_FONT_2D, visible: false }); + textSizeOverlay = Overlays.addOverlay("text", { font: WINDOW_FONT, visible: false }); windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height); windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight); windowLineHeight = windowTextHeight + windowLineSpacing; @@ -523,102 +523,102 @@ var usersWindow = (function () { calculateWindowHeight(); - windowPane2D = Overlays.addOverlay("text", { + windowPane = Overlays.addOverlay("text", { x: 0, y: viewportHeight, // Start up off-screen - width: WINDOW_WIDTH_2D, + width: WINDOW_WIDTH, height: windowHeight, - topMargin: WINDOW_MARGIN_2D + windowLineHeight, - leftMargin: WINDOW_MARGIN_2D, - color: WINDOW_FOREGROUND_COLOR_2D, - alpha: WINDOW_FOREGROUND_ALPHA_2D, - backgroundColor: WINDOW_BACKGROUND_COLOR_2D, - backgroundAlpha: WINDOW_BACKGROUND_ALPHA_2D, + topMargin: WINDOW_MARGIN + windowLineHeight, + leftMargin: WINDOW_MARGIN, + color: WINDOW_FOREGROUND_COLOR, + alpha: WINDOW_FOREGROUND_ALPHA, + backgroundColor: WINDOW_BACKGROUND_COLOR, + backgroundAlpha: WINDOW_BACKGROUND_ALPHA, text: "", - font: WINDOW_FONT_2D, + font: WINDOW_FONT, visible: isVisible }); - windowHeading2D = Overlays.addOverlay("text", { - x: WINDOW_MARGIN_2D, + windowHeading = Overlays.addOverlay("text", { + x: WINDOW_MARGIN, y: viewportHeight, - width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, + width: WINDOW_WIDTH - 2 * WINDOW_MARGIN, height: windowTextHeight, topMargin: 0, leftMargin: 0, - color: WINDOW_HEADING_COLOR_2D, - alpha: WINDOW_HEADING_ALPHA_2D, + color: WINDOW_HEADING_COLOR, + alpha: WINDOW_HEADING_ALPHA, backgroundAlpha: 0.0, text: "No users online", - font: WINDOW_FONT_2D, + font: WINDOW_FONT, visible: isVisible && !isMinimized }); - minimizeButton2D = Overlays.addOverlay("image", { - x: WINDOW_WIDTH_2D - WINDOW_MARGIN_2D / 2 - MINIMIZE_BUTTON_WIDTH_2D, + minimizeButton = Overlays.addOverlay("image", { + x: WINDOW_WIDTH - WINDOW_MARGIN / 2 - MINIMIZE_BUTTON_WIDTH, y: viewportHeight, - width: MINIMIZE_BUTTON_WIDTH_2D, - height: MINIMIZE_BUTTON_HEIGHT_2D, + width: MINIMIZE_BUTTON_WIDTH, + height: MINIMIZE_BUTTON_HEIGHT, imageURL: MINIMIZE_BUTTON_SVG, subImage: { x: 0, y: 0, width: MINIMIZE_BUTTON_SVG_WIDTH, height: MINIMIZE_BUTTON_SVG_HEIGHT / 2 }, - color: MINIMIZE_BUTTON_COLOR_2D, - alpha: MINIMIZE_BUTTON_ALPHA_2D, + color: MINIMIZE_BUTTON_COLOR, + alpha: MINIMIZE_BUTTON_ALPHA, visible: isVisible && !isMinimized }); scrollbarBackgroundPosition = { - x: WINDOW_WIDTH_2D - 0.5 * WINDOW_MARGIN_2D - SCROLLBAR_BACKGROUND_WIDTH_2D, + x: WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH, y: viewportHeight }; - scrollbarBackground2D = Overlays.addOverlay("text", { + scrollbarBackground = Overlays.addOverlay("text", { x: scrollbarBackgroundPosition.x, y: scrollbarBackgroundPosition.y, - width: SCROLLBAR_BACKGROUND_WIDTH_2D, + width: SCROLLBAR_BACKGROUND_WIDTH, height: windowTextHeight, - backgroundColor: SCROLLBAR_BACKGROUND_COLOR_2D, - backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA_2D, + backgroundColor: SCROLLBAR_BACKGROUND_COLOR, + backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA, text: "", visible: isVisible && isUsingScrollbars && !isMinimized }); scrollbarBarPosition = { - x: WINDOW_WIDTH_2D - 0.5 * WINDOW_MARGIN_2D - SCROLLBAR_BACKGROUND_WIDTH_2D + 1, + x: WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH + 1, y: viewportHeight }; - scrollbarBar2D = Overlays.addOverlay("text", { + scrollbarBar = Overlays.addOverlay("text", { x: scrollbarBarPosition.x, y: scrollbarBarPosition.y, - width: SCROLLBAR_BACKGROUND_WIDTH_2D - 2, + width: SCROLLBAR_BACKGROUND_WIDTH - 2, height: windowTextHeight, - backgroundColor: SCROLLBAR_BAR_COLOR_2D, - backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D, + backgroundColor: SCROLLBAR_BAR_COLOR, + backgroundAlpha: SCROLLBAR_BAR_ALPHA, text: "", visible: isVisible && isUsingScrollbars && !isMinimized }); - friendsButton2D = Overlays.addOverlay("image", { - x: WINDOW_MARGIN_2D, + friendsButton = Overlays.addOverlay("image", { + x: WINDOW_MARGIN, y: viewportHeight, - width: FRIENDS_BUTTON_WIDTH_2D, - height: FRIENDS_BUTTON_HEIGHT_2D, + width: FRIENDS_BUTTON_WIDTH, + height: FRIENDS_BUTTON_HEIGHT, imageURL: FRIENDS_BUTTON_SVG, subImage: { x: 0, y: 0, width: FRIENDS_BUTTON_SVG_WIDTH, height: FRIENDS_BUTTON_SVG_HEIGHT }, - color: FRIENDS_BUTTON_COLOR_2D, - alpha: FRIENDS_BUTTON_ALPHA_2D + color: FRIENDS_BUTTON_COLOR, + alpha: FRIENDS_BUTTON_ALPHA }); - visibilityHeading2D = Overlays.addOverlay("text", { - x: WINDOW_MARGIN_2D, + visibilityHeading = Overlays.addOverlay("text", { + x: WINDOW_MARGIN, y: viewportHeight, - width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, + width: WINDOW_WIDTH - 2 * WINDOW_MARGIN, height: windowTextHeight, topMargin: 0, leftMargin: 0, - color: WINDOW_HEADING_COLOR_2D, - alpha: WINDOW_HEADING_ALPHA_2D, + color: WINDOW_HEADING_COLOR, + alpha: WINDOW_HEADING_ALPHA, backgroundAlpha: 0.0, text: "I am visible to:", - font: WINDOW_FONT_2D, + font: WINDOW_FONT, visible: isVisible && !isMinimized }); @@ -629,9 +629,9 @@ var usersWindow = (function () { } optionText = "everyone"; - visibilityControls2D = [{ + visibilityControls = [{ radioOverlay: Overlays.addOverlay("image", { // Create first so that it is under textOverlay. - x: WINDOW_MARGIN_2D, + x: WINDOW_MARGIN, y: viewportHeight, width: radioButtonDiameter, height: radioButtonDiameter, @@ -642,48 +642,48 @@ var usersWindow = (function () { width: RADIO_BUTTON_SVG_DIAMETER, height: RADIO_BUTTON_SVG_DIAMETER }, - color: WINDOW_HEADING_COLOR_2D, - alpha: WINDOW_FOREGROUND_ALPHA_2D, + color: WINDOW_HEADING_COLOR, + alpha: WINDOW_FOREGROUND_ALPHA, visible: isVisible && !isMinimized }), textOverlay: Overlays.addOverlay("text", { - x: WINDOW_MARGIN_2D, + x: WINDOW_MARGIN, y: viewportHeight, - width: WINDOW_WIDTH_2D - SCROLLBAR_BACKGROUND_WIDTH_2D - 2 * WINDOW_MARGIN_2D, + width: WINDOW_WIDTH - SCROLLBAR_BACKGROUND_WIDTH - 2 * WINDOW_MARGIN, height: windowTextHeight, topMargin: 0, leftMargin: VISIBILITY_RADIO_SPACE, - color: WINDOW_HEADING_COLOR_2D, - alpha: WINDOW_FOREGROUND_ALPHA_2D, + color: WINDOW_HEADING_COLOR, + alpha: WINDOW_FOREGROUND_ALPHA, backgroundAlpha: 0.0, text: optionText, - font: WINDOW_FONT_2D, + font: WINDOW_FONT, visible: isVisible && !isMinimized }), selected: myVisibility === VISIBILITY_VALUES[0] }]; - visibilityControls2D[0].optionWidth = WINDOW_MARGIN_2D + VISIBILITY_RADIO_SPACE - + Overlays.textSize(visibilityControls2D[0].textOverlay, optionText).width; + visibilityControls[0].optionWidth = WINDOW_MARGIN + VISIBILITY_RADIO_SPACE + + Overlays.textSize(visibilityControls[0].textOverlay, optionText).width; optionText = "my friends"; - visibilityControls2D[1] = { - radioOverlay: Overlays.cloneOverlay(visibilityControls2D[0].radioOverlay), - textOverlay: Overlays.cloneOverlay(visibilityControls2D[0].textOverlay), + visibilityControls[1] = { + radioOverlay: Overlays.cloneOverlay(visibilityControls[0].radioOverlay), + textOverlay: Overlays.cloneOverlay(visibilityControls[0].textOverlay), selected: myVisibility === VISIBILITY_VALUES[1] }; - Overlays.editOverlay(visibilityControls2D[1].textOverlay, { text: optionText }); - visibilityControls2D[1].optionWidth = WINDOW_MARGIN_2D + VISIBILITY_RADIO_SPACE - + Overlays.textSize(visibilityControls2D[1].textOverlay, optionText).width; + 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"; - visibilityControls2D[2] = { - radioOverlay: Overlays.cloneOverlay(visibilityControls2D[0].radioOverlay), - textOverlay: Overlays.cloneOverlay(visibilityControls2D[0].textOverlay), + visibilityControls[2] = { + radioOverlay: Overlays.cloneOverlay(visibilityControls[0].radioOverlay), + textOverlay: Overlays.cloneOverlay(visibilityControls[0].textOverlay), selected: myVisibility === VISIBILITY_VALUES[2] }; - Overlays.editOverlay(visibilityControls2D[2].textOverlay, { text: optionText }); - visibilityControls2D[2].optionWidth = WINDOW_MARGIN_2D + VISIBILITY_RADIO_SPACE - + Overlays.textSize(visibilityControls2D[2].textOverlay, optionText).width; + Overlays.editOverlay(visibilityControls[2].textOverlay, { text: optionText }); + visibilityControls[2].optionWidth = WINDOW_MARGIN + VISIBILITY_RADIO_SPACE + + Overlays.textSize(visibilityControls[2].textOverlay, optionText).width; updateVisibilityControls(); @@ -714,16 +714,16 @@ var usersWindow = (function () { Menu.removeMenuItem(MENU_NAME, MENU_ITEM); Script.clearTimeout(usersTimer); - Overlays.deleteOverlay(windowPane2D); - Overlays.deleteOverlay(windowHeading2D); - Overlays.deleteOverlay(minimizeButton2D); - Overlays.deleteOverlay(scrollbarBackground2D); - Overlays.deleteOverlay(scrollbarBar2D); - Overlays.deleteOverlay(friendsButton2D); - Overlays.deleteOverlay(visibilityHeading2D); - for (i = 0; i <= visibilityControls2D.length; i += 1) { - Overlays.deleteOverlay(visibilityControls2D[i].textOverlay); - Overlays.deleteOverlay(visibilityControls2D[i].radioOverlay); + Overlays.deleteOverlay(windowPane); + Overlays.deleteOverlay(windowHeading); + Overlays.deleteOverlay(minimizeButton); + Overlays.deleteOverlay(scrollbarBackground); + Overlays.deleteOverlay(scrollbarBar); + Overlays.deleteOverlay(friendsButton); + Overlays.deleteOverlay(visibilityHeading); + for (i = 0; i <= visibilityControls.length; i += 1) { + Overlays.deleteOverlay(visibilityControls[i].textOverlay); + Overlays.deleteOverlay(visibilityControls[i].radioOverlay); } } From 6cd512762d257bf87152a0105a7669bc275e5aff Mon Sep 17 00:00:00 2001 From: David Rowe Date: Mon, 6 Apr 2015 20:51:17 -0700 Subject: [PATCH 2/7] Add "Show me" prompt, value, and button to users online window --- examples/users.js | 123 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 96 insertions(+), 27 deletions(-) diff --git a/examples/users.js b/examples/users.js index f99c5cffb7..fd7a92b942 100644 --- a/examples/users.js +++ b/examples/users.js @@ -15,7 +15,7 @@ var usersWindow = (function () { WINDOW_WIDTH = 160, WINDOW_MARGIN = 12, - WINDOW_BASE_MARGIN = 6, // A little less is needed in order look correct + WINDOW_BASE_MARGIN = 6, // A little less is needed in order look correct WINDOW_FONT = { size: 12 }, WINDOW_FOREGROUND_COLOR = { red: 240, green: 240, blue: 240 }, WINDOW_FOREGROUND_ALPHA = 0.9, @@ -25,26 +25,26 @@ var usersWindow = (function () { WINDOW_BACKGROUND_ALPHA = 0.7, windowPane, windowHeading, - MINIMIZE_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/min-max-toggle.svg", - MINIMIZE_BUTTON_SVG_WIDTH = 17.1, - MINIMIZE_BUTTON_SVG_HEIGHT = 32.5, - MINIMIZE_BUTTON_WIDTH = 14, - MINIMIZE_BUTTON_HEIGHT = MINIMIZE_BUTTON_WIDTH, - MINIMIZE_BUTTON_COLOR = { red: 255, green: 255, blue: 255 }, - MINIMIZE_BUTTON_ALPHA = 0.9, + MIN_MAX_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/min-max-toggle.svg", + MIN_MAX_BUTTON_SVG_WIDTH = 17.1, + MIN_MAX_BUTTON_SVG_HEIGHT = 32.5, + MIN_MAX_BUTTON_WIDTH = 14, + MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH, + MIN_MAX_BUTTON_COLOR = { red: 255, green: 255, blue: 255 }, + MIN_MAX_BUTTON_ALPHA = 0.9, minimizeButton, SCROLLBAR_BACKGROUND_WIDTH = 12, - SCROLLBAR_BACKGROUND_COLOR = { red: 80, green: 80, blue: 80 }, + SCROLLBAR_BACKGROUND_COLOR = { red: 70, green: 70, blue: 70 }, SCROLLBAR_BACKGROUND_ALPHA = 0.8, scrollbarBackground, SCROLLBAR_BAR_MIN_HEIGHT = 5, - SCROLLBAR_BAR_COLOR = { red: 180, green: 180, blue: 180 }, + SCROLLBAR_BAR_COLOR = { red: 170, green: 170, blue: 170 }, SCROLLBAR_BAR_ALPHA = 0.8, SCROLLBAR_BAR_SELECTED_ALPHA = 0.9, scrollbarBar, scrollbarBackgroundHeight, scrollbarBarHeight, - FRIENDS_BUTTON_SPACER = 12, // Space before add/remove friends button + FRIENDS_BUTTON_SPACER = 12, // Space before add/remove friends button FRIENDS_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/add-remove-friends.svg", FRIENDS_BUTTON_SVG_WIDTH = 107, FRIENDS_BUTTON_SVG_HEIGHT = 27, @@ -53,7 +53,18 @@ var usersWindow = (function () { FRIENDS_BUTTON_COLOR = { red: 255, green: 255, blue: 255 }, FRIENDS_BUTTON_ALPHA = 0.9, friendsButton, - VISIBILITY_SPACER = 12, // Space between before visibility controls + + OPTION_BACKGROUND_COLOR = { red: 60, green: 60, blue: 60 }, + OPTION_BACKGROUND_ALPHA = 0.8, + OPTION_MARGIN = 4, + DISPLAY_SPACER = 12, // Space before display control + DISPLAY_PROMPT_TEXT = "Show me:", + DISPLAY_PROMPT_WIDTH = 60, + displayValues = ["everyone", "friends"], + displayControl, + isShowingDisplayOptions = false, + + VISIBILITY_SPACER = 6, // Space before visibility controls visibilityHeading, VISIBILITY_RADIO_SPACE = 16, visibilityControls, @@ -112,14 +123,14 @@ var usersWindow = (function () { return; } - // Reserve 5 lines for window heading plus visibility heading and controls + // Reserve 5 lines for window heading plus display and visibility controls // Subtract windowLineSpacing for both end of user list and end of controls - nonUsersHeight = 5 * windowLineHeight - 2 * windowLineSpacing + nonUsersHeight = 6 * windowLineHeight - 2 * windowLineSpacing + FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT - + VISIBILITY_SPACER + WINDOW_MARGIN + WINDOW_BASE_MARGIN; + + DISPLAY_SPACER + VISIBILITY_SPACER + WINDOW_MARGIN + WINDOW_BASE_MARGIN; // Limit window to height of viewport minus VU meter and mirror if displayed - windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight; // DJRTODO: - windowLineSpacing or not? + windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight; maxWindowHeight = viewportHeight - AUDIO_METER_HEIGHT; if (isMirrorDisplay && !isFullscreenMirror) { maxWindowHeight -= MIRROR_HEIGHT; @@ -127,7 +138,7 @@ var usersWindow = (function () { windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight); // Corresponding number of users to actually display - numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0); // DJRTODO: .floor or .round? + numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0); isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length; if (isUsingScrollbars) { firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay)); @@ -163,10 +174,18 @@ var usersWindow = (function () { }); Overlays.editOverlay(friendsButton, { - y: viewportHeight - FRIENDS_BUTTON_HEIGHT - VISIBILITY_SPACER - - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN + y: viewportHeight - FRIENDS_BUTTON_HEIGHT + - DISPLAY_SPACER - windowTextHeight + - VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN }); + y = viewportHeight + - windowTextHeight + - VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN; + Overlays.editOverlay(displayControl.promptOverlay, { y: y }); + Overlays.editOverlay(displayControl.valueOverlay, { y: y - OPTION_MARGIN }); + Overlays.editOverlay(displayControl.buttonOverlay, { y: y - OPTION_MARGIN + 1 }); + Overlays.editOverlay(visibilityHeading, { y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN }); @@ -325,6 +344,9 @@ var usersWindow = (function () { Overlays.editOverlay(scrollbarBackground, { visible: isVisible && isUsingScrollbars && !isMinimized }); Overlays.editOverlay(scrollbarBar, { visible: isVisible && isUsingScrollbars && !isMinimized }); Overlays.editOverlay(friendsButton, { visible: isVisible && !isMinimized }); + Overlays.editOverlay(displayControl.promptOverlay, { visible: isVisible && !isMinimized }); + Overlays.editOverlay(displayControl.valueOverlay, { visible: isVisible && !isMinimized }); + Overlays.editOverlay(displayControl.buttonOverlay, { visible: isVisible && !isMinimized }); Overlays.editOverlay(visibilityHeading, { visible: isVisible && !isMinimized }); for (i = 0; i < visibilityControls.length; i += 1) { Overlays.editOverlay(visibilityControls[i].radioOverlay, { visible: isVisible && !isMinimized }); @@ -351,7 +373,7 @@ var usersWindow = (function () { function setMinimized(minimized) { isMinimized = minimized; Overlays.editOverlay(minimizeButton, { - subImage: { y: isMinimized ? MINIMIZE_BUTTON_SVG_HEIGHT / 2 : 0 } + subImage: { y: isMinimized ? MIN_MAX_BUTTON_SVG_HEIGHT / 2 : 0 } }); updateOverlayVisibility(); } @@ -555,14 +577,14 @@ var usersWindow = (function () { }); minimizeButton = Overlays.addOverlay("image", { - x: WINDOW_WIDTH - WINDOW_MARGIN / 2 - MINIMIZE_BUTTON_WIDTH, + x: WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH, y: viewportHeight, - width: MINIMIZE_BUTTON_WIDTH, - height: MINIMIZE_BUTTON_HEIGHT, - imageURL: MINIMIZE_BUTTON_SVG, - subImage: { x: 0, y: 0, width: MINIMIZE_BUTTON_SVG_WIDTH, height: MINIMIZE_BUTTON_SVG_HEIGHT / 2 }, - color: MINIMIZE_BUTTON_COLOR, - alpha: MINIMIZE_BUTTON_ALPHA, + width: MIN_MAX_BUTTON_WIDTH, + height: MIN_MAX_BUTTON_HEIGHT, + imageURL: MIN_MAX_BUTTON_SVG, + subImage: { x: 0, y: 0, width: MIN_MAX_BUTTON_SVG_WIDTH, height: MIN_MAX_BUTTON_SVG_HEIGHT / 2 }, + color: MIN_MAX_BUTTON_COLOR, + alpha: MIN_MAX_BUTTON_ALPHA, visible: isVisible && !isMinimized }); @@ -607,6 +629,50 @@ var usersWindow = (function () { alpha: FRIENDS_BUTTON_ALPHA }); + displayControl = { + value: displayValues[0], + promptOverlay: Overlays.addOverlay("text", { + x: WINDOW_MARGIN, + y: viewportHeight, + width: DISPLAY_PROMPT_WIDTH, + height: windowTextHeight, + topMargin: 0, + leftMargin: 0, + color: WINDOW_HEADING_COLOR, + alpha: WINDOW_HEADING_ALPHA, + backgroundAlpha: 0.0, + text: DISPLAY_PROMPT_TEXT, + font: WINDOW_FONT, + visible: isVisible && !isMinimized + }), + valueOverlay: Overlays.addOverlay("text", { + x: WINDOW_MARGIN + DISPLAY_PROMPT_WIDTH, + y: viewportHeight, + width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN - DISPLAY_PROMPT_WIDTH, + height: windowTextHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders + topMargin: OPTION_MARGIN, + leftMargin: OPTION_MARGIN, + color: WINDOW_FOREGROUND_COLOR, + alpha: WINDOW_FOREGROUND_ALPHA, + backgroundColor: OPTION_BACKGROUND_COLOR, + backgroundAlpha: OPTION_BACKGROUND_ALPHA, + text: displayValues[0], + font: WINDOW_FONT, + visible: isVisible && !isMinimized + }), + buttonOverlay: Overlays.addOverlay("image", { + x: WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH - 1, + y: viewportHeight, + width: MIN_MAX_BUTTON_WIDTH, + height: MIN_MAX_BUTTON_HEIGHT, + imageURL: MIN_MAX_BUTTON_SVG, + subImage: { x: 0, y: 0, width: MIN_MAX_BUTTON_SVG_WIDTH, height: MIN_MAX_BUTTON_SVG_HEIGHT / 2 }, + color: MIN_MAX_BUTTON_COLOR, + alpha: MIN_MAX_BUTTON_ALPHA, + visible: isVisible && !isMinimized + }) + }; + visibilityHeading = Overlays.addOverlay("text", { x: WINDOW_MARGIN, y: viewportHeight, @@ -720,6 +786,9 @@ var usersWindow = (function () { Overlays.deleteOverlay(scrollbarBackground); Overlays.deleteOverlay(scrollbarBar); Overlays.deleteOverlay(friendsButton); + Overlays.deleteOverlay(displayControl.promptOverlay); + Overlays.deleteOverlay(displayControl.valueOverlay); + Overlays.deleteOverlay(displayControl.buttonOverlay); Overlays.deleteOverlay(visibilityHeading); for (i = 0; i <= visibilityControls.length; i += 1) { Overlays.deleteOverlay(visibilityControls[i].textOverlay); From 798d6437b19f99c81d8f3e71cba34c9f87a85638 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Mon, 6 Apr 2015 21:54:15 -0700 Subject: [PATCH 3/7] Add pop-up menu of "show me" values --- examples/users.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) diff --git a/examples/users.js b/examples/users.js index fd7a92b942..72189705a4 100644 --- a/examples/users.js +++ b/examples/users.js @@ -62,6 +62,9 @@ var usersWindow = (function () { DISPLAY_PROMPT_WIDTH = 60, displayValues = ["everyone", "friends"], displayControl, + DISPLAY_OPTIONS_BACKGROUND_COLOR = { red: 40, green: 40, blue: 40 }, + DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.95, + displayOptions = [], isShowingDisplayOptions = false, VISIBILITY_SPACER = 6, // Space before visibility controls @@ -148,6 +151,56 @@ var usersWindow = (function () { } } + function deleteDisplayOptions() { + var i; + + for (i = 0; i < displayOptions.length; i += 1) { + Overlays.deleteOverlay(displayOptions[i]); + } + + isShowingDisplayOptions = false; + } + + function positionDisplayOptions() { + var y, + i; + + y = viewportHeight + - windowTextHeight + - VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN + - (displayValues.length - 1) * windowLineHeight; + for (i = 0; i < displayValues.length; i += 1) { + Overlays.editOverlay(displayOptions[i], { y: y }); + y += windowLineHeight; + } + } + + function showDisplayOptions() { + var i; + + for (i = 0; i < displayValues.length; i += 1) { + displayOptions[i] = Overlays.addOverlay("text", { + x: WINDOW_MARGIN + DISPLAY_PROMPT_WIDTH, + y: viewportHeight, + width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN - DISPLAY_PROMPT_WIDTH, + height: windowTextHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders + topMargin: OPTION_MARGIN, + leftMargin: OPTION_MARGIN, + color: WINDOW_FOREGROUND_COLOR, + alpha: WINDOW_FOREGROUND_ALPHA, + backgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR, + backgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA, + text: displayValues[i], + font: WINDOW_FONT, + visible: true + }); + } + + positionDisplayOptions(); + + isShowingDisplayOptions = true; + } + function updateOverlayPositions() { var i, y; @@ -186,6 +239,10 @@ var usersWindow = (function () { Overlays.editOverlay(displayControl.valueOverlay, { y: y - OPTION_MARGIN }); Overlays.editOverlay(displayControl.buttonOverlay, { y: y - OPTION_MARGIN + 1 }); + if (isShowingDisplayOptions) { + positionDisplayOptions(); + } + Overlays.editOverlay(visibilityHeading, { y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN }); @@ -412,6 +469,23 @@ var usersWindow = (function () { clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); + if (isShowingDisplayOptions) { + userClicked = false; + for (i = 0; i < displayOptions.length; i += 1) { + if (clickedOverlay === displayOptions[i]) { + displayControl.value = displayValues[i]; + Overlays.editOverlay(displayControl.valueOverlay, { text: displayValues[i] }); + userClicked = true; + } + } + + deleteDisplayOptions(); + + if (userClicked) { + return; + } + } + if (clickedOverlay === windowPane) { overlayX = event.x - WINDOW_MARGIN; @@ -437,6 +511,11 @@ var usersWindow = (function () { return; } + if (clickedOverlay === displayControl.valueOverlay || clickedOverlay === displayControl.buttonOverlay) { + showDisplayOptions(); + 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) { @@ -789,6 +868,10 @@ var usersWindow = (function () { Overlays.deleteOverlay(displayControl.promptOverlay); Overlays.deleteOverlay(displayControl.valueOverlay); Overlays.deleteOverlay(displayControl.buttonOverlay); + print("isShowingDisplayOptions = " + isShowingDisplayOptions); + if (isShowingDisplayOptions) { + deleteDisplayOptions(); + } Overlays.deleteOverlay(visibilityHeading); for (i = 0; i <= visibilityControls.length; i += 1) { Overlays.deleteOverlay(visibilityControls[i].textOverlay); From 0cbe4d36734b964820957b9620ce540003509dfe Mon Sep 17 00:00:00 2001 From: David Rowe Date: Mon, 6 Apr 2015 22:09:03 -0700 Subject: [PATCH 4/7] Apply users filter per control value --- examples/users.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/examples/users.js b/examples/users.js index 72189705a4..d2a79120b2 100644 --- a/examples/users.js +++ b/examples/users.js @@ -60,7 +60,9 @@ var usersWindow = (function () { DISPLAY_SPACER = 12, // Space before display control DISPLAY_PROMPT_TEXT = "Show me:", DISPLAY_PROMPT_WIDTH = 60, - displayValues = ["everyone", "friends"], + DISPLAY_EVERYONE_TEXT = "everyone", + DISPLAY_FRIENDS_TEXT = "friends", + displayValues = [DISPLAY_EVERYONE_TEXT, DISPLAY_FRIENDS_TEXT], displayControl, DISPLAY_OPTIONS_BACKGROUND_COLOR = { red: 40, green: 40, blue: 40 }, DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.95, @@ -82,6 +84,7 @@ var usersWindow = (function () { firstUserToDisplay = 0, API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online", + API_FRIENDS_FILTER = "&filter=friends", HTTP_GET_TIMEOUT = 60000, // ms = 1 minute usersRequest, processUsers, @@ -326,8 +329,14 @@ var usersWindow = (function () { } function pollUsers() { + var url = API_URL; + + if (displayControl.value === DISPLAY_FRIENDS_TEXT) { + url += API_FRIENDS_FILTER; + } + usersRequest = new XMLHttpRequest(); - usersRequest.open("GET", API_URL, true); + usersRequest.open("GET", url, true); usersRequest.timeout = HTTP_GET_TIMEOUT; usersRequest.ontimeout = pollUsersTimedOut; usersRequest.onreadystatechange = processUsers; @@ -482,6 +491,11 @@ var usersWindow = (function () { deleteDisplayOptions(); if (userClicked) { + if (usersTimer !== null) { + Script.clearTimeout(usersTimer); + usersTimer = null; + } + pollUsers(); return; } } From 187ca2a403b81e31343091bab8053afddd71b60e Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 7 Apr 2015 00:38:07 -0700 Subject: [PATCH 5/7] Widgetize pop-up menu --- examples/users.js | 347 +++++++++++++++++++++++++++------------------- 1 file changed, 206 insertions(+), 141 deletions(-) diff --git a/examples/users.js b/examples/users.js index d2a79120b2..4ea4051a1f 100644 --- a/examples/users.js +++ b/examples/users.js @@ -9,6 +9,177 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // +var PopUpMenu = function (prompt, value, values, properties) { + var promptOverlay, + valueOverlay, + buttonOverlay, + optionOverlays = [], + isDisplayingOptions = false, + OPTION_MARGIN = 4, + HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/", + MIN_MAX_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/min-max-toggle.svg", + MIN_MAX_BUTTON_SVG_WIDTH = 17.1, + MIN_MAX_BUTTON_SVG_HEIGHT = 32.5, + MIN_MAX_BUTTON_WIDTH = 14, + MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH; + + function positionDisplayOptions() { + var y, + i; + + y = properties.y - (values.length - 1) * properties.lineHeight; + + for (i = 0; i < values.length; i += 1) { + Overlays.editOverlay(optionOverlays[i], { y: y }); + y += properties.lineHeight; + } + } + + function showDisplayOptions() { + var i, + yOffScreen = Controller.getViewportDimensions().y; + + for (i = 0; i < values.length; i += 1) { + optionOverlays[i] = Overlays.addOverlay("text", { + x: properties.x + properties.promptWidth, + y: yOffScreen, + width: properties.width - properties.promptWidth, + height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders + topMargin: OPTION_MARGIN, + leftMargin: OPTION_MARGIN, + color: properties.optionColor, + alpha: properties.optionAlpha, + backgroundColor: properties.popupBackgroundColor, + backgroundAlpha: properties.popupBackgroundAlpha, + text: values[i], + font: properties.font, + visible: true + }); + } + + positionDisplayOptions(); + + isDisplayingOptions = true; + } + + function deleteDisplayOptions() { + var i; + + for (i = 0; i < optionOverlays.length; i += 1) { + Overlays.deleteOverlay(optionOverlays[i]); + } + + isDisplayingOptions = false; + } + + function handleClick(overlay) { + var clicked = false, + i; + + if (overlay === valueOverlay || overlay === buttonOverlay) { + showDisplayOptions(); + return true; + } + + if (isDisplayingOptions) { + for (i = 0; i < optionOverlays.length; i += 1) { + if (overlay === optionOverlays[i]) { + value = values[i]; + Overlays.editOverlay(valueOverlay, { text: value }); + clicked = true; + } + } + + deleteDisplayOptions(); + } + + return clicked; + } + + function updatePosition(x, y) { + properties.x = x; + properties.y = y; + Overlays.editOverlay(promptOverlay, { x: x, y: y }); + Overlays.editOverlay(valueOverlay, { x: x + properties.promptWidth, y: y - OPTION_MARGIN }); + Overlays.editOverlay(buttonOverlay, + { x: x + properties.width - MIN_MAX_BUTTON_WIDTH - 1, y: y - OPTION_MARGIN + 1 }); + if (isDisplayingOptions) { + positionDisplayOptions(); + } + } + + function setVisible(visible) { + Overlays.editOverlay(promptOverlay, { visible: visible }); + Overlays.editOverlay(valueOverlay, { visible: visible }); + Overlays.editOverlay(buttonOverlay, { visible: visible }); + } + + function tearDown() { + Overlays.deleteOverlay(promptOverlay); + Overlays.deleteOverlay(valueOverlay); + Overlays.deleteOverlay(buttonOverlay); + if (isDisplayingOptions) { + deleteDisplayOptions(); + } + } + + function getValue() { + return value; + } + + promptOverlay = Overlays.addOverlay("text", { + x: properties.x, + y: properties.y, + width: properties.promptWidth, + height: properties.textHeight, + topMargin: 0, + leftMargin: 0, + color: properties.promptColor, + alpha: properties.promptAlpha, + backgroundColor: properties.promptBackgroundColor, + backgroundAlpha: properties.promptBackgroundAlpha, + text: prompt, + font: properties.font, + visible: properties.visible + }); + + valueOverlay = Overlays.addOverlay("text", { + x: properties.x + properties.promptWidth, + y: properties.y, + width: properties.width - properties.promptWidth, + height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders + topMargin: OPTION_MARGIN, + leftMargin: OPTION_MARGIN, + color: properties.optionColor, + alpha: properties.optionAlpha, + backgroundColor: properties.optionBackgroundColor, + backgroundAlpha: properties.optionBackgroundAlpha, + text: value, + font: properties.font, + visible: properties.visible + }); + + buttonOverlay = Overlays.addOverlay("image", { + x: properties.x + properties.width - MIN_MAX_BUTTON_WIDTH - 1, + y: properties.y, + width: MIN_MAX_BUTTON_WIDTH, + height: MIN_MAX_BUTTON_HEIGHT, + imageURL: MIN_MAX_BUTTON_SVG, + subImage: { x: 0, y: 0, width: MIN_MAX_BUTTON_SVG_WIDTH, height: MIN_MAX_BUTTON_SVG_HEIGHT / 2 }, + color: properties.buttonColor, + alpha: properties.buttonAlpha, + visible: properties.visible + }); + + return { + updatePosition: updatePosition, + setVisible: setVisible, + handleClick: handleClick, + tearDown: tearDown, + value: getValue + }; +}; + var usersWindow = (function () { var HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/", @@ -56,18 +227,15 @@ var usersWindow = (function () { OPTION_BACKGROUND_COLOR = { red: 60, green: 60, blue: 60 }, OPTION_BACKGROUND_ALPHA = 0.8, - OPTION_MARGIN = 4, DISPLAY_SPACER = 12, // Space before display control - DISPLAY_PROMPT_TEXT = "Show me:", + DISPLAY_PROMPT = "Show me:", DISPLAY_PROMPT_WIDTH = 60, DISPLAY_EVERYONE_TEXT = "everyone", DISPLAY_FRIENDS_TEXT = "friends", - displayValues = [DISPLAY_EVERYONE_TEXT, DISPLAY_FRIENDS_TEXT], - displayControl, + DISPLAY_VALUES = [DISPLAY_EVERYONE_TEXT, DISPLAY_FRIENDS_TEXT], DISPLAY_OPTIONS_BACKGROUND_COLOR = { red: 40, green: 40, blue: 40 }, DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.95, - displayOptions = [], - isShowingDisplayOptions = false, + displayControl, VISIBILITY_SPACER = 6, // Space before visibility controls visibilityHeading, @@ -154,56 +322,6 @@ var usersWindow = (function () { } } - function deleteDisplayOptions() { - var i; - - for (i = 0; i < displayOptions.length; i += 1) { - Overlays.deleteOverlay(displayOptions[i]); - } - - isShowingDisplayOptions = false; - } - - function positionDisplayOptions() { - var y, - i; - - y = viewportHeight - - windowTextHeight - - VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN - - (displayValues.length - 1) * windowLineHeight; - for (i = 0; i < displayValues.length; i += 1) { - Overlays.editOverlay(displayOptions[i], { y: y }); - y += windowLineHeight; - } - } - - function showDisplayOptions() { - var i; - - for (i = 0; i < displayValues.length; i += 1) { - displayOptions[i] = Overlays.addOverlay("text", { - x: WINDOW_MARGIN + DISPLAY_PROMPT_WIDTH, - y: viewportHeight, - width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN - DISPLAY_PROMPT_WIDTH, - height: windowTextHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders - topMargin: OPTION_MARGIN, - leftMargin: OPTION_MARGIN, - color: WINDOW_FOREGROUND_COLOR, - alpha: WINDOW_FOREGROUND_ALPHA, - backgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR, - backgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA, - text: displayValues[i], - font: WINDOW_FONT, - visible: true - }); - } - - positionDisplayOptions(); - - isShowingDisplayOptions = true; - } - function updateOverlayPositions() { var i, y; @@ -238,13 +356,7 @@ var usersWindow = (function () { y = viewportHeight - windowTextHeight - VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN; - Overlays.editOverlay(displayControl.promptOverlay, { y: y }); - Overlays.editOverlay(displayControl.valueOverlay, { y: y - OPTION_MARGIN }); - Overlays.editOverlay(displayControl.buttonOverlay, { y: y - OPTION_MARGIN + 1 }); - - if (isShowingDisplayOptions) { - positionDisplayOptions(); - } + displayControl.updatePosition(WINDOW_MARGIN, y); Overlays.editOverlay(visibilityHeading, { y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN @@ -331,7 +443,7 @@ var usersWindow = (function () { function pollUsers() { var url = API_URL; - if (displayControl.value === DISPLAY_FRIENDS_TEXT) { + if (displayControl.value() === DISPLAY_FRIENDS_TEXT) { url += API_FRIENDS_FILTER; } @@ -410,9 +522,7 @@ var usersWindow = (function () { Overlays.editOverlay(scrollbarBackground, { visible: isVisible && isUsingScrollbars && !isMinimized }); Overlays.editOverlay(scrollbarBar, { visible: isVisible && isUsingScrollbars && !isMinimized }); Overlays.editOverlay(friendsButton, { visible: isVisible && !isMinimized }); - Overlays.editOverlay(displayControl.promptOverlay, { visible: isVisible && !isMinimized }); - Overlays.editOverlay(displayControl.valueOverlay, { visible: isVisible && !isMinimized }); - Overlays.editOverlay(displayControl.buttonOverlay, { visible: isVisible && !isMinimized }); + displayControl.setVisible(isVisible && !isMinimized); Overlays.editOverlay(visibilityHeading, { visible: isVisible && !isMinimized }); for (i = 0; i < visibilityControls.length; i += 1) { Overlays.editOverlay(visibilityControls[i].radioOverlay, { visible: isVisible && !isMinimized }); @@ -478,26 +588,13 @@ var usersWindow = (function () { clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); - if (isShowingDisplayOptions) { - userClicked = false; - for (i = 0; i < displayOptions.length; i += 1) { - if (clickedOverlay === displayOptions[i]) { - displayControl.value = displayValues[i]; - Overlays.editOverlay(displayControl.valueOverlay, { text: displayValues[i] }); - userClicked = true; - } - } - - deleteDisplayOptions(); - - if (userClicked) { - if (usersTimer !== null) { - Script.clearTimeout(usersTimer); - usersTimer = null; - } - pollUsers(); - return; + if (displayControl.handleClick(clickedOverlay)) { + if (usersTimer !== null) { + Script.clearTimeout(usersTimer); + usersTimer = null; } + pollUsers(); + return; } if (clickedOverlay === windowPane) { @@ -525,11 +622,6 @@ var usersWindow = (function () { return; } - if (clickedOverlay === displayControl.valueOverlay || clickedOverlay === displayControl.buttonOverlay) { - showDisplayOptions(); - 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) { @@ -722,49 +814,28 @@ var usersWindow = (function () { alpha: FRIENDS_BUTTON_ALPHA }); - displayControl = { - value: displayValues[0], - promptOverlay: Overlays.addOverlay("text", { - x: WINDOW_MARGIN, - y: viewportHeight, - width: DISPLAY_PROMPT_WIDTH, - height: windowTextHeight, - topMargin: 0, - leftMargin: 0, - color: WINDOW_HEADING_COLOR, - alpha: WINDOW_HEADING_ALPHA, - backgroundAlpha: 0.0, - text: DISPLAY_PROMPT_TEXT, - font: WINDOW_FONT, - visible: isVisible && !isMinimized - }), - valueOverlay: Overlays.addOverlay("text", { - x: WINDOW_MARGIN + DISPLAY_PROMPT_WIDTH, - y: viewportHeight, - width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN - DISPLAY_PROMPT_WIDTH, - height: windowTextHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders - topMargin: OPTION_MARGIN, - leftMargin: OPTION_MARGIN, - color: WINDOW_FOREGROUND_COLOR, - alpha: WINDOW_FOREGROUND_ALPHA, - backgroundColor: OPTION_BACKGROUND_COLOR, - backgroundAlpha: OPTION_BACKGROUND_ALPHA, - text: displayValues[0], - font: WINDOW_FONT, - visible: isVisible && !isMinimized - }), - buttonOverlay: Overlays.addOverlay("image", { - x: WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH - 1, - y: viewportHeight, - width: MIN_MAX_BUTTON_WIDTH, - height: MIN_MAX_BUTTON_HEIGHT, - imageURL: MIN_MAX_BUTTON_SVG, - subImage: { x: 0, y: 0, width: MIN_MAX_BUTTON_SVG_WIDTH, height: MIN_MAX_BUTTON_SVG_HEIGHT / 2 }, - color: MIN_MAX_BUTTON_COLOR, - alpha: MIN_MAX_BUTTON_ALPHA, - visible: isVisible && !isMinimized - }) - }; + displayControl = new PopUpMenu(DISPLAY_PROMPT, DISPLAY_VALUES[0], DISPLAY_VALUES, { + x: WINDOW_MARGIN, + y: viewportHeight, + width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, + promptWidth: DISPLAY_PROMPT_WIDTH, + lineHeight: windowLineHeight, + textHeight: windowTextHeight, + 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 + }); visibilityHeading = Overlays.addOverlay("text", { x: WINDOW_MARGIN, @@ -879,13 +950,7 @@ var usersWindow = (function () { Overlays.deleteOverlay(scrollbarBackground); Overlays.deleteOverlay(scrollbarBar); Overlays.deleteOverlay(friendsButton); - Overlays.deleteOverlay(displayControl.promptOverlay); - Overlays.deleteOverlay(displayControl.valueOverlay); - Overlays.deleteOverlay(displayControl.buttonOverlay); - print("isShowingDisplayOptions = " + isShowingDisplayOptions); - if (isShowingDisplayOptions) { - deleteDisplayOptions(); - } + displayControl.tearDown(); Overlays.deleteOverlay(visibilityHeading); for (i = 0; i <= visibilityControls.length; i += 1) { Overlays.deleteOverlay(visibilityControls[i].textOverlay); From a844b73fccfbf98ac4b3245b8254ea40c0b553e1 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 7 Apr 2015 09:27:53 -0700 Subject: [PATCH 6/7] Move widget parameters into propeties --- examples/users.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/examples/users.js b/examples/users.js index 4ea4051a1f..89f1d8cef8 100644 --- a/examples/users.js +++ b/examples/users.js @@ -9,8 +9,9 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -var PopUpMenu = function (prompt, value, values, properties) { - var promptOverlay, +var PopUpMenu = function (properties) { + var value = properties.value, + promptOverlay, valueOverlay, buttonOverlay, optionOverlays = [], @@ -27,9 +28,9 @@ var PopUpMenu = function (prompt, value, values, properties) { var y, i; - y = properties.y - (values.length - 1) * properties.lineHeight; + y = properties.y - (properties.values.length - 1) * properties.lineHeight; - for (i = 0; i < values.length; i += 1) { + for (i = 0; i < properties.values.length; i += 1) { Overlays.editOverlay(optionOverlays[i], { y: y }); y += properties.lineHeight; } @@ -39,7 +40,7 @@ var PopUpMenu = function (prompt, value, values, properties) { var i, yOffScreen = Controller.getViewportDimensions().y; - for (i = 0; i < values.length; i += 1) { + for (i = 0; i < properties.values.length; i += 1) { optionOverlays[i] = Overlays.addOverlay("text", { x: properties.x + properties.promptWidth, y: yOffScreen, @@ -51,7 +52,7 @@ var PopUpMenu = function (prompt, value, values, properties) { alpha: properties.optionAlpha, backgroundColor: properties.popupBackgroundColor, backgroundAlpha: properties.popupBackgroundAlpha, - text: values[i], + text: properties.values[i], font: properties.font, visible: true }); @@ -84,7 +85,7 @@ var PopUpMenu = function (prompt, value, values, properties) { if (isDisplayingOptions) { for (i = 0; i < optionOverlays.length; i += 1) { if (overlay === optionOverlays[i]) { - value = values[i]; + value = properties.values[i]; Overlays.editOverlay(valueOverlay, { text: value }); clicked = true; } @@ -138,7 +139,7 @@ var PopUpMenu = function (prompt, value, values, properties) { alpha: properties.promptAlpha, backgroundColor: properties.promptBackgroundColor, backgroundAlpha: properties.promptBackgroundAlpha, - text: prompt, + text: properties.prompt, font: properties.font, visible: properties.visible }); @@ -814,7 +815,10 @@ var usersWindow = (function () { alpha: FRIENDS_BUTTON_ALPHA }); - displayControl = new PopUpMenu(DISPLAY_PROMPT, DISPLAY_VALUES[0], DISPLAY_VALUES, { + displayControl = new PopUpMenu({ + prompt: DISPLAY_PROMPT, + value: DISPLAY_VALUES[0], + values: DISPLAY_VALUES, x: WINDOW_MARGIN, y: viewportHeight, width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, From 7acc413c66e943b60b830add7b0f9976c95f1a76 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 7 Apr 2015 10:43:50 -0700 Subject: [PATCH 7/7] Change visibility radio buttons to pop-up menu --- examples/users.js | 255 ++++++++++++++++------------------------------ 1 file changed, 89 insertions(+), 166 deletions(-) diff --git a/examples/users.js b/examples/users.js index 89f1d8cef8..d6ebe86d4e 100644 --- a/examples/users.js +++ b/examples/users.js @@ -28,7 +28,7 @@ var PopUpMenu = function (properties) { var y, 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) { Overlays.editOverlay(optionOverlays[i], { y: y }); @@ -52,7 +52,7 @@ var PopUpMenu = function (properties) { alpha: properties.optionAlpha, backgroundColor: properties.popupBackgroundColor, backgroundAlpha: properties.popupBackgroundAlpha, - text: properties.values[i], + text: properties.displayValues[i], font: properties.font, visible: true }); @@ -86,7 +86,7 @@ var PopUpMenu = function (properties) { for (i = 0; i < optionOverlays.length; i += 1) { if (overlay === optionOverlays[i]) { value = properties.values[i]; - Overlays.editOverlay(valueOverlay, { text: value }); + Overlays.editOverlay(valueOverlay, { text: properties.displayValues[i] }); clicked = true; } } @@ -128,6 +128,16 @@ var PopUpMenu = function (properties) { 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", { x: properties.x, y: properties.y, @@ -155,7 +165,7 @@ var PopUpMenu = function (properties) { alpha: properties.optionAlpha, backgroundColor: properties.optionBackgroundColor, backgroundAlpha: properties.optionBackgroundAlpha, - text: value, + text: properties.displayValues[properties.values.indexOf(value)], font: properties.font, visible: properties.visible }); @@ -177,7 +187,8 @@ var PopUpMenu = function (properties) { setVisible: setVisible, handleClick: handleClick, tearDown: tearDown, - value: getValue + getValue: getValue, + setValue: setValue }; }; @@ -216,7 +227,7 @@ var usersWindow = (function () { scrollbarBar, scrollbarBackgroundHeight, 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_WIDTH = 107, FRIENDS_BUTTON_SVG_HEIGHT = 27, @@ -228,20 +239,28 @@ var usersWindow = (function () { OPTION_BACKGROUND_COLOR = { red: 60, green: 60, blue: 60 }, OPTION_BACKGROUND_ALPHA = 0.8, + DISPLAY_SPACER = 12, // Space before display control DISPLAY_PROMPT = "Show me:", DISPLAY_PROMPT_WIDTH = 60, - DISPLAY_EVERYONE_TEXT = "everyone", - DISPLAY_FRIENDS_TEXT = "friends", - DISPLAY_VALUES = [DISPLAY_EVERYONE_TEXT, DISPLAY_FRIENDS_TEXT], + DISPLAY_EVERYONE = "everyone", + DISPLAY_FRIENDS = "friends", + DISPLAY_VALUES = [DISPLAY_EVERYONE, DISPLAY_FRIENDS], + DISPLAY_DISPLAY_VALUES = DISPLAY_VALUES, DISPLAY_OPTIONS_BACKGROUND_COLOR = { red: 40, green: 40, blue: 40 }, DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.95, displayControl, - VISIBILITY_SPACER = 6, // Space before visibility controls - visibilityHeading, - VISIBILITY_RADIO_SPACE = 16, - visibilityControls, + VISIBILITY_SPACER = 6, // Space before visibility control + VISIBILITY_PROMPT = "Visible to:", + VISIBILITY_PROMPT_WIDTH = 60, + 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, windowTextHeight, windowLineSpacing, @@ -262,7 +281,6 @@ var usersWindow = (function () { USERS_UPDATE_TIMEOUT = 5000, // ms = 5s myVisibility, - VISIBILITY_VALUES = ["all", "friends", "none"], MENU_NAME = "Tools", MENU_ITEM = "Users Online", @@ -280,12 +298,7 @@ var usersWindow = (function () { scrollbarBackgroundPosition = {}, scrollbarBarPosition = {}, scrollbarBarClickedAt, // 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; + scrollbarValue = 0.0; // 0.0 .. 1.0 function calculateWindowHeight() { var AUDIO_METER_HEIGHT = 52, @@ -298,11 +311,11 @@ var usersWindow = (function () { return; } - // Reserve 5 lines for window heading plus display and visibility controls - // Subtract windowLineSpacing for both end of user list and end of controls - nonUsersHeight = 6 * windowLineHeight - 2 * windowLineSpacing - + FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT - + DISPLAY_SPACER + VISIBILITY_SPACER + WINDOW_MARGIN + WINDOW_BASE_MARGIN; + // Reserve space for title, friends button, and option controls + nonUsersHeight = WINDOW_MARGIN + windowLineHeight + + FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT + + DISPLAY_SPACER + windowLineHeight + + VISIBILITY_SPACER + windowLineHeight + WINDOW_BASE_MARGIN; // Limit window to height of viewport minus VU meter and mirror if displayed windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight; @@ -324,8 +337,7 @@ var usersWindow = (function () { } function updateOverlayPositions() { - var i, - y; + var y; Overlays.editOverlay(windowPane, { y: viewportHeight - windowHeight @@ -348,39 +360,16 @@ var usersWindow = (function () { y: scrollbarBarPosition.y }); - Overlays.editOverlay(friendsButton, { - y: viewportHeight - FRIENDS_BUTTON_HEIGHT - - DISPLAY_SPACER - windowTextHeight - - VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN - }); + y = viewportHeight - FRIENDS_BUTTON_HEIGHT + - DISPLAY_SPACER - windowLineHeight + - VISIBILITY_SPACER - windowLineHeight - WINDOW_BASE_MARGIN; + Overlays.editOverlay(friendsButton, { y: y }); - y = viewportHeight - - windowTextHeight - - VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN; + y += FRIENDS_BUTTON_HEIGHT + DISPLAY_SPACER; displayControl.updatePosition(WINDOW_MARGIN, y); - Overlays.editOverlay(visibilityHeading, { - y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN - }); - 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 }); - } + y += windowLineHeight + VISIBILITY_SPACER; + visibilityControl.updatePosition(WINDOW_MARGIN, y); } function updateUsersDisplay() { @@ -444,7 +433,7 @@ var usersWindow = (function () { function pollUsers() { var url = API_URL; - if (displayControl.value() === DISPLAY_FRIENDS_TEXT) { + if (displayControl.getValue() === DISPLAY_FRIENDS) { url += API_FRIENDS_FILTER; } @@ -515,8 +504,6 @@ var usersWindow = (function () { }; function updateOverlayVisibility() { - var i; - Overlays.editOverlay(windowPane, { visible: isVisible }); Overlays.editOverlay(windowHeading, { visible: isVisible }); Overlays.editOverlay(minimizeButton, { visible: isVisible }); @@ -524,11 +511,7 @@ var usersWindow = (function () { Overlays.editOverlay(scrollbarBar, { visible: isVisible && isUsingScrollbars && !isMinimized }); Overlays.editOverlay(friendsButton, { visible: isVisible && !isMinimized }); displayControl.setVisible(isVisible && !isMinimized); - Overlays.editOverlay(visibilityHeading, { visible: 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 }); - } + visibilityControl.setVisible(isVisible && !isMinimized); } function setVisible(visible) { @@ -562,13 +545,11 @@ var usersWindow = (function () { } function onFindableByChanged(event) { - var i; - - for (i = 0; i < visibilityControls.length; i += 1) { - visibilityControls[i].selected = event === VISIBILITY_VALUES[i]; + if (VISIBILITY_VALUES.indexOf(event) !== -1) { + visibilityControl.setValue(event); + } else { + print("Error: Unrecognized onFindableByChanged value: " + myVisibility); } - - updateVisibilityControls(); } function onMousePressEvent(event) { @@ -580,7 +561,6 @@ var usersWindow = (function () { maxY, lineClicked, userClicked, - i, delta; if (!isVisible) { @@ -598,6 +578,11 @@ var usersWindow = (function () { return; } + if (visibilityControl.handleClick(clickedOverlay)) { + GlobalServices.findableBy = visibilityControl.getValue(); + return; + } + if (clickedOverlay === windowPane) { overlayX = event.x - WINDOW_MARGIN; @@ -623,14 +608,6 @@ var usersWindow = (function () { 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) { setMinimized(!isMinimized); calculateWindowHeight(); @@ -717,14 +694,12 @@ var usersWindow = (function () { } function setUp() { - var textSizeOverlay, - optionText; + var textSizeOverlay; textSizeOverlay = Overlays.addOverlay("text", { font: WINDOW_FONT, visible: false }); windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height); windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight); windowLineHeight = windowTextHeight + windowLineSpacing; - radioButtonDiameter = RADIO_BUTTON_DISPLAY_SCALE * windowTextHeight; Overlays.deleteOverlay(textSizeOverlay); viewportHeight = Controller.getViewportDimensions().y; @@ -819,6 +794,7 @@ var usersWindow = (function () { prompt: DISPLAY_PROMPT, value: DISPLAY_VALUES[0], values: DISPLAY_VALUES, + displayValues: DISPLAY_DISPLAY_VALUES, x: WINDOW_MARGIN, y: viewportHeight, width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, @@ -841,85 +817,38 @@ var usersWindow = (function () { 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; - if (!/^(all|friends|none)$/.test(myVisibility)) { - print("Error: Unrecognized findableBy value"); - myVisibility = ""; + if (VISIBILITY_VALUES.indexOf(myVisibility) === -1) { + print("Error: Unrecognized findableBy value: " + myVisibility); + myVisibility = VISIBILITY_ALL; } - optionText = "everyone"; - visibilityControls = [{ - radioOverlay: Overlays.addOverlay("image", { // Create first so that it is under textOverlay. - x: WINDOW_MARGIN, - y: viewportHeight, - width: radioButtonDiameter, - height: radioButtonDiameter, - imageURL: RADIO_BUTTON_SVG, - subImage: { - 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, - 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(); + visibilityControl = new PopUpMenu({ + prompt: VISIBILITY_PROMPT, + value: myVisibility, + values: VISIBILITY_VALUES, + displayValues: VISIBILITY_DISPLAY_VALUES, + x: WINDOW_MARGIN, + y: viewportHeight, + width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, + promptWidth: VISIBILITY_PROMPT_WIDTH, + lineHeight: windowLineHeight, + textHeight: windowTextHeight, + 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 + }); Controller.mousePressEvent.connect(onMousePressEvent); Controller.mouseMoveEvent.connect(onMouseMoveEvent); @@ -943,8 +872,6 @@ var usersWindow = (function () { } function tearDown() { - var i; - Menu.removeMenuItem(MENU_NAME, MENU_ITEM); Script.clearTimeout(usersTimer); @@ -955,11 +882,7 @@ var usersWindow = (function () { Overlays.deleteOverlay(scrollbarBar); Overlays.deleteOverlay(friendsButton); displayControl.tearDown(); - Overlays.deleteOverlay(visibilityHeading); - for (i = 0; i <= visibilityControls.length; i += 1) { - Overlays.deleteOverlay(visibilityControls[i].textOverlay); - Overlays.deleteOverlay(visibilityControls[i].radioOverlay); - } + visibilityControl.tearDown(); } setUp();