Web Photo Frame Tutorial: Step 9

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.


Connect your PC and the Multimedia Expansion Board II (MEB II) to the same local network as shown in this image.



Connect a Micro USB cable between your PC and the J4 connector of the PIC32 Starter Kit board (mounted to the MEB II).



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.


Open app.c and set a breakpoint in the APP_TCPIP_WAIT_INIT state in the APP_Tasks() function. Hitting this breakpoint will indicate that the SD card is successfully mounted.



Debug your application. Click the Debug Main Project Main_Debug_Project.png button.


The breakpoint will not be hit until you insert the SD card into the microSD card slot (J8) on the MEB II. Insert the SD card and verify the breakpoint is hit.


In app.c put a breakpoint in the APP_TCPIP_TRANSACT state in the APP_Tasks() function.



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. Notice that the display looks exactly the same as the one you developed using MPLAB Harmony Graphics Composer (MHGC).


Remove the microSD card from the slot to verify that the WaitForMediaConnect screen is shown (it will ask you to insert the SD card).

Insert the microSD 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).


Open a terminal emulator program and connect to the serial port emulated by the MEB II's USB interface as shown in this image.


Once the terminal is open, press Enter. You can see the IP address assigned to the board by the Dynamic Host Configuration Protocol (DHCP) server running on the router.



Open a web browser on your PC and enter the IP address obtained in the previous step. You will see the images stored in the SD card scrolled on the webpage.



You should see the JPEG images on the SD card displayed on the graphical user interface of the MEB II. 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.


In this tutorial, you developed a WEB enabled digital photo frame that read image files from an SD card connected over a Serial Peripheral Interface (SPI). You also added graphics support to display the images and scroll them upon a touch event. You used the MHC to select the appropriate Board Support Package (BSP) and configured the clock system, TCP/IP Stack, Graphics Library, Touch Driver, I²C Driver, Timer and File System. You used 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 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.

© 2024 Microchip Technology, Inc.
Notice: ARM and Cortex are the registered trademarks of ARM Limited in the EU and other countries.
Information contained on this site regarding device applications and the like is provided only for your convenience and may be superseded by updates. It is your responsibility to ensure that your application meets with your specifications. MICROCHIP MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND WHETHER EXPRESS OR IMPLIED, WRITTEN OR ORAL, STATUTORY OR OTHERWISE, RELATED TO THE INFORMATION, INCLUDING BUT NOT LIMITED TO ITS CONDITION, QUALITY, PERFORMANCE, MERCHANTABILITY OR FITNESS FOR PURPOSE. Microchip disclaims all liability arising from this information and its use. Use of Microchip devices in life support and/or safety applications is entirely at the buyer's risk, and the buyer agrees to defend, indemnify and hold harmless Microchip from any and all damages, claims, suits, or expenses resulting from such use. No licenses are conveyed, implicitly or otherwise, under any Microchip intellectual property rights.