javascript - 带有 Wikitude SDK 的 Google Glass 增强现实

Question

我正在Augmented Reality使用Wikitude SDK for Google GLASS，它工作正常。数据按预期加载，并且在标记单击时我sidebar在 android 设备上显示 a，但是当我尝试在TAP标记上单击时遇到问题google glass。在设备上点击标记可以正常工作，Wikitude AR Android SDK但我如何使用Wikitude for Google Glass. 正如文档中所说，该onMarkerSelectedfn功能是在选择标记时触发的功能，cam是的，它在 android 设备中运行良好。但它不起作用google glass。我也应该做一些特别的事情Google glass吗？

很快，我如何使用 Wikiitude Augmented Reality SDK for Google Glass在另一个或Google Glass上显示标记的详细信息、标记点击事件？或如何以同样适用于 Google Glass 的方式实现浏览 POI呈现详细信息？LiveCardImmersiveCard

onMarkerSelected: function onMarkerSelectedFn(marker)是选择 POI Marker 时触发的功能。

我在这里找到的一些来源描述了我想要实现的相同目标，但是直到那时这个功能在 SDK 上不可用（我不知道是否仍然不可用，因为文档中没有写）。然而，任何想法都会被应用

这是WIkitude Google Glass 文档

这是js功能：

// fired when user pressed maker in cam
    onMarkerSelected: function onMarkerSelectedFn(marker) {
        World.currentMarker = marker;

        // update panel values
        $("#poi-detail-title").html(marker.poiData.name);
        $("#poi-detail-description").html(marker.poiData.address);

        //var distanceToUserValue = (marker.distanceToUser > 999) ? ((marker.distanceToUser / 1000).toFixed(2) + " km") : (Math.round(marker.distanceToUser) + " m");

        $("#poi-detail-distance").html(marker.poiData.distance+" m");

        // show panel
        $("#panel-poidetail").panel("open", 123);

        $( ".ui-panel-dismiss" ).unbind("mousedown");

        $("#panel-poidetail").on("panelbeforeclose", function(event, ui) {
            World.currentMarker.setDeselected(World.currentMarker);
        });
    },

这是Activity显示Markers：

public class RealityActivity extends Activity {
    private Context context;

    private GestureDetector mGestureDetector;

    private ArchitectView architectView;

    private double lat = 0.0;
    private double lng = 0.0;

    public static final String WIKITUDE_SDK_KEY = "API_KEY";

    public long lastCalibrationToastShownTimeMillis = System.currentTimeMillis();

