Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-08-04 15:13:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style Create palette items

Browse source
This commit is contained in:
David Rowe 2017-08-23 21:56:59 +12:00
parent 1aba95ecb8
commit be45f600d4
7 changed files with 112 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
scripts/vr-edit/assets/create/cone.fbx Normal file
View file

Binary file not shown.

BIN
scripts/vr-edit/assets/create/cube.fbx Normal file
View file

Binary file not shown.

BIN
scripts/vr-edit/assets/create/cylinder.fbx Normal file
View file

Binary file not shown.

BIN
scripts/vr-edit/assets/create/sphere.fbx Normal file
View file

Binary file not shown.

181
scripts/vr-edit/modules/createPalette.js
View file

@ -20,9 +20,9 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
paletteHeaderBarOverlay,
paletteTitleOverlay,
palettePanelOverlay,
highlightOverlay,
paletteItemOverlays = [],
paletteItemPositions = [],
paletteItemHoverOverlays = [],
LEFT_HAND = 0,
@ -101,35 +101,55 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
visible: true
},
HIGHLIGHT_PROPERTIES = {
dimensions: { x: 0.034, y: 0.034, z: 0.034 },
localPosition: { x: 0.02, y: 0.02, z: 0.0 },
localRotation: Quat.ZERO,
color: { red: 240, green: 240, blue: 0 },
alpha: 0.8,
solid: false,
drawInFront: true,
ignoreRayIntersection: true,
visible: false
},
PALETTE_ENTITY_DIMENSIONS = { x: 0.024, y: 0.024, z: 0.024 },
PALETTE_ENTITY_COLOR = UIT.colors.faintGray,
ENTITY_CREATION_DIMENSIONS = { x: 0.2, y: 0.2, z: 0.2 },
ENTITY_CREATION_COLOR = { red: 192, green: 192, blue: 192 },
PALETTE_ITEM = {
overlay: "cube", // Invisible cube for hit area.
properties: {
dimensions: UIT.dimensions.itemCollisionZone,
localRotation: Quat.ZERO,
alpha: 0.0, // Invisible.
solid: true,
ignoreRayIntersection: false,
visible: true // So that laser intersects.
},
hoverButton: {
// Relative to root overlay.
overlay: "cube",
properties: {
dimensions: UIT.dimensions.paletteItemButtonDimensions,
localPosition: UIT.dimensions.paletteItemButtonOffset,
localRotation: Quat.ZERO,
color: UIT.colors.blueHighlight,
alpha: 1.0,
emissive: true, // TODO: This has no effect.
solid: true,
ignoreRayIntersection: true,
visible: false
}
},
icon: {
// Relative to hoverButton.
overlay: "model",
properties: {
dimensions: UIT.dimensions.paletteItemIconDimensions,
localPosition: UIT.dimensions.paletteItemIconOffset,
localRotation: Quat.ZERO,
emissive: true, // TODO: This has no effect.
ignoreRayIntersection: true
}
},
entity: {
dimensions: ENTITY_CREATION_DIMENSIONS
}
},
PALETTE_ITEMS = [
{
overlay: {
type: "cube",
icon: {
properties: {
dimensions: PALETTE_ENTITY_DIMENSIONS,
localRotation: Quat.ZERO,
color: PALETTE_ENTITY_COLOR,
alpha: 1.0,
solid: true,
ignoreRayIntersection: false,
visible: true
url: "../assets/create/cube.fbx"
}
},
entity: {
@ -139,17 +159,10 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
},
{
overlay: {
type: "shape",
icon: {
properties: {
shape: "Cylinder",
dimensions: PALETTE_ENTITY_DIMENSIONS,
localRotation: Quat.fromVec3Degrees({ x: -90, y: 0, z: 0 }),
color: PALETTE_ENTITY_COLOR,
alpha: 1.0,
solid: true,
ignoreRayIntersection: false,
visible: true
url: "../assets/create/cylinder.fbx",
localRotation: Quat.fromVec3Degrees({ x: 90, y: 0, z: 0 })
}
},
entity: {
@ -160,17 +173,10 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
},
{
overlay: {
type: "shape",
icon: {
properties: {
shape: "Cone",
dimensions: PALETTE_ENTITY_DIMENSIONS,
localRotation: Quat.fromVec3Degrees({ x: 90, y: 0, z: 0 }),
color: PALETTE_ENTITY_COLOR,
alpha: 1.0,
solid: true,
ignoreRayIntersection: false,
visible: true
url: "../assets/create/cone.fbx",
localRotation: Quat.fromVec3Degrees({ x: 90, y: 0, z: 0 })
}
},
entity: {
@ -181,16 +187,9 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
},
{
overlay: {
type: "sphere",
icon: {
properties: {
dimensions: PALETTE_ENTITY_DIMENSIONS,
localRotation: Quat.ZERO,
color: PALETTE_ENTITY_COLOR,
alpha: 1.0,
solid: true,
ignoreRayIntersection: false,
visible: true
url: "../assets/create/sphere.fbx"
}
},
entity: {
@ -205,17 +204,16 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
NONE = -1,
highlightedItem = NONE,
pressedItem = NONE,
wasTriggerClicked = false,
// References.
controlHand;
if (!this instanceof CreatePalette) {
return new CreatePalette();
}
function setHand(hand) {
// Assumes UI is not displaying.
side = hand;
@ -234,45 +232,32 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
var itemIndex,
isTriggerClicked,
properties,
PRESS_DELTA = { x: 0, y: 0, z: -0.01 },
CREATE_OFFSET = { x: 0, y: 0.05, z: -0.02 },
INVERSE_HAND_BASIS_ROTATION = Quat.fromVec3Degrees({ x: 0, y: 0, z: -90 });
// Highlight cube.
itemIndex = paletteItemOverlays.indexOf(intersectionOverlayID);
if (itemIndex !== NONE) {
if (highlightedItem !== itemIndex) {
Overlays.editOverlay(highlightOverlay, {
parentID: intersectionOverlayID,
localPosition: Vec3.ZERO,
visible: true
});
highlightedItem = itemIndex;
}
} else {
Overlays.editOverlay(highlightOverlay, {
// Unhighlight and lower old item.
if (highlightedItem !== NONE && (itemIndex === NONE || itemIndex !== highlightedItem)) {
Overlays.editOverlay(paletteItemHoverOverlays[highlightedItem], {
localPosition: UIT.dimensions.paletteItemButtonOffset,
visible: false
});
highlightedItem = NONE;
}
// Unpress currently pressed item.
if (pressedItem !== NONE && pressedItem !== itemIndex) {
Overlays.editOverlay(paletteItemOverlays[pressedItem], {
localPosition: paletteItemPositions[pressedItem]
// Highlight and raise new item.
if (itemIndex !== NONE && highlightedItem !== itemIndex) {
Overlays.editOverlay(paletteItemHoverOverlays[itemIndex], {
localPosition: UIT.dimensions.paletteItemButtonHoveredOffset,
visible: true
});
pressedItem = NONE;
highlightedItem = itemIndex;
}
// Press item and create new entity.
isTriggerClicked = controlHand.triggerClicked();
if (highlightedItem !== NONE && pressedItem === NONE && isTriggerClicked && !wasTriggerClicked) {
// Press item.
Overlays.editOverlay(paletteItemOverlays[itemIndex], {
localPosition: Vec3.sum(paletteItemPositions[itemIndex], PRESS_DELTA)
});
pressedItem = itemIndex;
if (highlightedItem !== NONE && isTriggerClicked && !wasTriggerClicked) {
// Create entity.
properties = Object.clone(PALETTE_ITEMS[itemIndex].entity);
properties.position = Vec3.sum(controlHand.palmPosition(),
@ -281,6 +266,12 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties.rotation = Quat.multiply(controlHand.orientation(), INVERSE_HAND_BASIS_ROTATION);
Entities.addEntity(properties);
// Lower and unhighlight item.
Overlays.editOverlay(paletteItemHoverOverlays[itemIndex], {
localPosition: UIT.dimensions.paletteItemButtonOffset,
visible: false
});
uiCommandCallback("autoGrab");
}
@ -303,7 +294,7 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
return {
x: COLUMN_ZERO_OFFSET + column * COLUMN_SPACING,
y: ROW_ZERO_Y_OFFSET - row * ROW_SPACING,
z: UIT.dimensions.panel.z + PALETTE_ENTITY_DIMENSIONS.z / 2
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.itemCollisionZone.z / 2
};
}
@ -352,17 +343,26 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
// Palette items.
for (i = 0, length = PALETTE_ITEMS.length; i < length; i += 1) {
properties = Object.clone(PALETTE_ITEMS[i].overlay.properties);
// Collision overlay.
properties = Object.clone(PALETTE_ITEM.properties);
properties.parentID = palettePanelOverlay;
properties.localPosition = itemPosition(i);
paletteItemOverlays[i] = Overlays.addOverlay(PALETTE_ITEMS[i].overlay.type, properties);
paletteItemPositions[i] = properties.localPosition;
}
// Prepare cube highlight overlay.
properties = Object.clone(HIGHLIGHT_PROPERTIES);
properties.parentID = paletteOriginOverlay;
highlightOverlay = Overlays.addOverlay("cube", properties);
paletteItemOverlays[i] = Overlays.addOverlay(PALETTE_ITEM.overlay, properties);
paletteItemPositions[i] = properties.localPosition;
// Highlight overlay.
properties = Object.clone(PALETTE_ITEM.hoverButton.properties);
properties.parentID = paletteItemOverlays[i];
paletteItemHoverOverlays[i] = Overlays.addOverlay(PALETTE_ITEM.hoverButton.overlay, properties);
// Icon overlay.
properties = Object.clone(PALETTE_ITEM.icon.properties);
properties = Object.merge(properties, PALETTE_ITEMS[i].icon.properties);
properties.parentID = paletteItemHoverOverlays[i];
properties.url = Script.resolvePath(properties.url);
Overlays.addOverlay(PALETTE_ITEM.icon.overlay, properties);
}
isDisplaying = true;
}
@ -376,9 +376,8 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
return;
}
Overlays.deleteOverlay(highlightOverlay);
for (i = 0, length = paletteItemOverlays.length; i < length; i += 1) {
Overlays.deleteOverlay(paletteItemOverlays[i]);
Overlays.deleteOverlay(paletteItemOverlays[i]); // Child overlays are automatically deleted.
}
Overlays.deleteOverlay(palettePanelOverlay);
Overlays.deleteOverlay(paletteTitleOverlay);

21
scripts/vr-edit/modules/toolsMenu.js
View file

@ -143,9 +143,9 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: {
shape: "Cylinder",
dimensions: {
x: UIT.dimensions.menuButton.x,
y: UIT.dimensions.menuButton.z,
z: UIT.dimensions.menuButton.y
x: UIT.dimensions.menuButtonDimensions.x,
y: UIT.dimensions.menuButtonDimensions.z,
z: UIT.dimensions.menuButtonDimensions.y
},
localPosition: UIT.dimensions.menuButtonIconOffset,
localRotation: Quat.fromVec3Degrees({ x: 90, y: 0, z: -90 }),
@ -161,7 +161,11 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
// Relative to hoverButton.
type: "image",
properties: {
localPosition: { x: 0, y: UIT.dimensions.menuButton.z / 2 + UIT.dimensions.imageOverlayOffset, z: 0 },
localPosition: {
x: 0,
y: UIT.dimensions.menuButtonDimensions.z / 2 + UIT.dimensions.imageOverlayOffset,
z: 0
},
localRotation: Quat.fromVec3Degrees({ x: -90, y: 90, z: 0 }),
color: UIT.colors.lightGrayText
}
@ -401,6 +405,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
SLIDER_UI_ELEMENTS = ["barSlider", "imageSlider"],
COLOR_CIRCLE_UI_ELEMENTS = ["colorCircle"],
PICKLIST_UI_ELEMENTS = ["picklist", "picklistItem"],
MENU_RAISE_DELTA = { x: 0, y: 0, z: 0.006 },
ITEM_RAISE_DELTA = { x: 0, y: 0, z: 0.004 },
MIN_BAR_SLIDER_DIMENSION = 0.0001, // Avoid visual artifact for 0 slider values.
@ -1160,7 +1165,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
if (MENU_ITEMS[i].type === "menuButton") {
// Hover button.
// Collision overlay.
properties = Object.clone(UI_ELEMENTS.menuButton.hoverButton.properties);
properties.parentID = itemID;
buttonID = Overlays.addOverlay(UI_ELEMENTS.menuButton.hoverButton.overlay, properties);
@ -1877,7 +1882,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
(intersectionItems[intersectedItem].command !== undefined
|| intersectionItems[intersectedItem].callback !== undefined)) {
if (isHighlightingMenuButton) {
// Lower menu button.
// Lower old menu button.
Overlays.editOverlay(menuHoverOverlays[highlightedItem], {
localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition,
visible: false
@ -1897,9 +1902,9 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
isHighlightingColorCircle = COLOR_CIRCLE_UI_ELEMENTS.indexOf(intersectionItems[highlightedItem].type) !== NONE;
isHighlightingPicklist = PICKLIST_UI_ELEMENTS.indexOf(intersectionItems[highlightedItem].type) !== NONE;
if (isHighlightingMenuButton) {
// Raise menu button.
// Raise new menu button.
Overlays.editOverlay(menuHoverOverlays[highlightedItem], {
localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, ITEM_RAISE_DELTA),
localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, MENU_RAISE_DELTA),
visible: true
});
} else if (isHighlightingSlider || isHighlightingColorCircle) {

12
scripts/vr-edit/modules/uit.js
View file

@ -36,13 +36,19 @@ UIT = (function () {
headerBar: { x: 0.24, y: 0.004, z: 0.012 },
panel: { x: 0.24, y: 0.18, z: 0.008 },
itemCollisionZone: { x: 0.0481, y: 0.0480, z: 0.0060 }, // Cursor intersection zone for Tools and Create items.
itemCollisionZone: { x: 0.0481, y: 0.0480, z: 0.0040 }, // Cursor intersection zone for Tools and Create items.
menuButton: { x: 0.0267, y: 0.0267, z: 0.0040 },
menuButtonIconOffset: { x: 0, y: 0.00935, z: -0.0050 }, // Non-hovered position.
menuButtonDimensions: { x: 0.0267, y: 0.0267, z: 0.0040 },
menuButtonIconOffset: { x: 0, y: 0.00935, z: -0.0040 }, // Non-hovered position relative to itemCollisionZone.
menuButtonLabelYOffset: -0.00915, // Relative to itemCollisionZone.
menuButtonSublabelYOffset: -0.01775, // Relative to itemCollisionZone.
paletteItemButtonDimensions: { x: 0.0481, y: 0.0480, z: 0.0020 },
paletteItemButtonOffset: { x: 0, y: 0, z: -0.0020 }, // Non-hovered position relative to itemCollisionZone.
paletteItemButtonHoveredOffset: { x: 0, y: 0, z: -0.0010 },
paletteItemIconDimensions: { x: 0.024, y: 0.024, z: 0.024 },
paletteItemIconOffset: { x: 0, y: 0, z: 0.015 }, // Non-hovered position relative to palette button.
imageOverlayOffset: 0.001 // Raise image above surface.
}
};