# General Function

{% hint style="info" %}
In smart warehouse applications, ePaper displays mounted on shelves are used to show the status of incoming and outgoing item numbers, quantities during picking, and information about stock shortages. Integrating such a platform not only allows for real-time synchronization of information with the customer's backend systems but also offers ESG (Environmental, Social, and Governance) benefits and time-saving advantages. This integration promotes environmental sustainability and operational efficiency by reducing paper usage and streamlining inventory management processes.
{% endhint %}

Using the smart warehouse application as an example, we can display the information of warehouse item numbers on individual ePaper displays through the following four steps:

1. **Data Collection**: Gather the item number information from the warehouse management system.
2. **Template Design:** Design a template with a user-friendly template designer.&#x20;
3. **Data Assignment**: Assign the transmitted data to specific EPD displays corresponding to the designated items.
4. **EPD Display Update**: Update the EPD displays with the assigned item number information, ensuring each display shows the correct data for its respective item.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FS4InzbJQYdDzbyuWRY5U%2FImage_Generator_Overview.png?alt=media&#x26;token=52dd9448-03b1-45aa-9823-3c5a27f1a4ae" alt=""><figcaption></figcaption></figure>

## **Data Collection**

Step 1. Prepare and import your item (storage) data

> Open an Excel, generate the item (storage) data you want to show on the EPD device, and save as a CSV file.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2Fe6tTwI83ersZ3raGlDnF%2Fimage.png?alt=media&#x26;token=2066fd93-b7fc-4d92-b369-507b19a517d6" alt=""><figcaption></figcaption></figure>

Step 2. Navigate to the **Item Data** page on DeviceOn/ePaper, and create a data source named as Storage.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FE1OE4L19tb0PcxofrBox%2Fimage.png?alt=media&#x26;token=079fe8d4-1d9d-47e3-886b-003317daaf94" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F08yuLWOocxb3OQrY2bBd%2Fimage.png?alt=media&#x26;token=57431ab2-2c68-49a3-8023-503060f9dfdb" alt=""><figcaption></figcaption></figure>

Step 3. Click the **Select File** button and import the item (storage) data you just prepared.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FbYxqGGJuZXtTvWeO93qj%2Fimage.png?alt=media&#x26;token=d49ad0ee-b24e-4be8-8f2b-ed26ee267f26" alt=""><figcaption></figcaption></figure>

Step 4. Upload successfully.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FtrBierZY9TsStB89cH2Q%2Fimage.png?alt=media&#x26;token=14acced5-464d-4d23-aed8-4964e8df6f8f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FjkvAQO6q5xSE5DjiajWB%2Fimage.png?alt=media&#x26;token=5baa28b2-d451-4e94-a2c3-29b3f35619f1" alt=""><figcaption></figcaption></figure>

## **Template Design**

### Create a new template

Step 1. Navigate to **Template** page, and click the **Create a new one** option.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FgzsHiAaTi45WMqKv3Mmu%2Fimage.png?alt=media&#x26;token=df037dc9-ca34-4c00-bbbc-4a25648aa6b5" alt=""><figcaption></figcaption></figure>

Step 2. Decide a template name.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FTqf0Jo2v9Ubfw7GS9o1e%2Fimage.png?alt=media&#x26;token=3e8952d7-0959-4593-ad7a-77a789212c3e" alt=""><figcaption></figcaption></figure>

Step 3. Based on EPD devices, you should choose the correct EPD model.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FN8Wm7yj6g13aqeMFd6wl%2Fimage.png?alt=media&#x26;token=34a8f678-b35d-4ec5-8973-7f6252a988c0" alt=""><figcaption></figcaption></figure>

Step 4. Use the data source you just created. In this case, we use Storage as our data source.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FwTD1pAbn42OisSXoeATy%2Fimage.png?alt=media&#x26;token=74efc480-8a39-499a-b650-1692d30c27d9" alt=""><figcaption></figcaption></figure>

In the Canvas setting, you can decide the following:

* **EPD Model:** as EPD-230 (2.9” BW) according to which EPD device you have.
* **Data Source** as Storage, which is the item (storage) data you just upload in the **Data Collection** section.
* **Template Name** as Storage\_t1.
* **Direction** as Landscape or Portrait and **Display Orientation** as Reverse or Forward, which you can check schematic view below.
* **Background color** for the canvas.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2Fzs6A2oEcwqaOVQGPjSZI%2Fimage.png?alt=media&#x26;token=9fca8078-b3bd-4be8-aad6-b7e4bd031f74" 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%2FxbHZuDsTlJrqSNhiCSE9%2Fimage.png?alt=media&#x26;token=ec146c26-0c29-4893-9e50-af94eaa2f0c4" alt=""><figcaption></figcaption></figure>

