Step 9: Debug Your Application
Congratulations! You are ready to debug the application!
Copy the webpage file (index.htm) and the images (images folder) to the SD card. You will find them in this folder:
You can add your own JPEG images in the images folder. Please note that this application supports only JPEG images.
Before you start the debugger, you may want to set breakpoints in the application file to verify that important stages of the application (e.g., mounting the file system on the SD card, TCPIP stack initialization, etc.) are executed successfully.
The breakpoint will not be hit until you insert the SD card into the micro SD card slot (J8) on the MEB II Board. Insert the SD card and verify the breakpoint is hit.
Press the F5 button to allow the application to run. The breakpoint set in the previous step will be hit indicating the TCP/IP initialization is successful.
Remove all break points and click F5 to allow the application to run.
You should see the MainMenu screen on the MEB II Board. Notice that the display looks exactly the same as the one you developed using MHGC.
Remove the micro SD card from the slot to verify that the WaitForMediaConnect screen is shown (it will ask you to Insert the SD card).
Insert the micro SD card and verify that the MainMenu screen is shown. Touch the screen once to get the SlideshowInstructions screen (basic instructions to run the demo). Touch the screen again to move to the SlideScreen (shows the images on the SD card).
You should see the JPEG images on the SD card displayed on the graphical user interface of the MEB II Board. The graphical display should also respond to touch actions. You should also be able to view the images on your computer's screen using a web browser.
Some Troubleshooting tips:
- If the display does not respond to touch, revisit the Harmony Touch system service and Touch driver configurations. Also, verify that the external interrupt is mapped to the RE8 pin in the pin table.
- If the images are not displayed on the graphic display, make sure you have the remapping code for RPD7 called from APP_Initialize and implemented in system_config.h.
- If the web page is not loading for the acquired IP address, verify that your PC is connected to the same router as the MEB II Board.
In this tutorial, you developed a WEB enabled digital photo frame that read image files from an SD card connected over an SPI interface. You also added graphics support to display the images and scroll them upon a touch event. You used the MPLAB Harmony Configurator (MHC) to select the appropriate Board Support Package (BSP) and configured the clock system, TCP/IP Stack, Graphics Library, Touch Driver, I2C Driver, Timer and File System. You used the MPLAB Harmony Graphics Composer (MHGC), embedded within MHC, to design and develop the graphical user interface. You added basic actions to handle the user interface event such as pressed, released etc.
With this tutorial, we demonstrated how easy it is to add a web server and graphics library to your application. The lab shows how you can create complex applications that integrate various peripheral drivers, device drivers for Touch and Display, TCP/IP, File System, and Graphics through the use of the MPLAB Harmony Configurator (MHC). As a next step, you may want to improve this application by adding audio streaming support by hosting audio files on the web server.