Ultra96 SDR第一部分：简单的射频频谱图Web应用程序

描述

Ultra96 是一款 FPGA 开发板，旨在展示 Xilinx 的 Zynq UltraScale+ MPSoC 芯片，其价格点可供爱好者社区使用。对于这个项目，我将选择第一个选项，因为这意味着我可以将 Ultra96 安全地放在架子上，当我在沙发上工作时，我可以安全地远离我的猫穿过我公寓的战争路径。

在我之前的 Ultra96 项目中，我介绍了如何使用 Wi-Fi 连接和启动网页创建基本映像。我从那个项目的终点开始这个项目。

一旦 Ultra96 启动并连接到所需的 Wi-Fi 网络，Ultra96 网络服务器的主页可以在浏览器窗口中以动态分配的 IP 地址打开：

Ultra96 的启动网页的主页。

 

如果您选择将无线网络信息硬编码到 Ultra96 根主文件夹中的 wpa_supplicant.conf 文件中，它将在启动时自动连接，因此您可以跳过使用生成的对等网络重新连接到 Wi-Fi 的过程，并且每次启动后的网络应用程序。然后，您可以打开一个终端窗口并使用分配的 IP 地址通过 SSH 连接到 Ultra96（我的 Ultra96 在我的网络上被分配了192.168.1.188 ，我使用arp -a命令找到了它）。尽管这个项目的大部分内容发生在 Web 应用程序中，但仍有一些事情需要访问 Ultra96 的命令行。

arp -a
ssh root@192.168.1.188

要开始在 Ultra96 的网络服务器中开发新的网页应用程序，“自定义内容”页面提供了必要的工具。将自定义网页添加到 Ultra96 的网络服务器需要三个组件：

1 - 应用程序项目（用 Python 编写）2 - 网络前端（用 HTML 编写）3 - 网络后端（用 Python 编写）

鉴于 Ultra96 上的 Zynq MPSoC 提供的额外处理能力，我认为看看我如何将它用于我最喜欢的项目应用领域之一会很有趣：软件定义无线电。虽然 SDR 的完整设计中有许多组件（比我想在一个项目中介绍的要多），但我决定从 SDR 和 RF 测试中使用的最基本的应用程序之一开始，即频谱图。通常称为瀑布图，频谱图显示指定频谱中存在的所有频率，因为它们在指定时间段内随时间变化。

GnuRadio 中的频谱图或瀑布图。

 

这是一个非常有用的工具，因为它可以直观地表示指定频谱中存在的物理信号。为了在这个项目的 Web 应用程序中进行验证，我决定硬编码两个简单的信号以显示在频谱图上，并将与外部射频信号接口的任务留给未来的项目。

在 Ultra96 上开发自定义内容的主网页。

 

作为单击自定义内容选项卡后创建应用程序的第一步，选择“创建项目”，将出现以下空白文本编辑器：

文本编辑器将在“创建项目”选项下提供的初始文件。

 

为频谱图添加以下代码：

# Spectrogram in Python 

import matplotlib.pyplot as plt
import numpy as np

# Fixing random state for reproducibility
np.random.seed(19680801)

dt = 0.0005
t = np.arange(0.0, 20.0, dt)
s1 = np.sin(2 * np.pi * 100 * t)
s2 = 2 * np.sin(2 * np.pi * 400 * t)

# create a transient "chirp"
s2[t <= 10] = s2[12 <= t] = 0

# add some noise into the mix
nse = 0.01 * np.random.random(size=len(t))

x = s1 + s2 + nse   # the signal
NFFT = 1024         # length of the windowing segments
Fs = int(1.0 / dt)  # sampling frequency

fig, (ax1, ax2) = plt.subplots(nrows=2)
ax1.plot(t, x)
Pxx, freqs, bins, im = ax2.specgram(x, NFFT=NFFT, Fs=Fs, noverlap=900)
# The `specgram` method returns 4 objects:
# - Pxx: the periodogram
# - freqs: the frequency vector
# - bins: centers of the time bins
# - im: matplotlib.image.AxesImage instance representing data in the plot

plt.show()

#save the plot to an image file to display in the webapp
plt.savefig('/usr/share/ultra96-startup-pages/webapp/static/images/spectrogram_chirp.png')

该代码生成一个 100Hz 正弦波，该正弦波在频谱图在 0Hz 到 1kHz 频谱上测量的整个 20 秒间隔内出现，并在 10 到 12 秒内产生一个 400Hz 正弦波的瞬时“啁啾”。然后使用Matplotlib模块库中的specgram函数，绘制出频谱图并将该图保存到图像文件中，然后 Web 应用程序可以将其显示给用户。请注意，为图像文件指定的输出路径位于 Ultra96 网络服务器的文件结构中。

添加自定义代码后，单击“保存文件”并指定文件名。请务必添加.py扩展名，因为 Web 服务器中的文本编辑器不会在自定义项目选项卡中自动执行此操作。

在 Ultra96 网络服务器中编辑项目文件。

 

这是需要命令行的步骤之一。Matplotlib 包不在标准的本地 Python 库中，因此需要使用 Python3.5 包管理器 pip3 安装 Cython 和 numpy（Matplotlib 仅与 Python3.5 及更高版本兼容，因此请确保使用 pip3 与 pip ):

pip3 install Cython
pip3 install numpy
pip3 install matplotlib

如果愿意，可以使用 USB 转 UART/JTAG 扩展板而不是 SSH 来访问终端。

 

安装必要的 Python 包后，我通过从 Ultra96 的命令行执行它并验证图像文件是否输出到适当的位置来验证频谱图 Python 脚本是否按预期运行。

