建立及繫結播放和重設按鈕

在 3D-導件服務指示 101 中，您已為模型建立插圖序列，並將插圖屬性新增至與序列相關聯的零件。此屬性將用來告訴 Vuforia Studio 要在模型上顯示哪個拆解序列。在此體驗中，如果所選零件有與其相關聯的插圖序列，Vuforia Studio 會收集該插圖屬性值，而且您會獲得播放插圖序列的選項。您也會在體驗上新增一個 Reset 按鈕，以便隨時重設模型。這些按鈕會新增至體驗的 2D 畫布。

◦ 按一下「Click」事件旁邊的「JS」並輸入「playit()」。這會將按鈕繫結至「Home.js」部份中的函數，該部份在稍後步驟中才會建立。

◦ 按一下「點擊」事件旁邊的「JS」並輸入「resetit()」。這會將按鈕繫結至「Home.js」部份中的函數，該部份在稍後步驟中才會建立。

7. 之前，您已建立 Ionic 快顯視窗，以顯示指定零件的名稱與零件編號。某些零件也會有一個名為 illustration 的屬性，此屬性已新增到3D-導件服務指示 101中。此 illustration 屬性包含在 Creo Illustrate 中建立之動畫序列的名稱。序列是執行某一程式所需步驟的組合。序列包含在上載至 Vuforia Studio 的 .pvz 檔案中。「播放」與「重設」按鈕可讓您啟動或重設與 quadcopter 模型相關聯的序列的播放。

此部分中的資訊只有在已正確填入模型的 illustration 屬性時才會起作用。任何沒有 illustration 屬性的零件都會無法播放序列。

a. 快顯視窗消失後，playButton 小工具會顯示所選零件的序列名稱 (如果適用)。在執行 popup.close() 以變更PlayButton 的「文字」內容後，將下面的編碼新增至 closePopup 函數內，並編輯名為 toPlay 的物件，其中保留有關模型的資訊。

toPlay 物件儲存以 targetName 引數命名的模型名稱，以及模型的插圖序列。插圖序列會以 .pvi 檔案的形式，儲存在以 Creo Illustrate 建立的 .pvz 檔案中，然後與插圖中已完成的模型匯入 Vuforia Studio。這些檔案的格式為 1-Creo 3D- (figure name).pvi (除非您變更了發佈選項，若是如此，Creo 3D 可能不是檔案格式的字串)。在此體驗中，instructionName 變數的值來自插圖屬性，且用於具有動畫序列的 Creo Illustrate 的圖中已選取的部分。然後，instructionName 值會呼叫來用於在 toPlay 物件中建立指示內容的文字字串。

//
//change the Text property of the playButton to the instructionName variable, which was created from the JSON data of the model
$scope.view.wdg.playButton.text = instructionName;
//
// create an object for the playButton called toPlay. This object will have properties of model, which will be the name of the object that
//is clicked on and instruction, which will add the proper syntax for calling a sequence, based off the instructionName variable, into Studio
$scope.view.wdg.playButton.toPlay = { model: targetName,
instruction: 'l-Creo 3D - ' + instructionName + '.pvi' };

b. 按一下「預覽」。預覽標籤開啟後，請在 quadcopter 出現時按一下其左前的軸輪。快顯視窗消失後，您會注意到 playButton 的變更。在其他零件上嘗試，看看與序列相關聯和序列無關聯的零件之間有什麼差異。

c. 現在按鈕的文字已變更，必須將函數繫結至按鈕以播放序列。如果您還記得，名為 playit() 的函數已經成為為 playButton 小工具而新增的點擊 JS 事件。playit() 函數會將 quadcopter 模型的「序列」內容值設定為等於 playButton 的 toPlay 物件的 instruction 內容。在此情況下，下列編碼中的 quadcopter 會參照已新增的模型小工具的名稱。

如果稍早在專案中，小工具的「Studio ID」沒有變更為 quadcopter，則此編碼無法使用，且此編碼中的模型名稱會需要變更。

將下列置於編碼的底部，因為它是與 userpick 不同的函數。

//
//create the playit function to bind a sequence for the model to the play button
$scope.playit = function () {
//
// if there is information in the created toPlay object to say that there is an illustration attribute for the part
if ($scope.view.wdg.playButton.toPlay != undefined)
//
// set the sequence property for the quadcopter model to be equal to the value of the instruction property of the toPlay object
$scope.view.wdg.quadcopter.sequence = $scope.view.wdg.playButton.toPlay.instruction;
} // playit function end

d. 在為模型設定「序列」內容之後，playButton 小工具必須發出信號以開始序列。這可以透過使用名為 sequenceloaded 的新事件接聽程式，以及小工具服務呼叫來完成，這會開始播放序列。如同最後一個步驟，模型小工具的「Studio ID」必須設定為 quadcopter，否則編碼會需要編輯。直接在您剛剛建立的 playit 函數下方新增下列程式碼。

//
//sequenceloaded event listener triggers when the sequence property is updated
$scope.$on('sequenceloaded', function(event) {
//
// call a widget service to trigger the quadcopter model to play all steps for the given sequence
twx.app.fn.triggerWidgetService('quadcopter', 'playAll');
}); //serviceloaded event function end

e. 與 playButton 小工具類似，resetButton 也會附加 JS 事件。此 JS 事件稱為 resetit()。此獨立函數會將模型重設回其原始狀態，不論它是在播放中還是已完成序列。這必須透過更新 quadcopter 模型的「序列」內容來進行，以使其空白。將下列編碼放在 sequenceloaded 事件接聽程式之下。

//
//resetit function
$scope.resetit = function () {
//
//set the sequence property of the quadcopter model to blank
$scope.view.wdg.quadcopter.sequence = ''
} //resetit function end

f. 在將編碼完全新增至 Home.js 之後，按一下「預覽」。預覽標籤開啟後，按一下左前的軸輪。如果此部分已成功完成，快顯視窗會出現，播放按鈕會填入文字，修復序列會在按一下按鈕時啟動。