Start a new topic

How to get .wto file (object tracking ) from web service using android javascript API

Hi,

How to get .wto file (object tracking ) from web service using android javascript API?

Because on the Wikitude sample we need to import our .wto file.

All I need is my project can automatically get the new .wto file that I uploaded on my web service.


I'm using Wikitude SDK Android 8.10


Thanks


Hi,


From what i can see in your code, you are calling correctly the World.createTracker() in the init() function, but the objectData you are using does not exists. 


Another thing that i noticed is that the requestDataFromServer() function is not being called anywhere, so it would make sense that this is not working as the data is not requested.


One more thing i have to mention is that if you want to create object targets, I don't think you need a markerList, which is what you are using in the loadObjectsFromJsonData() function. Here, after calling the requestDataFromServer() method, i would fill the objectData variable (it should be declared outside), and then you would be able to use it in the createTracker() function.


var ServerInformation = {
    OBJECTDATA_SERVER: "https://.....",
    OBJECTDATA_SERVER_ARG_NAME: "nama_objek",
    OBJECTDATA_SERVER_ARG_DESC: "description"
};

var World = {
    loaded: false,
    objectData: [],
    drawables: [],

    init: function initFn() {
        World.requestDataFromServer();
        World.createTracker();
    },

    requestDataFromServer: function requestDataFromServerFn() {

            /* Set helper var to avoid requesting places while loading. */
            World.isRequestingData = true;
            World.updateStatusMessage('Requesting places from web-service');

            /* Server-url to JSON content provider. */
            var serverUrl = ServerInformation.OBJECTDATA_SERVER + "?" + ServerInformation.OBJECTDATA_SERVER_ARG_NAME + "=" +
                nama_objek + "&" + ServerInformation.OBJECTDATA_SERVER_ARG_DESC + "=" +
                description;

            var jqxhr = $.getJSON(serverUrl, function(data) {
                    World.loadPoisFromJsonData(data);
                })
                .error(function(err) {
                    World.updateStatusMessage("Invalid web-service response.", true);
                    World.isRequestingData = false;
                })
                .complete(function() {
                    World.isRequestingData = false;
                });
            },
    },

    loadObjectsFromJsonData: function loadObjectsFromJsonDataFn(data) {
            for (var currentObjectNr = 0; currentObjectNr < data.length; currentObjectNr++) {
                var singleObject = {
                    "id": data[currentObjectNr].id,
                    "nama_objek": data[currentObjectNr].nama_objek,
                    "description": data[currentObjectNr].description
                };

                World.objectData.push(singleObject);
            }
    },

    createTracker: function createTrackerFn() {
        this.targetCollectionResource = new AR.TargetCollectionResource("https://...../file_name.wto", {
            onError: World.onError
        });

        this.tracker = new AR.ObjectTracker(this.targetCollectionResource, {
            onError: World.onError
        });

        for (var i = 0; i < objectData.length; i++) {
                this.objectTrackable = new AR.ObjectTrackable(this.tracker, objectData[i].id, {
                    drawables: {
                        cam: createDescriptionDrawable(objectData[i].description,
                    },
                    onObjectRecognized: World.objectRecognized,
                    onObjectLost: World.objectLost,
                    onError: World.onError
                });
        }
    },

    objectRecognized: function objectRecognizedFn() {
        World.hideInfoBar();
        World.setAugmentationsEnabled(true);
    },

    objectLost: function objectLostFn() {
        World.setAugmentationsEnabled(false);
    },

    setAugmentationsEnabled: function setAugmentationsEnabledFn(enabled) {
        for (var i = 0; i < World.drawables.length; i++) {
            World.drawables[i].enabled = enabled;
        }
    },

    onError: function onErrorFn(error) {
        alert(error);
    },

    hideInfoBar: function hideInfoBarFn() {
        document.getElementById("infoBox").style.display = "none";
    },

    showInfoBar: function worldLoadedFn() {
        document.getElementById("infoBox").style.display = "table";
        document.getElementById("loadingMessage").style.display = "none";
    }
};

World.init();


I send you your code with some modifications. Hopefully it would make it clear for you. I did not see the createDescriptionDrawable() function anywhere but i assume you have it in other place.


Regards,


Aitor.

Hi, there i have the same problem like this. I have try it with online json hosting (the server) on this link : https://api.npoint.io/385a0e80d18cca44d8b3


and i have modify the code above to this code. about the createDescriptionDrawable() i just modify some code from the sample.

var ServerInformation = {
    OBJECTDATA_SERVER: "https://api.npoint.io/385a0e80d18cca44d8b3",
    OBJECTDATA_SERVER_ARG_NAME: "name",
    OBJECTDATA_SERVER_ARG_DESC: "description"
};