python3 /usr/share/ultra96-startup-pages/webapp/templates/CustomContent/custom/spectrogram_chirp.py

频谱图输出为来自 spectrogram.py 的 .png 图像文件

 

一旦验证了频谱图项目文件可以正常工作，就需要在 Ultra96 网络服务器中创建网页以显示输出绘图图像。由于网络服务器本身是基于 Python 的，因此需要 HTML 前端以及 Python 中的后端。

在网络服务器的自定义内容页面中，单击“编辑 Webapp”按钮以打开 Webapp 重新加载页面。

注意您的自定义 Web 应用程序添加不会破坏现有结构。

 

单击“创建前端”以调出已填充基本页面模板的 HTML 文本编辑器。

为新的 Web 应用程序创建自定义前端。

 

添加以下 HTML 代码：

{% extends "Default/default.html" %}
{% block content %}

<div class="page-header">
  <h1 class="display-4"><b>{% block title %}Ultra96 spectrogram{% endblock %}b>h1>
div>



<h1>Spectrogram - Transient Chirp Exampleh1>
<meta http-equiv="explore" content="B" />
<img src="{{ url_for('static', filename='images/spectrogram_chirp.png') }}" alt = "Spectrogram Plot" />



{% endblock %}

在指定图像的文件路径时，Ultra96 网络服务器似乎被硬编码为在/usr/share/ultra96-startup-pages/webapp/static/目录中查找，因此只有该目录中的文件路径应该传递给img src 函数（我在浏览器中使用检查工具后发现了这一点，起初图像不会出现在网页中并指定了完整的文件路径）。

HTML 文本编辑器将自动将.html 附加到文件名，因此在单击“保存文件”后出现提示时键入所需的文件名。

填写好的模板保存为网页的前端。

 

对于网页的相应后端文件，Webapp Reload 页面上的“创建后端”按钮将打开一个 Python 文本编辑器，其中包含自动填充的基本模板，当 Flask 服务器调用时（Ultra96 的 Python 库webserver 使用）会拉取相应的前端 HTML 文件。

为新的 Web 应用程序创建自定义后端。

 

自定义后端代码：该项目的唯一编辑模板是简单地替换所有 CHANGE_ME 以匹配我们刚刚创建的前端的文件名：

@app.route("/spectrogram.html", methods=["GET", "POST"])
def spectrogram():
    if request.method == "POST":
        return render_template("CustomContent/custom_front_end/spectrogram.html")
    else:
        return render_template("CustomContent/custom_front_end/spectrogram.html")

编辑完成后，使用与相应前端文件相同的名称保存后端文件。同样，后端文本编辑器将在保存时自动将 .py 扩展名附加到文件名。

所有 CHANGE_ME 都编辑为频谱图，因为那是给前端 .html 文件的文件名。

 

返回到 Webapp Reload 页面，您将在可用网页的表格中看到前端和后端文件相互匹配。为了能够访问这个新的自定义网页，需要将其添加到网络服务器。这是通过选中“包含”列中的框然后单击“重新加载 Webapp”按钮来完成的。您只需在第一次创建自定义网页或更改后端文件时重新加载 Web 应用程序。

自定义内容下的 Webapp 重新加载页面显示可用的自定义网页。

 

要重新加载网络服务器，必须在单击“重新加载 Webapp”按钮后自动重启电路板。Ultra96 重启后，通过浏览器重新连接到网络服务器并导航回自定义内容页面。

自定义内容选项卡现在将频谱图页面显示为选项。

 

频谱图网页现在将作为一个选项出现。单击“查看”按钮将其显示出来：

Ultra96 网络服务器上的新频谱图网页。

 

在未来的项目中，我将重新访问这个自定义网页以对其进行扩展，以便它可以使用不同的输入一遍又一遍地运行项目 Python 脚本，并动态加载频谱图的新图像。这只是扩展此项目中生成的自定义前端和后端文件的问题。

故障排除：

我在 Ultra96 的基于 Flask 的网络服务器文件 webserver.py 中发现了一个有趣的错误，当我第一次生成一个空白的测试网页时（您在之前的屏幕截图中看到的 CHANGEME 网页）我在尝试查看时收到 404 Not Found 错误. Flask 通过在实际运行网络服务器之前指定所有 URL 和函数调用来工作，当您为自定义网页选择“包含”并单击“重新加载 Webapp”时，它会将您的自定义后端代码添加到网络服务器，以便它知道 URL 是什么它是在运行网络服务器之前。

在跟踪 webserver.py （在Ultra96 文件结构中的/usr/share/ultra96-startup-pages/webapp/webserver.py中找到）后，我注意到我的自定义后端代码在调用运行网络服务器后已自动填充是制成。这意味着网络服务器实际上从未将 URL 传递给我的自定义网页。

我的 Ultra96 上 webserver.py 的屏幕截图。

 

传递我的自定义网页 URL 的代码显示在屏幕截图中的第一个紫色括号中，之后运行网络服务器的第二个调用显示在第二个紫色括号中。运行网络服务器的第一个调用以紫色圈出，必须注释掉或删除。进行此编辑后，需要重新启动电路板。此外，我发现如果我添加新的自定义网页，每次单击“重新加载 Webapp”后都必须重新执行此操作。

我不确定我在构建图像时是否以某种方式获得了旧版本的webserver.py或发生了什么，所以我认为如果您从 Ultra96 上的图像开始时每个人都需要做这件事矿。但是我花了足够长的时间来追踪这一点，我认为这里值得注意。