602 lines
No EOL
20 KiB
JavaScript
602 lines
No EOL
20 KiB
JavaScript
//
|
|
// chat_stuff.js
|
|
//
|
|
// Created by William Brown
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
|
|
(function(){
|
|
|
|
|
|
|
|
//paste of toolbars.js because Thoys. :)
|
|
// Thoys wins. :D
|
|
|
|
|
|
|
|
|
|
Overlay2D = function(properties, overlay) { // overlay is an optional variable
|
|
if (!(typeof(properties) === 'undefined')) {
|
|
if(typeof(overlay) === 'undefined') {
|
|
overlay = Overlays.addOverlay("image", properties);
|
|
} else {
|
|
Overlays.editOverlay(overlay, properties);
|
|
}
|
|
}
|
|
|
|
this.overlay = function() {
|
|
return overlay;
|
|
}
|
|
this.x = function() {
|
|
return properties.x;
|
|
}
|
|
this.y = function() {
|
|
return properties.y;
|
|
}
|
|
this.width = function() {
|
|
return properties.width;
|
|
}
|
|
this.height = function() {
|
|
return properties.height;
|
|
}
|
|
this.alpha = function() {
|
|
return properties.alpha;
|
|
}
|
|
this.visible = function() {
|
|
return properties.visible;
|
|
}
|
|
|
|
|
|
this.move = function(x, y) {
|
|
properties.x = x;
|
|
properties.y = y;
|
|
Overlays.editOverlay(overlay, { x: x, y: y });
|
|
}
|
|
this.resize = function(width, height) {
|
|
properties.width = width;
|
|
properties.height = height;
|
|
Overlays.editOverlay(overlay, { width: width, height: height });
|
|
}
|
|
this.setAlpha = function(alpha) {
|
|
properties.alpha = alpha;
|
|
Overlays.editOverlay(overlay, { alpha: alpha });
|
|
}
|
|
this.show = function(doShow) {
|
|
properties.visible = doShow;
|
|
Overlays.editOverlay(overlay, { visible: doShow });
|
|
}
|
|
|
|
this.clicked = function(clickedOverlay) {
|
|
return overlay === clickedOverlay;
|
|
}
|
|
|
|
this.cleanup = function() {
|
|
Overlays.deleteOverlay(overlay);
|
|
}
|
|
}
|
|
|
|
|
|
Tool = function(properties, selectable, selected) { // selectable and selected are optional variables.
|
|
Overlay2D.call(this, properties);
|
|
|
|
if(typeof(selectable)==='undefined') {
|
|
selectable = false;
|
|
if(typeof(selected)==='undefined') {
|
|
selected = false;
|
|
|
|
}
|
|
}
|
|
|
|
this.selectable = function() {
|
|
return selectable;
|
|
}
|
|
|
|
this.selected = function() {
|
|
return selected;
|
|
}
|
|
this.select = function(doSelect) {
|
|
if (!selectable) {
|
|
return;
|
|
}
|
|
|
|
selected = doSelect;
|
|
properties.subImage.y = (selected ? 0 : 1) * properties.subImage.height;
|
|
Overlays.editOverlay(this.overlay(), { subImage: properties.subImage });
|
|
}
|
|
this.toggle = function() {
|
|
if (!selectable) {
|
|
return;
|
|
}
|
|
selected = !selected;
|
|
properties.subImage.y = (selected ? 0 : 1) * properties.subImage.height;
|
|
Overlays.editOverlay(this.overlay(), { subImage: properties.subImage });
|
|
|
|
return selected;
|
|
}
|
|
|
|
this.select(selected);
|
|
|
|
this.isButtonDown = false;
|
|
this.buttonDown = function (down) {
|
|
if (down !== this.isButtonDown) {
|
|
properties.subImage.y = (down ? 0 : 1) * properties.subImage.height;
|
|
Overlays.editOverlay(this.overlay(), { subImage: properties.subImage });
|
|
this.isButtonDown = down;
|
|
}
|
|
}
|
|
|
|
this.baseClicked = this.clicked;
|
|
this.clicked = function(clickedOverlay, update) {
|
|
if (this.baseClicked(clickedOverlay)) {
|
|
if (update) {
|
|
if (selectable) {
|
|
this.toggle();
|
|
} else if (properties.showButtonDown) {
|
|
this.buttonDown(true);
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
Tool.prototype = new Overlay2D;
|
|
Tool.IMAGE_HEIGHT = 50;
|
|
Tool.IMAGE_WIDTH = 50;
|
|
|
|
ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPositionFunction) {
|
|
this.tools = new Array();
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = 0;
|
|
this.height = 0
|
|
this.backAlpha = 1.0;
|
|
this.back = Overlays.addOverlay("rectangle", {
|
|
color: { red: 255, green: 255, blue: 255 },
|
|
x: this.x,
|
|
y: this.y,
|
|
radius: 4,
|
|
width: this.width,
|
|
height: this.height,
|
|
alpha: this.backAlpha,
|
|
visible: false
|
|
});
|
|
this.spacing = [];
|
|
|
|
this.addTool = function(properties, selectable, selected) {
|
|
if (direction == ToolBar.HORIZONTAL) {
|
|
properties.x = this.x + this.width;
|
|
properties.y = this.y;
|
|
this.width += properties.width + ToolBar.SPACING;
|
|
this.height = Math.max(properties.height, this.height);
|
|
} else {
|
|
properties.x = this.x;
|
|
properties.y = this.y + this.height;
|
|
this.width = Math.max(properties.width, this.width);
|
|
this.height += properties.height + ToolBar.SPACING;
|
|
}
|
|
|
|
if (this.back != null) {
|
|
Overlays.editOverlay(this.back, {
|
|
width: this.width +
|
|
((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING,
|
|
height: this.height +
|
|
((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING,
|
|
});
|
|
}
|
|
|
|
this.tools.push(new Tool(properties, selectable, selected));
|
|
return ((this.tools.length) - 1);
|
|
}
|
|
|
|
this.addSpacing = function(size) {
|
|
if (direction == ToolBar.HORIZONTAL) {
|
|
this.width += size;
|
|
} else {
|
|
this.height += size;
|
|
}
|
|
this.spacing[this.tools.length] = size;
|
|
|
|
return (this.tools.length);
|
|
}
|
|
|
|
this.changeSpacing = function(size, id) {
|
|
if (this.spacing[id] === null) {
|
|
this.spacing[id] = 0;
|
|
}
|
|
var diff = size - this.spacing[id];
|
|
this.spacing[id] = size;
|
|
|
|
var dx = (direction == ToolBar.HORIZONTAL) ? diff : 0;
|
|
var dy = (direction == ToolBar.VERTICAL) ? diff : 0;
|
|
this.width += dx;
|
|
this.height += dy;
|
|
|
|
for(i = id; i < this.tools.length; i++) {
|
|
this.tools[i].move(this.tools[i].x() + dx,
|
|
this.tools[i].y() + dy);
|
|
}
|
|
if (this.back != null) {
|
|
Overlays.editOverlay(this.back, {
|
|
width: this.width +
|
|
((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING,
|
|
height: this.height +
|
|
((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING,
|
|
});
|
|
}
|
|
}
|
|
|
|
this.removeLastTool = function() {
|
|
this.tools.pop().cleanup();
|
|
|
|
if (direction == ToolBar.HORIZONTAL) {
|
|
this.width -= Tool.IMAGE_WIDTH + ToolBar.SPACING;
|
|
} else {
|
|
this.height -= Tool.IMAGE_HEIGHT + ToolBar.SPACING;
|
|
}
|
|
if (this.back != null) {
|
|
Overlays.editOverlay(this.back, {
|
|
width: this.width + 2 * ToolBar.SPACING,
|
|
height: this.height + 2 * ToolBar.SPACING
|
|
});
|
|
}
|
|
}
|
|
|
|
this.move = function(x, y) {
|
|
var dx = x - this.x;
|
|
var dy = y - this.y;
|
|
this.x = x;
|
|
this.y = y;
|
|
for(var tool in this.tools) {
|
|
this.tools[tool].move(this.tools[tool].x() + dx, this.tools[tool].y() + dy);
|
|
}
|
|
if (this.back != null) {
|
|
Overlays.editOverlay(this.back, {
|
|
x: x - ToolBar.SPACING,
|
|
y: y - ToolBar.SPACING
|
|
});
|
|
}
|
|
this.save();
|
|
}
|
|
|
|
this.setAlpha = function(alpha, tool) {
|
|
if(typeof(tool) === 'undefined') {
|
|
for(var tool in this.tools) {
|
|
this.tools[tool].setAlpha(alpha);
|
|
}
|
|
if (this.back != null) {
|
|
this.backAlpha = alpha;
|
|
Overlays.editOverlay(this.back, { alpha: alpha });
|
|
}
|
|
} else {
|
|
this.tools[tool].setAlpha(alpha);
|
|
}
|
|
}
|
|
|
|
this.setBack = function(color, alpha) {
|
|
if (color == null) {
|
|
Overlays.editOverlay(this.back, { visible: false });
|
|
} else {
|
|
Overlays.editOverlay(this.back, {
|
|
width: this.width +
|
|
((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING,
|
|
height: this.height +
|
|
((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING,
|
|
visible: true,
|
|
color: color,
|
|
alpha: alpha
|
|
});
|
|
}
|
|
}
|
|
|
|
this.showTool = function(tool, doShow) {
|
|
this.tools[tool].show(doShow);
|
|
}
|
|
|
|
this.show = function(doShow) {
|
|
for(var tool in this.tools) {
|
|
this.tools[tool].show(doShow);
|
|
}
|
|
if (this.back != null) {
|
|
Overlays.editOverlay(this.back, { visible: doShow});
|
|
}
|
|
}
|
|
|
|
this.clicked = function(clickedOverlay, update) {
|
|
if(typeof(update) === 'undefined') {
|
|
update = true;
|
|
}
|
|
|
|
for(var tool in this.tools) {
|
|
if (this.tools[tool].visible() && this.tools[tool].clicked(clickedOverlay, update)) {
|
|
return parseInt(tool);
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
this.numberOfTools = function() {
|
|
return this.tools.length;
|
|
}
|
|
|
|
this.selectTool = function (tool, select) {
|
|
this.tools[tool].select(select);
|
|
}
|
|
|
|
this.toolSelected = function (tool) {
|
|
return this.tools[tool].selected();
|
|
}
|
|
|
|
this.cleanup = function() {
|
|
for(var tool in this.tools) {
|
|
this.tools[tool].cleanup();
|
|
}
|
|
|
|
if (this.back != null) {
|
|
Overlays.deleteOverlay(this.back);
|
|
this.back = null;
|
|
}
|
|
|
|
this.tools = [];
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = 0;
|
|
this.height = 0;
|
|
}
|
|
|
|
var that = this;
|
|
this.contains = function (xOrPoint, optionalY) { // All four margins are draggable.
|
|
var x = (optionalY === undefined) ? xOrPoint.x : xOrPoint,
|
|
y = (optionalY === undefined) ? xOrPoint.y : optionalY;
|
|
return ((that.x - ToolBar.SPACING) <= x) && (x <= (that.x + that.width + ToolBar.SPACING)) &&
|
|
((that.y - ToolBar.SPACING) <= y) && (y <= (that.y + that.height));
|
|
}
|
|
that.hover = function (enable) { // Can be overridden or extended by clients.
|
|
that.isHovering = enable;
|
|
if (that.back) {
|
|
Overlays.editOverlay(this.back, {
|
|
visible: enable,
|
|
alpha: enable ? 0.5 : that.backAlpha
|
|
});
|
|
}
|
|
};
|
|
that.windowDimensions = Controller.getViewportDimensions();
|
|
// Maybe fixme: Keeping the same percent of the window size isn't always the right thing.
|
|
// For example, maybe we want "keep the same percentage to whatever two edges are closest to the edge of screen".
|
|
// If we change that, the places to do so are onResizeViewport, save (maybe), and the initial move based on Settings, below.
|
|
that.onResizeViewport = function (newSize) { // Can be overridden or extended by clients.
|
|
var fractionX = that.x / that.windowDimensions.x;
|
|
var fractionY = that.y / that.windowDimensions.y;
|
|
that.windowDimensions = newSize || Controller.getViewportDimensions();
|
|
that.move(fractionX * that.windowDimensions.x, fractionY * that.windowDimensions.y);
|
|
};
|
|
if (optionalPersistenceKey) {
|
|
this.fractionKey = optionalPersistenceKey + '.fraction';
|
|
this.save = function () {
|
|
var screenSize = Controller.getViewportDimensions();
|
|
if (screenSize.x > 0 && screenSize.y > 0) {
|
|
// Guard against invalid screen size that can occur at shut-down.
|
|
var fraction = {x: that.x / screenSize.x, y: that.y / screenSize.y};
|
|
Settings.setValue(this.fractionKey, JSON.stringify(fraction));
|
|
}
|
|
}
|
|
} else {
|
|
this.save = function () { }; // Called on move. Can be overriden or extended by clients.
|
|
}
|
|
// These are currently only doing that which is necessary for toolbar hover and toolbar drag.
|
|
// They have not yet been extended to tool hover/click/release, etc.
|
|
this.mousePressEvent = function (event) {
|
|
if (Overlays.getOverlayAtPoint({ x: event.x, y: event.y }) == that.back) {
|
|
that.mightBeDragging = true;
|
|
that.dragOffsetX = that.x - event.x;
|
|
that.dragOffsetY = that.y - event.y;
|
|
} else {
|
|
that.mightBeDragging = false;
|
|
}
|
|
};
|
|
this.mouseReleaseEvent = function (event) {
|
|
for (var tool in that.tools) {
|
|
that.tools[tool].buttonDown(false);
|
|
}
|
|
}
|
|
this.mouseMove = function (event) {
|
|
if (!that.mightBeDragging || !event.isLeftButton) {
|
|
that.mightBeDragging = false;
|
|
if (!that.contains(event)) {
|
|
if (that.isHovering) {
|
|
that.hover(false);
|
|
}
|
|
return;
|
|
}
|
|
if (!that.isHovering) {
|
|
that.hover(true);
|
|
}
|
|
return;
|
|
}
|
|
that.move(that.dragOffsetX + event.x, that.dragOffsetY + event.y);
|
|
};
|
|
that.checkResize = function () { // Can be overriden or extended, but usually not. See onResizeViewport.
|
|
var currentWindowSize = Controller.getViewportDimensions();
|
|
if ((currentWindowSize.x !== that.windowDimensions.x) || (currentWindowSize.y !== that.windowDimensions.y)) {
|
|
that.onResizeViewport(currentWindowSize);
|
|
}
|
|
};
|
|
Controller.mousePressEvent.connect(this.mousePressEvent);
|
|
Controller.mouseReleaseEvent.connect(this.mouseReleaseEvent);
|
|
Controller.mouseMoveEvent.connect(this.mouseMove);
|
|
Script.update.connect(that.checkResize);
|
|
// This compatability hack breaks the model, but makes converting existing scripts easier:
|
|
this.addOverlay = function (ignored, oldSchoolProperties) {
|
|
var properties = JSON.parse(JSON.stringify(oldSchoolProperties)); // a copy
|
|
if ((that.numberOfTools() === 0) && (properties.x != undefined) && (properties.y != undefined)) {
|
|
that.move(properties.x, properties.y);
|
|
}
|
|
delete properties.x;
|
|
delete properties.y;
|
|
var index = that.addTool(properties);
|
|
var id = that.tools[index].overlay();
|
|
return id;
|
|
}
|
|
if (this.fractionKey || optionalInitialPositionFunction) {
|
|
var savedFraction = JSON.parse(Settings.getValue(this.fractionKey) || '0'); // getValue can answer empty string
|
|
var screenSize = Controller.getViewportDimensions();
|
|
if (savedFraction) {
|
|
// If we have saved data, keep the toolbar at the same proportion of the screen width/height.
|
|
that.move(savedFraction.x * screenSize.x, savedFraction.y * screenSize.y);
|
|
} else if (!optionalInitialPositionFunction) {
|
|
print("No initPosition(screenSize, intializedToolbar) specified for ToolBar");
|
|
} else {
|
|
// Call the optionalInitialPositionFunctinon() AFTER the client has had a chance to set up.
|
|
var that = this;
|
|
Script.setTimeout(function () {
|
|
var position = optionalInitialPositionFunction(screenSize, that);
|
|
that.move(position.x, position.y);
|
|
}, 0);
|
|
}
|
|
}
|
|
}
|
|
ToolBar.SPACING = 6;
|
|
ToolBar.VERTICAL = 0;
|
|
ToolBar.HORIZONTAL = 1;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var IMAGE_URL = "http://hifi-content.s3.amazonaws.com/caitlyn/production/alphaDsChat/newChatIcon.png";//http://metaversecafes.com/images/ico/apple-touch-icon-72.png";
|
|
var center_QML_URL = "http://hifi-content.s3.amazonaws.com/caitlyn/production/alphaDsChat/AQUI_chat_v133.qml";//http://metaversecafes.com/HighFidelity/QueenCity/AQUI_chat_v133.qml";
|
|
|
|
var loc_chat_subscribed = false;
|
|
|
|
var aquiWindowCenter = new OverlayWindow({
|
|
title: 'AWESOME LOCAL CHAT',
|
|
source: center_QML_URL,
|
|
width: 900,
|
|
height: 544,
|
|
visible: false
|
|
});
|
|
|
|
if (!loc_chat_subscribed) {
|
|
loc_chat_subscribed = true;
|
|
Messages.subscribe('local_chat_channel');
|
|
Messages.messageReceived.connect(handleIM);
|
|
|
|
// Handling an incoming message from the QML window
|
|
aquiWindowCenter.fromQml.connect(function(message){
|
|
// print("Got message from QML in script");
|
|
// print(message);
|
|
//sending via message-mixer
|
|
if (loc_chat_subscribed) {
|
|
Messages.sendMessage('local_chat_channel',message);
|
|
}
|
|
});
|
|
}
|
|
var toolHeight = 50;
|
|
var toolWidth = 50;
|
|
|
|
|
|
function toggleAQUI() {
|
|
if (aquiWindowCenter.visible) {
|
|
aquiWindowCenter.setVisible(false);
|
|
} else {
|
|
|
|
//START of CENTER WINDOW
|
|
aquiWindowCenter.setVisible(true);
|
|
aquiWindowCenter.setPosition(650, 600);
|
|
//end of CENTER WINDOW
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function handleIM(channel, message, sender) {
|
|
// print('GOT MESSAGE')
|
|
if (channel === 'local_chat_channel') {
|
|
// Sending a message to the QML window
|
|
var loc_makeUUID = Uuid.fromString(sender);
|
|
var loc_displayName = AvatarManager.getAvatar(loc_makeUUID).displayName;
|
|
if(loc_displayName==""){
|
|
loc_displayName += "(No Display Name) ";
|
|
loc_displayName += sender.substring(0,6)+"}";
|
|
|
|
}
|
|
aquiWindowCenter.sendToQml([channel, message, loc_displayName]);
|
|
}
|
|
}
|
|
|
|
var toolBar = (function() {
|
|
var that = {}, toolBar, iconAQUIButton;
|
|
function initialize() {
|
|
ToolBar.SPACING = 16;
|
|
toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.aqui.toolbar", function(windowDimensions, toolbar) {
|
|
return {
|
|
x: 900,
|
|
y: 135
|
|
};
|
|
});
|
|
iconAQUIButton = toolBar.addTool({
|
|
imageURL: IMAGE_URL,
|
|
width: toolWidth,
|
|
height: toolHeight,
|
|
alpha: 0.9,
|
|
visible: true,
|
|
});
|
|
|
|
toolBar.showTool(iconAQUIButton, true);
|
|
|
|
}
|
|
|
|
var iconAQUIButtonDown = false;
|
|
that.mousePressEvent = function(event) {
|
|
var clickedOverlay,
|
|
url,
|
|
file;
|
|
|
|
if (!event.isLeftButton) {
|
|
// if another mouse button than left is pressed ignore it
|
|
return false;
|
|
}
|
|
|
|
clickedOverlay = Overlays.getOverlayAtPoint({
|
|
x: event.x,
|
|
y: event.y
|
|
});
|
|
|
|
|
|
|
|
if (iconAQUIButton === toolBar.clicked(clickedOverlay)) {
|
|
toggleAQUI();
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
that.mouseReleaseEvent = function(event) {
|
|
var handled = false;
|
|
if (iconAQUIButtonDown) {
|
|
var clickedOverlay = Overlays.getOverlayAtPoint({
|
|
x: event.x,
|
|
y: event.y
|
|
});
|
|
}
|
|
iconAQUIButtonDown = false;
|
|
return handled;
|
|
}
|
|
|
|
that.cleanup = function() {
|
|
toolBar.cleanup();
|
|
};
|
|
|
|
initialize();
|
|
return that;
|
|
}());
|
|
|
|
Controller.mousePressEvent.connect(toolBar.mousePressEvent)
|
|
Script.scriptEnding.connect(toolBar.cleanup);
|
|
|
|
|
|
}); |