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