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 上的圖像開始時每個人都需要做這件事礦。但是我花了足夠長的時間來追蹤這一點，我認為這里值得注意。