### Static Label Component

Step 1. You can set up a **Label** by dragging the first 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%2FgwJAphFCHYzYIB1OMGCs%2Fimage.png?alt=media&#x26;token=84c5b972-61d0-4203-a856-a93a0cce458b" alt=""><figcaption></figcaption></figure>

Step 2. In the Property setting, 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%2FpTv3mc2ULifcE92A0i4H%2Fimage.png?alt=media&#x26;token=6da9796d-8e6e-45ea-b681-22ebfc7df55e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FcF3VSLMcs7YiDudFpcOg%2Fimage.png?alt=media&#x26;token=ef56189b-6111-4ac3-93d7-23f287e15a2d" alt=""><figcaption></figcaption></figure>

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

### Image Component

Step 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%2FGPQEGrjmGjyGOnRpF0tE%2Fimage.png?alt=media&#x26;token=c6fb2feb-323e-4f0e-b7f5-55720d17febb" alt=""><figcaption></figcaption></figure>

Step 2. In the Property setting, 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 **Logo**.
  * When you choose others, you assign the column of your item data as an **image file name** (**Dynamic Image**).
* **Brightness Enhancement**
* **Dithering Enhancement**

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FdHMiggPS3tAxoIHsncMd%2Fimage.png?alt=media&#x26;token=20c6dd71-94cd-4844-ba12-6d9761bfa5db" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FhFBfXM3QYdzfQwYM5j22%2Fimage.png?alt=media&#x26;token=437ee96e-b41f-494d-9983-eea3eeedebe2" alt=""><figcaption></figcaption></figure>

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

#### Shape Component

Step 1. You can set up a Shape by drag 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%2F0AfxkEUTmT4BONxCLnU1%2Fimage.png?alt=media&#x26;token=78b1ff7f-0342-4f81-8ab0-2d319d9edc60" alt=""><figcaption></figcaption></figure>

Step 2. In the Property setting, you can decide the following:

* **Position** and **Size**
* **Value**, which 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%2FELGZKobklBymVnQqKtec%2Fimage.png?alt=media&#x26;token=9b509185-973a-413c-abd5-db21e41216c8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FS1anvEJW0LY0wkxLmiaW%2Fimage.png?alt=media&#x26;token=6b180957-0d7d-4e50-a0c9-709f8a656ac4" alt=""><figcaption></figcaption></figure>

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

### Dynamic Text Component

Step 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%2F3IkzQ3z3W8obTJU0B8MO%2Fimage.png?alt=media&#x26;token=1785fd32-9da5-4249-9cce-e921bec6e6e8" alt=""><figcaption></figcaption></figure>

Step 2. In the Property setting, 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%2FNXXXlcVKZJ0xZbRmaWe7%2Fimage.png?alt=media&#x26;token=23448cff-c771-424a-b69a-3f0992f51925" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FyALyG8MzWGxuRH2Dd694%2Fimage.png?alt=media&#x26;token=58d5dc3b-b4e2-4ca5-8cff-2d9e79d90cd8" alt=""><figcaption></figcaption></figure>

Step 3. After setting these, please save it by clicking the save icon.

### Line Component

Step 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%2Fi7d62qrwKg7I90cs1Sc5%2Fimage.png?alt=media&#x26;token=67772555-ee4f-45ca-b3f8-2a21d0a705f0" alt=""><figcaption></figcaption></figure>

Step 2. In the Property setting, 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%2Fl5dtYlGvhSBQ8RrsX1yM%2Fimage.png?alt=media&#x26;token=a927d9b1-88b5-4e75-9eb6-3cae33a135bc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FvZhnkz8cxENVu0aA9NUW%2Fimage.png?alt=media&#x26;token=b48566a3-640b-4a83-bc6a-2872fda33117" alt=""><figcaption></figcaption></figure>

Step 3. After setting these, please save it by clicking the save icon.

### QR Code Component

Step 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%2FDsm974K0ouuVl4kpKxUE%2Fimage.png?alt=media&#x26;token=5c483ce3-5de3-4656-963a-fd32fbbce460" alt=""><figcaption></figcaption></figure>

Step 2. In the Property setting, you can decide the following:

* **Position** and **Size**
*   **Value**, which have two situations.

    * When you choose == User Defined ==,  you can assign it as **Static Content** by filling in the data in the **Sample** field.
    * When you choose others, you assign the column of your item data as **Dynamic Content**. This will change value according to bound data.

    <figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FLrCHoi4KGOwbJ5K3XxDq%2Fimage.png?alt=media&#x26;token=76d95500-c598-4fe3-9039-8036b1fdd522" alt=""><figcaption></figcaption></figure>

    <figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FKiuzfQhW5GLnyv0W9an0%2Fimage.png?alt=media&#x26;token=bac9849f-e02e-4d9e-b304-21a5bdce9d45" alt=""><figcaption></figcaption></figure>

    Step 3. After setting these, please save it by clicking the save icon.

