Arty Z7-20 DMM Shield Webserver Demo User Guide

Digilent provides a Webserver demo for DMM Shield Zynq library for Digilent's Arty Z7-20 FPGA system board, to be used with the Xilinx SDK development tool.
It accesses the DMM Shield hardware in order to implement some basic DMM Shield functionality.
It uses DMM Shield library, seedmmshield Zynq库.
The demo is based on Xilinx Webserver demo (included inXilinx LightWeight IP Application Examples,第6页),演示了Xilinx LWIP网络堆栈的使用。修改了Xilinx演示以实现DMMShield功能 /请求。
The demo uses a Xilinx Memory File System (xilmfs), which stores the main page, together with page additional files (java script file, used images, css style file). The functionality implemented in the main page / javascript file only useshtml/ AJAX.

Overview

Description

Arty Z7-20 DMM盾牌网络服务器演示正在演示连接到Arty Z7-20作为系统板的DMM盾牌的基本功能。
The project implements a basic client - server architecture:

  • 网络服务器公开Application web pageat a specific IP address, implementing the needed functionality.
  • every time the user opens the web page using any browser the page is delivered to the user browser.
  • 当修改网页控件(连击,无线电按钮)时Javascript code related to the application web pagegenerates HTTP Requests to theWebserver.
  • the webserver sends the HTTP Response back to the the application web page, as a text message.
  • the Javascript code related to the application web page interprets the response text and refreshes only the affected areas of the webpage, in order to display the needed information.
  • the application web page, together with associated files, are stored in a Xilinx memory file system

Features Used

Not Used 用过的
2 user switches X
2 user LEDs X
2 user RGB LEDs X
4 user push buttons X
USB-UART Bridge X
Micro SD card connector X
HDMI Sink and HDMI Source X
PWM单声道音频带有3.5毫米杰克 X
10/100/1000 Ethernet PHY X
512MIB 1050MB/S DDR3内存 X
Quad-SPI Flash X
Two Pmod ports X
chipKIT connector X
USB HID Host X

Prerequisites

Hardware

  • Arty Z7-20 board
  • Micro-USB电缆
  • DMM Shield
  • 以太网电缆
  • Banana Cables
  • 5K欧姆电阻

软件


Downloads

Arty Z7-20 DMM Shield WebServer演示项目存储库 -ZIPGit Repo


Download and Launch the Arty Z7-20 DMM Shield Webserver Demo

1)遵循Using Digilent Github Demo ProjectsTutorial.
2) If you choose to use the project whithout building the hardware platform in Vivado (SDK Hardware Handoff metod in the above mentioned tutorial), you will notice that sdk folder lacks the hardware platform folder (design_1_wrapper_hw_platform_0).
In order to build this, before importing the projects in SDK (step 4), follow this procedure: In SDK, select File/New/Others/Xilinx/Hardware Platform Specification, then browse for design_1_wrapper.hdf in hw_handoff folder, then select Finish.
3) Follow the steps fromMemory File System related actionschapter.
4) Plug the DMM Shield in the Chipkit connector of the Arty Z7-20 board
5) Plug a banana cable into Voltage/Ohm banana connector of the DMM Shield. Do the same for the COM connector.
6)将电缆的末端连接到所需值的整孔电阻器。前5K欧姆
7) Turn on your board and open a serial terminal (such as TeraTerm) on your computer to receive status messages. Setup the serial port to connect to the appropriate port for your board, with a baud rate of 115200, 8 data bits, no parity bit and 1 stop bit.
8)从SDK运行Webaserver应用程序(DMMShieldWebserver)。从终端中获取Web服务器的IP地址,然后在Web浏览器中打开它。例如:http://10.113.0.74/
9) In the web page change scale according to the desired measurement, and notice the measured value. SeeApplication web pagefor more details.

Note: This is a simple example of measuring a resistance. The demo will work with every scale of resistances/voltage/current/diode/continuity/ in the correct configuration.

Hardware Structure

为此演示实现的Vivado硬件配置具有以下功能:

  • basic Zynq configuration, having ENET_0 and UART_PS0 checked
  • Axi_GPIOcore having 2GPIOchannels: GPIO0 for the 6 output IO signals (CS_Eprom,CS_DMM, SPI_CLK, DI, RLU, RLD, RLI) and GPIO2 for the input signal DO. TheseGPIOpins are used for the communication between Arty Z7-20 board and DMM Shield.

The following image shows the block design.

DMMShield Webserver structure

The application has the following elements:
Client side:

Server side:


客户端元素存储在Arty Z7-20板内存中Memory File System.

Application web page

这是一个普通的html网页网公开的erver in order to implement the user interface.
It is called index.html and is located in the root of the Xilinx memory file system.
The following image shows the application web page.
基本上,它具有以下功能:

  • Select the scale class using radio buttons.
  • Select the scale using the scale combos (specific to each scale class).
  • It displays some status information (scale change, scale change by other instances, or error messages)