var World = {
    loaded: false,
    objectData: [],
    drawables: [],
    objectCenter: {
        x: 0,
        y: -0.14,
        z: 0
    },

    init: function initFn() {
        World.requestDataFromServer();
        World.createTracker();
        World.createDescriptionDrawable();
    },

    requestDataFromServer: function requestDataFromServerFn() {

        /* Set helper var to avoid requesting places while loading. */
        World.isRequestingData = true;
        World.updateStatusMessage('Requesting places from web-service');

        /* Server-url to JSON content provider. */
        var serverUrl = ServerInformation.OBJECTDATA_SERVER + "?" + ServerInformation.OBJECTDATA_SERVER_ARG_NAME + "=" +
            name + "&" + ServerInformation.OBJECTDATA_SERVER_ARG_DESC + "=" +
            description;

        var jqxhr = $.getJSON(serverUrl, function (data) {
                World.loadPoisFromJsonData(data);
            })
            .error(function (err) {
                World.updateStatusMessage("Invalid web-service response.", true);
                World.isRequestingData = false;
            })
            .complete(function () {
                World.isRequestingData = false;
            });
    },


    loadObjectsFromJsonData: function loadObjectsFromJsonDataFn(data) {
        for (var currentObjectNr = 0; currentObjectNr < data.length; currentObjectNr++) {
            var singleObject = {
                id: data[currentObjectNr].id,
                name: data[currentObjectNr].name,
                description: data[currentObjectNr].description,
                url: data[currentObjectNr].url
            };

            World.objectData.push(singleObject);
        }
    },

    createDescriptionDrawable: function createDescriptionDrawableFn() {
        var descDisctance = 0.2;

        var descObject = World.getCone(-descDisctance, +descDisctance);
        World.drawables.push(descObject);
    },

    getDescriptionDrawable: function getDescriptionDrawableFn(positionX, positionZ) {
        var descScale = 0.2;

        return new AR.Model(objectData.data.description, {
            scale: {
                x: descScale,
                y: descScale,
                z: descScale
            },
            translate: {
                x: positionX,
                y: World.objectCenter.y,
                z: positionZ
            },
            rotate: {
                x: -90
            },
            onError: World.onError
        });
    },


    createTracker: function createTrackerFn() {
        this.targetCollectionResource = new AR.TargetCollectionResource(objectData.data.url, {
            onError: World.onError
        });

        this.tracker = new AR.ObjectTracker(this.targetCollectionResource, {
            onError: World.onError
        });

        for (var i = 0; i < objectData.length; i++) {
            this.objectTrackable = new AR.ObjectTrackable(this.tracker, objectData[i].id, {
                drawables: {
                    cam: createDescriptionDrawable(objectData[i].description)
                },
                onObjectRecognized: World.objectRecognized,
                onObjectLost: World.objectLost,
                onError: World.onError
            });
        }
    },

    objectRecognized: function objectRecognizedFn() {
        World.hideInfoBar();
        World.setAugmentationsEnabled(true);
    },

    objectLost: function objectLostFn() {
        World.setAugmentationsEnabled(false);
    },

    setAugmentationsEnabled: function setAugmentationsEnabledFn(enabled) {
        for (var i = 0; i < World.drawables.length; i++) {
            World.drawables[i].enabled = enabled;
        }
    },

    onError: function onErrorFn(error) {
        alert(error);
    },

    hideInfoBar: function hideInfoBarFn() {
        document.getElementById("infoBox").style.display = "none";
    },

    showInfoBar: function worldLoadedFn() {
        document.getElementById("infoBox").style.display = "table";
        document.getElementById("loadingMessage").style.display = "none";
    }
};

World.init();

  

this is the index.html

 

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">

    <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />

    <title></title>

    <script src="https://www.wikitude.com/libs/architect.js"></script>
    <script type="text/javascript" src="../ade.js"></script>

    <link rel="stylesheet" href="css/default.css">
</head>

<body>

    <script src="js/objectreak.js"></script>
</body>

</html>

 
after i scan the object it's did't show anything. I don;t know where is my mistake, can you help me?

Regards,

Riken

Hi,


From what i can see in your code, the  World.createDescriptionDrawable(); function should be called before the  World.createTracker(); function. Additionally, the  cam:createDescriptionDrawable(objectData[i].description) should be replaced by  cam: World.drawables since the createDescriptionDrawable function is not returning any valid drawable. Make sure that the drawables you are creating are valid to be shown, because it won't show if they are not.


For more info take a look at:  https://www.wikitude.com/external/doc/documentation/latest/android/objecttracking.html#basic-object-tracking


Regards,


Aitor.

Hi Sarah,


For the .wto file you are right you should put the link on the TargetCollectionResource. For the .json file we don't provide anything to handle it, so it should be handled by yourself. This could be an example:


this.targetCollectionResource = new AR.TargetCollectionResource("file_name.wto", {
            onError: World.onError
        });

        this.tracker = new AR.ObjectTracker(this.targetCollectionResource, {
            onError: World.onError
        });

for (var i = 0; i < jsonItems.length; i++) {
        this.objectTrackable = new AR.ObjectTrackable(this.tracker, jsonItems[i].itemId, {
            drawables: {
                cam: createDescriptionDrawable(jsonItems[i].description,
            },
            onObjectRecognized: World.objectRecognized,
            onObjectLost: World.objectLost,
            onError: World.onError
        });
}


The previous code i sent is a modification of the SimpleObjectTracking sample that is in the example project we provide:  https://www.wikitude.com/download-wikitude-sdk-for-android/. The difference is, after you get the .json file in the javascript code, you can iterate it and create different objectTrackables depending of the id that it should be tracking from the .wto file. Once you know which item you have, you can add a drawable from it (in this case the description).


Regards,


Aitor.

Login or Signup to post a comment