Panolens fit to screen

21/06/2019 #panolens #WebVR #360VR

Fit to screen

전체화면 기능이 브라우저에 따라 동작이 다르고 사용자의 브라우저 설정에 따라 실행 결과가 다르다.

테스트 서버에서 iframe으로 작업을 하고 있어서 버튼을 누르면 iframe의 크기를 화면에 꽉 차도록 구현하려한다.

Widget에 fitToScreenElement를 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/**
 * Widget for controls
 * @constructor
 * @param {HTMLElement} container - A domElement where default control widget will be attached to
 */
PANOLENS.Widget = function ( container ) {
 
    THREE.EventDispatcher.call( this );
 
    this.DEFAULT_TRANSITION  = 'all 0.27s ease';
    this.TOUCH_ENABLED = PANOLENS.Utils.checkTouchSupported();
    this.PREVENT_EVENT_HANDLER = function ( event ) {
        event.preventDefault();
        event.stopPropagation();
    };
 
    this.container = container;
 
    this.barElement;
    this.fullscreenElement;
    this.videoElement;
    this.settingElement;
    
    /*
     * 작성자: silqwer
     * 설명: 나침판
     */
    this.compassElement; 
    /*
     * 작성자: silqwer
     * 설명: 새창으로 열기
     */
    this.newWindow; 
 
    /*
     * 작성자: silqwer
     * 설명: 화면에 맞추기
     */
    this.fitToScreenElement; 
    
    this.mainMenu;
 
    this.activeMainItem;
    this.activeSubMenu;
    this.mask;
 
}
cs

Widget의 addControlBar에 fitToScreenElement 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/**
 * Add control bar
 */
PANOLENS.Widget.prototype.addControlBar = function () {
 
    if ( !this.container ) {
 
        console.warn( 'Widget container not set' ); 
        return; 
    }
 
    var scope = this, bar, styleTranslate, styleOpacity, gradientStyle;
 
    gradientStyle = 'linear-gradient(bottom, rgba(0,0,0,0.2), rgba(0,0,0,0))';
 
    bar = document.createElement( 'div' );
    bar.style.width = '100%';
    bar.style.height = '44px';
    bar.style.float = 'left';
    bar.style.transform = bar.style.webkitTransform = bar.style.msTransform = 'translateY(-100%)';
    bar.style.background = '-webkit-' + gradientStyle;
    bar.style.background = '-moz-' + gradientStyle;
    bar.style.background = '-o-' + gradientStyle;
    bar.style.background = '-ms-' + gradientStyle;
    bar.style.background = gradientStyle;
    bar.style.transition = this.DEFAULT_TRANSITION;
    bar.style.pointerEvents = 'none';
    bar.isHidden = false;
    bar.toggle = function () {
        bar.isHidden = !bar.isHidden;
        styleTranslate = bar.isHidden ? 'translateY(0)' : 'translateY(-100%)';
        styleOpacity = bar.isHidden ? 0 : 1;
        bar.style.transform = bar.style.webkitTransform = bar.style.msTransform = styleTranslate;
        bar.style.opacity = styleOpacity;
    };
 
    // Menu
    var menu = this.createDefaultMenu();
    this.mainMenu = this.createMainMenu( menu );
    bar.appendChild( this.mainMenu );
 
    // Mask
    var mask = this.createMask();
    this.mask = mask;
    this.container.appendChild( mask );
 
    // Dispose 배치
    bar.dispose = function () {
 
        if ( scope.fullscreenElement ) {
 
            bar.removeChild( scope.fullscreenElement );
            scope.fullscreenElement.dispose();
            scope.fullscreenElement = null;
 
        }
 
        if ( scope.settingElement ) {
 
            bar.removeChild( scope.settingElement );
            scope.settingElement.dispose();
            scope.settingElement = null;
 
        }
 
        if ( scope.videoElement ) {
 
            bar.removeChild( scope.videoElement );
            scope.videoElement.dispose();
            scope.videoElement = null;
 
        }
        
        /*
             * 작성자: silqwer
             * 설명: 나침판 배치
             */
            if (scope.compassElement) {
                bar.removeChild( scope.compassElement );
                scope.compassElement.dispose();
                scope.compassElement = null;
            }
            
            /*
             * 작성자: silqwer
             * 설명: 새창으로 열기
             */
            if (scope.newWindowElement) {
                bar.removeChild( scope.newWindowElement );
                scope.newWindowElement.dispose();
                scope.newWindowElement = null;
            }
            
            /*
             * 작성자: silqwer
             * 설명: 화면에 꽉 채우기
             */
            if(scope.fitToScreenElement) {
                bar.removeChild( scope.fitToScreenElement );
                scope.fitToScreenElement.dispose();
                scope.fitToScreenElement = null;
            }
            
 
        };
 
        this.container.appendChild( bar );
 
        // Mask events
        this.mask.addEventListener( 'mousemove', this.PREVENT_EVENT_HANDLER, true );
        this.mask.addEventListener( 'mouseup', this.PREVENT_EVENT_HANDLER, true );
        this.mask.addEventListener( 'mousedown', this.PREVENT_EVENT_HANDLER, true );
        this.mask.addEventListener( scope.TOUCH_ENABLED ? 'touchend' : 'click', function ( event ) {
 
            event.preventDefault();
            event.stopPropagation();
 
            scope.mask.hide();
            scope.settingElement.deactivate();
 
        }, false );
 
        // Event listener
        this.addEventListener( 'control-bar-toggle', bar.toggle );
 
        this.barElement = bar;
 
    };
