From 549eead9f282192bf57fa6ff440935c81b51425f Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 11 Mar 2015 12:36:57 -0700 Subject: [PATCH 1/5] Prepare to add visibility control --- examples/users.js | 81 +++++++++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 35 deletions(-) diff --git a/examples/users.js b/examples/users.js index 0274cd7321..425ec0e161 100644 --- a/examples/users.js +++ b/examples/users.js @@ -13,20 +13,21 @@ var usersWindow = (function () { var WINDOW_WIDTH_2D = 150, WINDOW_MARGIN_2D = 12, + WINDOW_FONT_2D = { size: 14 }, 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, - windowHeight = 0, - usersPane2D, - usersHeading2D, - USERS_FONT_2D = { size: 14 }, - usersLineHeight, - usersLineSpacing, + windowPane2D, + windowHeading2D, + windowHeight, + windowTextHeight, + windowLineSpacing, + windowLineHeight, // = windowTextHeight + windowLineSpacing - usersOnline, // Raw data + usersOnline, // Raw users data linesOfUsers, // Array of indexes pointing into usersOnline API_URL = "https://metaverse.highfidelity.io/api/v1/users?status=online", @@ -59,14 +60,15 @@ var usersWindow = (function () { } clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); - if (clickedOverlay === usersPane2D) { + + if (clickedOverlay === windowPane2D) { overlayX = event.x - WINDOW_MARGIN_2D; - overlayY = event.y - viewportHeight + windowHeight - WINDOW_MARGIN_2D - (usersLineHeight + usersLineSpacing); + overlayY = event.y - viewportHeight + windowHeight - WINDOW_MARGIN_2D - windowLineHeight; - numLinesBefore = Math.floor(overlayY / (usersLineHeight + usersLineSpacing)); - minY = numLinesBefore * (usersLineHeight + usersLineSpacing); - maxY = minY + usersLineHeight; + numLinesBefore = Math.floor(overlayY / windowLineHeight); + minY = numLinesBefore * windowLineHeight; + maxY = minY + windowTextHeight; lineClicked = -1; if (minY <= overlayY && overlayY <= maxY) { @@ -75,8 +77,8 @@ var usersWindow = (function () { if (0 <= lineClicked && lineClicked < linesOfUsers.length && overlayX <= usersOnline[linesOfUsers[lineClicked]].usernameWidth) { - //print("Go to " + usersOnline[linesOfUsers[lineClicked]].username); - location.goToUser(usersOnline[linesOfUsers[lineClicked]].username); + print("Go to " + usersOnline[linesOfUsers[lineClicked]].username); + //location.goToUser(usersOnline[linesOfUsers[lineClicked]].username); } } } @@ -92,22 +94,23 @@ var usersWindow = (function () { for (i = 0; i < usersOnline.length; i += 1) { user = usersOnline[i]; if (user.username !== myUsername && user.online) { - usersOnline[i].usernameWidth = Overlays.textSize(usersPane2D, user.username).width; + usersOnline[i].usernameWidth = Overlays.textSize(windowPane2D, user.username).width; linesOfUsers.push(i); displayText += "\n" + user.username; } } - windowHeight = (linesOfUsers.length > 0 ? linesOfUsers.length + 1 : 1) * (usersLineHeight + usersLineSpacing) - - usersLineSpacing + 2 * WINDOW_MARGIN_2D; // First or only line is for heading + displayText = displayText.slice(1); // Remove leading "\n". + windowHeight = (linesOfUsers.length > 0 ? linesOfUsers.length + 1 : 1) * windowLineHeight + - windowLineSpacing + 2 * WINDOW_MARGIN_2D; // First or only line is for heading - Overlays.editOverlay(usersPane2D, { + Overlays.editOverlay(windowPane2D, { y: viewportHeight - windowHeight, height: windowHeight, text: displayText }); - Overlays.editOverlay(usersHeading2D, { + Overlays.editOverlay(windowHeading2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D, text: linesOfUsers.length > 0 ? "Online" : "No users online" }); @@ -168,8 +171,8 @@ var usersWindow = (function () { usersTimer = null; } - Overlays.editOverlay(usersPane2D, { visible: isVisible }); - Overlays.editOverlay(usersHeading2D, { visible: isVisible }); + Overlays.editOverlay(windowPane2D, { visible: isVisible }); + Overlays.editOverlay(windowHeading2D, { visible: isVisible }); } function onMenuItemEvent(event) { @@ -180,47 +183,55 @@ var usersWindow = (function () { function update() { viewportHeight = Controller.getViewportDimensions().y; - Overlays.editOverlay(usersPane2D, { + Overlays.editOverlay(windowPane2D, { y: viewportHeight - windowHeight }); - Overlays.editOverlay(usersHeading2D, { + Overlays.editOverlay(windowHeading2D, { y: viewportHeight - windowHeight + WINDOW_MARGIN_2D }); } function setUp() { - usersPane2D = Overlays.addOverlay("text", { - bounds: { x: 0, y: 0, width: WINDOW_WIDTH_2D, height: 0 }, - topMargin: WINDOW_MARGIN_2D, + var textSizeOverlay; + + textSizeOverlay = Overlays.addOverlay("text", { font: WINDOW_FONT_2D, visible: false }); + windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height); + windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight); + windowLineHeight = windowTextHeight + windowLineSpacing; + Overlays.deleteOverlay(textSizeOverlay); + + windowHeight = windowTextHeight + 2 * WINDOW_MARGIN_2D; + + windowPane2D = Overlays.addOverlay("text", { + bounds: { x: 0, y: 0, width: WINDOW_WIDTH_2D, 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, text: "", - font: USERS_FONT_2D, + font: WINDOW_FONT_2D, visible: isVisible }); - usersHeading2D = Overlays.addOverlay("text", { + windowHeading2D = Overlays.addOverlay("text", { x: WINDOW_MARGIN_2D, + y: 0, width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, - height: USERS_FONT_2D.size, + height: windowTextHeight, topMargin: 0, leftMargin: 0, color: WINDOW_HEADING_COLOR_2D, alpha: WINDOW_HEADING_ALPHA_2D, backgroundAlpha: 0.0, text: "No users online", - font: USERS_FONT_2D, + font: WINDOW_FONT_2D, visible: isVisible }); viewportHeight = Controller.getViewportDimensions().y; - usersLineHeight = Math.floor(Overlays.textSize(usersPane2D, "1").height); - usersLineSpacing = Math.floor(Overlays.textSize(usersPane2D, "1\n2").height - 2 * usersLineHeight); - Controller.mousePressEvent.connect(onMousePressEvent); Menu.addMenuItem({ @@ -241,8 +252,8 @@ var usersWindow = (function () { Menu.removeMenuItem(MENU_NAME, MENU_ITEM); Script.clearTimeout(usersTimer); - Overlays.deleteOverlay(usersHeading2D); - Overlays.deleteOverlay(usersPane2D); + Overlays.deleteOverlay(windowHeading2D); + Overlays.deleteOverlay(windowPane2D); } setUp(); From a109a18bc3fbdfd1bd34046b2c942c128202c365 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 11 Mar 2015 19:28:29 -0700 Subject: [PATCH 2/5] Add visibility control --- examples/users.js | 373 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 257 insertions(+), 116 deletions(-) diff --git a/examples/users.js b/examples/users.js index 425ec0e161..7fb61253fe 100644 --- a/examples/users.js +++ b/examples/users.js @@ -22,21 +22,30 @@ var usersWindow = (function () { WINDOW_BACKGROUND_ALPHA_2D = 0.7, windowPane2D, windowHeading2D, + VISIBILITY_SPACER_2D = 12, // Space between list of users and visibility controls + visibilityHeading2D, + VISIBILITY_RADIO_SPACE = 20, + visibilityControls2D, windowHeight, windowTextHeight, windowLineSpacing, - windowLineHeight, // = windowTextHeight + windowLineSpacing + windowLineHeight, // = windowTextHeight + windowLineSpacing - usersOnline, // Raw users data - linesOfUsers, // Array of indexes pointing into usersOnline + usersOnline, // Raw users data + linesOfUsers = [], // Array of indexes pointing into usersOnline API_URL = "https://metaverse.highfidelity.io/api/v1/users?status=online", - HTTP_GET_TIMEOUT = 60000, // ms = 1 minute + HTTP_GET_TIMEOUT = 60000, // ms = 1 minute usersRequest, processUsers, - usersTimedOut, + pollUsersTimedOut, usersTimer = null, - UPDATE_TIMEOUT = 5000, // ms = 5s + USERS_UPDATE_TIMEOUT = 5000, // ms = 5s + + myVisibility, + VISIBILITY_VALUES = ["all", "friends", "none"], + visibilityInterval, + VISIBILITY_POLL_INTERVAL = 5000, // ms = 5s MENU_NAME = "Tools", MENU_ITEM = "Users Online", @@ -46,6 +55,157 @@ var usersWindow = (function () { viewportHeight; + function calculateWindowHeight() { + // 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; + } + + function updateOverlayPositions() { + var i; + + Overlays.editOverlay(windowPane2D, { + y: viewportHeight - windowHeight + }); + Overlays.editOverlay(windowHeading2D, { + y: viewportHeight - windowHeight + WINDOW_MARGIN_2D + }); + Overlays.editOverlay(visibilityHeading2D, { + y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D + }); + for (i = 0; i < visibilityControls2D.length; i += 1) { + Overlays.editOverlay(visibilityControls2D[i].overlay, { + y: viewportHeight - (3 - i) * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D + }); + } + } + + function updateVisibilityControls() { + var i; + + for (i = 0; i < visibilityControls2D.length; i += 1) { + Overlays.editOverlay(visibilityControls2D[i].overlay, { + color: visibilityControls2D[i].selected ? WINDOW_FOREGROUND_COLOR_2D : WINDOW_HEADING_COLOR_2D + }); + } + } + + function updateUsersDisplay() { + var displayText = "", + myUsername, + user, + i; + + myUsername = GlobalServices.username; + linesOfUsers = []; + for (i = 0; i < usersOnline.length; i += 1) { + user = usersOnline[i]; + if (user.username !== myUsername && user.online) { + usersOnline[i].usernameWidth = Overlays.textSize(windowPane2D, user.username).width; + linesOfUsers.push(i); + displayText += "\n" + user.username; + } + } + + displayText = displayText.slice(1); // Remove leading "\n". + + calculateWindowHeight(); + + 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" + }); + + updateOverlayPositions(); + } + + function pollUsers() { + usersRequest = new XMLHttpRequest(); + usersRequest.open("GET", API_URL, true); + usersRequest.timeout = HTTP_GET_TIMEOUT; + usersRequest.ontimeout = pollUsersTimedOut; + usersRequest.onreadystatechange = processUsers; + usersRequest.send(); + } + + processUsers = function () { + var response; + + if (usersRequest.readyState === usersRequest.DONE) { + if (usersRequest.status === 200) { + response = JSON.parse(usersRequest.responseText); + if (response.status !== "success") { + print("Error: Request for users status returned status = " + response.status); + usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. + return; + } + if (!response.hasOwnProperty("data") || !response.data.hasOwnProperty("users")) { + print("Error: Request for users status returned invalid data"); + usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. + return; + } + + usersOnline = response.data.users; + 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. + return; + } + + usersTimer = Script.setTimeout(pollUsers, USERS_UPDATE_TIMEOUT); // Update after finished processing. + } + }; + + pollUsersTimedOut = function () { + print("Error: Request for users status timed out"); + usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. + }; + + function pollVisibility() { + var currentVisibility = myVisibility; + + myVisibility = GlobalServices.findableBy; + if (myVisibility !== currentVisibility) { + updateVisibilityControls(); + } + } + + function setVisible(visible) { + var i; + + isVisible = visible; + + if (isVisible) { + if (usersTimer === null) { + pollUsers(); + } + } else { + Script.clearTimeout(usersTimer); + usersTimer = null; + } + + Overlays.editOverlay(windowPane2D, { visible: isVisible }); + Overlays.editOverlay(windowHeading2D, { visible: isVisible }); + Overlays.editOverlay(visibilityHeading2D, { visible: isVisible }); + for (i = 0; i < visibilityControls2D.length; i += 1) { + Overlays.editOverlay(visibilityControls2D[i].overlay, { visible: isVisible }); + } + } + + function onMenuItemEvent(event) { + if (event === MENU_ITEM) { + setVisible(Menu.isOptionChecked(MENU_ITEM)); + } + } + function onMousePressEvent(event) { var clickedOverlay, numLinesBefore, @@ -53,7 +213,9 @@ var usersWindow = (function () { overlayY, minY, maxY, - lineClicked; + lineClicked, + i, + visibilityChanged; if (!isVisible) { return; @@ -77,118 +239,33 @@ var usersWindow = (function () { if (0 <= lineClicked && lineClicked < linesOfUsers.length && overlayX <= usersOnline[linesOfUsers[lineClicked]].usernameWidth) { - print("Go to " + usersOnline[linesOfUsers[lineClicked]].username); - //location.goToUser(usersOnline[linesOfUsers[lineClicked]].username); - } - } - } - - function updateWindow() { - var displayText = "", - myUsername, - user, - i; - - myUsername = GlobalServices.username; - linesOfUsers = []; - for (i = 0; i < usersOnline.length; i += 1) { - user = usersOnline[i]; - if (user.username !== myUsername && user.online) { - usersOnline[i].usernameWidth = Overlays.textSize(windowPane2D, user.username).width; - linesOfUsers.push(i); - displayText += "\n" + user.username; + //print("Go to " + usersOnline[linesOfUsers[lineClicked]].username); + location.goToUser(usersOnline[linesOfUsers[lineClicked]].username); } } - displayText = displayText.slice(1); // Remove leading "\n". - windowHeight = (linesOfUsers.length > 0 ? linesOfUsers.length + 1 : 1) * windowLineHeight - - windowLineSpacing + 2 * WINDOW_MARGIN_2D; // First or only line is for heading - - Overlays.editOverlay(windowPane2D, { - y: viewportHeight - windowHeight, - height: windowHeight, - text: displayText - }); - - Overlays.editOverlay(windowHeading2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D, - text: linesOfUsers.length > 0 ? "Online" : "No users online" - }); - } - - function requestUsers() { - usersRequest = new XMLHttpRequest(); - usersRequest.open("GET", API_URL, true); - usersRequest.timeout = HTTP_GET_TIMEOUT; - usersRequest.ontimeout = usersTimedOut; - usersRequest.onreadystatechange = processUsers; - usersRequest.send(); - } - - processUsers = function () { - var response; - - if (usersRequest.readyState === usersRequest.DONE) { - if (usersRequest.status === 200) { - response = JSON.parse(usersRequest.responseText); - if (response.status !== "success") { - print("Error: Request for users status returned status = " + response.status); - usersTimer = Script.setTimeout(requestUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. - return; - } - if (!response.hasOwnProperty("data") || !response.data.hasOwnProperty("users")) { - print("Error: Request for users status returned invalid data"); - usersTimer = Script.setTimeout(requestUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. - return; - } - - usersOnline = response.data.users; - updateWindow(); - } else { - print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText); - usersTimer = Script.setTimeout(requestUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. - return; + visibilityChanged = false; + for (i = 0; i < visibilityControls2D.length; i += 1) { + if (clickedOverlay === visibilityControls2D[i].overlay) { + GlobalServices.findableBy = VISIBILITY_VALUES[i]; + visibilityChanged = true; } - - usersTimer = Script.setTimeout(requestUsers, UPDATE_TIMEOUT); // Update after finished processing. } - }; - - usersTimedOut = function () { - print("Error: Request for users status timed out"); - usersTimer = Script.setTimeout(requestUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. - }; - - function setVisible(visible) { - isVisible = visible; - - if (isVisible) { - if (usersTimer === null) { - requestUsers(); + if (visibilityChanged) { + for (i = 0; i < visibilityControls2D.length; i += 1) { + visibilityControls2D[i].selected = clickedOverlay === visibilityControls2D[i].overlay; } - } else { - Script.clearTimeout(usersTimer); - usersTimer = null; - } - - Overlays.editOverlay(windowPane2D, { visible: isVisible }); - Overlays.editOverlay(windowHeading2D, { visible: isVisible }); - } - - function onMenuItemEvent(event) { - if (event === MENU_ITEM) { - setVisible(Menu.isOptionChecked(MENU_ITEM)); + updateVisibilityControls(); } } - function update() { + function onScriptUpdate() { + var oldViewportHeight = viewportHeight; + viewportHeight = Controller.getViewportDimensions().y; - Overlays.editOverlay(windowPane2D, { - y: viewportHeight - windowHeight - }); - Overlays.editOverlay(windowHeading2D, { - y: viewportHeight - windowHeight + WINDOW_MARGIN_2D - }); + if (viewportHeight !== oldViewportHeight) { + updateOverlayPositions(); + } } function setUp() { @@ -200,10 +277,15 @@ var usersWindow = (function () { windowLineHeight = windowTextHeight + windowLineSpacing; Overlays.deleteOverlay(textSizeOverlay); - windowHeight = windowTextHeight + 2 * WINDOW_MARGIN_2D; + calculateWindowHeight(); + + viewportHeight = Controller.getViewportDimensions().y; windowPane2D = Overlays.addOverlay("text", { - bounds: { x: 0, y: 0, width: WINDOW_WIDTH_2D, height: windowHeight }, + x: 0, + y: viewportHeight, // Start up off-screen + width: WINDOW_WIDTH_2D, + height: windowHeight, topMargin: WINDOW_MARGIN_2D + windowLineHeight, leftMargin: WINDOW_MARGIN_2D, color: WINDOW_FOREGROUND_COLOR_2D, @@ -217,7 +299,7 @@ var usersWindow = (function () { windowHeading2D = Overlays.addOverlay("text", { x: WINDOW_MARGIN_2D, - y: 0, + y: viewportHeight, width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, height: windowTextHeight, topMargin: 0, @@ -230,7 +312,56 @@ var usersWindow = (function () { visible: isVisible }); - viewportHeight = Controller.getViewportDimensions().y; + visibilityHeading2D = Overlays.addOverlay("text", { + x: WINDOW_MARGIN_2D, + y: viewportHeight, + width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, + height: windowTextHeight, + topMargin: 0, + leftMargin: 0, + color: WINDOW_HEADING_COLOR_2D, + alpha: WINDOW_HEADING_ALPHA_2D, + backgroundAlpha: 0.0, + text: "I am visible to:", + font: WINDOW_FONT_2D, + visible: isVisible + }); + + myVisibility = GlobalServices.findableBy; + if (!/^(all|friends|none)$/.test(myVisibility)) { + print("Error: Unrecognized findableBy value"); + myVisibility = ""; + } + + visibilityControls2D = [ { + overlay: Overlays.addOverlay("text", { + x: WINDOW_MARGIN_2D + VISIBILITY_RADIO_SPACE, + y: viewportHeight, + width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, + height: windowTextHeight, + topMargin: 0, + leftMargin: 0, + color: WINDOW_HEADING_COLOR_2D, + alpha: WINDOW_FOREGROUND_ALPHA_2D, + backgroundAlpha: 0.0, + text: "everyone", + font: WINDOW_FONT_2D, + visible: isVisible + }), + selected: myVisibility === VISIBILITY_VALUES[0] + } ]; + visibilityControls2D[1] = { + overlay: Overlays.cloneOverlay(visibilityControls2D[0].overlay), + selected: myVisibility === VISIBILITY_VALUES[1] + }; + Overlays.editOverlay(visibilityControls2D[1].overlay, { text: "my friends" }); + visibilityControls2D[2] = { + overlay: Overlays.cloneOverlay(visibilityControls2D[0].overlay), + selected: myVisibility === VISIBILITY_VALUES[2] + }; + Overlays.editOverlay(visibilityControls2D[2].overlay, { text: "no one" }); + + updateVisibilityControls(); Controller.mousePressEvent.connect(onMousePressEvent); @@ -243,17 +374,27 @@ var usersWindow = (function () { }); Menu.menuItemEvent.connect(onMenuItemEvent); - Script.update.connect(update); + Script.update.connect(onScriptUpdate); + + visibilityInterval = Script.setInterval(pollVisibility, VISIBILITY_POLL_INTERVAL); + + pollUsers(); - requestUsers(); } function tearDown() { + var i; + Menu.removeMenuItem(MENU_NAME, MENU_ITEM); + Script.clearInterval(visibilityInterval); Script.clearTimeout(usersTimer); - Overlays.deleteOverlay(windowHeading2D); Overlays.deleteOverlay(windowPane2D); + Overlays.deleteOverlay(windowHeading2D); + Overlays.deleteOverlay(visibilityHeading2D); + for (i = 0; i <= visibilityControls2D.length; i += 1) { + Overlays.deleteOverlay(visibilityControls2D[i].overlay); + } } setUp(); From eb22b0085b40da82ca5d873b44b5ad8a80d4d70b Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 11 Mar 2015 20:05:35 -0700 Subject: [PATCH 3/5] Add radio buttons --- examples/users.js | 75 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 21 deletions(-) diff --git a/examples/users.js b/examples/users.js index 7fb61253fe..82fbb7be25 100644 --- a/examples/users.js +++ b/examples/users.js @@ -24,7 +24,7 @@ var usersWindow = (function () { windowHeading2D, VISIBILITY_SPACER_2D = 12, // Space between list of users and visibility controls visibilityHeading2D, - VISIBILITY_RADIO_SPACE = 20, + VISIBILITY_RADIO_SPACE = 16, visibilityControls2D, windowHeight, windowTextHeight, @@ -53,7 +53,13 @@ var usersWindow = (function () { isVisible = true, - viewportHeight; + viewportHeight, + + HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/", + RADIO_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/radio-button.svg", + RADIO_BUTTON_SVG_DIAMETER = 14, + RADIO_BUTTON_DISPLAY_SCALE = 0.7, // 1.0 = windowTextHeight + radioButtonDiameter; function calculateWindowHeight() { // Reserve 5 lines for window heading plus visibility heading and controls @@ -63,7 +69,8 @@ var usersWindow = (function () { } function updateOverlayPositions() { - var i; + var i, + y; Overlays.editOverlay(windowPane2D, { y: viewportHeight - windowHeight @@ -75,19 +82,23 @@ var usersWindow = (function () { y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D }); for (i = 0; i < visibilityControls2D.length; i += 1) { - Overlays.editOverlay(visibilityControls2D[i].overlay, { - y: viewportHeight - (3 - i) * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D - }); + y = viewportHeight - (3 - i) * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D; + Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { y: y }); + Overlays.editOverlay(visibilityControls2D[i].textOverlay, { y: y }); } } function updateVisibilityControls() { - var i; + var i, + color; for (i = 0; i < visibilityControls2D.length; i += 1) { - Overlays.editOverlay(visibilityControls2D[i].overlay, { - color: visibilityControls2D[i].selected ? WINDOW_FOREGROUND_COLOR_2D : WINDOW_HEADING_COLOR_2D + color = visibilityControls2D[i].selected ? WINDOW_FOREGROUND_COLOR_2D : WINDOW_HEADING_COLOR_2D; + Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { + color: color, + subImage: { y: visibilityControls2D[i].selected ? 0 : RADIO_BUTTON_SVG_DIAMETER } }); + Overlays.editOverlay(visibilityControls2D[i].textOverlay, { color: color }); } } @@ -196,7 +207,8 @@ var usersWindow = (function () { Overlays.editOverlay(windowHeading2D, { visible: isVisible }); Overlays.editOverlay(visibilityHeading2D, { visible: isVisible }); for (i = 0; i < visibilityControls2D.length; i += 1) { - Overlays.editOverlay(visibilityControls2D[i].overlay, { visible: isVisible }); + Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { visible: isVisible }); + Overlays.editOverlay(visibilityControls2D[i].textOverlay, { visible: isVisible }); } } @@ -246,14 +258,16 @@ var usersWindow = (function () { visibilityChanged = false; for (i = 0; i < visibilityControls2D.length; i += 1) { - if (clickedOverlay === visibilityControls2D[i].overlay) { + // Don't need to test radioOverlay if it us under textOverlay. + if (clickedOverlay === visibilityControls2D[i].textOverlay) { GlobalServices.findableBy = VISIBILITY_VALUES[i]; visibilityChanged = true; } } if (visibilityChanged) { for (i = 0; i < visibilityControls2D.length; i += 1) { - visibilityControls2D[i].selected = clickedOverlay === visibilityControls2D[i].overlay; + // Don't need to handle radioOverlay if it us under textOverlay. + visibilityControls2D[i].selected = clickedOverlay === visibilityControls2D[i].textOverlay; } updateVisibilityControls(); } @@ -275,6 +289,7 @@ var usersWindow = (function () { 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); calculateWindowHeight(); @@ -333,14 +348,29 @@ var usersWindow = (function () { myVisibility = ""; } - visibilityControls2D = [ { - overlay: Overlays.addOverlay("text", { - x: WINDOW_MARGIN_2D + VISIBILITY_RADIO_SPACE, + visibilityControls2D = [{ + radioOverlay: Overlays.addOverlay("image", { // Create first so that it is under textOverlay. + x: WINDOW_MARGIN_2D, + 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_2D, + alpha: WINDOW_FOREGROUND_ALPHA_2D + }), + textOverlay: Overlays.addOverlay("text", { + x: WINDOW_MARGIN_2D, y: viewportHeight, width: WINDOW_WIDTH_2D - 2 * WINDOW_MARGIN_2D, height: windowTextHeight, topMargin: 0, - leftMargin: 0, + leftMargin: VISIBILITY_RADIO_SPACE, color: WINDOW_HEADING_COLOR_2D, alpha: WINDOW_FOREGROUND_ALPHA_2D, backgroundAlpha: 0.0, @@ -351,15 +381,17 @@ var usersWindow = (function () { selected: myVisibility === VISIBILITY_VALUES[0] } ]; visibilityControls2D[1] = { - overlay: Overlays.cloneOverlay(visibilityControls2D[0].overlay), + radioOverlay: Overlays.cloneOverlay(visibilityControls2D[0].radioOverlay), + textOverlay: Overlays.cloneOverlay(visibilityControls2D[0].textOverlay), selected: myVisibility === VISIBILITY_VALUES[1] }; - Overlays.editOverlay(visibilityControls2D[1].overlay, { text: "my friends" }); + Overlays.editOverlay(visibilityControls2D[1].textOverlay, { text: "my friends" }); visibilityControls2D[2] = { - overlay: Overlays.cloneOverlay(visibilityControls2D[0].overlay), + radioOverlay: Overlays.cloneOverlay(visibilityControls2D[0].radioOverlay), + textOverlay: Overlays.cloneOverlay(visibilityControls2D[0].textOverlay), selected: myVisibility === VISIBILITY_VALUES[2] }; - Overlays.editOverlay(visibilityControls2D[2].overlay, { text: "no one" }); + Overlays.editOverlay(visibilityControls2D[2].textOverlay, { text: "no one" }); updateVisibilityControls(); @@ -393,7 +425,8 @@ var usersWindow = (function () { Overlays.deleteOverlay(windowHeading2D); Overlays.deleteOverlay(visibilityHeading2D); for (i = 0; i <= visibilityControls2D.length; i += 1) { - Overlays.deleteOverlay(visibilityControls2D[i].overlay); + Overlays.deleteOverlay(visibilityControls2D[i].textOverlay); + Overlays.deleteOverlay(visibilityControls2D[i].radioOverlay); } } From 2e1679461530c5f30c20725a69fd40a314975c97 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 11 Mar 2015 21:18:53 -0700 Subject: [PATCH 4/5] Change font size to 12 --- examples/users.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/users.js b/examples/users.js index 82fbb7be25..df901329a2 100644 --- a/examples/users.js +++ b/examples/users.js @@ -13,7 +13,7 @@ var usersWindow = (function () { var WINDOW_WIDTH_2D = 150, WINDOW_MARGIN_2D = 12, - WINDOW_FONT_2D = { size: 14 }, + 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 }, From dfd9506223e0a1bdacca54bae4347d6ce0d662b0 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 11 Mar 2015 21:20:47 -0700 Subject: [PATCH 5/5] Add user location after username Credit @nbq --- examples/users.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/users.js b/examples/users.js index df901329a2..d9da6c89ae 100644 --- a/examples/users.js +++ b/examples/users.js @@ -116,6 +116,9 @@ var usersWindow = (function () { usersOnline[i].usernameWidth = Overlays.textSize(windowPane2D, user.username).width; linesOfUsers.push(i); displayText += "\n" + user.username; + if (user.location.root) { + displayText += " @ " + user.location.root.name; + } } }