선택한 항목 강조 표시
1. 런타임 사용자에게 명확한 시각적 피드백을 제공하려면, 모델에서 하위 어셈블리 또는 부품 항목을 선택할 경우 시각적 표시기가 트리거되어야 합니다. 이렇게 하면 사용자가 올바른 항목에 대한 데이터를 보고 있는지 확인할 수 있습니다. 이를 위해 선택한 모델 항목에 highlight 셰이더를 적용하겠습니다. Visualization.js에 다음을 추가합니다.
// call this function to highlight the list of selected parts
//
var highlightParts = (selectedList, modelId) => {
var highlightedList = [];
// run over all the items in the list and assign the highlight shader
selectedList.forEach( (partId) => {
var renderingPartId = modelId + "-" + partId;
var shader = "highlight;r f 1;g f 0.5;b f 0.25;a f 1" + (twx.app.isPreview() ? ";virtualMode f 1.0":"");
tml3dRenderer.setProperties(renderingPartId, { shader: shader, opacity: 1.0, hidden: false });
// and keep a record of what we highlighted - so that we wan undo it later
//
highlightedList.push(renderingPartId);
});
return highlightedList;
}
2. 또한, 사용자가 이전에 선택한 하위 어셈블리 바깥쪽을 클릭하거나 다른 하위 어셈블리를 선택하면 그에 따라 highlight 셰이더를 업데이트해야 합니다. 이렇게 하면 현재 선택한 항목만 시각적으로 강조된 상태로 유지되어 상호 작용 전반에 걸쳐 명확성이 유지됩니다. 따라서 Visualization.js에 다음도 추가합니다.
// call this function to clear the highlights
//
var highlightReset = (highlightedList) => {
// run over all the items in the list and unsasign the shader
//
highlightedList.forEach( (modelIdpartId) => {
tml3dRenderer.setProperties(modelIdpartId,{ shader:"", opacity: 0.2, hidden: !twx.app.isPreview() });
});
return [];
}
3. 이제 사용자가 부품 목록에서 항목을 선택할 때 해당 항목이 강조 표시됩니다. 다음 코드 조각에 사용된 로직을 자세히 살펴보십시오(특히 사용자 자신의 모델을 사용하는 경우). 로직은 Creo Illustrate에서 정의되고 사용 가능하며 각 부품에 대해 런타임에 로드되어야 하는 속성에 의존합니다. 다른 키 또는 사용자 지정 속성을 사용하여 부품별 데이터를 표시하는 경우 Visualization.js의 모델 구조와 일치하도록 다음 코드의 속성 참조를 적절하게 업데이트해야 합니다.
// used to track which items are highlighted
$scope.lit = [];
// called when the user taps on a property in the named list, or taps on a part in the view - this changes the 'current' field
//
$scope.$watch(
() => {
return ($scope.view.wdg.partsList.list != undefined &&
$scope.view.wdg.partsList.list.current != undefined) ? JSON.stringify($scope.view.wdg.partsList.list.current) : "";
},
//value == 'currentSelectedPart',
(value) => {
highlightReset($scope.lit);
var partNumber = JSON.parse(value);
// first of all, lets get all the metadata values for this selected item
//
var plist = [];
PTC.Metadata.fromId(partNumber.model)
.then ( (metadata) => {
// find all the items with this partnumber
//
plist = metadata.find(metadataKey).like(partNumber.name);
if (plist == undefined)
{
return;
}
// highlight those items
//
$scope.lit = highlightParts(plist.getSelected(), partNumber.model);
// now find some interesting properties
//
var interestingProperties = ["cost","supplier","weight","partNumber"];
// this function (declared inline) is used to get the property values (see above) for eeach of the items
// in the previously acquired partnmubered plist - it will iterate through each item (idpath) and get the
// properties for each item; if found, they are captured into an array of name=value pairs.
//
var getInteresting = (ip) => {
var ilist = ip;
return function(idpath) {
const res = this.get(idpath, ilist);
var retobj = { path:idpath };
if (res != undefined && res.length === ilist.length) for (var p=0;p<ilist.length;p++) {
// add each result as a new property in the return body
retobj[ilist[p]] = res[p];
}
return retobj;
}
}
// get a list of items with this property set
//
plist = plist.getSelected(getInteresting(interestingProperties));
// helper function to get and format the properties - this generates a list of name|value pairs
//
var getNameValues = (items) => {
var nv = [];
items.forEach( (i) => {
Object.keys(i).forEach( (j) =>{
if (interestingProperties.includes(j)) nv.push({name:j, value:i[j]});
})
})
return nv;
}
// we need to turn this into a list of item/name/value
//
$scope.view.wdg.propertiesList.data = getNameValues(plist);
//
// and show the popup
//
twx.app.fn.triggerWidgetService("propertyPopup", 'showpopup')
})
}
);
4. 사용자가 특정 부품 이름 또는 ID가 없는 경우 모델에서 직접 관련 하위 어셈블리를 대화식으로 선택할 수 있습니다. 이 시나리오에서는 다음을 추가합니다.
// called if the user taps on a part
$scope.$on("userpick", (event, model, type, args) => {
PTC.Metadata.fromId(model)
.then ( (metadata) => {
var pathId = JSON.parse(args).occurrence;
var sid = metadata.get(pathId, metadataKey);
var findMetaDataKey = (p) => {
// simple inline closure that will test if the item name is the value specificed (p in this case)
// this gets called for all items in the list (see findIndex, below)
//
return function(v) { return v.name == p; }
}
// work out which row we need to select
//
var fid = $scope.view.wdg.partsList.list.findIndex(findMetaDataKey(sid));
// return call here if not found
// ... and mark it as selected
//
$scope.view.wdg.partsList.list.forEach( (v,i) => { v._isSelected = (i == fid) });
// and get the row to highlight in 3d
//
$scope.view.wdg.partsList.list.current = $scope.view.wdg.partsList.list.filter( (v,i) => { return i == fid })[0];
})
});