본문으로 건너뛰기

Getting Started

VIZCore2D의 시작페이지를 구성하고 로컬에서 실행할 수 있습니다.

시작페이지 구성하기​

노트

VIZCore2D는 Webpack 번들로 제공됩니다.
CSS 및 View 영역 생성이 스크립트 내에서 처리되므로
HTML에서 별도로 <link> 태그나 <div> 요소를 추가할 필요가 없습니다.

1️⃣ HTML 파일에 Script 추가​

<script type="module">
  import VIZCore2DModule from "./VIZCore2D/VIZCore2D.js";

  // View 영역 생성
  let main = document.createElement('div');
  main.className = "VIZWeb_Main";

  let view = document.createElement('div');
  view.id = "view";
  view.className = "VIZCore2D";
  main.appendChild(view);
  document.body.appendChild(main);

  // VIZCore2D 인스턴스 생성
  const vizcore2d = new VIZCore2DModule(view);

  // VIZCore2D 환경설정 이벤트
  let onConfiguration = () => {
    // UI 타입 설정 (RIBBONBAR 또는 TOOLBAR)
    vizcore2d.Configuration.Type = vizcore2d.Enum.UI_TYPE.TOOLBAR;

    // 라이선스 서버 설정
    let licenseInfo = vizcore2d.Config.GetLicenseInfo();
    licenseInfo.url = 'http://127.0.0.1:8901';
    vizcore2d.Config.SetLicenseInfo(licenseInfo);
  };

  // VIZCore2D 초기화 완료 이벤트
  let onInitialize = () => {
    console.log('[VIZCore2D] : Initialize!');

    const onload = (e) => {
      console.log("onload", e);
    };

    const onerror = () => {
      console.log("onerror");
    };

    // vizx2d 모델 파일 열기
    vizcore2d.Model.OpenFile(
      "./model/Sample.vizx2d",
      onload,
      onerror
    );
  };

  vizcore2d.Init({
    event: {
      onInit: onInitialize,
      onConfiguration: onConfiguration,
    },
  });
</script>

라이선스 서버 연결 방법​

노트

라이선스 서버 기본 포트는 8901 입니다.

라이선스 서버 주소는 onConfiguration 이벤트 내에서 설정합니다.

let onConfiguration = () => {
  let licenseInfo = vizcore2d.Config.GetLicenseInfo();
  licenseInfo.url = 'http://127.0.0.1:8901'; // 라이선스 서버 주소
  vizcore2d.Config.SetLicenseInfo(licenseInfo);
};
경고

기존 VIZCore2D/Configuration.js 파일에서 직접 수정하는 방식은
Webpack 번들 환경에서는 동작하지 않습니다.
반드시 onConfiguration 이벤트에서 설정해주세요.

로컬 실행 방법​

팁

VSCode 기준으로 설명하며,
VSCode 사용을 권장합니다.

실행 절차​

  1. VSCode Extensions에서 Live Server 검색 후 설치

Live Server 설치

  1. index.html 우클릭 → Open with Live Server 클릭

Open with Live Server