Tools menu header and panel

This commit is contained in:
David Rowe 2017-08-23 09:30:19 +12:00
parent 44778e791f
commit d6a23abb7c
4 changed files with 93 additions and 23 deletions

View file

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="327px" height="82px" viewBox="0 0 327 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
<title>TOOLS</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Tool-Palette" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Tool-Palette---Default" transform="translate(-1036.000000, -200.000000)" fill="#FFFFFF">
<path d="M1092.812,215.376 L1094.604,202.496 L1036.14,202.496 L1036.14,215.376 L1056.748,215.376 L1056.748,280 L1073.212,280 L1073.212,215.376 L1092.812,215.376 Z M1129.66,200.704 C1150.94,200.704 1164.044,215.264 1164.044,241.248 C1164.044,266.672 1150.94,281.792 1129.66,281.792 C1108.38,281.792 1095.164,267.12 1095.164,241.248 C1095.164,215.936 1108.38,200.704 1129.66,200.704 Z M1129.66,213.024 C1118.684,213.024 1112.524,220.976 1112.524,241.248 C1112.524,261.52 1118.908,269.472 1129.66,269.472 C1140.748,269.472 1146.684,261.52 1146.684,241.248 C1146.684,220.976 1140.748,213.024 1129.66,213.024 Z M1207.052,200.704 C1228.332,200.704 1241.436,215.264 1241.436,241.248 C1241.436,266.672 1228.332,281.792 1207.052,281.792 C1185.772,281.792 1172.556,267.12 1172.556,241.248 C1172.556,215.936 1185.772,200.704 1207.052,200.704 Z M1207.052,213.024 C1196.076,213.024 1189.916,220.976 1189.916,241.248 C1189.916,261.52 1196.3,269.472 1207.052,269.472 C1218.14,269.472 1224.076,261.52 1224.076,241.248 C1224.076,220.976 1218.14,213.024 1207.052,213.024 Z M1270.332,266.784 L1270.332,202.496 L1253.868,202.496 L1253.868,280 L1299.228,280 L1301.02,266.784 L1270.332,266.784 Z M1334.508,200.704 C1318.828,200.704 1307.404,209.328 1307.404,222.544 C1307.404,234.304 1314.124,241.024 1330.924,246.288 C1342.684,249.872 1345.708,252.56 1345.708,258.72 C1345.708,265.552 1340.332,269.36 1332.38,269.36 C1324.428,269.36 1318.156,266.448 1312.78,261.52 L1304.156,270.928 C1310.54,277.2 1319.948,281.792 1332.828,281.792 C1351.644,281.792 1362.844,271.824 1362.844,257.6 C1362.844,243.264 1353.884,237.44 1339.884,232.96 C1327.228,229.04 1324.316,226.8 1324.316,221.424 C1324.316,215.936 1328.908,213.024 1335.628,213.024 C1341.9,213.024 1347.276,215.04 1352.652,219.632 L1360.604,210.448 C1353.884,204.176 1346.044,200.704 1334.508,200.704 Z" id="TOOLS"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -34,7 +34,7 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
z: UIT.dimensions.canvasSeparation + UIT.dimensions.canvas.x / 2
},
PALETTE_ORIGIN_ROTATION = Quat.ZERO,
lateralOffset,
paletteLateralOffset,
PALETTE_ORIGIN_PROPERTIES = {
dimensions: { x: 0.005, y: 0.005, z: 0.005 },
@ -78,7 +78,7 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
},
PALETTE_TITLE_PROPERTIES = {
url: "../assets/create/create.svg",
url: "../assets/create/create-heading.svg",
scale: 0.0363,
localPosition: { x: 0, y: 0, z: PALETTE_HEADER_PROPERTIES.dimensions.z / 2 + UIT.dimensions.imageOffset },
localRotation: Quat.ZERO,
@ -221,7 +221,7 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
side = hand;
controlHand = side === LEFT_HAND ? rightInputs.hand() : leftInputs.hand();
controlJointName = side === LEFT_HAND ? "LeftHand" : "RightHand";
lateralOffset = side === LEFT_HAND ? -UIT.dimensions.handLateralOffset : UIT.dimensions.handLateralOffset;
paletteLateralOffset = side === LEFT_HAND ? -UIT.dimensions.handLateralOffset : UIT.dimensions.handLateralOffset;
}
setHand(side);
@ -330,27 +330,27 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
// Calculate position to put palette.
properties = Object.clone(PALETTE_ORIGIN_PROPERTIES);
properties.parentJointIndex = handJointIndex;
properties.localPosition = Vec3.sum(PALETTE_ORIGIN_POSITION, { x: lateralOffset, y: 0, z: 0 });
properties.localPosition = Vec3.sum(PALETTE_ORIGIN_POSITION, { x: paletteLateralOffset, y: 0, z: 0 });
paletteOriginOverlay = Overlays.addOverlay("sphere", properties);
// Create palette.
// Header.
properties = Object.clone(PALETTE_HEADER_PROPERTIES);
properties.parentID = paletteOriginOverlay;
paletteHeaderOverlay = Overlays.addOverlay("cube", properties);
properties = Object.clone(PALETTE_HEADER_BAR_PROPERTIES);
properties.parentID = paletteOriginOverlay;
paletteHeaderBarOverlay = Overlays.addOverlay("cube", properties);
properties = Object.clone(PALETTE_TITLE_PROPERTIES);
properties.parentID = paletteHeaderOverlay;
properties.url = Script.resolvePath(properties.url);
paletteTitleOverlay = Overlays.addOverlay("image3d", properties);
// Palette background.
properties = Object.clone(PALETTE_PANEL_PROPERTIES);
properties.parentID = paletteOriginOverlay;
palettePanelOverlay = Overlays.addOverlay("cube", properties);
// Palette items.
for (i = 0, length = PALETTE_ITEMS.length; i < length; i += 1) {
properties = Object.clone(PALETTE_ITEMS[i].overlay.properties);
properties.parentID = palettePanelOverlay;

View file

@ -18,6 +18,9 @@ ToolMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
var attachmentJointName,
menuOriginOverlay,
menuHeaderOverlay,
menuHeaderBarOverlay,
menuTitleOverlay,
menuPanelOverlay,
menuOverlays = [],
@ -33,12 +36,11 @@ ToolMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
highlightOverlay,
LEFT_HAND = 0,
/* Coordinate system: UI lies in x-y plane with the front surface being in the +ve z direction. */
CANVAS_SIZE = { x: 0.21, y: 0.13 },
HAND_JOINT_OFFSET = 0.15, // Distance from hand (wrist) joint to center of panel.
PANELS_SEPARATION = 0.01, // Gap between Tools menu and Create panel.
PANEL_ORIGIN_POSITION = { x: -PANELS_SEPARATION - CANVAS_SIZE.x / 2, y: HAND_JOINT_OFFSET - CANVAS_SIZE.y / 2, z: 0 },
PANEL_ORIGIN_POSITION = {
x: -UIT.dimensions.canvasSeparation - UIT.dimensions.canvas.x / 2,
y: UIT.dimensions.handOffset,
z: 0
},
PANEL_ORIGIN_ROTATION = Quat.fromVec3Degrees({ x: 0, y: -90, z: 0 }),
panelLateralOffset,
@ -50,18 +52,59 @@ ToolMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
alpha: 1.0,
parentID: Uuid.SELF,
ignoreRayIntersection: true,
//visible: false
visible: true,
visible: false,
displayInFront: true
},
MENU_PANEL_PROPERTIES = {
dimensions: { x: CANVAS_SIZE.x, y: CANVAS_SIZE.y, z: 0.01 },
localPosition: { x: 0, y: 0, z: 0.0 },
MENU_HEADER_PROPERTIES = {
dimensions: UIT.dimensions.header,
localPosition: {
x: 0,
y: UIT.dimensions.canvas.y / 2 - UIT.dimensions.header.y / 2,
z: UIT.dimensions.header.z / 2
},
localRotation: Quat.ZERO,
color: { red: 164, green: 164, blue: 164 },
//alpha: 1.0,
alpha: 0.5,
color: UIT.colors.baseGray,
alpha: 1.0,
solid: true,
ignoreRayIntersection: false,
visible: true
},
MENU_HEADER_BAR_PROPERTIES = {
dimensions: UIT.dimensions.headerBar,
localPosition: {
x: 0,
y: UIT.dimensions.canvas.y / 2 - UIT.dimensions.header.y - UIT.dimensions.headerBar.y / 2,
z: UIT.dimensions.headerBar.z / 2
},
localRotation: Quat.ZERO,
color: UIT.colors.blueHighlight,
alpha: 1.0,
solid: true,
ignoreRayIntersection: false,
visible: true
},
MENU_TITLE_PROPERTIES = {
url: "../assets/tools/tools-heading.svg",
scale: 0.0363,
localPosition: { x: 0, y: 0, z: MENU_HEADER_PROPERTIES.dimensions.z / 2 + UIT.dimensions.imageOffset },
localRotation: Quat.ZERO,
color: UIT.colors.white,
alpha: 1.0,
emissive: true,
ignoreRayIntersection: true,
isFacingAvatar: false,
visible: true
},
MENU_PANEL_PROPERTIES = {
dimensions: UIT.dimensions.panel,
localPosition: { x: 0, y: UIT.dimensions.panel.y / 2 - UIT.dimensions.canvas.y / 2, z: UIT.dimensions.panel.z / 2 },
localRotation: Quat.ZERO,
color: UIT.colors.baseGray,
alpha: 1.0,
solid: true,
ignoreRayIntersection: false,
visible: true
@ -983,13 +1026,13 @@ ToolMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
side = hand;
controlHand = side === LEFT_HAND ? rightInputs.hand() : leftInputs.hand();
attachmentJointName = side === LEFT_HAND ? "LeftHand" : "RightHand";
panelLateralOffset = side === LEFT_HAND ? -0.01 : 0.01;
panelLateralOffset = side === LEFT_HAND ? -UIT.dimensions.handLateralOffset : UIT.dimensions.handLateralOffset;
}
setHand(side);
function getEntityIDs() {
return [menuPanelOverlay].concat(menuOverlays).concat(optionsOverlays);
return [menuPanelOverlay, menuHeaderOverlay, menuHeaderBarOverlay].concat(menuOverlays).concat(optionsOverlays);
}
function openMenu() {
@ -1976,6 +2019,18 @@ ToolMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties.localPosition = Vec3.sum(properties.localPosition, { x: panelLateralOffset, y: 0, z: 0 });
menuOriginOverlay = Overlays.addOverlay("sphere", properties);
// Header.
properties = Object.clone(MENU_HEADER_PROPERTIES);
properties.parentID = menuOriginOverlay;
menuHeaderOverlay = Overlays.addOverlay("cube", properties);
properties = Object.clone(MENU_HEADER_BAR_PROPERTIES);
properties.parentID = menuOriginOverlay;
menuHeaderBarOverlay = Overlays.addOverlay("cube", properties);
properties = Object.clone(MENU_TITLE_PROPERTIES);
properties.parentID = menuHeaderOverlay;
properties.url = Script.resolvePath(properties.url);
menuTitleOverlay = Overlays.addOverlay("image3d", properties);
// Panel background.
properties = Object.clone(MENU_PANEL_PROPERTIES);
properties.parentID = menuOriginOverlay;
@ -2045,6 +2100,9 @@ ToolMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
menuOverlays = [];
Overlays.deleteOverlay(menuHeaderOverlay);
Overlays.deleteOverlay(menuHeaderBarOverlay);
Overlays.deleteOverlay(menuTitleOverlay);
Overlays.deleteOverlay(menuPanelOverlay);
Overlays.deleteOverlay(menuOriginOverlay);