overte/examples/libraries/walkInterface.js

//
//  walkInterface.js
//
//  version 2.0
//
//  Created by David Wooldridge, Autumn 2014
//
//  Presents the UI for the walk.js script v1.12
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//

walkInterface = (function() {

    // references to walk.js objects
    var _motion = null;
    var _walkAssets = null;

    // controller UI element positions and dimensions
    var _backgroundWidth = 350;
    var _backgroundHeight = 700;
    var _backgroundX = Window.innerWidth - _backgroundWidth - 58;
    var _backgroundY = Window.innerHeight / 2 - _backgroundHeight / 2;
    var _bigButtonsY = 348;

    // Load up the overlays
    var _buttonOverlays = [];

    // ui minimised tab
    var _controlsMinimisedTab = Overlays.addOverlay("image", {
        x: Window.innerWidth - 58,
        y: Window.innerHeight - 145,
        width: 50, height: 50,
        imageURL: pathToAssets + 'overlay-images/minimised-tab.png',
        visible: true, alpha: 0.9
    });

    // ui background
    var _controlsBackground = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX,
            y: _backgroundY,
            width: _backgroundWidth,
            height: _backgroundHeight
        },
        imageURL: pathToAssets + "overlay-images/background.png",
        alpha: 1, visible: false
    });

    // button overlays
    var _controlsMinimiseButton = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth - 62,
            y: _backgroundY + 40,
            width: 25, height: 25
        },
        imageURL: pathToAssets + "overlay-images/minimise-button.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_controlsMinimiseButton);

    var _onButton = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/power-button-selected.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_onButton);

    var _offButton = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/power-button.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_offButton);

    var _femaleButton = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY + 60,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/female-button.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_femaleButton);

    var _femaleButtonSelected = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY + 60,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/female-button-selected.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_femaleButtonSelected);

    var _maleButton = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY + 120,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/male-button.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_maleButton);

    var _maleButtonSelected = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY + 120,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/male-button-selected.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_maleButtonSelected);

    var _armsFreeButton = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY + 180,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/arms-free-button.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_armsFreeButton);

    var _armsFreeButtonSelected = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY + 180,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/arms-free-button-selected.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_armsFreeButtonSelected);

    var _footstepsButton = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY + 240,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/footstep-sounds-button.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_footstepsButton);

    var _footstepsButtonSelected = Overlays.addOverlay("image", {
        bounds: {
            x: _backgroundX + _backgroundWidth / 2 - 115,
            y: _backgroundY + _bigButtonsY + 240,
            width: 230, height: 36
        },
        imageURL: pathToAssets + "overlay-images/footstep-sounds-button-selected.png",
        alpha: 1, visible: false
    });
    _buttonOverlays.push(_footstepsButtonSelected);


    function minimiseDialog(minimise) {

        Overlays.editOverlay(_controlsBackground, {visible: !minimise});
        Overlays.editOverlay(_controlsMinimisedTab, {visible: minimise});
        Overlays.editOverlay(_controlsMinimiseButton, {visible: !minimise});

        if(_state.powerOn) {

            Overlays.editOverlay(_onButton, {visible: !minimise});
            Overlays.editOverlay(_offButton, {visible: false});

        } else {

            Overlays.editOverlay(_onButton, {visible: false});
            Overlays.editOverlay(_offButton, {visible: !minimise});

        }
        if (_motion.avatarGender === FEMALE) {

            Overlays.editOverlay(_femaleButtonSelected, {visible: !minimise});
            Overlays.editOverlay(_femaleButton, {visible: false});
            Overlays.editOverlay(_maleButtonSelected, {visible: false});
            Overlays.editOverlay(_maleButton, {visible: !minimise});

        } else {

            Overlays.editOverlay(_femaleButtonSelected, {visible: false});
            Overlays.editOverlay(_femaleButton, {visible: !minimise});
            Overlays.editOverlay(_maleButtonSelected, {visible: !minimise});
            Overlays.editOverlay(_maleButton, {visible: false});
        }
        if (_motion.armsFree) {

            Overlays.editOverlay(_armsFreeButtonSelected, {visible: !minimise});
            Overlays.editOverlay(_armsFreeButton, {visible: false});

        } else {

            Overlays.editOverlay(_armsFreeButtonSelected, {visible: false});
            Overlays.editOverlay(_armsFreeButton, {visible: !minimise});
        }
        if (_motion.makesFootStepSounds) {

            Overlays.editOverlay(_footstepsButtonSelected, {visible: !minimise});
            Overlays.editOverlay(_footstepsButton, {visible: false});

        } else {

            Overlays.editOverlay(_footstepsButtonSelected, {visible: false});
            Overlays.editOverlay(_footstepsButton, {visible: !minimise});
        }
    };

    // mouse event handler
    function mousePressEvent(event) {

        var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});

        switch (clickedOverlay) {

            case _controlsMinimiseButton:

                minimiseDialog(true);
                _state.setInternalState(_state.STANDING);
                return;

            case _controlsMinimisedTab:

                minimiseDialog(false);
                _state.setInternalState(_state.STANDING);
                return;

            case _onButton:

                _state.powerOn = false;
                Overlays.editOverlay(_offButton, {visible: true});
                Overlays.editOverlay(_onButton, {visible: false});
                _state.setInternalState(state.STANDING);
                return;

            case _offButton:

                _state.powerOn = true;
                Overlays.editOverlay(_offButton, {visible: false});
                Overlays.editOverlay(_onButton, {visible: true});
                _state.setInternalState(state.STANDING);
                return;


            case _footstepsButton:

                _motion.makesFootStepSounds = true;
                Overlays.editOverlay(_footstepsButtonSelected, {visible: true});
                Overlays.editOverlay(_footstepsButton, {visible: false});
                return;

            case _footstepsButtonSelected:

                _motion.makesFootStepSounds = false;
                Overlays.editOverlay(_footstepsButton, {visible: true});
                Overlays.editOverlay(_footstepsButtonSelected, {visible: false});
                return;

            case _femaleButton:
            case _maleButtonSelected:

                _motion.setGender(FEMALE);
                Overlays.editOverlay(_femaleButtonSelected, {visible: true});
                Overlays.editOverlay(_femaleButton, {visible: false});
                Overlays.editOverlay(_maleButton, {visible: true});
                Overlays.editOverlay(_maleButtonSelected, {visible: false});
                return;

            case _maleButton:
            case _femaleButtonSelected:

                _motion.setGender(MALE);
                Overlays.editOverlay(_femaleButton, {visible: true});
                Overlays.editOverlay(_femaleButtonSelected, {visible: false});
                Overlays.editOverlay(_maleButtonSelected, {visible: true});
                Overlays.editOverlay(_maleButton, {visible: false});
                return;

            case _armsFreeButton:

                _motion.armsFree = true;
                Overlays.editOverlay(_armsFreeButtonSelected, {visible: true});
                Overlays.editOverlay(_armsFreeButton, {visible: false});
                return;

            case _armsFreeButtonSelected:

                _motion.armsFree = false;
                _motion.poseFingers();
                Overlays.editOverlay(_armsFreeButtonSelected, {visible: false});
                Overlays.editOverlay(_armsFreeButton, {visible: true});
                return;
        }
    };

    Controller.mousePressEvent.connect(mousePressEvent);

    // delete overlays on script ending
    Script.scriptEnding.connect(function() {

        // delete overlays
        Overlays.deleteOverlay(_controlsBackground);
        Overlays.deleteOverlay(_controlsMinimisedTab);
        for (var i in _buttonOverlays) {
            Overlays.deleteOverlay(_buttonOverlays[i]);
        }
    });

    // public method
    return {

        // gather references to objects from the walk.js script
        initialise: function(state, motion, walkAssets) {

            _state = state;
            _motion = motion;
            _walkAssets = walkAssets;
        }

    }; // end public methods (return)

})();