    public String url = "5_1/index.html";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.reality);
        getActionBar().hide();
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

        context = this;

        Bundle args = getIntent().getExtras();
        if (args != null) {
            lat = args.getDouble("lat");
            lng = args.getDouble("lng");
        }


        architectView = (ArchitectView) findViewById(R.id.architectView);
        final ArchitectView.ArchitectConfig config = new ArchitectView.ArchitectConfig(WIKITUDE_SDK_KEY);
        architectView.onCreate(config);
        architectView.registerSensorAccuracyChangeListener(sensorAccuracyChangeListener);

        mGestureDetector = createGestureDetector();
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        architectView.onPostCreate();

        try {
            architectView.load(url);

            activateArchitectView();
        } catch (IOException e) {
            Log.v("log", "Could not load architect: " + e.getMessage());
        }
    }

    ArchitectView.SensorAccuracyChangeListener sensorAccuracyChangeListener = new ArchitectView.SensorAccuracyChangeListener() {
        @Override
        public void onCompassAccuracyChanged(int accuracy) {
                /* UNRELIABLE = 0, LOW = 1, MEDIUM = 2, HIGH = 3 */
            if (accuracy < SensorManager.SENSOR_STATUS_ACCURACY_MEDIUM && !isFinishing() && System.currentTimeMillis() - lastCalibrationToastShownTimeMillis > 5 * 1000) {
                Log.v("log", "ArchitectView.SensorAccuracyChangeListener");
                lastCalibrationToastShownTimeMillis = System.currentTimeMillis();
            }
        }
    };

    private void activateArchitectView() {
        new Timer().schedule(new TimerTask() {

            @Override
            public void run() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        architectView.setLocation(lat, lng, 100);
                        String params = getPoiInformation().toString();

                        callJavaScript("World.loadPoisFromJsonData", new String[]{params});
                    }
                });

            }
        }, 3000);
    }

    private void callJavaScript(final String methodName, final String[] arguments) {
        final StringBuilder argumentsString = new StringBuilder("");
        for (int i = 0; i < arguments.length; i++) {
            argumentsString.append(arguments[i]);
            if (i < arguments.length - 1) {
                argumentsString.append(", ");
            }
        }

        if (this.architectView != null) {
            final String js = (methodName + "( " + argumentsString.toString() + " );");
            Log.v("log", "YER: " + js);
            this.architectView.callJavascript(js);
        }
    }

    private JSONArray getPoiInformation() {
        JSONArray pois = new JSONArray();

        List<MyModel> sliced = new ArrayList<MyModel>(FindModel.model);
        if (FindModel.model.size() > 10) {
            sliced = FindModel.model.subList(0, 10);
        }

        for (MyModel model : sliced) {
            HashMap<String, String> poi = new HashMap<String, String>();

            poi.put("id", String.valueOf(model.id));
            poi.put("name", model.name);
            poi.put("address", model.address);
            poi.put("distance", String.valueOf(((int) model.distance)));
            poi.put("lat", String.valueOf(model.lat));
            poi.put("lng", String.valueOf(model.lng));

            pois.put(new JSONObject(poi));
        }

        return pois;
    }


    @Override
    public void onLowMemory() {
        super.onLowMemory();
        if (architectView != null) {
            architectView.onLowMemory();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (architectView != null) {
            architectView.onResume();
            if (sensorAccuracyChangeListener != null) {
                architectView.registerSensorAccuracyChangeListener(sensorAccuracyChangeListener);
            }
        }
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (architectView != null) {
            architectView.onPause();
            if (sensorAccuracyChangeListener != null) {
                architectView.unregisterSensorAccuracyChangeListener(sensorAccuracyChangeListener);
            }
        }
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (architectView != null) {
            architectView.onDestroy();
        }
    }

    private GestureDetector createGestureDetector() {
        GestureDetector gestureDetector = new GestureDetector(context);
        //Create a base listener for generic gestures
        gestureDetector.setBaseListener( new GestureDetector.BaseListener() {
            @Override
            public boolean onGesture(Gesture gesture) {
                if (gesture == Gesture.TAP) {
                    // do something on tap
                    Toast.makeText(context, "TAP", Toast.LENGTH_SHORT).show();
                    return true;
                } else if (gesture == Gesture.TWO_TAP) {
                    // do something on two finger tap
                    Toast.makeText(context, "TWO_TAP", Toast.LENGTH_SHORT).show();
                    return true;
                } else if (gesture == Gesture.SWIPE_RIGHT) {
                    // do something on right (forward) swipe
                    Toast.makeText(context, "SWIPE_RIGHT", Toast.LENGTH_SHORT).show();
                    return true;
                } else if (gesture == Gesture.SWIPE_LEFT) {
                    // do something on left (backwards) swipe
                    Toast.makeText(context, "SWIPE_LEFT", Toast.LENGTH_SHORT).show();
                    return true;
                }
                return false;
            }
        });
        gestureDetector.setFingerListener(new GestureDetector.FingerListener() {
            @Override
            public void onFingerCountChanged(int previousCount, int currentCount) {
                // do something on finger count changes
            }
        });
        gestureDetector.setScrollListener(new GestureDetector.ScrollListener() {
            @Override
            public boolean onScroll(float displacement, float delta, float velocity) {
                // do something on scrolling"
                return false;
            }
        });
        return gestureDetector;
    }

    /*
     * Send generic motion events to the gesture detector
     */
    @Override
    public boolean onGenericMotionEvent(MotionEvent event) {
        if (mGestureDetector != null) {
            return mGestureDetector.onMotionEvent(event);
        }
        return false;
    }
}

这是index.html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<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">

<script src="architect://architect.js"></script>

<!-- positioning of poi-radar -->
<link rel="stylesheet" href="css/poi-radar.css" />

<!-- 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/presentingPoiDetails.js"></script>

<!-- radar component -->
<script type="text/javascript" src="js/radar.js"></script>

<script>

  $( document ).ready(function() {
      //alert("onReady");
      //console.log("onReady");
      //AR.logger.activateDebugMode();

      $("#log").css({ opacity: 0 });
      $("#footer").css({ opacity: 0 });


      $(document).click(function (e) { 
          //alert("click");
          if(e){
              console.log("onclick");
              alert(e);

          }
       });

      $('#log').click(function (e) { 
          if(e){
              console.log("onclick");
              var offset = $(this).offset();
              var left = e.clientX - offset.left);
              var top = e.clientY - offset.top);
                alert(left+":"+top);

          }
       });
  });



  </script>

</head>

<body>
    <div data-role="page" id="page1" style="background: none;">

        <!-- the radar div - Wikitude SDK radar will be drawn into this div -->
        <div class="radarContainer_left" id="radarContainer"></div>

        <div id="log" style="float: right;">log data</div>

        <!-- transparent footer-->
        <div id="footer" 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> <br />

            <!-- 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>

        <div 
            id="panel-poidetail" 
            data-role="panel" 
            data-position="right"
            data-display="overlay" 
            data-theme="a" >

                <div data-role="header">
                    <a href="#header" data-rel="close">Close</a>
                    <h1>Detay</h1>
                    <a href="javascript: World.onRotaClicked();">Path</a>
                </div>

                <div data-role="content">
                    <b>Cami<b> 
                    <br/>
                    <span id="poi-detail-title">Test Name</span>
                    <br/>
                    <br/>
                    <b>Test Address</b>
                    <br/>
                    <span id="poi-detail-description">Test Desc</span>
                    <br/>
                    <br/>
                    <b>Test Distance</b>
                    <br/>
                    <span id="poi-detail-distance">240 m</span>
                    <br/>
                    <br/>
                </div>

        </div>

    </div>

</body>

</html>