Web Photo Frame Tutorial: Step 9

Step 9: Debug Your Application

Congratulations! You are ready to debug the application!

1

Copy the webpage file (index.htm) and the images (images folder) to the SD card. You will find them in this folder:
apps/training/middleware/web_photoframe/web_photoframe_lab/dev_files/sdcard_files
You can add your own JPEG images in the images folder. Please note that this application supports only JPEG images.

2

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

setup_pic_web_photoframe.png

3

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

meb_usb_cable.png

4

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.

5

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.

brk_sdcard_mounted.png

6

Debug your application! Click the Debug Main Project Main_Debug_Project.png icon.

7

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.

8

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

brk_tcpip_transact.png

9

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.

10

Remove all break points and click F5 to allow the application to run.

11

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.

12

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).

13

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

usb_serial_port.png

Once the terminal is open, Press ENTER. You can see the IP address assigned to the board by the DHCP server running on the router.

ip_assigned.png

14

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.

web_photoframe_page.png

 Results

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.

 Analysis

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.

 Conclusions

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.

© 2017 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.