# Design a template

This section will demonstrate some UI components on the **Template** page.

## Static Label

1. You can set up a static label by dragging the **Static Label** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FQkTaA9La86hNuB1lptKZ%2FTemplate%20Design_1.png?alt=media&#x26;token=03c62bc2-ceda-4c13-8abb-0b4670609b75" alt=""><figcaption></figcaption></figure>

2. &#x20;In the Property setting on the right panel, you can decide the following:
   * **Position and Size**
   * **Value**, which is the static text you want to show permanently
   * **Font family**, **Font size**, **Alignment**, **Font color**, and so on.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FvEPexFk8FRlQ0RcntK8m%2FTemplate%20Design_2.png?alt=media&#x26;token=ecdc1a28-4686-4ad5-9b73-56979e68fe08" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FFq4onoTCqdtF0XKvm8NU%2Fimage.png?alt=media&#x26;token=c9e6e546-487e-4242-9095-48691f639ac3" alt=""><figcaption></figcaption></figure>

After setting these, please save it by clicking the **save** button.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FSL2BcBUOMl4PFRbWJuED%2FTemplate%20Design_3.png?alt=media&#x26;token=e22d91d9-5cd2-4fc2-8c83-565cc3882073" alt=""><figcaption></figcaption></figure>

## Image

1. You can set up an image by dragging the **Image** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F7BKYuDYOLlqnL54SYPAn%2FTemplate%20Design_4.png?alt=media&#x26;token=867943cd-44ba-4aea-b497-adf53139116a" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* **Position and Size**
* **Value**, which have two kinds of situations:
  * When you choose **== User Defined ==**,  you can upload a Static Image as a logo.
  * When you choose others, you assign a column from your item data as the filename of a dynamic image source. This name should match with the filename from one of the pictures in the gallery. (Dynamic Image)
* **Brightness Enhancement**:&#x20;
* **Dithering Enhancement**: Dithering is a technique used in computer graphics, digital imaging, and signal processing to mitigate visual artifacts or distortions that may arise during the conversion of a high-resolution image or signal to a lower resolution.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FQZh3El6az6eE8eC1ZH0C%2FTemplate%20Design_5.png?alt=media&#x26;token=1a19494d-4a5a-4cad-a623-762129d48479" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FoFddRx2hvj4Eg8fAEdcf%2Fimage.png?alt=media&#x26;token=7f588c94-2426-4426-93c5-ab6fcd511a96" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** button.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FCDh7rDJ9uNaO5LhcorBE%2FTemplate%20Design_6.png?alt=media&#x26;token=eb0308b4-6cba-4ce3-ba97-a0d0e9695e01" alt=""><figcaption></figcaption></figure>

## Shape

1. You can set up a Shape by dragging the **Shape** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FTNXNJUZPTWKcEC2HzwIH%2FTemplate%20Design_7.png?alt=media&#x26;token=c5b15a97-4704-4ed7-af29-b90761c875b2" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* **Position and Size**
* **Value**, where you can choose Rectangle, Triangle, and Circle
* **Line Width**
* **Line Color**
* **Fill Color**
* **Background Color**

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FJEPJQDAlHTcnCOSve0fN%2FTemplate%20Design_8.png?alt=media&#x26;token=366c580a-0476-4f49-92b3-eae851f6b84d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FXVXreQ8V3HH0KWvGJO0B%2Fimage.png?alt=media&#x26;token=5272014c-9980-494a-9362-8e65131dde88" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** icon.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2Fe4L9dSvJSo3cklAoJ4H2%2FTemplate%20Design_9.png?alt=media&#x26;token=29f2ebc8-b05a-439c-b270-20505d549640" alt=""><figcaption></figcaption></figure>

## Text

1. You can set up a Text by dragging the **Text** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FhJDxPZIg1BiRuXnqF0LQ%2FTemplate%20Design_10.png?alt=media&#x26;token=35b618fc-8f63-47c3-91bb-1b2ead5cf0cc" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* **Position and Size**
* **Value**, which you can choose the column of your item (storage) data
* **Font family**, **Font size**, **Alignment**, **Font color**, and so on.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FqAKOSgzqhc2Yfwh42qPk%2FTemplate%20Design_11.png?alt=media&#x26;token=4d214edd-41aa-4848-a83b-a21505bfd2bf" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2Fjgi5LzujZQg1FefzNfYe%2Fimage.png?alt=media&#x26;token=63b126f9-7a97-4cb2-8793-210989aa4105" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** icon.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FqMqsDm830zQVBUE0K4Xv%2FTemplate%20Design_12.png?alt=media&#x26;token=97fd0f54-c419-46c2-8b97-4e8a42ed83bf" alt=""><figcaption></figcaption></figure>

## Line

1. You can set up a Line by dragging the line icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FBSVAKvp6hapciYpXgMf5%2FTemplate%20Design_13.png?alt=media&#x26;token=03c4faa2-3a57-488f-9544-e4a84d93ef3e" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* Position and Size
* Direction,  which is Horizontal or Vertical
* Line color
* Line Width

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FBKyjZtsddm2AFrIQDTGZ%2FTemplate%20Design_14.png?alt=media&#x26;token=e80c8796-4f08-4943-8eb0-80cb2f67c4ab" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2Fly7L9xSqRMUmBL62vYh6%2Fimage.png?alt=media&#x26;token=97fede1c-6519-4b53-a19a-6722feab058d" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** button.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FsB0qOJCmEEgKCsMA5bEs%2FTemplate%20Design_15.png?alt=media&#x26;token=e23933cb-fc9c-4446-962d-a639b97fccc9" alt=""><figcaption></figcaption></figure>