The javascript code related to theApplication web page位于Xilinx内存文件系统的JS文件夹中,并将其分组在Main.js文件中。基本上,它具有以下功能:

  • when theApplication web pageis loaded, variables are initialized and event functions are assigned to change in radio buttons and combos page controls. Data request is enabled.
  • when radio buttons are clicked, thewebserver.scaleType_changed调用函数,该功能可确保仅显示与所选广播按钮相对应的比例组合。
  • when scales are selected using the scale combos, thescale_changedfunction is called which generates a “/cmd/sclxhr” HTTP Request, including current scale on two characters. It sets thewebserver.scale_callbackcallback function and disables data request.
  • when HTTP Response arrives for “/cmd/sclxhr” HTTP Request, thewebserver.scale_callbackfunction is called which enables the data request. If error occurs, 'ERROR“ is displayed in the measured value field and the error message is shown in the status area of the application web page.
  • 启用数据请求时,每一秒钟webserver.val_request函数被调用。It generates a ”/cmd/valxhr“ HTTP request. It sets thewebserver.val_callbackcallback function.
  • when HTTP Response arrives for ”/cmd/valxhr“ HTTP Request, thewebserver.val_callback函数被调用。它从响应文本中提取DMMShield电流量表(前两个字符)和测量值(其余字符)。测量值显示在测量值字段中。如果DMMShield当前量表与所选页面的页面不同(这意味着该页面通过不同的网页更改),则可以调用webserver.positionRadiosCombosfunction which updates the radio buttons / scale combos to reflect this new scale. If error occurs, 'ERROR” is displayed in the measured value field and the error message is shown in the status area of the application web page.


Webserver

这实现了应用程序的服务器端。这是用C上的C7-20板上运行的Vivado SDK应用程序,基本上提供了Application web page并倾听从中收到的请求。如前所述,Xilinx LWIP网络服务器演示被用作凝视点。
When application initializes, it communicates in the serial terminal (115200 baud) the IP address that will be used in order to open the application web page.

Board IP: 10.113.0.74

NetMask:255.255.252.0

Gateway : 10.113.0.1

The webserver hadles the following HTTP POST requests:

  • “/cmd/sclxhr”.

This is the POST request sent by theApplication web pageto the webserver in order to change the current DMMShield scale, as a result of a scale being selected in the application web page. When this request is recognized, the following two characters are interpreted as the scale index.
Then, the webserver calls DMM_SetScale library function in order to set the desired scale.
The HTTP Response text is shown in the following table:

“ <2个字符>“比例ID” no errors
设置秤时发生错误
  • “/cmd/valxhr”。

This is the POST request sent by theApplication web pagerepeatedly to the webserver, in order to get the DMMShield measured value / current state.
When this request is recognized, if the DMMShield has a selected scale, the webserver calls DMM_DGetValue library function in order to obtain the measured value then it calls library function DMM_FormatValue to format the value.
The HTTP Response text is shown in the following table:

“ <2个字符上的当前DMMShield秤ID> <格式化值,有6个小数点和单位>” A scale was selected for DMMShield, no errors
A scale was selected for DMMShield, errors occurred when retrieving measured value
”-1” 没有选择DMMShield的规模

Memory file system

This project uses the Xilinx memory file system in order to provide storage for theApplication web page及其相关文件:图像,样式和javascrip文件。
内存文件系统具有以下内容:

位置(文件夹) 内容(文件) Description
Root index.html Application web page
Root\js main.js Javascript code related to the application web page
root \ css main.css CSSstyle document
Root\images Digilent-Logo.gif The Digilent logo placed within the application web page
favicon.ico The Digilent logo used as web page shortcut icon
root \ index_files colorschememapping.xml Files related to index.html web page
editdata.mso
filelist.xml
themedata.thmx

TheMemory File System related actionschapter explains how the memory file system is used in the SDK project.

SDK项目的DMMShieldWebserver文件夹下的MEMF包含要放置在存储文件系统中的文件。使用内存文件系统有两个步骤:

生成内存系统文件

此步骤的目的是从存储器文件系统中所需的内容中生成一个存储系统文件。运行Xilinx软件命令行工具实用程序,该工具提供一个命令提示器。运行以下两个命令:

1)将目录更改为MEMFS文件夹内容的位置。
例如:cd Y:/Software/Work/Webserver/DMMShield/DMMShield.sdk/DMMShieldWebServer/memfs/
2) Run the mfsgen command, including all the files / folders to be included.
mfsgen -cvbf ../image.mfs 2048 css images index_files js generate-mfs index.html

请注意,Xilinx文档中还解释了此步骤Xilinx LightWeight IP Application Examples, page 28.

Download the memory file system file in the board memory

Although Xilinx proposes (Xilinx LightWeight IP Application Examples, page 28) the use of dow command in order to download the memory file system, we used a different approach: instruct Vivado SDK to download the memory file system file every time the configuration is run.
In Vivado SDK, edit the desired debug (or running configuration) like this:

  • select Run / “Debug Configurations” menu (or Run / “Run Configurations”), then select the desired configuration that will be downloaded on the board.
  • click on Application tab, then press Edit… button.
  • Add image.mfs file at address 0xFE00000, as shown in the following image:

DMMShield Webserver functionality

The project implements a basic client - server architecture:

  • the webserver stores a main web page at a specific IP address, implementing the needed functionality.
  • every time the user opens the web page using any browser the page is delivered to the user browser.
  • 当修改网页控件(连击,无线电按钮)时javascript code behind the webpage generateshtml向Web服务器的请求。
  • Web服务器将响应发送回网页后面的JavaScript代码,作为短信。
  • 网页背后的JavaScript代码仅刷新网页的影响区域,以显示所需的信息。

Additional Resources