Display appropriate icon and label on tool icon per current tool

This commit is contained in:
David Rowe 2017-08-25 14:58:05 +12:00
parent 850efec97b
commit eda513caf0
3 changed files with 40 additions and 40 deletions

View file

@ -15,15 +15,7 @@ ToolIcon = function (side) {
"use strict";
var SCALE_TOOL = 0,
CLONE_TOOL = 1,
GROUP_TOOL = 2,
COLOR_TOOL = 3,
PICK_COLOR_TOOL = 4,
PHYSICS_TOOL = 5,
DELETE_TOOL = 6,
LEFT_HAND = 0,
var LEFT_HAND = 0,
MODEL_DIMENSIONS = { x: 0.1944, y: 0.1928, z: 0.1928 }, // Raw FBX dimensions.
MODEL_SCALE = 0.7, // Adjust icon dimensions so that the green bar matches that of the Tools header.
@ -54,20 +46,14 @@ ToolIcon = function (side) {
},
ICON_PROPERTIES = {
url: "../assets/tools/stretch-icon.svg",
dimensions: { x: 0.0167, y: 0.0167 },
localPosition: { x: 0.020, y: 0.069, z: 0 }, // Relative to model overlay.
color: UIT.colors.lightGrayText // x is in fingers direction; y is in thumb direction.
},
LABEL_PROPERTIES = {
url: "../assets/tools/stretch-label.svg",
scale: 0.0311,
localPosition: { x: -0.040, y: 0.067, z: 0 },
color: UIT.colors.white
},
SUBLABEL_PROPERTIES = {
url: "../assets/tools/tool-label.svg",
scale: 0.0152,
localPosition: { x: -0.055, y: 0.067, z: 0 },
color: UIT.colors.lightGrayText
},
@ -113,7 +99,7 @@ ToolIcon = function (side) {
}
}
function display(icon) {
function display(iconInfo) {
// Displays icon on hand.
var handJointIndex,
properties;
@ -143,27 +129,28 @@ ToolIcon = function (side) {
properties = Object.clone(IMAGE_PROPERTIES);
properties = Object.merge(properties, ICON_PROPERTIES);
properties.parentID = modelOverlay;
properties.url = Script.resolvePath(properties.url);
properties.url = Script.resolvePath(iconInfo.icon.properties.url);
properties.dimensions = {
x: ICON_SCALE_FACTOR * properties.dimensions.x,
y: ICON_SCALE_FACTOR * properties.dimensions.y
x: ICON_SCALE_FACTOR * iconInfo.icon.properties.dimensions.x,
y: ICON_SCALE_FACTOR * iconInfo.icon.properties.dimensions.y
};
properties.localPosition.y += ICON_SCALE_FACTOR * iconInfo.icon.headerOffset.y;
Overlays.addOverlay(IMAGE_TYPE, properties);
// Label.
properties = Object.clone(IMAGE_PROPERTIES);
properties = Object.merge(properties, LABEL_PROPERTIES);
properties.parentID = modelOverlay;
properties.url = Script.resolvePath(properties.url);
properties.scale = LABEL_SCALE_FACTOR * properties.scale;
properties.url = Script.resolvePath(iconInfo.label.properties.url);
properties.scale = LABEL_SCALE_FACTOR * iconInfo.label.properties.scale;
Overlays.addOverlay(IMAGE_TYPE, properties);
// Sublabel.
properties = Object.clone(IMAGE_PROPERTIES);
properties = Object.merge(properties, SUBLABEL_PROPERTIES);
properties.parentID = modelOverlay;
properties.url = Script.resolvePath(properties.url);
properties.scale = LABEL_SCALE_FACTOR * properties.scale;
properties.url = Script.resolvePath(iconInfo.sublabel.properties.url);
properties.scale = LABEL_SCALE_FACTOR * iconInfo.sublabel.properties.scale;
Overlays.addOverlay(IMAGE_TYPE, properties);
}
@ -172,13 +159,6 @@ ToolIcon = function (side) {
}
return {
SCALE_TOOL: SCALE_TOOL,
CLONE_TOOL: CLONE_TOOL,
GROUP_TOOL: GROUP_TOOL,
COLOR_TOOL: COLOR_TOOL,
PICK_COLOR_TOOL: PICK_COLOR_TOOL,
PHYSICS_TOOL: PHYSICS_TOOL,
DELETE_TOOL: DELETE_TOOL,
setHand: setHand,
update: update,
display: display,

View file

@ -1156,6 +1156,12 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
}
],
COLOR_TOOL = 0, // Indexes of corresponding MENU_ITEMS item.
SCALE_TOOL = 1,
CLONE_TOOL = 2,
GROUP_TOOL = 3,
PHYSICS_TOOL = 4,
DELETE_TOOL = 5,
HIGHLIGHT_PROPERTIES = {
xDelta: 0.004,
@ -1249,6 +1255,15 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
return [menuPanelOverlay, menuHeaderOverlay].concat(menuOverlays).concat(optionsOverlays);
}
function getIconInfo(tool) {
// Provides details of tool icon, label, and sublabel images for the specified tool.
return {
icon: MENU_ITEMS[tool].icon,
label: MENU_ITEMS[tool].label,
sublabel: UI_ELEMENTS.menuButton.sublabel
};
}
function openMenu() {
var properties,
itemID,
@ -2132,7 +2147,6 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
} else if (highlightedItem !== NONE) {
// Un-highlight previous button.
print("$$$$$$$ unhighlight clickable item");
Overlays.editOverlay(highlightOverlay, {
visible: false
});
@ -2447,6 +2461,13 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
return {
COLOR_TOOL: COLOR_TOOL,
SCALE_TOOL: SCALE_TOOL,
CLONE_TOOL: CLONE_TOOL,
GROUP_TOOL: GROUP_TOOL,
PHYSICS_TOOL: PHYSICS_TOOL,
DELETE_TOOL: DELETE_TOOL,
iconInfo: getIconInfo,
setHand: setHand,
entityIDs: getEntityIDs,
clearTool: clearTool,

View file

@ -224,7 +224,7 @@
}
function setToolIcon(icon) {
toolIcon.display(icon);
toolIcon.display(toolsMenu.iconInfo(icon));
}
function clearTool() {
@ -289,13 +289,12 @@
setHand: setHand,
setToolIcon: setToolIcon,
clearTool: clearTool,
SCALE_TOOL: toolIcon.SCALE_TOOL,
CLONE_TOOL: toolIcon.CLONE_TOOL,
GROUP_TOOL: toolIcon.GROUP_TOOL,
COLOR_TOOL: toolIcon.COLOR_TOOL,
PICK_COLOR_TOOL: toolIcon.PICK_COLOR_TOOL,
PHYSICS_TOOL: toolIcon.PHYSICS_TOOL,
DELETE_TOOL: toolIcon.DELETE_TOOL,
COLOR_TOOL: toolsMenu.COLOR_TOOL,
SCALE_TOOL: toolsMenu.SCALE_TOOL,
CLONE_TOOL: toolsMenu.CLONE_TOOL,
GROUP_TOOL: toolsMenu.GROUP_TOOL,
PHYSICS_TOOL: toolsMenu.PHYSICS_TOOL,
DELETE_TOOL: toolsMenu.DELETE_TOOL,
display: display,
updateUIEntities: setUIEntities,
doPickColor: doPickColor,
@ -1355,7 +1354,7 @@
case "pickColorTool":
grouping.clear();
toolSelected = TOOL_PICK_COLOR;
ui.setToolIcon(ui.PICK_COLOR_TOOL);
ui.setToolIcon(ui.COLOR_TOOL);
ui.updateUIEntities();
break;
case "physicsTool":