Target output:
1.Dapatkan API WIKITUDE dengan cara Daftar di http://www.wikitude.com/developer/licenses
2.Buat Project Android /ECCLIPSE, masukkan key nya pada res-String
POLA ASSETS WIKITUDE:
Volume in drive C has no label.
Volume Serial Number is CA1F-4A01
Directory of C:\Users\ACER\workspace\RumahSakit\assets
10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
10/19/2017 02:47 PM <DIR> assets
10/19/2017 02:47 PM <DIR> css
08/21/2017 10:17 AM 5,095 index.html
10/19/2017 02:47 PM <DIR> jquery
10/19/2017 02:47 PM <DIR> js
1 File(s) 5,095 bytes
Directory of C:\Users\ACER\workspace\RumahSakit\assets\assets
10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
08/21/2017 10:17 AM 7,040 indi.png
08/21/2017 10:17 AM 12,978 marker_idle.png
08/21/2017 10:17 AM 13,872 marker_selected.png
08/21/2017 10:17 AM 17,359 radar_bg.png
08/21/2017 10:17 AM 11,140 radar_north.png
5 File(s) 62,389 bytes
Directory of C:\Users\ACER\workspace\RumahSakit\assets\css
10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
08/21/2017 10:17 AM 222 poi-radar.css
1 File(s) 222 bytes
Directory of C:\Users\ACER\workspace\RumahSakit\assets\jquery
10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
10/19/2017 02:47 PM <DIR> images
08/21/2017 10:17 AM 92,629 jquery-1.9.1.min.js
08/21/2017 10:17 AM 691 jquery-mobile-transparent-ui-overlay.css
08/21/2017 10:17 AM 94,670 jquery.mobile-1.3.2.min.css
08/21/2017 10:17 AM 145,396 jquery.mobile-1.3.2.min.js
4 File(s) 333,386 bytes
Directory of C:\Users\ACER\workspace\RumahSakit\assets\jquery\images
10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
08/21/2017 10:17 AM 7,825 ajax-loader.gif
08/21/2017 10:17 AM 1,968 icons-18-black.png
08/21/2017 10:17 AM 1,988 icons-18-white.png
08/21/2017 10:17 AM 3,859 icons-36-black.png
08/21/2017 10:17 AM 3,861 icons-36-white.png
5 File(s) 19,501 bytes
Directory of C:\Users\ACER\workspace\RumahSakit\assets\js
10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
08/21/2017 10:17 AM 12,242 marker.js
08/21/2017 11:47 AM 1,444 myjsondata.js
08/21/2017 10:17 AM 10,997 nativedetailscreen.js
08/21/2017 10:17 AM 1,311 radar.js
4 File(s) 25,994 bytes
Total Files Listed:
20 File(s) 446,587 bytes
17 Dir(s) 119,671,439,360 bytes free
Adapun ocdnya adalah sbb:
DOWNLOAD ASSETS:
ar.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".MainActivity"
android:id="@+id/framelayout">
<com.wikitude.architect.ArchitectView android:id="@+id/architectView" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
</FrameLayout>
ar.java
package com.lp2maray.rumahsakit;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.content.DialogInterface.OnClickListener;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ToggleButton;
import com.wikitude.architect.ArchitectView;
import com.wikitude.architect.StartupConfiguration;
import java.io.IOException;
//deklarasi class sebagai activity (class yang dapat berjalan)
public class Ar extends Activity implements LocationListener {
//variabel global
private ArchitectView architectView;
private Intent i;
private LocationManager lmg;
ImageView imgPlanet;
int planet;
TextView tulisan;
String lampu;
String tampil;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
setContentView(R.layout.ar);
//load wikitude
this.architectView = (ArchitectView) this.findViewById(R.id.architectView);
final StartupConfiguration config = new StartupConfiguration(getResources().getString(R.string.sdk_key) /* license key */);
this.architectView.onCreate(config);
this.architectView.onPostCreate();
try {
this.architectView.load("index.html");
} catch (IOException ioe) {
Log.v("HTML loading", "" + ioe.getMessage());
}
}
public void onPostCreate() {}
public void onPause() {
super.onPause();
architectView.onPause();
lmg.removeUpdates(this);
}
public void onResume() {
super.onResume();
architectView.onResume();
super.onResume();
lmg = (LocationManager) this.getSystemService(LOCATION_SERVICE);
if (lmg.isProviderEnabled(LocationManager.GPS_PROVIDER))
lmg.requestLocationUpdates(LocationManager.GPS_PROVIDER, 10000, 0, this);
lmg.requestLocationUpdates(LocationManager.NETWORK_PROVIDER, 10000, 0, this);
}
public void onDestroy() {
super.onDestroy();
architectView.onDestroy();
lmg.removeUpdates(this);
}
@Override
public void onLocationChanged(Location location) {
architectView.setLocation(location.getLatitude(), location.getLongitude(), 0.0f);
}
@Override
public void onStatusChanged(String provider, int status, Bundle extras) {
}
@Override
public void onProviderEnabled(String provider) {
}
@Override
public void onProviderDisabled(String provider) {
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
{
if ((keyCode == KeyEvent.KEYCODE_BACK))
{
finish();
return false;
}
return super.onKeyDown(keyCode, event);
}
}
+++++++++++++++++++++++++++++++++
Atur permission:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_GPS" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.location" android:required="true" />
<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="true" />
<uses-feature android:name="android.hardware.sensor.compass" android:required="true" />
<uses-feature android:glEsVersion="0x00020000" android:required="true" />
Atur Library:
Atur Preference:
Untuk assets dengan contoh di atas silakan download : assets rumahsakit
Untuk Contoh-Contoh yang lain silakan download : Download Example
isi index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- basic meta information -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="application/json; charset=utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
<title>My ARchitect World</title>
<script src="architect://architect.js"></script>
<script src="../ade.js"></script>
<!-- positioning of poi-radar -->
<link rel="stylesheet" href="css/poi-radar.css" />
<script type="text/javascript" src="js/myjsondata.js"></script>
<!-- jquery mobile CSS -->
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
<!-- required to set background transparent & enable "click through" -->
<link rel="stylesheet" href="jquery/jquery-mobile-transparent-ui-overlay.css" />
<!-- jquery JS files -->
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>
<!-- marker representation-->
<script src="js/marker.js"></script>
<!-- World logic-->
<script type="text/javascript" src="js/nativedetailscreen.js"></script>
<!-- radar component -->
<script type="text/javascript" src="js/radar.js"></script>
</head>
<body>
<div data-role="page" id="page1" style="background: none;" >
<!-- MAIN PAGE CONTENT -->
<!-- header of UI holding feature buttons -->
<div id ="header-status" data-role="header" data-position="fixed" data-theme="c">
<a href="javascript: World.showRange();" data-icon="gear" data-inline="true" data-mini="true">Range</a>
<a href="javascript: World.reloadPlaces()" data-icon="refresh" >Reload</a>
<h1></h1>
</div>
<!-- the radar div - Wikitude SDK radar will be drawn into this div -->
<div class="radarContainer_left" id="radarContainer"></div>
<!-- transparent footer-->
<div data-role="footer" class="ui-bar" data-theme="f" data-position="fixed" style="text-align:center;">
<!-- small status-button -->
<a style="text-align:right;" id="popupInfoButton" href="#popupInfo" data-rel="popup" data-role="button" class="ui-icon-alt" data-inline="true" data-transition="pop" data-icon="alert" data-theme="e" data-iconpos="notext">Log</a> </p>
<!-- popup displayed when button clicked -->
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
<p style="text-align:right;" id="status-message">Trying to find out where you are</p>
</div>
</div>
<!-- PANELS, ONLY VISIBLE ON DEMAND -->
<!-- panel containing POI detail information -->
<div data-role="panel" id="panel-poidetail" data-position="right" data-display="overlay" style="background-color:#F0F0F0;" data-theme="c">
<!-- header with "close" button -->
<div data-role="header" data-theme="c">
<h1>Details</h1>
<a href="#header" data-rel="close">Close</a>
</div>
<!-- content of POI detail page, you may also add thumbnails etc. here if you like -->
<div data-role="content">
<!-- title -->
<h3 id="poi-detail-title"></h3>
<!-- description -->
<h4 id="poi-detail-description"></h4>
<!-- distance -->
<h4>Distance: <a id="poi-detail-distance"></a></h4>
</div>
</div>
<!-- range panel -->
<div data-role="panel" id="panel-distance" data-position="left" data-display="overlay" style="background-color:#F0F0F0;" data-theme="c">
<!-- header with close button -->
<div data-role="header" data-theme="c">
<h1>Range</h1>
<a href="#header" data-rel="close">Close</a>
</div>
<!-- distance information, calculated/updated in code -->
<div data-role="content">
<h4> Range: <a id="panel-distance-value"></a></h4>
<h4> Visible: <a id="panel-distance-places"></a></h4>
<!-- default slider -->
<input id="panel-distance-range" type="range" data-highlight="true" name="rangeSlider" min="0" max="100" value="100" data-show-value="false" step="5" data-popup-enabled="false">
</div>
</div>
</div>
</body>
</html>
myjsondata.js
var myJsonData = [{
"id": "1",
"longitude": "106.807513",
"latitude": "-6.257478",
"description": "Jalan Taman Brawijaya No. 1, Cipete Utara, Kebayoran Baru, Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12150",
"altitude": "100.0",
"name": "Rumah Sakit Brawijaya Women dan Children Hospital"
}, {
"id": "2",
"longitude": "106.819345",
"latitude": "-6.286280",
"description": "Jalan Ampera Raya No.34, Cilandak Timur, Pasar Minggu, RT.2/RW.9, Ragunan, Kota Jakarta Selatan, 12560",
"altitude": "100.0",
"name": "RSIA Kemang Medical Care"
}, {
"id": "3",
"longitude": "106.777890",
"latitude": "-6.255186",
"description": "Jalan Ciputat Raya No.5, RT.13/RW.1, Kebayoran Lama Selatan, Kebayoran Lama, Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12240",
"altitude": "100.0",
"name": "Rumah Sakit Ibu dan Anak Yadika"
}, {
"id": "4",
"longitude": "106.845044",
"latitude": "-6.218998",
"description": "Jalan Dokter Sahardjo No.120, RT.1/RW.8, Menteng Atas, Jakarta, RT.1/RW.8, Menteng Atas, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12960",
"altitude": "100.0",
"name": "Rumah Sakit Bersalin Budhi Jaya"
}, {
"id": "5",
"longitude": "106.800864",
"latitude": "-6.247861",
"description": "Jl. Panglima Polim 1 No.34, RT.1/RW.3, Melawai, Kebayoran Baru, RT.1/RW.3, Melawai, Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12160",
"altitude": "100.0",
"name": "Rumah Sakit Bersalin ASIH"
}];
