Ultra96 SDR第一部分：簡(jiǎn)單的射頻頻譜圖Web應(yīng)用程序

描述

Ultra96 是一款 FPGA 開(kāi)發(fā)板，旨在展示 Xilinx 的 Zynq UltraScale+ MPSoC 芯片，其價(jià)格點(diǎn)可供愛(ài)好者社區(qū)使用。對(duì)于這個(gè)項(xiàng)目，我將選擇第一個(gè)選項(xiàng)，因?yàn)檫@意味著我可以將 Ultra96 安全地放在架子上，當(dāng)我在沙發(fā)上工作時(shí)，我可以安全地遠(yuǎn)離我的貓穿過(guò)我公寓的戰(zhàn)爭(zhēng)路徑。

在我之前的 Ultra96 項(xiàng)目中，我介紹了如何使用 Wi-Fi 連接和啟動(dòng)網(wǎng)頁(yè)創(chuàng)建基本映像。我從那個(gè)項(xiàng)目的終點(diǎn)開(kāi)始這個(gè)項(xiàng)目。

一旦 Ultra96 啟動(dòng)并連接到所需的 Wi-Fi 網(wǎng)絡(luò)，Ultra96 網(wǎng)絡(luò)服務(wù)器的主頁(yè)可以在瀏覽器窗口中以動(dòng)態(tài)分配的 IP 地址打開(kāi)：

Ultra96 的啟動(dòng)網(wǎng)頁(yè)的主頁(yè)。

?

如果您選擇將無(wú)線網(wǎng)絡(luò)信息硬編碼到 Ultra96 根主文件夾中的 wpa_supplicant.conf 文件中，它將在啟動(dòng)時(shí)自動(dòng)連接，因此您可以跳過(guò)使用生成的對(duì)等網(wǎng)絡(luò)重新連接到 Wi-Fi 的過(guò)程，并且每次啟動(dòng)后的網(wǎng)絡(luò)應(yīng)用程序。然后，您可以打開(kāi)一個(gè)終端窗口并使用分配的 IP 地址通過(guò) SSH 連接到 Ultra96（我的 Ultra96 在我的網(wǎng)絡(luò)上被分配了192.168.1.188 ，我使用arp -a命令找到了它）。盡管這個(gè)項(xiàng)目的大部分內(nèi)容發(fā)生在 Web 應(yīng)用程序中，但仍有一些事情需要訪問(wèn) Ultra96 的命令行。

arp -a
ssh root@192.168.1.188

要開(kāi)始在 Ultra96 的網(wǎng)絡(luò)服務(wù)器中開(kāi)發(fā)新的網(wǎng)頁(yè)應(yīng)用程序，“自定義內(nèi)容”頁(yè)面提供了必要的工具。將自定義網(wǎng)頁(yè)添加到 Ultra96 的網(wǎng)絡(luò)服務(wù)器需要三個(gè)組件：

1 - 應(yīng)用程序項(xiàng)目（用 Python 編寫(xiě)）2 - 網(wǎng)絡(luò)前端（用 HTML 編寫(xiě)）3 - 網(wǎng)絡(luò)后端（用 Python 編寫(xiě)）

鑒于 Ultra96 上的 Zynq MPSoC 提供的額外處理能力，我認(rèn)為看看我如何將它用于我最喜歡的項(xiàng)目應(yīng)用領(lǐng)域之一會(huì)很有趣：軟件定義無(wú)線電。雖然 SDR 的完整設(shè)計(jì)中有許多組件（比我想在一個(gè)項(xiàng)目中介紹的要多），但我決定從 SDR 和 RF 測(cè)試中使用的最基本的應(yīng)用程序之一開(kāi)始，即頻譜圖。通常稱為瀑布圖，頻譜圖顯示指定頻譜中存在的所有頻率，因?yàn)樗鼈冊(cè)谥付〞r(shí)間段內(nèi)隨時(shí)間變化。

GnuRadio 中的頻譜圖或瀑布圖。

?

這是一個(gè)非常有用的工具，因?yàn)樗梢灾庇^地表示指定頻譜中存在的物理信號(hào)。為了在這個(gè)項(xiàng)目的 Web 應(yīng)用程序中進(jìn)行驗(yàn)證，我決定硬編碼兩個(gè)簡(jiǎn)單的信號(hào)以顯示在頻譜圖上，并將與外部射頻信號(hào)接口的任務(wù)留給未來(lái)的項(xiàng)目。

在 Ultra96 上開(kāi)發(fā)自定義內(nèi)容的主網(wǎng)頁(yè)。

?

作為單擊自定義內(nèi)容選項(xiàng)卡后創(chuàng)建應(yīng)用程序的第一步，選擇“創(chuàng)建項(xiàng)目”，將出現(xiàn)以下空白文本編輯器：

文本編輯器將在“創(chuàng)建項(xiàng)目”選項(xiàng)下提供的初始文件。

?

