Integrating data between Java and JavaScript within the Wikitude platform is essential for leveraging AR.RelativeLocation

After passing an integer from Java to JavaScript, I am attempting to use the value to adjust the altitude of an object.

I included the variable in RelativeLocation

var location = new AR.RelativeLocation(null, 8, 0, a);

The issue arises when it disregards the passed value of 10 and defaults to a value of 0. However, I can confirm that the correct value is being passed with this code:

var e = document.getElementById('loadingMessage').innerHTML = "Altitude: " + a;
, which displays Altitude: 10.

JavaScript code:

var World = {
    loaded: false,
    rotating: false,

    init: function initFn() {
        this.createModelAtLocation();
    },



    createModelAtLocation: function createModelAtLocationFn() {

        /*
            First a location where the model should be displayed will be defined. This location will be relative to the user.
        */
        var location = new AR.RelativeLocation(null, 8, 0, a);

        /*
            Next, the model object is loaded.
        */
        var modelArrow = new AR.Model("assets/arrow.wt3", {
                    onLoaded: this.worldLoaded,
                    scale: {
                        x: 0.005,
                        y: 0.005,
                        z: 0.003
                    },
                    rotate: {
                                    x: 0.0,
                                    y: 90.0,
                                    z: 0.0
                                  },
                                  translate: {
                                      x: 0,
                                      y: 0,
                                      z: 0
                                    }

                });



        var indicatorImage = new AR.ImageResource("assets/indi.png");

        var indicatorDrawable = new AR.ImageDrawable(indicatorImage, 0.1, {
            verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
        });

        /*
            Combining the location and 3D model to an AR.GeoObject.
        */
        var obj = new AR.GeoObject(location, {
            drawables: {
               cam: [modelArrow],
               indicator: [indicatorDrawable]
            }
        });
    },

    worldLoaded: function worldLoadedFn() {
        World.loaded = true;
        var e = document.getElementById('loadingMessage').innerHTML = "Altitude: " + a;
        e.parentElement.removeChild(e);
    }
};

    var a = 0;
    var altitude = 0;

       function setAltitude(altitude){
               a = altitude;
           }

World.init();

Following Alex's response:

Currently, both the object and altitude are not displaying; unsure if something is missing.

var World = {
    location: null,
    loaded: false,
    rotating: false,

    init: function initFn() {
        this.createModelAtLocation();
    },

    createModelAtLocation: function createModelAtLocationFn() {

        /*

            First a location where the model should be displayed will be defined. This location will be relativ to the user.
        */
        //var location = new AR.RelativeLocation(null, 8, 0, a);
        World.location = new AR.RelativeLocation(null, 8, 0, a);

        /*
            Next the model object is loaded.
        */
        var modelArrow = new AR.Model("assets/arrow.wt3", {
                    onLoaded: this.worldLoaded,
                    scale: {
                        x: 0.005,
                        y: 0.005,
                        z: 0.003
                    },
                    rotate: {
                                    x: 0.0,
                                    y: 90.0,
                                    z: 0.0
                                  },
                                  translate: {
                                      x: 0,
                                      y: 0,
                                      z: 0
                                    }

                });



        var indicatorImage = new AR.ImageResource("assets/indi.png");

        var indicatorDrawable = new AR.ImageDrawable(indicatorImage, 0.1, {
            verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
        });

        /*
            Putting it all together the location and 3D model is added to an AR.GeoObject.
        */
        var obj = new AR.GeoObject(location, {
            drawables: {
               cam: [modelArrow],
               indicator: [indicatorDrawable]
            }
        });
    },

    worldLoaded: function worldLoadedFn() {
        World.loaded = true;
        var e = document.getElementById('loadingMessage').innerHTML = "Altitude: " + a;
        e.parentElement.removeChild(e);
    }
};
    var a = 0;
    var altitude = 0;

       function setAltitude(altitude){
               //a = altitude;
               //World.location.altitudeDelta  = altitude;
               World.location.a = altitude;
           }

World.init();

Answer №1

Remember that the asynchronous nature of Model.onLoaded can affect the order of operations. It seems like the sequence is: initialize() -> createModelAtLocation() -> Java changes altitude -> worldLoaded().

To prevent this, you can take the following steps:

var Earth = {
    position: null,
    ...
    Earth.position = new AR.RelativePosition(null, 8, 0, a);
    ...
};

function changeAltitude(altitude){
   World.position.altitudeDelta = altitude;
}

Answer №2

After successfully resolving the issue, I am sharing the solution for anyone who might find it helpful:

var World = {
    //location: null,
    loaded: false,
    rotating: false,

    loadValuesFromJava: function loadValuesFromJavaFn(Altitude){
        a = Altitude;
        this.createModelAtLocation();
    },

    /*init: function initFn() {
        this.createModelAtLocation();
    },*/

    createModelAtLocation: function createModelAtLocationFn() {

        /*

            First a location where the model should be displayed will be defined. This location will be relativ to the user.
        */
        var location = new AR.RelativeLocation(null, 8, 0, a);
        //World.location = new AR.RelativeLocation(null, 8, 0, a);

        /*
            Next the model object is loaded.
        */
        var modelArrow = new AR.Model("assets/arrow.wt3", {
                    onLoaded: this.worldLoaded,
                    scale: {
                        x: 0.005,
                        y: 0.005,
                        z: 0.003
                    },
                    rotate: {
                                    x: 0.0,
                                    y: 90.0,
                                    z: 0.0
                                  },
                                  translate: {
                                      x: 0,
                                      y: 0,
                                      z: 0
                                    }

                });



        var indicatorImage = new AR.ImageResource("assets/indi.png");

        var indicatorDrawable = new AR.ImageDrawable(indicatorImage, 0.1, {
            verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
        });

        /*
            Putting it all together the location and 3D model is added to an AR.GeoObject.
        */
        var obj = new AR.GeoObject(location, {
            drawables: {
               cam: [modelArrow],
               indicator: [indicatorDrawable]
            }
        });
    },



    worldLoaded: function worldLoadedFn() {
        World.loaded = true;
        var e = document.getElementById('loadingMessage').innerHTML = "Altitude: " + a;
        e.parentElement.removeChild(e);
    }
};

