Create a Web-Enabled Digital Photo Frame: Step 7
Adding and Configuring Graphics Components
For graphics, the TM4301B display will be used in conjunction with the SSD1963 Graphics Board connected to J601.
Add and Connect Graphics Components
PDA TM4301B Display
From Device Resources, add the PDA TM4301B display.
Figure: Adding Display to the Project Graph
SSD1963 Display Driver
Then add the LE SSD1963 driver.
Figure: Adding Graphics Driver to the Project Graph
Click on Yes for auto-activation.
Figure: Auto-Activation of GFX Code LE component
LE Parallel (EBI)
Add the LE Parallel (EBI) from the red diamond on the LE SSD1963 component.
Figure: Adding LE Parallel to the Project Graph
EBI Peripheral
From the LE Parallel (EBI) EBI CS red diamond, add the EBI (ebi) dependency.
Figure: Adding EBI Peripheral to the Project Graph
Other Links
Link the driver with the display.
Figure: Linking the Display Driver with the Display
Legato Component
For the Display Driver, add the Legato framework.
Figure: Adding Legato Library
Touch Panel
maXTouch® Controller
From the Display, add the Touch Panel MaxTouch.
Figure: Adding Max Touch Controller
I2C Driver
For MaxTouch, the I2C driver is needed, add it by clicking the yellow diamond on DRV_I2C.
Figure: Adding I2C Driver
I2C Peripheral
The I2C driver is needed to use the I2C peripheral. On this board, the I2C2 is used.
Figure: Adding I2C Peripheral
Input System Service
The MaxTouch driver is needed for the Input System Service.
Right-click on the yellow bullet to add it.
Figure: Adding the Input System Service
Project Graph - GFX Components Overview
Figure: Overview of Graphics Components
Configure Graphics Components
GFX Pin Configuration
Open the PIN Configuration plugin.
There are a few pins to be set to have the display working.
EBI Pins
In the PIC32MZ EF Curiosity 2.0 User Guide, the chapter schematics, we have the pins used for EBI.
The Pin Diagram is easy to use for this.
Figure: Curiosity 2.0 Schematic - EBI Pin Allocation
Use the Pin Diagram in the Pic Configuration plugin to configure the pins as EBIDxx.
DISPLAY Pins
There are some pins needed for controlling the display driver.
Set them as GPIO and then give them the needed names (in bold), copy/paste after making it GPIO.
- Pin 12 – RC3 – GPIO Out High - “GFX_DISP_INTF_PIN_WR”
- Pin 29 – RJ14 – GPIO Out Low - “GFX_DISP_INTF_PIN_RESET”
- Pin 51 – RK1 – GPIO Out High - “GFX_DISP_INTF_PIN_RSDC”
- Pin 52 – RK2 – GPIO Out High - “GFX_DISP_INTF_PIN_CS”
- Pin 53 – RK3 – GPIO Out High - “GFX_DISP_INTF_PIN_RD”
- Pin 104 – RD0 – GPIO In - “BSP_MAXTOUCH_CHG”
Example for the GFX_DISP_INTF_PIN_WR pin:
Choose the GPIO function for the pin:
Result:
Give the custom name to the pin (copy/paste): “GFX_DISP_INTF_PIN_WR”.
Set the pin as Output by clicking on the Direction options.
Result:
Change the Latch to High by clicking on the Latch options.
Result:
Final Pin Configuration
Figure: Final Pin Configuration
Graphics Components Setup
LE SSD1963 Display Driver
RTOS Settings
Since the graphics application also needs to be quick, the RTOS Task Delay should be set to 1 ms.
Figure: SSD1963 RTOS Configurations
Legato Component
RTOS Settings
Since the graphics application also needs to be quick, the RTOS Task Delay should be set to 1 ms.
Figure: Legato RTOS Configurations
Screen for Quick Test
There is a small project to play with inside the folder pic32mzef_web_photo_frame\dev_files\gfx_test, the file is called GFXTestProject.zip. This can be opened with the Microchip Graphics Composer and can be used to generate the necessary files in the project.
Below are a few steps on how to create this screen.
Figure: Microchip Graphics Composer Test Project
Opening the Microchip Graphics Composer
The Microchip Graphics Composer is an MPLAB® Code Configurator (MCC) plugin, it can be opened from the Plugins drop-down into the Project Graph window.
Figure: Opening the Microchip Graphics Composer Plugin
Opening an existing Legato Project
The Legato Composer Project is a zip file that can be kept wherever in the project development files. It is used only for the Composer.
As mentioned, there is a small test project provided for this stage that can be used to see if the setup is working fine.
To open the project, first open the Microchip Graphics Composer from the Project Graph Plugins drop-down.
The Microchip Graphics Composer Wizard will start, click on Load Existing Project.
Figure: Loading an Existing Legato Project
If the plugin is open, the user can use the Open Project button.
Figure: Open a Microchip Composer Project from the toolbar
Creating a new Legato Project
Open Microchip Graphics Composer from the Project Graph Plugins drop-down.
Choose Create a new project using the new project wizard.
Figure: Microchip Graphics Composer Welcome Screen
The New Project Wizard will appear.
For fast setup, click Next till the last screen, without changing any option, then Finish.
Below are the steps in the wizard, mainly pre-populated from the MCC project.
Display Configuration
Figure: Display Configuration
Color Mode
Figure: Color Mode Selection
Memory Profile
Figure: Project Memory Profile
Project Template
Figure: Project Template Option
Finish
Figure: Finish
Screens
The new project has a screen with the name Screen0 and a scheme with the name WhiteScheme already created. It also has a panel the size of the screen called BackgroundPanel.
Figure: Microchip Graphics Composer
Click on the panel and delete it.
Figure: Empty Screen
From the Tool Box, add a gradient with the same size as the screen. Hint, use the Object Editor on the right to position and size the box. The display size is 480x272 pixels, and the position should start from x = 0 and y = 0.
Change its scheme to WhiteScheme from the same Object Editor.
Figure: Gradient widget on Screen0
Now add a Text Field.
Click on the Text Field, its properties should be visible on the bottom right.
Properties can be changed from there. Set the position, size, and scheme, then change the name to “StartScreenLabel”.
Figure: Text Field on Screen0
To have something written in the text field, a new String and a Font need to be added to the project.
From Asset > Strings, add a new String and put some value inside, like “Hello World”.
Figure: String Manager
Then link the Text Field with the String in the Object Editor. Click on the Text Field and in the Object Editor, set the Initial String to the string that was just created.
Figure: Object Editor
Figure: Selecting the String for an Object
Using Asset > Font, add any font.
Figure: Font Manager
In Object Editor of the Text Field, select the font.
Now there is something to show.
Play with position and size to reach this:
Figure: “Hello World !” screen
From the toolbar, click on Save and save this project somewhere. It will not be needed, so put it into a temporary folder.
Then click on Generate.
Leave the Composer open.
Go back to MPLAB X IDE and click on Generate from the Resource Management tab.
Program the board and the screen should appear on the TM4301B Display.
