Product Catalogue

Introduction

4D Catalogue is a project which utilizes the gen4-uLCD-50DT module as the display to feature a list products and their description.

Image of products has been included in 4D Catalogue using user images. It has been done in Workshop 4 using the Visi-Genie environment. If desired, the user interface, colours and appearance can be modified. In addition, the number of product categories can be easily added or removed using Workshop 4 IDE.

Product Catalogue project consists five forms in which the first one is the Home Page. Home Page displays the categories of the products. Upon pressing a product the user will be navigated to the corresponding page of the product. At any point in this project, the user can navigate back to the Home page by pressing the Home button.

gen4-uLCD-50DT is used in this project to provide a sleek look to the 4D Catalogue design and can be easily mounted on the wall or table.

How it Works

Components

• gen4-uLCD-50DT

• gen4-interface board or gen4-PA

• 30 way FFC Cable

• uUSB PA-5 (necessary only when there’s no Gen4-PA)

• uSD Card

• Mini USB Cable or uUSB Cable

Implementation

Step 1: Build

• If you are using gen4-IB and uUSB PA-5, connect the display to your computer as shown in the image below.

• If you are using gen4-PA board,connect the display to your computer as shown in the image below.

Step 2: Program

• Download the project file here.

• You can download Workshop 4 IDE and the complete code for this project from our website.

• Open the project using Workshop 4. This project uses the ViSi-Genie Environment.

• You can modify the properties of each widget.

Step 3: Compile

• Click on the Compile button.

Note: This step could be skipped. However, compiling is essential for debugging purposes.

Step 4: Comp’n Load

• Connect the display to the PC using μUSB-PA5 and a mini USB cable. Make sure that you are connected to the right port. Red Button indicates that the device is not connected, Blue Button indicates that the device is connected to the right port.

• Now click on the “Comp’nLoad” button.

• Workshop 4 will prompt you to select a drive to copy the image files to a uSD Card. After selecting the correct drive, click OK.

Step 5: Mount uSD Card

• The module will prompt you to insert the uSD card.

• Properly unmount the uSD Card from the PC and insert it to the uSD Card slot of the display module.