var a = 0;
var Altitude = 0;
    /*var a = 0;
    var altitude = 0;

      function setAltitude(altitude){
               a = altitude;
               //World.location.altitudeDelta  = altitude;
               //World.location.altitudeDelta = altitude;
           }*/

//World.init();
//World.loadValuesFromJava();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Best practice for finding the parent element using Protractor

The recently released Guidelines advise against using the by.xpath() locators. I am making an effort to adhere to this suggestion, but I'm having difficulty locating a parent element. We are currently utilizing the .. XPath expression to access the p ...

What could be the reason for my component not getting the asynchronous data?

Currently, I am delving into the intricacies of React and have been following a tutorial that covers creating components, passing props, setting state, and querying an API using useEffect(). Feeling confident in my understanding up to this point, I decided ...

Oh no! It seems like the build script is missing in the NPM

https://i.stack.imgur.com/el7zM.jpg npm ERR! missing script: build; I find it strange, what could be causing this issue? Any suggestions? I have included the fullstack error with the package.json. Please also review the build.sh code below. Fullstack err ...

What techniques can I use to adjust the size of an image through zooming in and out?

In my custom gallery component, the crucial code section looks like this: <Gallery> <Header> <img src={galleryIcon} alt='Galley icon' /> <h1>My Gallery</h1> </Header> ...

Ensuring data accuracy with form validation and interactive features with Ajax using Vanilla

I am working on a form that requires validation before submission, and I need to display error notifications without refreshing the page. Below is the code for the form: <button name="save" type="submit" form="product_form" ...

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

What is the maximum file size that the data link is able to store?

For instance, a file like an image, video, or sound can be saved in the data link Take an image for example, it may be stored with the initial link: data:image/jpeg;base64,/..... followed by various characters. But, is there a specified size limit at whic ...

Activate PHP using javascript

My PHP script is designed to capture a user's IP address, current webpage, screen resolution, and Date/Time when they visit my website. To implement this tracking functionality on another website, I plan to insert the following line of code: <scr ...

What is the best way to retrieve the [id]/routeName in Next.js?

I'm working on a straightforward project where users visit links like: localhost:3000/course/[id]. Once they click join, the URL will transform to localhost:3000/course/[id]/routeName. How can I organize folders like that within pages? Thank you in ad ...

Localization of date picker in material-table(Material UI)

Does anyone have experience with localizing the date picker in material-table (Material UI)? The date picker is specifically used for filtering in this scenario. import React from 'react'; import MaterialTable from 'material-table'; fu ...

Is the term "filter" considered a reserved keyword in Angular, Javascript, or ASP.Net MVC?

When using angularJS to call an ASP.Net MVC controller from a service, I encountered an issue with one of the parameters: $http({ method: "get", url: "ControllerMethod", params: { param1: param1Value, pageNumber: pageNumber, ...

The navigation links in my React project are not appearing on the screen as expected

Hello everyone, I am relatively new to React and recently I have been attempting to utilize `react-router` in order to construct a Single Page Application. My goal is to link all the pages (such as Home, About, Login, etc) in the navigation bar using the & ...

Executing a Shortcode Using a Button in Visual Composer for Wordpress

It should be easy to do this. I've got a great plugin with a modal newsletter signup form that offers various launch options, including manual launching with the following codes. https://i.stack.imgur.com/IGbsp.png My theme utilizes Visual Composer. ...

The use of Bootstrap carousel indicators effectively controls event propagation

One way to achieve the desired effect is by implementing a solution like the one provided in this example from Bootstrap. When interacting with the indicators quickly, the animations can stack on top of each other, resulting in a strange chain of events. ...

Showing the advancement of a String[] in Android app

After parsing some XML, I have obtained a String[][]. However, I am encountering difficulties when trying to pass this array to the protected void onProgressUpdate(String... values) { method. I am struggling to extract the values from the array. Here is t ...

Join the nested object using the delimiter ';'

My objective is to concatenate all values from an object using a semi-colon as separator. This process works perfectly when the object consists of just one level: obj = { name: "one" additionalInfo: "hello" ... }; Object.values(obj).join(&ap ...

The system encountered an issue: "Property 'add' is not defined and cannot be read."

I'm facing a dilemma with my exercise. Despite the numerous inquiries regarding this problem, I haven't been able to find a solution. I am hopeful that you can provide some assistance! Below is the code snippet in question: let myDivs = docume ...

Tips for setting multiple states simultaneously using the useState hook

Exploring the use of multiple states handled simultaneously with the useState hook, let's consider an example where text updates based on user input: const {useState} = React; const Example = ({title}) => { const initialState = { name: &a ...

Experiencing difficulty with implementing an Angular filter to search through a list

Currently, I am utilizing an angular filter to search through a list. The searching functionality using the filter works as expected. However, I have encountered an issue with a checkbox labeled 'Select All'. When I search through the list and on ...

What would be the counterpart of setLocale in Yup for the zod library?

How can I set default custom error messages for Zod validation? If I want to use i18n for error messages in Yup, I would do the following: import { t } from "i18next"; import * as yup from "yup"; import "./i18next"; yup.setL ...