Slide Navigation

by 4D Makers in Circuits > Electronics

378 Views, 3 Favorites, 0 Comments

Slide Navigation

^013B37A442DB60C4949CC4D929384D979AACD460B8411D74E2^pimgpsh_fullsize_distr.png
Slide Navigation featuring gen4-uLCD-43DT

Slide navigation is one of the projects that utilizes the touch capabilities of the gen4 uLCD-43DT. It allows the user to switch pages by swiping left or right. The LCD also uses its built in SD card slot to store the GCI images which is act as background images that can be moved or swiped.

The project also implements basic 4D widget functionality such as LedDigits, Userimages, and StaticTexts.

How It Works

Flowchart.png

Components

Capture.PNG
MFG_GEN4-IB_1.jpg
4dpc.PNG
FFC_Cable.jpg
4GB-buy-now.jpg

  • gen4-uLCD-43DT module
  • gen4 Interface Board
  • uUSB-PA5 or 4D Programmer Cable
  • 30 way FFC Cable
  • uSD Card (up to 4GB)

Build

gen4 IB.png

The Slider Navigation is a stand-alone project and does not require any other external components.

If you are using gen4-interface board and uUSB PA-5, connect the display to the PC (1st image)

Program

Prompt.png
Display.png

Download the project file here.

Open the project using Workshop 4. This project uses the Visi Environment.

You can modify the properties of each widget. ·

Click on the “Build Copy/Load” button.

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

Connect the display to the PC using uUSB-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 “(Build) Copy/Load” 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.

The module will prompt you to insert the uSD card. (1st image)

Properly unmount the uSD Card from the PC and insert it to the uSD Card slot of the display module. The image below must appear on your display after completing the steps above. (2nd image)

Demonstration

1.PNG
2.PNG
3.PNG
4.PNG
5.PNG
6.PNG
7.PNG
8.PNG

Flowchart

12.png
11.png
10.png
9.png