mirror of
https://github.com/overte-org/overte.git
synced 2025-04-25 20:16:16 +02:00
287 lines
10 KiB
JavaScript
287 lines
10 KiB
JavaScript
//
|
|
// overlaysExample.js
|
|
// hifi
|
|
//
|
|
// Created by Brad Hefta-Gaub on 2/14/14.
|
|
// Copyright (c) 2014 HighFidelity, Inc. All rights reserved.
|
|
//
|
|
// This is an example script that demonstrates use of the Overlays class
|
|
//
|
|
//
|
|
|
|
|
|
// The "Swatches" example of this script will create 9 different image overlays, that use the color feature to
|
|
// display different colors as color swatches. The overlays can be clicked on, to change the "selectedSwatch" variable
|
|
// and update the image used for the overlay so that it appears to have a selected indicator.
|
|
// These are our colors...
|
|
var swatchColors = new Array();
|
|
swatchColors[0] = { red: 255, green: 0, blue: 0};
|
|
swatchColors[1] = { red: 0, green: 255, blue: 0};
|
|
swatchColors[2] = { red: 0, green: 0, blue: 255};
|
|
swatchColors[3] = { red: 255, green: 255, blue: 0};
|
|
swatchColors[4] = { red: 255, green: 0, blue: 255};
|
|
swatchColors[5] = { red: 0, green: 255, blue: 255};
|
|
swatchColors[6] = { red: 128, green: 128, blue: 128};
|
|
swatchColors[7] = { red: 128, green: 0, blue: 0};
|
|
swatchColors[8] = { red: 0, green: 240, blue: 240};
|
|
|
|
// The location of the placement of these overlays
|
|
var swatchesX = 100;
|
|
var swatchesY = 200;
|
|
|
|
// These will be our "overlay IDs"
|
|
var swatches = new Array();
|
|
var numberOfSwatches = 9;
|
|
var selectedSwatch = 0;
|
|
|
|
// create the overlays, position them in a row, set their colors, and for the selected one, use a different source image
|
|
// location so that it displays the "selected" marker
|
|
for (s = 0; s < numberOfSwatches; s++) {
|
|
var imageFromX = 12 + (s * 27);
|
|
var imageFromY = 0;
|
|
if (s == selectedSwatch) {
|
|
imageFromY = 55;
|
|
}
|
|
|
|
swatches[s] = Overlays.addOverlay("image", {
|
|
x: 100 + (30 * s),
|
|
y: 200,
|
|
width: 31,
|
|
height: 54,
|
|
subImage: { x: imageFromX, y: imageFromY, width: 30, height: 54 },
|
|
imageURL: "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/testing-swatches.svg",
|
|
color: swatchColors[s],
|
|
alpha: 1
|
|
});
|
|
}
|
|
|
|
// This will create a text overlay that when you click on it, the text will change
|
|
var text = Overlays.addOverlay("text", {
|
|
x: 200,
|
|
y: 100,
|
|
width: 150,
|
|
height: 50,
|
|
color: { red: 0, green: 0, blue: 0},
|
|
textColor: { red: 255, green: 0, blue: 0},
|
|
topMargin: 4,
|
|
leftMargin: 4,
|
|
text: "Here is some text.\nAnd a second line."
|
|
});
|
|
|
|
// This will create an image overlay, which starts out as invisible
|
|
var toolA = Overlays.addOverlay("image", {
|
|
x: 100,
|
|
y: 100,
|
|
width: 62,
|
|
height: 40,
|
|
subImage: { x: 0, y: 0, width: 62, height: 40 },
|
|
imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/hifi-interface-tools.svg",
|
|
color: { red: 255, green: 255, blue: 255},
|
|
visible: false
|
|
});
|
|
|
|
// This will create a couple of image overlays that make a "slider", we will demonstrate how to trap mouse messages to
|
|
// move the slider
|
|
var slider = Overlays.addOverlay("image", {
|
|
// alternate form of expressing bounds
|
|
bounds: { x: 100, y: 300, width: 158, height: 35},
|
|
imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/slider.png",
|
|
color: { red: 255, green: 255, blue: 255},
|
|
alpha: 1
|
|
});
|
|
|
|
// This is the thumb of our slider
|
|
var minThumbX = 130;
|
|
var maxThumbX = minThumbX + 65;
|
|
var thumbX = (minThumbX + maxThumbX) / 2;
|
|
var thumb = Overlays.addOverlay("image", {
|
|
x: thumbX,
|
|
y: 309,
|
|
width: 18,
|
|
height: 17,
|
|
imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/thumb.png",
|
|
color: { red: 255, green: 255, blue: 255},
|
|
alpha: 1
|
|
});
|
|
|
|
|
|
// We will also demonstrate some 3D overlays. We will create a couple of cubes, spheres, and lines
|
|
// our 3D cube that moves around...
|
|
var cubePosition = { x: 2, y: 0, z: 2 };
|
|
var cubeSize = 5;
|
|
var cubeMove = 0.1;
|
|
var minCubeX = 1;
|
|
var maxCubeX = 20;
|
|
|
|
var cube = Overlays.addOverlay("cube", {
|
|
position: cubePosition,
|
|
size: cubeSize,
|
|
color: { red: 255, green: 0, blue: 0},
|
|
alpha: 1,
|
|
solid: false
|
|
});
|
|
|
|
var solidCubePosition = { x: 0, y: 5, z: 0 };
|
|
var solidCubeSize = 2;
|
|
var minSolidCubeX = 0;
|
|
var maxSolidCubeX = 10;
|
|
var solidCubeMove = 0.05;
|
|
var solidCube = Overlays.addOverlay("cube", {
|
|
position: solidCubePosition,
|
|
size: solidCubeSize,
|
|
color: { red: 0, green: 255, blue: 0},
|
|
alpha: 1,
|
|
solid: true
|
|
});
|
|
|
|
var spherePosition = { x: 5, y: 5, z: 5 };
|
|
var sphereSize = 1;
|
|
var minSphereSize = 0.5;
|
|
var maxSphereSize = 10;
|
|
var sphereSizeChange = 0.05;
|
|
|
|
var sphere = Overlays.addOverlay("sphere", {
|
|
position: spherePosition,
|
|
size: sphereSize,
|
|
color: { red: 0, green: 0, blue: 255},
|
|
alpha: 1,
|
|
solid: false
|
|
});
|
|
|
|
var line3d = Overlays.addOverlay("line3d", {
|
|
position: { x: 0, y: 0, z:0 },
|
|
end: { x: 10, y: 10, z:10 },
|
|
color: { red: 0, green: 255, blue: 255},
|
|
alpha: 1,
|
|
lineWidth: 5
|
|
});
|
|
|
|
// this will display the content of your clipboard at the origin of the domain
|
|
var clipboardPreview = Overlays.addOverlay("clipboard", {
|
|
position: { x: 0, y: 0, z: 0},
|
|
size: 1 / 32,
|
|
visible: true
|
|
});
|
|
|
|
|
|
// When our script shuts down, we should clean up all of our overlays
|
|
function scriptEnding() {
|
|
Overlays.deleteOverlay(toolA);
|
|
for (s = 0; s < numberOfSwatches; s++) {
|
|
Overlays.deleteOverlay(swatches[s]);
|
|
}
|
|
Overlays.deleteOverlay(thumb);
|
|
Overlays.deleteOverlay(slider);
|
|
Overlays.deleteOverlay(text);
|
|
Overlays.deleteOverlay(cube);
|
|
Overlays.deleteOverlay(solidCube);
|
|
Overlays.deleteOverlay(sphere);
|
|
Overlays.deleteOverlay(line3d);
|
|
Overlays.deleteOverlay(clipboardPreview);
|
|
}
|
|
Script.scriptEnding.connect(scriptEnding);
|
|
|
|
|
|
var toolAVisible = false;
|
|
var count = 0;
|
|
|
|
// Our update() function is called at approximately 60fps, and we will use it to animate our various overlays
|
|
function update(deltaTime) {
|
|
count++;
|
|
|
|
// every second or so, toggle the visibility our our blinking tool
|
|
if (count % 60 == 0) {
|
|
if (toolAVisible) {
|
|
toolAVisible = false;
|
|
} else {
|
|
toolAVisible = true;
|
|
}
|
|
Overlays.editOverlay(toolA, { visible: toolAVisible } );
|
|
}
|
|
|
|
// move our 3D cube
|
|
cubePosition.x += cubeMove;
|
|
cubePosition.z += cubeMove;
|
|
if (cubePosition.x > maxCubeX || cubePosition.x < minCubeX) {
|
|
cubeMove = cubeMove * -1;
|
|
}
|
|
Overlays.editOverlay(cube, { position: cubePosition } );
|
|
|
|
// move our solid 3D cube
|
|
solidCubePosition.x += solidCubeMove;
|
|
solidCubePosition.z += solidCubeMove;
|
|
if (solidCubePosition.x > maxSolidCubeX || solidCubePosition.x < minSolidCubeX) {
|
|
solidCubeMove = solidCubeMove * -1;
|
|
}
|
|
Overlays.editOverlay(solidCube, { position: solidCubePosition } );
|
|
|
|
// adjust our 3D sphere
|
|
sphereSize += sphereSizeChange;
|
|
if (sphereSize > maxSphereSize || sphereSize < minSphereSize) {
|
|
sphereSizeChange = sphereSizeChange * -1;
|
|
}
|
|
Overlays.editOverlay(sphere, { size: sphereSize, solid: (sphereSizeChange < 0) } );
|
|
|
|
|
|
// update our 3D line to go from origin to our avatar's position
|
|
Overlays.editOverlay(line3d, { end: MyAvatar.position } );
|
|
}
|
|
Script.update.connect(update);
|
|
|
|
|
|
// The slider is handled in the mouse event callbacks.
|
|
var movingSlider = false;
|
|
var thumbClickOffsetX = 0;
|
|
function mouseMoveEvent(event) {
|
|
if (movingSlider) {
|
|
newThumbX = event.x - thumbClickOffsetX;
|
|
if (newThumbX < minThumbX) {
|
|
newThumbX = minThumbX;
|
|
}
|
|
if (newThumbX > maxThumbX) {
|
|
newThumbX = maxThumbX;
|
|
}
|
|
Overlays.editOverlay(thumb, { x: newThumbX } );
|
|
}
|
|
}
|
|
|
|
// we also handle click detection in our mousePressEvent()
|
|
function mousePressEvent(event) {
|
|
var clickedText = false;
|
|
var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
|
|
|
|
// If the user clicked on the thumb, handle the slider logic
|
|
if (clickedOverlay == thumb) {
|
|
movingSlider = true;
|
|
thumbClickOffsetX = event.x - thumbX;
|
|
|
|
} else if (clickedOverlay == text) { // if the user clicked on the text, update text with where you clicked
|
|
|
|
Overlays.editOverlay(text, { text: "you clicked here:\n " + event.x + "," + event.y } );
|
|
clickedText = true;
|
|
|
|
} else { // if the user clicked on one of the color swatches, update the selectedSwatch
|
|
|
|
for (s = 0; s < numberOfSwatches; s++) {
|
|
if (clickedOverlay == swatches[s]) {
|
|
Overlays.editOverlay(swatches[selectedSwatch], { subImage: { y: 0 } } );
|
|
Overlays.editOverlay(swatches[s], { subImage: { y: 55 } } );
|
|
selectedSwatch = s;
|
|
}
|
|
}
|
|
}
|
|
if (!clickedText) { // if you didn't click on the text, then update the text accordningly
|
|
Overlays.editOverlay(text, { text: "you didn't click here" } );
|
|
}
|
|
}
|
|
|
|
function mouseReleaseEvent(event) {
|
|
if (movingSlider) {
|
|
movingSlider = false;
|
|
}
|
|
}
|
|
|
|
Controller.mouseMoveEvent.connect(mouseMoveEvent);
|
|
Controller.mousePressEvent.connect(mousePressEvent);
|
|
Controller.mouseReleaseEvent.connect(mouseReleaseEvent);
|
|
|