首页 文章

无法使用wikitude和Phonegap创建AR应用程序

提问于
浏览 次
0

我需要为Android和ios创建一个应用程序，它可以识别我所在国家特定山峰的峰值（意大利 . 并且......对于我的坏英语抱歉，希望你能理解它） .
我将使用phonegap和wikitude .
我会给你一个特定的贯穿我所做的事情（基于他们的setup guide phonegap plugin ios）来更好地解释自己 .

指南说：
1-创建一个PhoneGap项目 . 现在，该文件夹是在正确的位置创建的，没有任何错误 .
2a-创建通用www中的World文件夹 . 我手动创建了它 .
2b- "The Example section include several examples how to create an ARchitect World."这里我假设我按照示例创建了一个空文件和文件夹的结构（以项目命名的index.html，js /，css /，assets / *和.js文件） . 我继续介绍指南的示例部分 . 我've focused in particular on the POI examples since they are purpose of my app. I'已经交叉检查了那里提到的代码的部分文件我've found on github. Lastly I' ve将相关文件从他们的示例复制到我的应用程序World文件夹 .
3-为ios构建项目 . 成功完成 .
4-使用特定命令添加插件 . 这完成没有任何错误 . 我的World文件夹中的文件已复制到我的ios中 .
5-使用Xcode启动应用程序 . 我've taken a screenshot of the resulting folder (you can find the link in the comment below, I cant'发布图像XD） .

老实说，我甚至不确定这是正确的过程，因为指南并不是那么清楚 . 我假设我从上面的步骤2b获得的.js文件是我需要的AR代码所在的位置，但索引是空的，所以这些文件没有链接，我不知道javascript会使它们如此 . 我甚至不确定.js文件中的代码是否可以工作，因为我从每个示例文件夹中获取文件并将它们合并到我的项目文件夹中 .

现在，如果我尝试按原样启动模拟，我将从www文件夹中获取index.html文件中的标准phonegap "device ready"屏幕 .
据我所知，函数1.1 Image on Target应该将我的www索引与World索引连接起来，但如果我添加它，它会提供一个无响应的链接（因为我的World索引为空，我期待一个空白页面） . 我在Wikitude ARchitect v3.0 API Documentation中没有成功搜索这个函数，我不知道如何自己设置它 .

在这一点上，我真的需要一些指导：我已经比喻了他们所有的论坛（我几乎可以说是字面意义），我已经多次阅读了这些指南，并且我已经搜索了他们的参考文献中所解释的功能，但没有成功（在指南的“javascript界面”部分有AR功能的描述，但实际上没有关于如何构建和调用它们以及放置它们的位置的信息 .

对不起文字墙，我真的希望你能为我提供一些如何进行的帮助 .

谢谢你 .

附：我正在使用带有Eclipse 4.2.1的phonegap 3.3，Xcode 5.0.2，android developer tools v 22.3.0 . 使用OS 10.8.5在Mac Book Pro上工作

cordova wikitude point-of-interest

2 回答

  • 2

    这是一个简单的index.js（PhoneGap app相关），它加载与应用程序捆绑在一起的Architect World：

    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项目时，添加Wikitude插件和您的自定义Architect World，然后将代码添加到index.js，您应该有一个具有AR功能的正在运行的应用程序 .

    回复于
  • 0

    随着上次更新，wikitude团队改进了基础指南http://www.wikitude.com/developer/documentation/phonegap
    这个提供了额外的帮助：D I 've builded my own ar app based on the sample one and it' s似乎有效：D

    回复于

相关问题