Start a new topic

How to display an image as a description of an object recognized?

Hi my goal to reach is to have an image used as a description of an object recognized but this image have to be anchored in the same position of the screen whenever the camera is turning around the object, is that possible? 

I've tried with ObjectTrackable plus ImageDrawable but the image is anchored with a specific part of the object.

This is the script:

var World = {

    loaded: false,

    drawables_battery: [],

    drawables_spray: [],

    objectLength: 0.5,

    objectHeight: 0.28,


    init: function initFn() {

        World.createImage();

        World.createTracker();

    },


    createImage: function createImageFn() {

        var imagePosX = -this.objectLength * 0.45;

        var imagePosY = this.objectHeight * 0.7;

        var imagePosZ = this.objectLength * 0.15;

        var path1 = "assets/batteria.png";

        var path2 = "assets/spray.png";


        var imageBattery = World.getImage(imagePosX, imagePosY, imagePosZ,path1);

        var imageSpray = World.getImage(imagePosX, imagePosY, imagePosZ,path2);


        World.drawables_battery.push(imageBattery);

        World.drawables_spray.push(imageSpray);

    },


    getImage: function getImageFn(positionX, positionY, positionZ,path) {

        var imageScale = 3 * this.objectLength;

        var imageResource = new AR.ImageResource(path, {

            onError: World.onError

        });


        return new AR.ImageDrawable(imageResource, imageScale, {

            /*

            translate: {

                x: positionX * 3.5

            }

            */

                horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.LEFT,

 

                verticalAnchor: AR.CONST.VERTICAL_ANCHOR.MIDDLE

        });

    },

    

    createTracker: function createTrackerFn() {

        this.targetCollectionResource = new AR.TargetCollectionResource("assets/test1_tracker.wto", {

            onError: World.onError

        });


        this.tracker = new AR.ObjectTracker(this.targetCollectionResource, {

            onTargetsLoaded: World.showInfoBar,

            onError: World.onError

        });


        this.batteriaTrackable = new AR.ObjectTrackable(this.tracker,"battery", {

            drawables: {

                cam: World.drawables_battery

            },

            onObjectRecognized: World.batteryRecognized,

            onObjectLost: World.objectLost,

            onError: World.onError

        });


        this.sprayTrackable = new AR.ObjectTrackable(this.tracker,"spray", {

            drawables: {

                cam: World.drawables_spray

            },

            onObjectRecognized: World.sprayRecognized,

            onObjectLost: World.objectLost,

            onError: World.onError

        });

    },



    batteryRecognized: function batteryRecognizedFn() {

        World.hideInfoBar();

        World.setAugmentationsEnabled(true,"battery");

    },


    sprayRecognized: function sprayRecognizedFn() {

        World.hideInfoBar();

        World.setAugmentationsEnabled(true,"spray");

    },


    objectLost: function objectLostFn() {

        World.showInfoBar();

        World.setAugmentationsEnabled(false,"all") 

    },


    setAugmentationsEnabled: function setAugmentationsEnabledFn(enabled,target) {

        if(target== "battery"){

            for (var i = 0; i < World.drawables_battery.length; i++) {

                World.drawables_battery[i].enabled = enabled;

            }

        }

        if(target== "sparay"){

            for (var i = 0; i < World.drawables_spray.length; i++) {

                World.drawables_spray[i].enabled = enabled;

            }

  }

        if(target == "all"){

            for (var i = 0; i < World.drawables_battery.length; i++) {

                World.drawables_battery[i].enabled = enabled;

            }

            for (var i = 0; i < World.drawables_spray.length; i++) {

                World.drawables_spray[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";

    }

};

An example of application could be the Extended Object Recognition showed in the video at 2:20 https://www.youtube.com/watch?v=rjmZE0VkJWM.

Thanks for help!

1 Comment

Hi Francesco,


It is true that the ImageDrawable follows the object you are tracking since it is linked to it. 


What I think you need is a more simple implementation: first create an html element in your html file with some text inside that is hidden from the beginning (display: none in css), show it once the object is recognized and hide it when the object is lost. This html element could be positioned where you want on the screen with some css and always be in that position as long as you are tracking the object.


Hope this solution is helpful for you,


Best regards,


Aitor.

Login or Signup to post a comment