これは、アプリケーションにバンドルされている Architect World をロードする簡単な index.js (PhoneGap アプリ関連) です。
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
app.wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");
app.wikitudePlugin.isDeviceSupported(app.onDeviceSupportedCallback, app.onDeviceNotSupportedCallback);
},
onDeviceSupportedCallback: function() {
app.wikitudePlugin._onARchitectWorldLaunchedCallback = app.onArchitectWorldLaunched;
app.wikitudePlugin._onARchitectWorldFailedLaunchingCallback = app.onArchitectWorldFailedLaunching;
app.wikitudePlugin.loadARchitectWorld('www/res/ARchitectWorld/SimpleCircle.html');
app.wikitudePlugin.setOnUrlInvokeCallback(app.onURLInvoked);
},
onDeviceNotSupportedCallback: function() {
alert('device not supported');
},
onArchitectWorldLaunched: function(url) {
alert('launched ' + url);
},
onArchitectWorldFailedLaunching: function(error) {
alert('error ' + error);
},
onURLInvoked: function(url) {
// TODO: impl. url parsing to know what to do with the given url.
app.wikitudePlugin.close();
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
このコードは基本的に、現在のデバイスが AR World を実行できるかどうかをチェックし、そうであれば、アプリ バンドルの一部である Architect World を起動します。これは、特定の場所に円を表示しているシンプルなアーキテクト ワールドです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Circle</title>
<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>
<script>
function createCircle()
{
AR.logger.activateDebugMode();
var circle = new AR.Circle(2, {style: {fillColor: '#8F45FF'}});
var drawableLocation = new AR.RelativeLocation(null, 10, 0);
var geoObject = new AR.GeoObject(myGeoLocation, {drawables: {cam: circle}});
AR.logger.info("circle created");
}
function sendCloseARViewRequest()
{
// hideButton?status=hide could be anything, you just have to know what to do with the url in the PhoneGap world.
document.location = 'architectsdk://hideButton?status=hide';
}
</script>
</head>
<body>
<button value="Create ARchitectObj" type="button" onclick="createCircle()">Create Circle</button>
<button value="Close" type="button" onclick="sendCloseARViewRequest()">Close</button>
</body>
</html>
Wikitude SDK には、SDK のすべての部分に関する多くのドキュメントが含まれています (ObjC/Java リファレンス、JS リファレンス、および SDK の使用法を説明する一般的なドキュメント。Documentation.html および Reference/JavaScript Reference/index.html を参照してください)。
新しい PhoneGap プロジェクトを作成し、Wikititude プラグインとカスタム Architect World を追加してから、コードを index.js に追加すると、AR 機能を備えた実行中のアプリケーションが必要になります。