Wikitude

Javascript

Help

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

    init: function initFn() {
        /* Disable all sensors in "IR-only" Worlds to save performance. If the property is set to true, any geo-related components (such as GeoObjects and ActionRanges) are active. If the property is set to false, any geo-related components will not be visible on the screen, and triggers will not fire.*/
        AR.context.services.sensors = false;
        this.createOverlays();
    },

    createOverlays: function createOverlaysFn() {
        // Initialize Tracker
        var tracker = new AR.Tracker("res/screen/Target.wtc", {
            onLoaded: this.loadingStep
        });
        
        var video = new AR.VideoDrawable("res/screen/thaepicbattle3.mp4", {
            OffsetX: 0.2,
            offsetY: 0.2,
                
                onLoaded: this.loadingStep,
                onLoaded: function videoLoaded() {
                playButton.enabled = true;
            },
            onPlaybackstarted: function videoPlaying () {
                playButton.enabled = false;
                video.enabled = true;
            },
            onFinishedPlaying: function videoFinished () {
                playButton.enabled = true;
                video.playing = false;
                video.enabled = true;
            },
            onClick: function videoClicked () {
                if (video.playing) {
                    video.pause ();
                    video.playing = false;
                    playButton.enabled = true;
                } else {
                    video.resume();
                    video.playing = true;
                    playButton.enabled = true;
                }
            },
        });

    var playButtonImg = new AR.ImageResource("img/playbutton.png");
    var playButton = new AR.ImageDraweble(playbuttonImg, 0.2, {
            enabled: false,
            onClick: function playButtonClicked() {
                video.play(1);
                video.playing = true;
            },
            OffsetX: video.offsetX,
            offsetY: video.offsetY
        
        
        });

        var trackable = new AR.Trackable2DObject(this.tracker, "3D-Wallpaper-HD", {
            drawables: {
                cam:
            },
            
            onClick: function() {
                World.video.start(-1);
            },
                onEnterFieldOfVision: function onEnterFieldOfViewFn () {
                    if (video.playing) {
                        video.pause ();
                    }
                },
                onExitFieldofVision: function onExitFieldofVieuw () {
                    if (video.playing) {
                        video.resume ();
                    }
    }
            
        });

    },
    loadingStep: function loadingStepFn() {
        if (!World.loaded && World.tracker.isLoaded() && World.video.isLoaded()) {
            World.loaded = true;
            var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
            var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";
            document.getElementById('loadingMessage').innerHTML =
                "<div" + cssDivLeft + "></div>" +
                "<div" + cssDivRight + "></div>";
        }
    }
};

World.init();