建立及繫結播放和重設按鈕
在 3D-導件服務指示 101 中，您已為模型建立插圖序列，並將插圖屬性新增至與序列相關聯的零件。此屬性將用來告訴 Vuforia Studio 要在模型上顯示哪個拆解序列。在此體驗中，如果所選零件有與其相關聯的插圖序列，Vuforia Studio 會收集該插圖屬性值，而且您會獲得播放插圖序列的選項。您也會在體驗上新增一個 Reset 按鈕，以便隨時重設模型。這些按鈕會新增至體驗的 2D 畫布。
 |
如果您要比較您的進度與此部份的完整編碼，您可以在 GitHub 中的 Appendix 6 中找到它。
|
1. 導覽至「首頁」檢視並開啟「2D」畫布。
2. 翻轉 2D 畫布的定向。
 |
建議檢視體驗的使用者以橫向定向拿著電話或行動裝置。
|
3. 將「按鈕」小工具新增至畫布的左側面板。
4. 在按鈕的「屬性」下，更新下列內容：
◦ 「Text」 - 從此欄位中移除文字，並將欄位保留空白。
◦ 「Studio ID」 - 變更為「playButton」。
◦ 按一下「Click」事件旁邊的「JS」並輸入「playit()」。這會將按鈕繫結至「Home.js」部份中的函數，該部份在稍後步驟中才會建立。
5. 將另一個「按鈕」小工具新增至右側面板。
6. 在按鈕的「屬性」下，更新下列內容：
◦ 「Text」 - 變更為「Reset」。
◦ 「Studio ID」 - 變更為「resetButton」。
◦ 按一下「點擊」事件旁邊的「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 之後，按一下「預覽」。預覽標籤開啟後，按一下左前的軸輪。如果此部分已成功完成，快顯視窗會出現，播放按鈕會填入文字，修復序列會在按一下按鈕時啟動。
8. 現在，您將反白模型的不同部分。