描述

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

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

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

Ultra96 的啟動網(wǎng)頁的主頁。

?

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

arp -a
ssh root@192.168.1.188

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

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

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

GnuRadio 中的頻譜圖或瀑布圖。

?

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

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

?

作為單擊自定義內(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')

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

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

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

?

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

pip3 install Cython
pip3 install numpy
pip3 install matplotlib

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

?

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

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

頻譜圖輸出為來自 spectrogram.py 的 .png 圖像文件

?

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

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

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

?

單擊“創(chuàng)建前端”以調(diào)出已填充基本頁面模板的 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 %}

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

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

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

?

?

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

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

?

自定義后端代碼：該項(xiàng)目的唯一編輯模板是簡單地替換所有 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)前端文件相同的名稱保存后端文件。同樣，后端文本編輯器將在保存時自動將 .py 擴(kuò)展名附加到文件名。

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

?

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

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

?

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

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

?

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

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

?

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

故障排除：

我在 Ultra96 的基于 Flask 的網(wǎng)絡(luò)服務(wù)器文件 webserver.py 中發(fā)現(xiàn)了一個有趣的錯誤，當(dāng)我第一次生成一個空白的測試網(wǎng)頁時（您在之前的屏幕截圖中看到的 CHANGEME 網(wǎng)頁）我在嘗試查看時收到 404 Not Found 錯誤. Flask 通過在實(shí)際運(yùn)行網(wǎng)絡(luò)服務(wù)器之前指定所有 URL 和函數(shù)調(diào)用來工作，當(dāng)您為自定義網(wǎng)頁選擇“包含”并單擊“重新加載 Webapp”時，它會將您的自定義后端代碼添加到網(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ù)器后已自動填充是制成。這意味著網(wǎng)絡(luò)服務(wù)器實(shí)際上從未將 URL 傳遞給我的自定義網(wǎng)頁。

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

?

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

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