為頻譜圖添加以下代碼：

# 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')

該代碼生成一個(gè) 100Hz 正弦波，該正弦波在頻譜圖在 0Hz 到 1kHz 頻譜上測(cè)量的整個(gè) 20 秒間隔內(nèi)出現(xiàn)，并在 10 到 12 秒內(nèi)產(chǎn)生一個(gè) 400Hz 正弦波的瞬時(shí)“啁啾”。然后使用Matplotlib模塊庫(kù)中的specgram函數(shù)，繪制出頻譜圖并將該圖保存到圖像文件中，然后 Web 應(yīng)用程序可以將其顯示給用戶。請(qǐng)注意，為圖像文件指定的輸出路徑位于 Ultra96 網(wǎng)絡(luò)服務(wù)器的文件結(jié)構(gòu)中。

添加自定義代碼后，單擊“保存文件”并指定文件名。請(qǐng)務(wù)必添加.py擴(kuò)展名，因?yàn)?Web 服務(wù)器中的文本編輯器不會(huì)在自定義項(xiàng)目選項(xiàng)卡中自動(dòng)執(zhí)行此操作。

在 Ultra96 網(wǎng)絡(luò)服務(wù)器中編輯項(xiàng)目文件。

?

這是需要命令行的步驟之一。Matplotlib 包不在標(biāo)準(zhǔn)的本地 Python 庫(kù)中，因此需要使用 Python3.5 包管理器 pip3 安裝 Cython 和 numpy（Matplotlib 僅與 Python3.5 及更高版本兼容，因此請(qǐng)確保使用 pip3 與 pip ):

pip3 install Cython
pip3 install numpy
pip3 install matplotlib

如果愿意，可以使用 USB 轉(zhuǎn) UART/JTAG 擴(kuò)展板而不是 SSH 來(lái)訪問(wèn)終端。

?

安裝必要的 Python 包后，我通過(guò)從 Ultra96 的命令行執(zhí)行它并驗(yàn)證圖像文件是否輸出到適當(dāng)?shù)奈恢脕?lái)驗(yàn)證頻譜圖 Python 腳本是否按預(yù)期運(yùn)行。

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

頻譜圖輸出為來(lái)自 spectrogram.py 的 .png 圖像文件

?

一旦驗(yàn)證了頻譜圖項(xiàng)目文件可以正常工作，就需要在 Ultra96 網(wǎng)絡(luò)服務(wù)器中創(chuàng)建網(wǎng)頁(yè)以顯示輸出繪圖圖像。由于網(wǎng)絡(luò)服務(wù)器本身是基于 Python 的，因此需要 HTML 前端以及 Python 中的后端。

在網(wǎng)絡(luò)服務(wù)器的自定義內(nèi)容頁(yè)面中，單擊“編輯 Webapp”按鈕以打開(kāi) Webapp 重新加載頁(yè)面。

注意您的自定義 Web 應(yīng)用程序添加不會(huì)破壞現(xiàn)有結(jié)構(gòu)。

?

單擊“創(chuàng)建前端”以調(diào)出已填充基本頁(yè)面模板的 HTML 文本編輯器。

為新的 Web 應(yīng)用程序創(chuàng)建自定義前端。

?

添加以下 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 %}

在指定圖像的文件路徑時(shí)，Ultra96 網(wǎng)絡(luò)服務(wù)器似乎被硬編碼為在/usr/share/ultra96-startup-pages/webapp/static/目錄中查找，因此只有該目錄中的文件路徑應(yīng)該傳遞給img src 函數(shù)（我在瀏覽器中使用檢查工具后發(fā)現(xiàn)了這一點(diǎn)，起初圖像不會(huì)出現(xiàn)在網(wǎng)頁(yè)中并指定了完整的文件路徑）。

HTML 文本編輯器將自動(dòng)將.html 附加到文件名，因此在單擊“保存文件”后出現(xiàn)提示時(shí)鍵入所需的文件名。

填寫(xiě)好的模板保存為網(wǎng)頁(yè)的前端。

?

?

對(duì)于網(wǎng)頁(yè)的相應(yīng)后端文件，Webapp Reload 頁(yè)面上的“創(chuàng)建后端”按鈕將打開(kāi)一個(gè) Python 文本編輯器，其中包含自動(dòng)填充的基本模板，當(dāng) Flask 服務(wù)器調(diào)用時(shí)（Ultra96 的 Python 庫(kù)webserver 使用）會(huì)拉取相應(yīng)的前端 HTML 文件。

為新的 Web 應(yīng)用程序創(chuàng)建自定義后端。

?

自定義后端代碼：該項(xiàng)目的唯一編輯模板是簡(jiǎn)單地替換所有 CHANGE_ME 以匹配我們剛剛創(chuàng)建的前端的文件名：

@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")

編輯完成后，使用與相應(yīng)前端文件相同的名稱保存后端文件。同樣，后端文本編輯器將在保存時(shí)自動(dòng)將 .py 擴(kuò)展名附加到文件名。

