12
LAMPIRAN
13
Lampiran 1 Kebutuhan fungsional aplikasi Kode
Fungsi
CampusTour3D-001
Fungsi untuk menampilkan objek 3D dari collada menjadi objek visual berbentuk peta 3D.
CampusTour3D-002
Fungsi untuk memungkinkan pengguna mengeksplorasi peta 3D IPB.
CampusTour3D-003
Fungsi untuk menampilkan keterangan dari lokasi di IPB pada peta 3D.
CampusTour3D-004
Fungsi untuk menampilkan foto dari lokasi di IPB pada peta 3D.
CampusTour3D-005
Fungsi untuk menampilkan legenda peta pada aplikasi.
CampusTour3D-006
Fungsi untuk mengubah titik Bezier pembentuk jalur pada bidang XY, XZ, dan ZY.
CampusTour3D-007
Fungsi untuk menambah titik Bezier pembentuk jalur pada bidang XY, XZ, dan ZY.
CampusTour3D-008
Fungsi untuk mengurangi titik Bezier pembentuk jalur pada bidang XY, XZ, dan ZY.
CampusTour3D-009
Fungsi untuk menelusuri jalur yang terbentuk dan divisualisasikan pada peta 3D.
CampusTour3D-010
Fungsi untuk menghentikan penelusuran jalur pada peta 3D dan mengembalikan posisi kamera ke titik awal.
CampusTour3D-011
Fungsi untuk memberi petunjuk kepada pengguna untuk melakukan eksplorasi pada peta.
14
Lampiran 2 Use case diagram untuk pengguna
Melihat peta 3D IPB
Eksplorasi peta 3D IPB
Melihat keterangan lokasi IPB
Melihat foto lokasi IPB
Pengguna
Melihat legenda peta IPB
Mengubah titik Bezier pada jalur
Menambah titik Bezier pada jalur
Mengurangi titik Bezier pada jalur
Menelusuri jalur peta 3D
Memberhentikan penelusuran jalur
Mendapat petunjuk
15
Lampiran 3 Class diagram aplikasi Help mcHelp :MovieClip picHelp :Loader ketHelp : Spirte PicKetHelp :Loader +Help() -helpMouseOver() -helpMouseOut()
Viewport ball : TravelBall controlPoints : Array curvePoints : Array sizeW : Num sizeY : Num viewType : String d1 :String d2 :String p1 :DraggablePoint p2 :DraggablePoint +Viewport() +setSize(Num, Num) +addControlPoint (Num) +removeControlPoint (Num) +redraw() +redrawPath() +drawCurvePoints (Num, Num) +drawLinePoints (Num, Num) +pennerPointOnCurve (Object, Object, Object) +stopTravel() +startTravel (Array, Num, Num)
DraggablePoint isBezier : Boolean point :MovieClip
SiteTest materialAsset : Class cameraPitch : Num cameraYaw : Num isOrbiting : Boolean previousMouseX : Num previousMouseY : Num light : PointLight3D dae :DAE objList :Array tooltip : ImageToolTip legenda:Legenda daeName : String idList :Array pointPoint : DraggablePoint bezierControlPoint : DraggableControlPoint viewXY : Viewport viewXZ : Viewport viewZY : Viewport p1 : Object p2 : Object selectedPoint : Num controlPoints : Array curvePoints : Array targetTravel : Boolean
+InfoPanel() -loadDataComplete(Event) #imgClick(Event) +initData(String, String) #redraw() #menuFotoClick (MouseEevent) #menuKeteranganClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int)
FotoPanel panel : Sprite pic : Picture +FotoPanel() +initData(String) #redraw() -closeMouseClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int)
ImageToolTip _width : Int _height : Int pic : Picture lbl : TextField
Picture
Legenda _width :Int _height :Int menuLegenda : Sprite
control :MovieClip +DraggableControlPoint()
_width : Int _height : Int closeSprite : Sprite picClose : Loader menuFoto : Sprite panelFoto : Sprite panelKeterangan : Sprite picKeterangan : Picture lblKeterangan : TextField fotoPanel : FotoPanel currentId : String
+SiteTest() +getControlPoint(Num) +redrawViewpoets() +addControlPoint (Num, Num, Num, Num) +removeControlPoint(Num) +setSelectedPoint(Num) +removeCurrentPoint() +stopTravel() +startTravel() -init3D() -renderTick(Event) -mouseWheelHandler (MouseEvent) -onMouseDown(MouseEvent) -onMouseUp(MouseEvent) -onMouseMove(MouseEvent) #loadDataComplete(Event) #obj3d_MouseOver(MouseEvent) #obj3d_MouseOut(MouseEvent) #obj3d_Click(MouseEvent)
+DraggablePoint() -startToDrag (MouseEvent) -stopToDrag (MouseEvent) -mouseMove (MouseEvent)
DraggableControlPoint
InfoPanel
+Legenda() +drawLineBangun()
mode : Int clickable :Boolean tag : String +Picture() +redraw() +getImage() +setImage() +isClickable()
+ImageToolTip +redraw() +initData (String, String) -closeMouseClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int)
16
Lampiran 4 Antarmuka aplikasi 1 Gambar antarmuka utama aplikasi
2 Gambar antarmuka informasi aplikasi
17
Lampiran 5 Gambar penelusuran jalur aplikasi peta 3D 1 Gambar penelusuran jalur peta 3D pada titik pertama(posisi titik hijau).
2 Gambar penelusuran jalur peta 3D pada titik pertama(posisi titik hijau).
18
Lanjutan 3 Gambar penelusuran jalur peta 3D pada titik keempat(posisi titik hijau).
4 Gambar penelusuran jalur peta 3D pada titik akhir (posisi titik hijau).
19
Lampiran 6 Pengujian white box aplikasi 1 Tabel Pengujian white box fungsi visualisasi model peta 3D Flow Graph
Source Code protected function loadDataComplete (event : Event) : void (1) logError (“sini”) setting : String = loaderData.data lines : Array = setting.split (“\n”) (2) IF
lines.length > 1
(3)
daeName = trims( lines[0] )
(4)
FOR
(5)
i=1 < lines.length
idList.push( trim( lines[i] ))
(6)
next
(7)
init3D()
(8)
gotoError
(9) END IF
Base path : 1
1 – 2 – 3 – 4 – 5 – 6 – 4 – 5 – 6 – …. – 7 – 9
2
1–2–3–4–5–6–7–9
3
1–2–8–9
i
20
Lanjutan 2 Tabel pengujian white box visualisasi model peta 3D Flow Graph
Source Code protected function map_LoadCompleteHandler (event : FileLoadEvent):void (1) PointLight3d() (2) gouraudMaterial = new GouraudMaterial (3) dae.replaceMaterialByName (gouraudMaterial,”ID106”) dae.replaceMaterialByName (gouraudMaterial,”ID114”) dae.replaceMaterialByName (gouraudMaterial,”ID4”) dae.replaceMaterialByName (gouraudMaterial,”ID122”) dae.scale = 6 scene.addChild(dae) (4) FOR (5)
i=0 < idList.length
IF data.length > 1
(6)
obj = DisplayObject3D obj = dae.getChildByName(data[0],true)
(7)
IF obj is DisplayObject3D
(8)
viewport : ViewportLayer viewport = viewport.containerSprite.getChildLaye r (obj, true, true) viewport.addEventListener (MouseEvent.MOUSE_OVER, obj3d_MouseOver) viewport.addEventListener (MouseEvent.MOUSE_OUT, obj3d_MouseOut) viewport.addEventListener (MouseEvent.MOUSE_CLICK, obj3d_Click)
(9)
gotoError
(10)
END IF
(11) gotoError (12) END IF (13) Next i
Base Path : 1
1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 10 – 12 – 13 – 4 – 5 – 6 – 7 – 8 – 10 – 12 – 13 – …
2
1 – 2 – 3 – 4 – 5 – 6 – 7 – 9 – 10 – 12 – 13 – 4 – 5 – 6 – 7 – 9 – 10 – 12 – 13 – …
3
1 – 2 – 3 – 4 – 5 – 11 – 12 – 13 – 4 – 5 – 11 – 12 – 13 – …
4
1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 10 – 12 – 13
21
Lanjutan 3 Tabel pengujian white box pembentukan jalur Flow Graph
Source Code public function redrawPath():void (1)
IF true p1
(2)
return p1
(3)
gotoError
(4)
END IF
(5)
FOR
(6)
i=0 < curvePoints.length
removeChild(curvePoints[i]) curvePoints[i] = null
(7)
Next i
(8)
curvePoints = [] g : Graphics = graphics startX : Number = p1.x startY : Number = p1.y endX : Number endY : Number thisPoint : MovieClip nextPoint : MovieClip g.lineStyle (2, 0x000000, 0.8) gmoveTo(startX, startY)
(9)
FOR
i=0 <
controlPoints.length-1 (10)
g.curveTo (thisPoint.x, thisPoint.y, endX, endY) draw (startX, startY, thisPoint.x, thisPoint.y, endX, endY)
(11) Next
i
(12) IF controlPoints.length > 0 (13)
lastPoint : movieClip = controlPoints[ControlPoints. length – 1] g.curveTo (lastPoint.x, lastPoint.y, p2.x, p2.y) drawCurvePoints (startX, startY, lastPoint.x, lastPoint.y, p2.x, p2.y)
(14)
ELSE g.lineTo (p2.x, p2.y) drawLinePoints (startX, startY, p2.x, p2.y)
(15)
END IF
(16) g.moveTo (p1.x, p1.y) (17) FOR
i=0 <
controlPoints.length (18)
thisPoint = controlPoints[i] g.lineTo (thisPoint.x, thisPoint.y)
22
Lanjutan Flow Graph
Source Code (19) Next i (20) g.lineTo (p2.x, p2.y) setChildrenIndex (p1, numChildren -1) setChildrenIndex (p2, numChildren -1) (21) FOR
i=0 <
controlPoints.length (22)
setChildIndex (controlPoints[i], numChildren -1)
(23) Next
i
(24) stopTravel()
Base Path : 1
1 – 2 – 4 – 5 – 6 – 7 – 5 – 6 – 7 – … – 8 – 9 – 10 – 11 – 9 – 10 – 11 – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24
2
1 – 2 – 3 – 5 – 6 – 7 – 5 – 6 – 7 – … – 8 – 9 – 10 – 11 – 9 – 10 – 11 – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24
3
1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 9 – 10 – 11 – … – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24
4
1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – … – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24
5
1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 12 – 14 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – … – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24
6
1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 20 – 21 – 22 – 23 – 21 – 22 – 23 – … – 24
7
1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 12 – 14 – 15 – 16 – 17 – 18 – 19 – 20 – 21 – 22 – 23 – 21 – 22 – 23 – … – 24
23
Lampiran 7 Pengujian black box aplikasi Kode
Deskripsi Uji
Kondisi Awal
Skenario Uji
Hasil yang Diharapkan
Hasil Uji
Campus Tour3D -001
Menampilkan visualisai peta 3D
Halaman utama aplikasi
Melihat tampilan peta 3D
Tampilan peta 3D
OK
Campus Tour3D -002
Mengeksplorasi peta 3D
Halaman utama aplikasi
Klik dan geser, scroll up dan scroll down
Rotasi peta 3D dan zoom in / zoom out
OK
Campus Tour3D -003
Menampilkan keterangan lokasi pada peta 3D
Halaman utama aplikasi
Klik objek 3D pada peta
Tampilan halaman informasi lokasi
OK
Campus Tour3D -004
Menampilkan foto lokasi pada peta 3D
Halaman informasi lokasi
Klik tombol menu ”Foto”
Tampilan halaman foto lokasi
OK
Campus Tour3D -005
Menampilkan legenda peta 3D
Halaman utama aplikasi
Melihat tampilan legenda
Tampilan legenda di halaman utama
OK
Campus Tour3D -006
Mengubah titik Bezier sesuai bidang koordinat XY, XZ, dan ZY
Halaman utama aplikasi
Klik dan geser titik Bezier pada salah satu bidang koordinat
Titik Bezier berubah posisi pada bidang koordinat XY, XZ, dan ZY
OK
Campus Tour3D -007
Menambah titik Bezier sesuai bidang koordinat XY, XZ, dan ZY
Halaman utama aplikasi
Klik tombol menu ”+ Titik Bezier”
Titik Bezier bertambah pada bidang koordinat XY, XZ, dan ZY
OK
Campus Tour3D -008
Mengurangi titik Bezier sesuai bidang koordinat XY, XZ, dan ZY
Halaman utama aplikasi
Klik tombol menu ”- Titik Bezier”
Titik Bezier berkurang pada bidang koordinat XY, XZ, dan ZY
OK
Campus Tour3D -009
Menelusuri jalur yang terbentuk dengan kamera divisualisasikan pada peta 3D
Halaman utama aplikasi
Klik tombol menu ”Telusuri Jalur”
Kamera bergerak mengikuti jalur yang terbentuk
OK
Campus Tour3D -010
Menghentikan kamera yang menelusuri jalur
Halaman utama aplikasi
Klik tombol menu ”Stop / Eksplorasi”
Kamera berhenti dan kembali ke posisi semula
OK
Campus Tour3D -011
Memberikan petunjuk kepada pengguna
Halaman utama aplikasi
Mouse over lambang tanda tanya
Tampilan informasi bantuan
OK
24
Lampiran 8 Kuesioner evaluasi kesesuaian peta 3D dengan peta 2D
Nama
:
Tanggal Lahir
:
Pekerjaan
:
Pendidikan
:
Jenis Kelamin
:
Kuesioner ini dibuat untuk mendapatkan informasi dari implementasi aplikasi Campus Tour 3D IPB. Terima kasih Anda telah turut berpartisipasi dalam pengisian kuesioner ini. Silahkan memilih satu jawaban Anda dari setiap pertanyaan di bawah ini : Berikan tanda lingkaran (O) untuk jawaban yang menurut anda paling tepat. 1.
Apakah tampilan aplikasi ini berbentuk peta 3D IPB? a. Iya b. Tidak c. Cukup
2.
Apakah aplikasi peta 3D yang ditampilkan sesuai dengan denah IPB? a. Iya b. Tidak c. Cukup
3.
Apakah aplikasi peta 3D ini dapat membantu anda mengenali lokasi-lokasi seperti Fakultas, Asrama, dan berbagai Fasilitas di IPB? a. Iya b. Tidak c. Cukup
4.
Apakah anda mudah mencari lokasi-lokasi penting di IPB dengan aplikasi peta 3D ini? a. Iya b. Tidak c. Cukup
5.
Apakah penggunaan peta 3D ini lebih baik dari penggunaan peta 2D? a. Iya b. Tidak c. Cukup
6.
Apakah anda perlu latihan menggunakan aplikasi ini? a. Iya b. Tidak c. Cukup
7.
Setelah menggunakan aplikasi ini apakah anda dapat mengetahui denah IPB? a. Iya b. Tidak c. Cukup
8.
Apakah visualisasi objek peta 3D IPB sesuai dengan peta 2D IPB? a. Iya b. Tidak c. Cukup
25
Lanjutan 9.
Pendapat anda tentang nilai keseluruhan aplikasi ini? a. b. c.
Saran
Baik Buruk Cukup
