# Добавление собственных функций

### Внутри панелей HTML, JavaScript и CSS

При нажатии кнопки «Изменить» в примере подключаемого модуля Plugin Playground отображаются панели HTML, JavaScript (JS) и CSS. Панель HTML (слева) позволяет изменять пользовательский интерфейс подключаемого модуля. Панель JS (в середине) позволяет записывать функции, которые могут взаимодействовать с FormIt посредством API подключаемого модуля FormIt JS. Наконец, панель CSS (справа) определяет стиль HTML.

![](/files/WNMqVtlFS9tvQ0Tq64v2)

### Добавление функции для создания цилиндра

Чтобы создать цилиндр, добавим функцию в этот подключаемый модуль.

Сначала необходимо настроить поле ввода и кнопку пользовательского интерфейса на панели HTML. Скопируйте следующий код и вставьте его после строки 23 и перед разделом *\<!-- Не удаляйте приведенные ниже сценарии, если не уверены в своих действиях -- >*

Это позволит добавить некоторые базовые элементы пользовательского интерфейса в наш подключаемый модуль.

```
<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" />
```

![](/files/3mnXA99KB7MCMTtCptUw)

Теперь добавим две функции на панели 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);

});
```

![](/files/VbfSBF6nqY8MTTWhSeFs)

### Запуск и предварительный просмотр

Когда вы будете готовы посмотреть результаты, снова нажмите кнопку воспроизведения ![](/files/xUSoeYxDVF2fRXrZegpO). На той же панели будут отображаться обновления подключаемого модуля.

![](/files/pdBrpFMKqnO4vjJWx287)

### API подключаемых модулей FormIt

Полную документацию по API для подключаемых модулей FormIt см. в разделе [полезных ссылок](/ru/plugins/useful-links.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://windows.help.formit.autodesk.com/ru/plugins/how-to-develop-plugins/your-first-plugin/adding-your-own-features.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.