所有 CHANGE_ME 都編輯為頻譜圖，因?yàn)槟鞘墙o前端 .html 文件的文件名。

?

返回到 Webapp Reload 頁(yè)面，您將在可用網(wǎng)頁(yè)的表格中看到前端和后端文件相互匹配。為了能夠訪問(wèn)這個(gè)新的自定義網(wǎng)頁(yè)，需要將其添加到網(wǎng)絡(luò)服務(wù)器。這是通過(guò)選中“包含”列中的框然后單擊“重新加載 Webapp”按鈕來(lái)完成的。您只需在第一次創(chuàng)建自定義網(wǎng)頁(yè)或更改后端文件時(shí)重新加載 Web 應(yīng)用程序。

自定義內(nèi)容下的 Webapp 重新加載頁(yè)面顯示可用的自定義網(wǎng)頁(yè)。

?

要重新加載網(wǎng)絡(luò)服務(wù)器，必須在單擊“重新加載 Webapp”按鈕后自動(dòng)重啟電路板。Ultra96 重啟后，通過(guò)瀏覽器重新連接到網(wǎng)絡(luò)服務(wù)器并導(dǎo)航回自定義內(nèi)容頁(yè)面。

自定義內(nèi)容選項(xiàng)卡現(xiàn)在將頻譜圖頁(yè)面顯示為選項(xiàng)。

?

頻譜圖網(wǎng)頁(yè)現(xiàn)在將作為一個(gè)選項(xiàng)出現(xiàn)。單擊“查看”按鈕將其顯示出來(lái)：

Ultra96 網(wǎng)絡(luò)服務(wù)器上的新頻譜圖網(wǎng)頁(yè)。

?

在未來(lái)的項(xiàng)目中，我將重新訪問(wèn)這個(gè)自定義網(wǎng)頁(yè)以對(duì)其進(jìn)行擴(kuò)展，以便它可以使用不同的輸入一遍又一遍地運(yùn)行項(xiàng)目 Python 腳本，并動(dòng)態(tài)加載頻譜圖的新圖像。這只是擴(kuò)展此項(xiàng)目中生成的自定義前端和后端文件的問(wèn)題。

故障排除：

我在 Ultra96 的基于 Flask 的網(wǎng)絡(luò)服務(wù)器文件 webserver.py 中發(fā)現(xiàn)了一個(gè)有趣的錯(cuò)誤，當(dāng)我第一次生成一個(gè)空白的測(cè)試網(wǎng)頁(yè)時(shí)（您在之前的屏幕截圖中看到的 CHANGEME 網(wǎng)頁(yè)）我在嘗試查看時(shí)收到 404 Not Found 錯(cuò)誤. Flask 通過(guò)在實(shí)際運(yùn)行網(wǎng)絡(luò)服務(wù)器之前指定所有 URL 和函數(shù)調(diào)用來(lái)工作，當(dāng)您為自定義網(wǎng)頁(yè)選擇“包含”并單擊“重新加載 Webapp”時(shí)，它會(huì)將您的自定義后端代碼添加到網(wǎng)絡(luò)服務(wù)器，以便它知道 URL 是什么它是在運(yùn)行網(wǎng)絡(luò)服務(wù)器之前。

在跟蹤 webserver.py （在Ultra96 文件結(jié)構(gòu)中的/usr/share/ultra96-startup-pages/webapp/webserver.py中找到）后，我注意到我的自定義后端代碼在調(diào)用運(yùn)行網(wǎng)絡(luò)服務(wù)器后已自動(dòng)填充是制成。這意味著網(wǎng)絡(luò)服務(wù)器實(shí)際上從未將 URL 傳遞給我的自定義網(wǎng)頁(yè)。

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

?

傳遞我的自定義網(wǎng)頁(yè) URL 的代碼顯示在屏幕截圖中的第一個(gè)紫色括號(hào)中，之后運(yùn)行網(wǎng)絡(luò)服務(wù)器的第二個(gè)調(diào)用顯示在第二個(gè)紫色括號(hào)中。運(yùn)行網(wǎng)絡(luò)服務(wù)器的第一個(gè)調(diào)用以紫色圈出，必須注釋掉或刪除。進(jìn)行此編輯后，需要重新啟動(dòng)電路板。此外，我發(fā)現(xiàn)如果我添加新的自定義網(wǎng)頁(yè)，每次單擊“重新加載 Webapp”后都必須重新執(zhí)行此操作。

我不確定我在構(gòu)建圖像時(shí)是否以某種方式獲得了舊版本的webserver.py或發(fā)生了什么，所以我認(rèn)為如果您從 Ultra96 上的圖像開(kāi)始時(shí)每個(gè)人都需要做這件事礦。但是我花了足夠長(zhǎng)的時(shí)間來(lái)追蹤這一點(diǎn)，我認(rèn)為這里值得注意。