# 사용자 고유의 기능 추가

### HTML, JavaScript 및 CSS 패널 내부

플러그인 플레이그라운드 샘플 플러그인에서 편집을 클릭하면 HTML, JS(JavaScript) 및 CSS 패널이 표시됩니다. HTML 패널(왼쪽)을 사용하면 플러그인의 사용자 인터페이스를 수정할 수 있습니다. JS 패널(가운데)을 사용하면 FormIt JS 플러그인 API를 사용하여 FormIt과 통신할 수 있는 함수를 작성할 수 있습니다. 마지막으로 CSS 패널(오른쪽)은 HTML의 스타일을 결정합니다.

![](https://4260364112-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhu9vZd1fItfZF6KPUjKS%2Fuploads%2Fgit-blob-0c355ca13f62c66c6a4d6826a6747c454b5b6101%2Fimage%20\(27\).png?alt=media)

### 함수를 추가하여 원통 작성

이 플러그인에 원통을 작성하기 위한 기능을 추가해 보겠습니다.

먼저 HTML 패널에서 입력 필드와 UI 버튼을 구성합니다. 다음 코드를 복사하여 23번 행 뒤와 *\<!-- Do not remove below scripts unless you know what you're doing- - >* 앞에 붙여넣습니다.

이렇게 하면 플러그인에 몇 가지 기본 UI 요소가 추가됩니다.

```
<p>Cylinder: Create a cylinder at the origin.</p>
<div>
    <input id="Radius" type=number value=2 />
    <label>Radius</label>
</div>

<div>
    <input id="CHeight" type=number value =0.5 />
    <label>Height</label>
</div>


<input id="CreateCylinderBtn" type=button value="Create Cylinder" />
```

![](https://4260364112-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhu9vZd1fItfZF6KPUjKS%2Fuploads%2Fgit-blob-3d646a2b6bb83d018d3a69ce74191f50352f937d%2Fimage%20\(86\).png?alt=media)

다음으로, JS 패널에 두 개의 함수를 추가해 보겠습니다. 다음 코드를 복사하여 파일 끝에 붙여넣습니다(16번 행 뒤).

그러면 FormIt 작업공간에 원통이 작성됩니다

```
// Create cylinder
const createCylinder = async (r,h) =>
{
    const posCenter = await WSM.Geom.Point3d(0,0,0);

    const histID = await FormIt.GroupEdit.GetEditingHistoryID();
    console.log(histID,posCenter,r,h);

    const cyl = await WSM.APICreateCylinder(histID,posCenter,r,h);
}


// Execute function when 'create cylinder' button is clicked
document.getElementById("CreateCylinderBtn").addEventListener("click", ()=>
{
    console.log('create cylinder clicked')

    const r = Number(document.getElementById("Radius").value);
    const h = Number(document.getElementById("CHeight").value);

    createCylinder(r,h);

});
```

![](https://4260364112-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhu9vZd1fItfZF6KPUjKS%2Fuploads%2Fgit-blob-2b5b8e5015b72f1a6d664a6bf7403a66da6e88a9%2Fimage%20\(82\).png?alt=media)

### 실행 및 미리보기

결과를 볼 준비가 되면 재생 버튼 ![](https://4260364112-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhu9vZd1fItfZF6KPUjKS%2Fuploads%2Fgit-blob-5869b9d4fb33908291738216de1304c34456b4a5%2Fimage%20\(81\).png?alt=media)을 다시 클릭합니다. 그러면 플러그인에 대한 업데이트가 동일한 패널에 표시됩니다.

![](https://4260364112-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhu9vZd1fItfZF6KPUjKS%2Fuploads%2Fgit-blob-748e945427f07642202ad5150021dc7f8c95fd35%2Fimage%20\(14\).png?alt=media)

### FormIt 플러그인 API

FormIt 플러그인 API에 대한 전체 설명서는 [유용한 링](https://windows.help.formit.autodesk.com/ko/plugins/useful-links) 섹션을 참고하십시오.