0d14e5a379
Needs a lot of cleanup. Data has been de-duplicated, and where identical copies existed, one of them has been replaced with a symlink. Some files have been excluded, such as binaries, installers and debug dumps. Some of that may still be present.
304 lines
11 KiB
JavaScript
304 lines
11 KiB
JavaScript
//
|
|
// locationsMenu.js
|
|
// examples
|
|
//
|
|
// Created by Ryan Huffman on 5/28/14
|
|
// Copyright 2014 High Fidelity, Inc.
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
|
|
Script.include("libraries/globals.js");
|
|
|
|
var scriptUrl = "https://script.google.com/macros/s/AKfycbwIo4lmF-qUwX1Z-9eA_P-g2gse9oFhNcjVyyksGukyDDEFXgU/exec?action=listOwners&domain=alpha.highfidelity.io";
|
|
|
|
var LocationMenu = function(opts) {
|
|
var self = this;
|
|
|
|
var pageSize = opts.pageSize || 10;
|
|
var menuWidth = opts.menuWidth || 150;
|
|
var menuHeight = opts.menuItemHeight || 24;
|
|
|
|
var inactiveColor = { red: 51, green: 102, blue: 102 };
|
|
var activeColor = { red: 18, green: 66, blue: 66 };
|
|
var prevNextColor = { red: 192, green: 192, blue: 192 };
|
|
var disabledColor = { red: 64, green: 64, blue: 64};
|
|
var position = { x: 0, y: 0 };
|
|
|
|
var locationIconUrl = HIFI_PUBLIC_BUCKET + "images/tools/location.svg";
|
|
var toolHeight = 50;
|
|
var toolWidth = 50;
|
|
var visible = false;
|
|
var menuItemOffset = {
|
|
x: 55,
|
|
y: 0,
|
|
};
|
|
var menuItemPadding = 5;
|
|
var margin = 7;
|
|
var fullMenuHeight = (2 * menuItemOffset.y) + (menuHeight * (pageSize + 1));
|
|
var menuOffset = -fullMenuHeight + toolHeight;
|
|
|
|
var windowDimensions = Controller.getViewportDimensions();
|
|
|
|
this.locations = [];
|
|
this.numPages = 1;
|
|
this.page = 0;
|
|
|
|
this.menuToggleButton = Overlays.addOverlay("image", {
|
|
x: position.x,
|
|
y: position.y,
|
|
width: toolWidth, height: toolHeight,
|
|
subImage: { x: 0, y: toolHeight, width: toolWidth, height: toolHeight },
|
|
imageURL: locationIconUrl,
|
|
alpha: 0.9
|
|
});
|
|
|
|
this.background = Overlays.addOverlay("text", {
|
|
x: 0,
|
|
y: 0,
|
|
width: menuWidth + 10,
|
|
height: (menuHeight * (pageSize + 1)) + 10,
|
|
backgroundColor: { red: 0, green: 0, blue: 0},
|
|
topMargin: 4,
|
|
leftMargin: 4,
|
|
text: "",
|
|
visible: visible,
|
|
});
|
|
|
|
this.menuItems = [];
|
|
for (var i = 0; i < pageSize; i++) {
|
|
var menuItem = Overlays.addOverlay("text", {
|
|
x: 0,
|
|
y: 0,
|
|
width: menuWidth,
|
|
height: menuHeight,
|
|
backgroundColor: inactiveColor,
|
|
topMargin: margin,
|
|
leftMargin: margin,
|
|
text: (i == 0) ? "Loading..." : "",
|
|
visible: visible,
|
|
});
|
|
this.menuItems.push({ overlay: menuItem, location: null });
|
|
}
|
|
|
|
this.previousButton = Overlays.addOverlay("text", {
|
|
x: 0,
|
|
y: 0,
|
|
width: menuWidth / 2,
|
|
height: menuHeight,
|
|
backgroundColor: disabledColor,
|
|
topMargin: margin,
|
|
leftMargin: margin,
|
|
text: "Previous",
|
|
visible: visible,
|
|
});
|
|
|
|
this.nextButton = Overlays.addOverlay("text", {
|
|
x: 0,
|
|
y: 0,
|
|
width: menuWidth / 2,
|
|
height: menuHeight,
|
|
backgroundColor: disabledColor,
|
|
topMargin: margin,
|
|
leftMargin: margin,
|
|
text: "Next",
|
|
visible: visible,
|
|
});
|
|
|
|
this.reposition = function(force) {
|
|
var newWindowDimensions = Controller.getViewportDimensions();
|
|
if (force || newWindowDimensions.y != windowDimensions.y) {
|
|
windowDimensions = newWindowDimensions;
|
|
|
|
position.x = 8;
|
|
position.y = Math.floor(windowDimensions.y / 2) + 25 + 50 + 8;
|
|
|
|
Overlays.editOverlay(self.menuToggleButton, {
|
|
x: position.x,
|
|
y: position.y,
|
|
});
|
|
Overlays.editOverlay(self.background, {
|
|
x: position.x + menuItemOffset.x,
|
|
y: position.y + menuItemOffset.y - 2 * menuItemPadding + menuOffset,
|
|
});
|
|
for (var i = 0; i < pageSize; i++) {
|
|
Overlays.editOverlay(self.menuItems[i].overlay, {
|
|
x: position.x + menuItemOffset.x + menuItemPadding,
|
|
y: position.y + menuItemOffset.y - menuItemPadding + (i * menuHeight) + menuOffset,
|
|
});
|
|
}
|
|
Overlays.editOverlay(self.previousButton, {
|
|
x: position.x + menuItemOffset.x + menuItemPadding,
|
|
y: position.y + menuItemOffset.y - menuItemPadding + (pageSize * menuHeight) + menuOffset,
|
|
});
|
|
Overlays.editOverlay(self.nextButton, {
|
|
x: position.x + menuItemOffset.x + menuItemPadding + (menuWidth / 2),
|
|
y: position.y + menuItemOffset.y - menuItemPadding + (pageSize * menuHeight) + menuOffset,
|
|
});
|
|
}
|
|
}
|
|
|
|
this.updateLocations = function(locations) {
|
|
this.locations = locations;
|
|
this.numPages = Math.ceil(locations.length / pageSize);
|
|
this.goToPage(0);
|
|
}
|
|
|
|
this.setError = function() {
|
|
Overlays.editOverlay(this.menuItems[0].overlay, { text: "Error loading data" });
|
|
}
|
|
|
|
this.toggleMenu = function() {
|
|
visible = !visible;
|
|
for (var i = 0; i < this.menuItems.length; i++) {
|
|
Overlays.editOverlay(this.menuItems[i].overlay, { visible: visible});
|
|
}
|
|
Overlays.editOverlay(this.previousButton, { visible: visible});
|
|
Overlays.editOverlay(this.nextButton, { visible: visible});
|
|
Overlays.editOverlay(this.background, { visible: visible});
|
|
if (visible) {
|
|
Overlays.editOverlay(this.menuToggleButton, { subImage: { x: 0, y: 0, width: toolWidth, height: toolHeight } }),
|
|
} else {
|
|
Overlays.editOverlay(this.menuToggleButton, { subImage: { x: 0, y: toolHeight, width: toolWidth, height: toolHeight } }),
|
|
}
|
|
}
|
|
|
|
this.goToPage = function(pageNumber) {
|
|
if (pageNumber < 0 || pageNumber >= this.numPages) {
|
|
return;
|
|
}
|
|
|
|
this.page = pageNumber;
|
|
var start = pageNumber * pageSize;
|
|
for (var i = 0; i < pageSize; i++) {
|
|
var update = {};
|
|
var location = null;
|
|
if (start + i < this.locations.length) {
|
|
location = this.locations[start + i];
|
|
update.text = (start + i + 1) + ". " + location.username;
|
|
update.backgroundColor = inactiveColor;
|
|
} else {
|
|
update.text = "";
|
|
update.backgroundColor = disabledColor;
|
|
}
|
|
Overlays.editOverlay(this.menuItems[i].overlay, update);
|
|
this.menuItems[i].location = location;
|
|
}
|
|
|
|
this.previousEnabled = pageNumber > 0;
|
|
this.nextEnabled = pageNumber < (this.numPages - 1);
|
|
|
|
Overlays.editOverlay(this.previousButton, { backgroundColor: this.previousEnabled ? prevNextColor : disabledColor});
|
|
Overlays.editOverlay(this.nextButton, { backgroundColor: this.nextEnabled ? prevNextColor : disabledColor });
|
|
}
|
|
|
|
this.mousePressEvent = function(event) {
|
|
var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
|
|
|
|
if (clickedOverlay == self.menuToggleButton) {
|
|
self.toggleMenu();
|
|
} else if (clickedOverlay == self.previousButton) {
|
|
if (self.previousEnabled) {
|
|
Overlays.editOverlay(clickedOverlay, { backgroundColor: activeColor });
|
|
}
|
|
} else if (clickedOverlay == self.nextButton) {
|
|
if (self.nextEnabled) {
|
|
Overlays.editOverlay(clickedOverlay, { backgroundColor: activeColor });
|
|
}
|
|
} else {
|
|
for (var i = 0; i < self.menuItems.length; i++) {
|
|
if (clickedOverlay == self.menuItems[i].overlay) {
|
|
if (self.menuItems[i].location != null) {
|
|
Overlays.editOverlay(clickedOverlay, { backgroundColor: activeColor });
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.mouseReleaseEvent = function(event) {
|
|
var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
|
|
|
|
if (clickedOverlay == self.previousButton) {
|
|
if (self.previousEnabled) {
|
|
Overlays.editOverlay(clickedOverlay, { backgroundColor: inactiveColor });
|
|
self.goToPage(self.page - 1);
|
|
}
|
|
} else if (clickedOverlay == self.nextButton) {
|
|
if (self.nextEnabled) {
|
|
Overlays.editOverlay(clickedOverlay, { backgroundColor: inactiveColor });
|
|
self.goToPage(self.page + 1);
|
|
}
|
|
} else {
|
|
for (var i = 0; i < self.menuItems.length; i++) {
|
|
if (clickedOverlay == self.menuItems[i].overlay) {
|
|
if (self.menuItems[i].location != null) {
|
|
Overlays.editOverlay(clickedOverlay, { backgroundColor: inactiveColor });
|
|
var location = self.menuItems[i].location;
|
|
Window.location = "hifi://" + location.domain + "/"
|
|
+ location.x + "," + location.y + "," + location.z;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.cleanup = function() {
|
|
for (var i = 0; i < self.menuItems.length; i++) {
|
|
Overlays.deleteOverlay(self.menuItems[i].overlay);
|
|
}
|
|
Overlays.deleteOverlay(self.menuToggleButton);
|
|
Overlays.deleteOverlay(self.previousButton);
|
|
Overlays.deleteOverlay(self.nextButton);
|
|
Overlays.deleteOverlay(self.background);
|
|
}
|
|
|
|
Controller.mousePressEvent.connect(this.mousePressEvent);
|
|
Controller.mouseReleaseEvent.connect(this.mouseReleaseEvent);
|
|
Script.update.connect(this.reposition);
|
|
Script.scriptEnding.connect(this.cleanup);
|
|
|
|
this.reposition(true);
|
|
};
|
|
|
|
var locationMenu = new LocationMenu({ pageSize: 8 });
|
|
|
|
print("Loading strip data from " + scriptUrl);
|
|
|
|
var req = new XMLHttpRequest();
|
|
req.responseType = 'json';
|
|
|
|
req.onreadystatechange = function() {
|
|
if (req.readyState == req.DONE) {
|
|
if (req.status == 200 && req.response != null) {
|
|
for (var domain in req.response) {
|
|
var locations = req.response[domain];
|
|
var users = [];
|
|
for (var i = 0; i < locations.length; i++) {
|
|
var loc = locations[i];
|
|
var x1 = loc[1],
|
|
x2 = loc[2],
|
|
y1 = loc[3],
|
|
y2 = loc[4];
|
|
users.push({
|
|
domain: domain,
|
|
username: loc[0],
|
|
x: x1,
|
|
y: 300,
|
|
z: y1,
|
|
});
|
|
}
|
|
locationMenu.updateLocations(users);
|
|
}
|
|
} else {
|
|
print("Error loading data: " + req.status + " " + req.statusText + ", " + req.errorCode + ": " + req.responseText);
|
|
locationMenu.setError();
|
|
}
|
|
}
|
|
}
|
|
|
|
req.open("GET", scriptUrl);
|
|
req.send();
|