cs

Widget의 addControlButton에 fitToScreenElement 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/**
 * Add buttons on top of control bar
 * @param {string} name - The control button name to be created
 */
PANOLENS.Widget.prototype.addControlButton = function ( name ) {
 
    var element;
 
    switch( name ) {
 
        case 'fullscreen':
 
            element = this.createFullscreenButton();
            this.fullscreenElement = element; 
 
            break;
 
        case 'setting':
 
            element = this.createSettingButton();
            this.settingElement = element;
 
            break;
 
        case 'video':
 
            element = this.createVideoControl();
            this.videoElement = element;
 
            break;
        
        /*
         * 작성자: silqwer
         * 설명: 나침판 생성
         */
        case 'compass':
            element = this.createCompass();
            this.compassElement = element;
            
            break;
        
        /*
         * 작성자: silqwer
         * 설명: 새창으로 열기
         */
        case 'newWindow':
            element = this.createNewWindow();
            this.newWindowElement = element;
            
            break;
            
        /*
         * 작성자: silqwer
         * 설명: 화면 채우기
         */
        case 'fitToScreen':
            element = this.createFitToScreen();
            this.fitToScreenElement = element;
            
            break;
            
            
 
        default:
 
            return;
 
    }
 
    if ( !element ) {
 
        return;
 
    }
 
    this.barElement.appendChild( element );
 
};
cs

createFitToScreen 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/*
 * 작성자: silqwer
 * 설명: 화면 채우기
 */
PANOLENS.Widget.prototype.createFitToScreen = function () {
 
    var scope = this;
 
    function onTap ( event ) {
        
        var iframe = parent.document.getElementsByTagName('iframe')[0];
        if(!scope.isFit){
            
            var width = parent.window.innerWidth || parent.document.body.clientWidth;
            var height = parent.window.innerHeight || parent.document.body.clientHeight;
        
            iframe.setAttribute('width', width);
            iframe.setAttribute('height', height);
            
            scope.isFit = true;
            
        }else{
            
            iframe.setAttribute('width', 250);
            iframe.setAttribute('height', 200);
            
            scope.isFit = false;
        }
        
        // 전체화면 버튼 이미지 변경
        this.style.backgroundImage = ( scope.isFit ) 
            ? 'url("' + PANOLENS.DataImage.FullscreenLeave + '")' 
            : 'url("' + PANOLENS.DataImage.FullscreenEnter + '")';
        
    };
 
    var item = this.createCustomItem( { 
 
        style : { 
 
            float : 'right',
            backgroundImage : 'url("' + PANOLENS.DataImage.FullscreenEnter + '")',
            
        },
        
        onTap : onTap
 
    } );
 
    return item;
 
};
cs

적당한 아이콘을 찾지 못해서 기존에 전체화면에서 사용하고 있는 아이콘을 가져다 사용했다.

결과

f1