[카테고리:] 미분류

사용자에게 정보를 전달하거나 의사를 묻는 gwcMessage와 gwcConfirm API에 어떤 메세지를 넣을 수 있습니다. 텍스트 메세지 뿐만 아니라 다양한 요소를 담을 수 있는데.. 그 중 차트를 넣기 위한 코드를 정리합니다. 참고로 차트는 gwc 라이브러리 요소가 아닌 chart.js라는 별도의 외부 라이브러리를 사용합니다.

먼저 만들고자 하는 UI는 다음 영상과 같습니다.

먼저 DOM 구성은 다음과 같습니다.

JS 코드는 다음과 같습니다.

window.onload = () => {
    button.onclick = event => { 
        const html = `
            

                
            
        `;

        const dlg = gwcConfirm(html, 
            () => { gwcMessage("'예'라고 답하다.") }, 
            () => { gwcMessage("'아니오'라고 답하다.", true) }, 
            () => { gwcMessage("'취소'라고 답하다.")} 
        );

        const ctx = dlg.querySelector("canvas");
        
        const config = {
            type: 'line',
            data: {
                labels: ['빨강', 'Blue', 'Yellow', '초록', 'Purple', '오렌지'],
                datasets: [
                    {
                        label: '색상',
                        data: [7, 8, 5, 3, 2, 6],
                        backgroundColor: 'yellow',
                        borderColor: 'yellow',
                        borderWidth: 2
                    },
                    {
                        label: 'Color',
                        data: [6, 7, 6, 4, 3, 5],
                        backgroundColor: 'red',
                        borderColor: 'red',
                        borderWidth: 2
                    }
                ]
            },
            options: {
                maintainAspectRatio: false,
            }
        }

        const chart = new Chart(ctx, config);

        setInterval(() => {
            const datasets = config.data.datasets;
            for (let iDataset = 0; iDataset < datasets.length; iDataset++) {
                const data = datasets[iDataset].data;
                for (let iValue = 0; iValue < data.length; iValue++) {
                    data[iValue] += Math.random() * 0.4 - 0.2;
                }
            }
            chart.update();
        }, 10);

    };
};

코드가 상당히 긴데... 3~15 라인만 gwc에 대한 코드이고 나머지 전부는 차트 구성을 위한 코드입니다.

CSS 코드는 다음과 같습니다.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

.chart-layout {
    width: 600px;
    height: 400px;
}

건물 내부에 대한 정확 정보는 해당 건물에 대한 설계 도면입니다. 설계 도면 파일은 아래와 같은 CAD 도면(예시)을 이용하는데요.

위와 같은 도면을 아래처럼 3차원 모델로 제작할 수 있습니다.

위와 같이 제작된 3차원 모델 데이터를 웹에서 시각화하고 사용자 인터렉션을 통해 공간 상에서 원하는 위치로 이동할 수 있습니다.

크기 조절이 가능한 gwc-resizable-panel 태그를 이용한 사이드 패널을 구성하면 이 패널 안에 내용이 많아 수직으로 스크롤해야 할 경우 gwc-vscrollview 태그를 자식으로 두는 경우에 대한 코드를 정리합니다.

위의 화면 중 노란색 영역이 gwc-resizable-panel이고 초록 영역이 자식인 gwc-vscrollview 입니다.

사이드 패널에 대한 JS 코드는 다음과 같습니다.

class SearchResultUI {
    constructor() {
        const domLayout = document.createElement("div");
        domLayout.classList.add("search-result-ui");

        domLayout.innerHTML = `
            
                
 
                    
0
                    
0
                    
0
                    
                    
                
                
                    
                        

                    
                
            
        `;

        document.body.appendChild(domLayout);

        GeoServiceWebComponentManager.instance.update();
    }
}

7번의 gwc-resizable-panel의 resizable-left와 min-width는 각각 패널의 왼쪽 모서리를 이용해 크기를 조절할 수 있고, 패널의 가로 크기는 최소 200px를 유지해야 한다는 것입니다. min-width 값의 단위는 px이며 값을 지정할 때는 단위를 지정하지 않습니다./p>

해당되는 CSS는 다음과 같습니다.

.search-result-ui > gwc-resizable-panel {
    box-shadow:  0 0 2px rgb(0 0 0 / 50%), 0 0 10px rgb(0 0 0 / 50%);;
    left: calc(100% - 20em); /* width 값만큼 빼줘야 함 */
    right: 0;
    top: 3em;
    width: 20em;
    height: calc(100vh - 3em); /* 패널 위에 공간이 3em 임 */
    _opacity: 0.8;
}

.search-result-ui > gwc-resizable-panel > .search-result-header {
    height: 2.6em;
    ...
}

...

.search-result-ui > gwc-resizable-panel gwc-vscrollview {
    width: 100%;
    background: rgba(20,20,20,1);
    height: calc(100% - 2.6em); /* 스크롤 영역 위의 공간이 2.6em 임 */
}

.search-result-ui > gwc-resizable-panel .search-result-content {
    padding: 0.4em;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

아래의 영상은 위의 UI가 반영된 실제 구동 영상입니다. 패널에 대한 크기 조절 등의 사용자 인터렉션을 파악할 수 있습니다.