Kamis, 19 Oktober 2017

Implementasi WIkitude Untuk AR Markerless



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"

}];






Tidak ada komentar:

Posting Komentar