Headband Overlays

headbandoverlays.js

var AvatarOverlays = Class.extend({

    _overlays: [],

    init: function() {

        console.log('AvatarOverlays::init');

        var key = utils.pid()+"_team";
        bus.addEventListener('SharedDataChange.team_0_0', this._onTeamChange, this);
        bus.addEventListener('SharedDataChange.team_0_1', this._onTeamChange, this);
        bus.addEventListener('SharedDataChange.team_0_2', this._onTeamChange, this);
        bus.addEventListener('SharedDataChange.team_0_3', this._onTeamChange, this);
        bus.addEventListener('SharedDataChange.team_1_0', this._onTeamChange, this);
        bus.addEventListener('SharedDataChange.team_1_1', this._onTeamChange, this);
        bus.addEventListener('SharedDataChange.team_1_2', this._onTeamChange, this);
        bus.addEventListener('SharedDataChange.team_1_3', this._onTeamChange, this);

        bus.addEventListener('showUserVideo', this.showScorer, this);

        this.loadOverlay('headband_team1');
        this.loadOverlay('headband_team2');

    },

    loadOverlay: function(teamColour) {

        var TeamColoursBaseUrl = '//gweb-plusexperiments-exp3.appspot.com/static/img/';
        var imgUrl = TeamColoursBaseUrl + teamColour + '.png';

        var imageResource = gapi.hangout.av.effects.createImageResource(imgUrl);

        // Create the overlay
        var overlay = imageResource.createFaceTrackingOverlay({
            trackingFeature: gapi.hangout.av.effects.FaceTrackingFeature.NOSE_ROOT,
            offset: {x: 0, y: -0.2},
            scale: 1.4,
            scaleWithFace: true,
            rotateWithFace: true
        });

        // hide the overlay initially
        overlay.setVisible(false);

        // store the overlay so we can access it later
        this._overlays[teamColour] = overlay;

    },

    loadGoalOverlay: function(colour) {

        var goalImgUrl = '//gweb-plusexperiments-exp3.appspot.com/static/img/goal_flash_' + colour + '.png';

        var goalImageResource = gapi.hangout.av.effects.createImageResource(goalImgUrl);

        var goalOverlay = goalImageResource.createOverlay({
            position: {x: 0, y: 0.4},
            scale: {magnitude: 1, reference: gapi.hangout.av.effects.ScaleReference.WIDTH}
        });

        this._overlays['goal_' + colour] = goalOverlay;

    },

    _onTeamChange: function(event)
    {

        var t0 = [
            sd.getValue("team_0_0"),
            sd.getValue("team_0_1"),
            sd.getValue("team_0_2"),
            sd.getValue("team_0_3")
        ];

        var t1 = [
            sd.getValue("team_1_0"),
            sd.getValue("team_1_1"),
            sd.getValue("team_1_2"),
            sd.getValue("team_1_3")
        ];

        this._hideAllOverlays();

        if ( t0.indexOf( utils.pid() ) != -1 ) {
            this._overlays['headband_team1'].setVisible(true);
        } else if ( t1.indexOf( utils.pid() ) != -1 ) {
            this._overlays['headband_team2'].setVisible(true);
        }
    },

    _hideAllOverlays: function() {
        for(var i in this._overlays)
        {
            if( this._overlays[i].isVisible() ) this._overlays[i].setVisible(false);
        }
    }

});