Panolens control button

30/05/2019 #panolens #WebVR #360VR

컨트롤 버튼은 어디서 만드나?

전체화면으로 전환하는 이벤트말고 이런 버튼을 어디서 만드는지 분석해서 내가 만든 버튼을 추가하거나 포지션을 변경하는 작업이 향후 필요해보인다.

컨트롤 버튼(controlButtons)을 따라가면 addDefaultControlBar를 실행시킨다.

addDefaultControlBar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * Add default control bar
 * @param {array} array - The control buttons array
 */
PANOLENS.Viewer.prototype.addDefaultControlBar = function ( array ) {
    var scope = this;
    if ( this.widget ) {
        console.warn( 'Default control bar exists' );
        return;
    }
    this.widget = new PANOLENS.Widget( this.container );
    this.widget.addEventListener( 'panolens-viewer-handler', this.eventHandler.bind( this ) );
    this.widget.addControlBar();
    array.forEach( function( buttonName ){
        scope.widget.addControlButton( buttonName );
    } );
};
cs

Widget을 생성하고 다시 addControlButton을 호출하며 배열에 있는 버튼 이름을 넘긴다.

addControlButton

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
/**
 * 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;
 
        default:
 
            return;
 
    }
 
    if ( !element ) {
 
        return;
 
    }
 
    this.barElement.appendChild( element );
 
};
cs

버튼 이름에 따라서 fullscreen은 createFullscreenButton, setting은 createSettingButton, video는 createVideoControl를 호출하고 element를 만들어서 barElement에 appendChild 시킨다.