643
隨著餐館在紐約的重新開業(yè)，我注意到它們都已轉(zhuǎn)向非接觸式數(shù)字菜單。由于我最近一直在花時間研究無線應用，其中涉及使用MiniZed和Ultra96v2在Zynq SoC FPGA的ARM處理器上運行的自定義Web服務器，因此我意識到如何輕松地利用FPGA作為解決方案來幫助餐館在COVID期間適應。我再次轉(zhuǎn)向值得信賴的MiniZed，以查看為可通過QR碼訪問的數(shù)字餐廳菜單創(chuàng)建獨立解決方案有多么簡單。
該項目的骨干是在MiniZed的Zynq芯片的ARM內(nèi)核上運行的Web服務器。過去，我已經(jīng)介紹了如何為MiniZed創(chuàng)建自定義Web服務器，但是由于在定制它以滿足餐廳的需求方面有一些不同的重點，因此我想在這里再次進行概述。我家鄉(xiāng)的一家本地咖啡店在他們的社交媒體上發(fā)布了他們正在尋找數(shù)字菜單解決方案的信息，因此我決定在Web服務器的主頁中使用其菜單和徽標。
我從在Ouija板項目中為MiniZed創(chuàng)建的ext4根文件系統(tǒng)映像開始。由于Web服務器是用Python編寫的，因此與Web服務器的靜態(tài)文件夾所需的Python程序包（Flask和Requests ）以及必需的圖像文件相比，MiniZed所需的默認initramfs圖像需要更多的空間。
后端Python
對于用Python編寫的Web服務器的后端，它運行Flask應用程序，該應用程序使用HTML請求來服務來自前端HTML的GET和POST請求。服務器的每個網(wǎng)頁都定義為一個函數(shù)，概述了如何返回具有所需數(shù)據(jù)的渲染模板。
首先，使用pip安裝Python包Flask和Requests：
然后為Web服務器創(chuàng)建新文件。我選擇啟用調(diào)試選項（app.debug = True），該選項將HTTP請求和結(jié)果狀態(tài)代碼輸出到串行控制臺。
注意，主頁被定義為home（）函數(shù)，而GET和POST請求都只是返回主頁的渲染HTML模板。
Web服務器文件結(jié)構(gòu)
如前所述，要使準系統(tǒng)Web服務器運行在FPGA或微控制器之類的設備上，必須滿足最低文件結(jié)構(gòu)要求。
調(diào)用render_template（）方法時，它將在模板目錄中查找HTML模板。模板所在的目錄也是webserver.py腳本所在的目錄。HTML模板文件的名稱是傳遞給render_template（）方法的唯一必需參數(shù)，而可選參數(shù)包括任何要作為關(guān)鍵字參數(shù)傳遞給模板引擎的變量。
另一個所需的目錄是靜態(tài)目錄。Flask應用程序在靜態(tài)目錄中提取CSS來獲取Web網(wǎng)頁模板的格式，JavaScript和圖像文件。該圖像目錄是在咖啡館的菜單和標識的文件將被放置。
前端模板
有一個默認模板可以用作所有網(wǎng)頁的通用基礎。默認模板處理諸如基本CSS主題，將出現(xiàn)在每個網(wǎng)頁上的頁眉和頁腳以及列出每個可用頁面的導航工具欄之類的事情。
在此模板中，將在每個網(wǎng)頁的標題中調(diào)用咖啡店的徽標。目前，菜單只有主頁，因此home.html是導航欄部分中的唯一選項。
默認HTML模板：
主頁模板是顯示咖啡店菜單圖像文件的位置?？梢哉{(diào)用一種簡單的CSS樣式，使圖像自動調(diào)整大小到當前窗口的大小，以便在訪問該設備的任何設備上看起來都干凈整潔。
帶有菜單的主頁HTML模板：
HTML模板完成后，在MiniZed上啟動Web服務器：
然后在瀏覽器中使用MiniZed本地IP來查看網(wǎng)頁。我把它放在手機上，因為大多數(shù)客戶流量來自他們的智能手機。
