Lab 4: Add HTTP Web Server to Visualize Data

< Back to Lab Index

Step 9: Build and Run the Application

1

Clean and build your application by clicking on the Main_Rebuild_Project.png Clean and Build Project button.

2

Program your device with the built application binary by clicking on the Main_Program_Target_Project.pngMake and Program Device button.

3

Now, open the serial terminal application on your computer and connect to the serial port as shown in Figure 3 (Tera Term is used here for reference).

lab1_step11_console_setup.png
Figure 1: Open USB Serial Port using Tera Term
​

Note: It is not required to adjust the Baud rate as you are using a USB connection.

4

Upload the Web pages (HTML files) inside the SD card.

  • Remove the SD card from the IO1 Xplained Pro board and insert the media to a host machine.
  • Go to the folder <your unzipped folder path>\getting_started_pic32_wfi32e\Lab4\web_pages and copy all the files and folders.
  • Paste the files into the root of the SD card mounted as SDHC.
  • Safely remove the SD card media from the Host machine.
  • Insert the SD card into the microSD slot of the IO1 Xplained Pro board.

5

Reset the PIC32 WFI32E Curiosity Board using the MLCR button.

6

Observe the terminal, the output may vary depending on whether the application is running in AP mode or STA mode.

lab4_step9_06_ap.png
Figure 1: Application starting in AP Mode
lab4_step9_06_sta.png
Figure 2: Application starting in STA Mode

7

If the WFI32E device operates in AP mode:

  • Connect a client device (Computer, Tablet, Smartphone, …) to WFI32E_AP in Wi-Fi.
lab4_step9_07a_ap.png
Figure 3: Computer connecting to WFI32E_AP
  • Observe the serial console that indicates a station is connected to the WFI32 device acting as an access point.
lab4_step9_07b_ap.png
Figure 4: A station is connected to WFI32E_AP
  • Open a web browser (Firefox, Google Chrome, etc..) on the client device.
  • Enter the IP address of the WFI32E's AP in the search bar of the browser.
lab4_step9_07c_ap.png
Figure 5: WFI32E AP Mode IP Address

If the WFI32E device operates in STA mode:

  • Make sure the station is correctly connected to your own Wi-Fi Network.
lab4_step9_07b_sta.png
Figure 6: WFI32 as a station is correctly connected to Wi-Fi Network
  • Open a web browser (Firefox, Google Chrome, etc..) on a device connected to the same network.
  • Enter the IP address of the WFI32E's STA obtained from the network in the search bar of the browser.
lab4_step9_07c_ap.png
Figure 7: WFI32E STA Mode IP Address obtained by the Network

8

On the browser, observe the main web page index.htm.

lab4_step9_08_index.png
Figure 8: index.htm

If your Wi-Fi® is configured for AP mode, then interact with the AP mode interface, otherwise, interact with the STA mode interface.

9

From the main page index.htm:

  • Select Log View to visualize the data log in the operation mode of the WFI32E device.
  • Press Show log to display the log in the browser.
lab4_step9_09_showlog.png
  • Press the switch SW1 (upper one) to trigger the log of the temperature.
  • Reload the web page and press the Show Log button again.
  • Observe the new log displayed at the end of the list on the left and the end of the graph.
lab4_step9_09_log_ap.png
Figure 9: Log in AP mode
lab4_step9_09_log_sta.png
Figure 10: Log in STA mode
​

Note: If you have selected STA mode whereas you configured your Wi-Fi in AP mode, it will not work because an internet connection is required to load the jQuery library. No internet connection is available while the computer is connected to the WFI32E AP.

10

From the main page index.htm:

  • Select LED Manager to control the Red and Green LEDs embedded on the WFI32E Curiosity Board.
lab4_step9_10.png
Figure 11: Control the on-board LEDs
​

Note: You can find the Lab 4 solution in the folder: <your unzipped folder path>\getting_started_pic32_wfi32e\Lab4\solution.

 Results

You should be able to visualize the temperature logs on hosted Web Page.

 Analysis

In this lab, you have successfully developed an IoT application on the PIC32 WFI32E.

4 RTOS Threads were created:

  • I2C Sensor Application reads the temperature value, notifies the SD card thread using the SD card message queue, and goes to sleep for 1 second.
  • SD card application is waiting to receive data in the SD card queue. Once the queue is filled, the application logs the temperature value to a file.
  • USB application handles the messages to print on the USB console with the help of another message queue.
  • WIFI application is waiting for the TCP IP stack to be ready and start the HTTP modules that allow to process the HTTP events (dynamic variables, Post, Get, etc.).

 Conclusions

In this lab, you have successfully developed a full-fledged MPLAB Harmony application. This gives you a fair idea of how MPLAB Harmony helps application development. If you need HTTP web support for any of your existing applications, this lab can be used as a reference. This can also be a starting point for your IoT applications.


  Return to Top

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