## QR Code

1. You can set up a QR Code by dragging the **QR Code** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2Fl8yG1TbrzN5RxVmlGsqp%2FTemplate%20Design_16.png?alt=media&#x26;token=11e07337-8bde-4e71-85df-e19ea0932c8c" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* **Position** and **Size**
* **Value**, which have two kinds of situations.
  * When you choose **== User Defined ==**,  you can assign it as **Static Data** by filling in the data in the **Sample** field.
  * When you choose others, you assign the column of your item data as **Dynamic Data**.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F940GksalErAeB0yXPuj7%2FTemplate%20Design_17.png?alt=media&#x26;token=9004c9e5-c659-4296-a8d6-60c3dda81758" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FrGNAWBamWo7RMx8601UT%2Fimage.png?alt=media&#x26;token=e8edf60f-036d-4743-a35a-2ad203cea16f" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** button.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F9TSHI4gWKeTFc0d9dAFU%2FTemplate%20Design_18.png?alt=media&#x26;token=7177a034-2f54-47fe-85a0-3ffa5dd6def5" alt=""><figcaption></figcaption></figure>

## Barcode

1. You can set up a barcode by dragging the **Barcode** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F22UoiTfO1xEZTiPFBSmw%2FTemplate%20Design_19.png?alt=media&#x26;token=da146fd1-f7a1-47cd-93b0-7ed9c26f9855" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* **Position** and **Size**
* **Value**, which have two kinds of situations.
  * When you choose **== User Defined ==**,  you can assign it as **Static Data** by filling in the data in the **Sample** field.
  * When you choose others, you assign the column of your item data as **Dynamic Data**.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FujDT4txQHNbggscsnDRC%2FTemplate%20Design_20.png?alt=media&#x26;token=44e3a25e-1ae4-4c3e-8e22-b0bef0cc485f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F67I7D6LVn1tdwNndP6zp%2Fimage.png?alt=media&#x26;token=2cd1e63e-b40c-4dd8-ab5c-13c4cb663879" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** button.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FhhiNruRFVrOhvefSX56B%2FTemplate%20Design_21.png?alt=media&#x26;token=819a8aa8-428c-40cb-8377-7477aa6a7c3f" alt=""><figcaption></figcaption></figure>

## Time

This component is only used in **Deploy Template function** in the **Partial Update** section. Please reference it in the following link.

{% content-ref url="../../key-functions/partial-image-update" %}
[partial-image-update](https://advantech-2.gitbook.io/epaper/user-interface-and-functions/key-functions/partial-image-update)
{% endcontent-ref %}

1. You can set up a **Time** by dragging the **Time** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FMk8j2lP0Gf1JueZyGfnq%2Fimage.png?alt=media&#x26;token=3828cc3a-f2d0-4e33-8c7b-c7b5f3192eab" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* **Position** and **Size**
* **Value**, where data should be in the boolean format.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FNwjaTBqMdkvB3WEUQfob%2Fimage.png?alt=media&#x26;token=b93b30cb-7c00-4109-958b-4855bd8f55bb" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** button.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F9TSHI4gWKeTFc0d9dAFU%2FTemplate%20Design_18.png?alt=media&#x26;token=7177a034-2f54-47fe-85a0-3ffa5dd6def5" alt=""><figcaption></figcaption></figure>

## Carousel

This component is only used in **Deploy Template function** in the **Partial Update** section. Please reference it in the following link.

{% content-ref url="../../key-functions/partial-image-update" %}
[partial-image-update](https://advantech-2.gitbook.io/epaper/user-interface-and-functions/key-functions/partial-image-update)
{% endcontent-ref %}

1. You can set up a **Carousel** by dragging the **Carousel** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FaoWcUoFEJxRXGxH7G6oj%2Fimage.png?alt=media&#x26;token=7bcefe43-fd43-4a35-9632-7ae8b5d0638e" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* **Position** and **Size**
* **Value**, where data should be in the json format.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F9bqfU02rYZyostAlx1O4%2Fimage.png?alt=media&#x26;token=fbc88e2c-4255-4b30-9cae-c7aeb1fb1954" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** button.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F9TSHI4gWKeTFc0d9dAFU%2FTemplate%20Design_18.png?alt=media&#x26;token=7177a034-2f54-47fe-85a0-3ffa5dd6def5" alt=""><figcaption></figcaption></figure>

## Region

This component is only used in the **Partial Update function** in the **Partial Image Update** section. Please reference it in the following link.

{% content-ref url="../../key-functions/partial-image-update" %}
[partial-image-update](https://advantech-2.gitbook.io/epaper/user-interface-and-functions/key-functions/partial-image-update)
{% endcontent-ref %}

1. You can set up a **Region** by dragging the **Region** icon to a specific position.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FJQrm0Gm9fyzIAqU6U0OD%2Fimage.png?alt=media&#x26;token=9be1e0c2-d1c7-45d0-b3c5-19fd7e27f3d1" alt=""><figcaption></figcaption></figure>

2. In the Property setting on the right panel, you can decide the following:

* **Position** and **Size**
* **Name**, where you can assign a region name (cannot be duplicated).

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FRYjD1n6JEAwycHA6XRCM%2Fimage.png?alt=media&#x26;token=c4a6722c-ac3b-47d3-b63b-d4d979b079bf" alt=""><figcaption></figcaption></figure>

After setting these please save it by clicking the **save** button.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F9TSHI4gWKeTFc0d9dAFU%2FTemplate%20Design_18.png?alt=media&#x26;token=7177a034-2f54-47fe-85a0-3ffa5dd6def5" alt=""><figcaption></figcaption></figure>

##
