mirror of
https://github.com/lubosz/overte.git
synced 2025-04-16 09:46:29 +02:00
Add locationsMenu.js
This commit is contained in:
Ryan Huffman
parent
9546fe477c
commit
cfe176c60e
1 changed files with 302 additions and 0 deletions
302
examples/locationsMenu.js
Normal file
302
examples/locationsMenu.js
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
//
|
||||
// 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
|
||||
//
|
||||
|
||||
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 = "http://highfidelity-public.s3-us-west-1.amazonaws.com/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,
|
||||
color: { 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,
|
||||
color: 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,
|
||||
color: disabledColor,
|
||||
topMargin: margin,
|
||||
leftMargin: margin,
|
||||
text: "Previous",
|
||||
visible: visible,
|
||||
});
|
||||
|
||||
this.nextButton = Overlays.addOverlay("text", {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: menuWidth / 2,
|
||||
height: menuHeight,
|
||||
color: 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.color = inactiveColor;
|
||||
} else {
|
||||
update.text = "";
|
||||
update.color = 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, { color: this.previousEnabled ? prevNextColor : disabledColor});
|
||||
Overlays.editOverlay(this.nextButton, { color: 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, { color: activeColor });
|
||||
}
|
||||
} else if (clickedOverlay == self.nextButton) {
|
||||
if (self.nextEnabled) {
|
||||
Overlays.editOverlay(clickedOverlay, { color: 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, { color: 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, { color: inactiveColor });
|
||||
self.goToPage(self.page - 1);
|
||||
}
|
||||
} else if (clickedOverlay == self.nextButton) {
|
||||
if (self.nextEnabled) {
|
||||
Overlays.editOverlay(clickedOverlay, { color: 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, { color: 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();
|
||||
Loading…
Reference in a new issue