Create a Web-Enabled Digital Photo Frame: Step 2
Adding and Connecting the Required Components
Now you can start adding and connecting the components needed for the Main and HTTP applications. You will add components for the Graphics application later.
Project Graph View Management
It is important to keep the Project Graph clean, so neatly arrange the components while adding them.
The order is right to left, peripheral to the driver, and stack to application.
When more space is needed, click on the blue window icon in the Project Graph toolbar.
Figure: Project Graph Canvas Size
To create space at the bottom, the correct size is needed for the Component Settings. If the size is incorrect, items may be hidden under it by mistake.
Figure: Project Graph Canvas Size Dialog
There are many components to add, so set the Canvas size to Width = 800 and Height = 1280 to start. Click Ok.
A vertical scroll bar will appear.
Board Configuration
The Board Support Package (BSP) component is put at our disposal by the framework. It gives names for LED pins, Switch pins, etc.
We can add that from the Device Resources window.
Expand Libraries > Board Support Packages and click on the PIC32MZ EF Curiosity 2.0 BSP.
Figure: Adding BSP
The BSP should appear in the Project Graph.
Figure: Project Graph
TCP/IP Stack and Web Server Components
TCP/IP Configurator Plugin
Open the TCP/IP Configuration plugin under the Plugins drop-down window in the Project Graph.
Figure: Starting TCP/IP Configuration Plugin
Another standalone window will open. It can be moved to another screen and used independently.
Figure: TCP/IP Configuration Plugin
Application Layer
From the Application Layer, add with CTRL + clicking on the following components:
- DHCP Client
- HTTPNET Server
- Announce
These should automatically enable the TCP/IP Stack dependencies and other Harmony Components they depend on.
When ready, click the Green Plus icon on the top left of the TCP/IP Configuration window.
Figure: TCP/IP Application Layer Configuration – Adding Components
Some necessary components will follow auto-activation, click Yes for all of them.
Core is needed to add the system application support, drivers, system services, OSAL, etc.
Figure: Component Auto-Activation - Core
FreeRTOS will be needed for the application to stream images on the Graphics Display. It will send data through TCP to the web browser, the usual HTTP client. These will need to be given time with an RTOS, otherwise, they will need to wait for too long, one after the other.
Figure: Component Auto-Activation - FreeRTOS
Observe the addition of the three applications in the Active Components window.
Figure: TCP/IP Application Layer Configuration – Result of Adding Components
Presentation Layer
Add the Presentation Layer component. This is needed by the HTTP_NET module.
Figure: TCP/IP Presentation Layer Configuration
Transport Layer
For DHCP and Announce, the UDP is necessary. The HTTP server will use TCP protocol. Add both UDP and TCP.
Figure: TCP/IP Transport Layer Configuration – Adding Components
Auto-activation of dependent components will be asked, click Yes.
Cryptographic Library and wolfCrypt library are both needed only for generating Random for the TCP connections. For more details, please see RFC 6528 and RFC 6056.
Figure: Component Auto-Activation - Crypto
Figure: Component Auto-Activation - wolfCrypt
There is another window that might not be visible, it should be inside the MPLAB X IDE, under the TCP/IP Configuration plugin. When it is visible, just click on Yes. This will link the two automatically added components with each other.
Figure: Component Auto-Connect – Crypto/wolfCrypt
The result of adding the two protocols is shown below:
Figure: TCP/IP Transport Layer Configuration – Result of Adding Components
Network Layer
The web server needs the IP address, so it will use IPV4. It will also need to reply to ping, so ICMPv4 is needed. ARP is needed to map a dynamic IP address to the physical machine. Add the following:
- ARP
- IPV4
- ICMPv4
Select the components and click on the green + icon.
Figure: TCP/IP Network Layer Configuration – Adding Components
Figure: TCP/IP Network Layer Configuration – Result of Adding Components
Data Link Layer
The PIC32MZ device has an internal MAC that connects with the KSZ8061 PHY module, and the PHY is managed through MIIM. We will need to add these components.
- From MAC Components add ETH MAC.
Figure: TCP/IP Data Link Layer Configuration – Adding Components: MAC
Figure: TCP/IP Data Link Layer Configuration – Adding Components: MAC
From the PHY Components, add:
- KSZ8061
- MIIM Driver
Figure: TCP/IP Data Link Layer Configuration – Adding Components: PHY
Figure: TCP/IP Data Link Layer Configuration – Adding Components: PHY
From the Active Components > Network Interface group, click on the + icon. NETCONFIG-0 instance should appear.
Figure: TCP/IP Data Link Layer Configuration – Adding Components: Network Interface
These components need to be linked. Click on the orange or red connector and drag to the one you want to connect with. Connect the following:
- NETCONFIG-0 with ETHMAC
- ETHMAC with KSZ8061
Figure: TCP/IP Data Link Layer Configuration
Basic Config Layer
We will need to do some commands to the TCP/IP Stack while building and debugging the application, so add the TCPIP CMD component to support commands through a serial terminal.
Figure: TCP/IP Basic Layer Configuration
The TCP/IP part should be ready.
Other Dependent Components
The configurator is a beta version at the time the documentation was written, so not all components have been added automatically.
To observe it, the Config Summary button brings up the Configuration Summary, which helps to check that everything is linked and added correctly.
Figure: TCP/IP Configuration Summary
We will add those manually and will come back to the TCP/IP Configuration plugin to check the summary, so you might want to keep the plugin open.
Move back to MPLAB X IDE Project Graph and select the Root view. The Project Graph should look something like this:
Figure: Project Graph after adding TCPIP Components
Before configuring the rest of the TCP/IP Stack, we need to add the dependencies. At the same time, we will add some other necessary components needed by the application, mentioned here because we are adding components to that area.
File System Components
One of the missing things is the File System. The File System is needed for the website and for hosting the SD card pictures via HTTP and on the graphics display.
The application will be using two file systems, one is FAT for the SD card and the other will be the Microchip File System (MPFS) that will be used by the HTTP server to display the application webpage.
The File System can be added from the Device Resource, by checking FILE SYSTEM.
Figure: Adding File System
From here utilize the red diamonds/squares to add dependencies.
SD Card
Add SD card by right-clicking the red square, then hovering over the Satisfiers menu.
Figure: Adding SD Card (SPI)
The SD card needs the System Time Component, which pops up to be activated. Click Yes.
Figure: Component Auto-Activation – Time
Add SPI1 peripheral. The SD card itself is a driver and the project does not use the SPI for more than one function to need a driver to manage it.
Figure: Adding SPI1 Peripheral
Memory
Add another media driver by right-clicking the green square on the FILE SYSTEM component.
Figure: Adding Memory Driver
Then add to the MEMORY the NVM (Non-Volatile Memory) peripheral component from the red diamond of the MEMORY component.
Figure: Adding NVM Peripheral
Result:
Figure: File System Component Graph
Console & Command
Go back to the TCP/IP Configurator. Note there is still one unsatisfied dependency for the TCPIP CMD module, and this is SYS_COMMAND and SYS_CONSOLE, another optional dependency. Both are used to have the terminal communicate with the system.
Figure: TCP/IP Dependency Status
The easiest way to add those is to start with the CONSOLE. Add the CONSOLE by right-clicking the yellow diamond of the TCP/IP STACK folder.
Figure: Adding CONSOLE Peripheral
The CONSOLE will need a communication port. The smallest in firmware size and processor usage would be a UART console, which you can use as a USB-to-UART bridge to connect the PC to UART.
On the second micro-BUS we mount a USB I2C Click board™ from MIKROE (https://www.mikroe.com/). This is equipped with MCP2221 and is a USB-to-UART and I2C bridge.
The UART connected to this BUS is UART2.
Connect the UART2 to Instance 0 of the console.
Figure: Adding UART2 Peripheral
The COMMAND is a System Component and uses CONSOLE to receive the commands. Right-click on the CONSOLE SYS_CONSOLE green square and add the COMMAND Consumer.
Figure: Adding NVM Peripheral
DEBUG
Even if not mentioned as needed in the TCP/IP Configurator, DEBUG is nice to have, so add it the same way as COMMAND.
For example, this is for debugging TCP/IP Stack initialization, because there are debug messages sent over the console to inform what failed.
Time
Looking at the Project Graph, the TIME component has a red diamond, which means it is missing one dependency, namely a timer. The TIME component will use the Core Timer peripheral.
Figure: Adding CORE TIMER Peripheral
Summary
Go back to the TCP/IP Configurator and observe that all Mandatory Dependencies are done.
There is one unsatisfied dependency for Presentation Layer if the use of TLS is needed.
This demo does not use TLS, so the dependency can be left unsatisfied.
Red means mandatory and yellow means optional.
Before going to add another big stack to an application, check if the current stage of this application has at least the TCP/IP Stack and the UART and CONSOLE running.
Additionally, before generating the project there are some other things to be taken into consideration, like MCU pins used, clocking for the MCU, and the settings for the different components we have added.
The following image is how the Project Graph should look so far.
Figure: Web Photo Frame Project Graph