### Barcode Component

Step 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%2FeOHMgr5qMSdRMP2NxSUe%2Fimage.png?alt=media&#x26;token=de0b4f84-2ae1-4896-b822-aa99830d1e6d" alt=""><figcaption></figcaption></figure>

Step 2. In the Property setting, you can decide the following:

* **Position** and **Size**
*   **Value**, which have two situations.

    * When you choose == User Defined ==,  you can assign it as **Static Content** by filling in the data in the **Sample** field.
    * When you choose others, you assign the column of your item data as **Dynamic Content**. This will change value according to bound data.

    <figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FBC0Gy6zXnP4hHzTVz7vP%2Fimage.png?alt=media&#x26;token=31781f5d-072f-4859-8fe1-40e2ece5092b" alt=""><figcaption></figcaption></figure>

    <figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FwfU2Wuzqnhz75VLgLVpD%2Fimage.png?alt=media&#x26;token=90f5dcb7-b23a-4aab-b756-1c680118cee8" alt=""><figcaption></figcaption></figure>

Step 3. After setting these, please save it by clicking the save icon.

### Preview & Export

Step 1. You can click the **preview** icon to give you the first view of your template. You can modify and save it if necessary.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2F1oOvQjx8UWYT8dWoguYv%2Fimage.png?alt=media&#x26;token=4be22069-c55d-490d-bf00-7c1972e8e5dc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2Flm9F2zrxPbM6S78Y1tbB%2Fimage.png?alt=media&#x26;token=639f5ee1-292c-4933-a675-89468023c52f" alt=""><figcaption></figcaption></figure>

Step 2. You also can export as a JSON file as a backup copy in case next time you want to use it on another DeviceOn/ePaper server.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FOD6Ww48mht1UrM1ZVM28%2Fimage.png?alt=media&#x26;token=099127c9-b3ad-4b4b-8179-d557a04b1f15" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2Fk1TkxxJAcpwjKJpFSE0v%2Fimage.png?alt=media&#x26;token=d4a1bea3-a75e-4aae-8cff-dab006a22b17" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FxS4MAGCY2PLv3qBL4tIR%2Fimage.png?alt=media&#x26;token=414c56e8-1f7e-4c3b-8431-ac9dc36c54e9" alt=""><figcaption></figcaption></figure>

## **Data Assignment**

In this section, you can bind the item data (from **Data Collection**) and the template  (from **Template Design**) to an EPD device

Step 1. Navigate to the **EPD Controller** page, and choose the EPD device you want to bind with. Click the **Bind** action as below.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FeDemqKdnGLEFkRBbYJ5s%2Fimage.png?alt=media&#x26;token=51cd4008-db41-4e45-a9de-db88151c576f" alt=""><figcaption></figcaption></figure>

Step 2. Select a specific item and a specific template.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FlJEPtVjsWO4wjHzP7DCd%2Fimage.png?alt=media&#x26;token=88345cfe-01e2-4cde-b47b-81499eeb674e" alt=""><figcaption></figcaption></figure>

Step 3. Bind the template and data successfully.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FVnryJtpxmnSISDRGRUBu%2Fimage.png?alt=media&#x26;token=601ae002-9776-4175-90e0-2b31bdd2fa97" alt=""><figcaption></figcaption></figure>

## **EPD Display Update**

In this section, you can trigger the **transmit** command on an EPD device.

Step 1. Navigate to the **EPD Controller** page, and choose the EPD device you want to transmit the image. Please click the **Transmit** icon as below.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FgjaUkGsRlfmyIaXtRFvO%2Fimage.png?alt=media&#x26;token=c93d646a-0835-4b15-9471-5516ba99370f" alt=""><figcaption></figcaption></figure>

Step 2. You can decide the following transmit parameters:

* Which page&#x20;
* Refresh immediately after transmit&#x20;
* Blink LED lights or not after transmit

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FPskTulwcRRuhdFrfjT8p%2Fimage.png?alt=media&#x26;token=b5314490-e52a-4e8b-9e22-7ab4bffc1fc1" alt=""><figcaption></figcaption></figure>

Step 3. Send command successfully. After few minutes, you will see EPD device displays the content.

<figure><img src="https://3356936024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvoLI0hSi2PAK59nEdFUh%2Fuploads%2FbTfeKGVaw0OvsfsLJV5r%2Fimage.png?alt=media&#x26;token=9c619805-d62c-404f-b56a-a3ad05559e80" alt=""><figcaption></figcaption></figure>
