Google Glass Augmented Reality with Wikitude SDK

Question

I am playing with Augmented Reality using Wikitude SDK for Google GLASS and it works fine. The data are loaded as it is supposed and on marker click i am showing a sidebar on the android device, however i am facing an issue when i try to TAP a marker on google glass. Tapping marker on device works fine with Wikitude AR Android SDK but how can i do the same using Wikitude for Google Glass. As it is said in documentation the onMarkerSelectedfn function is the function which fires when a marker is selected on cam and yes that is working fine in the android device. But it is not working on google glass. Is there any special thing that i should do to work on Google glass too?

Shortly, how can i show details of the marker, on marker tap event, in another LiveCard or ImmersiveCard on Google Glass using Wikitude Augmented Reality SDK for Google Glass? or How to implement Browsing POI Presenting Details in that way that will work also in Google Glass?

onMarkerSelected: function onMarkerSelectedFn(marker) is the function triggered when POI Marker is selected.

Some sources that i found here describes same what i want to achieve however till that time this feature was not available on the SDK (i dont know if still not available as in documentation was not written). However any idea will be appriciated

Here is the WIkitude Google Glass Documentation

Here is the js function:

// 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);
        });
    },

Here is the Activity that shows the 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;
    }
}

and here is the index.html page:

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