• 方案介紹
  • 附件下載
  • 相關(guān)推薦
申請入駐 產(chǎn)業(yè)圖譜

避免接觸,使用FPGA創(chuàng)建數(shù)字菜單,定義非接觸式數(shù)字菜單

2020/12/03
438
加入交流群
掃碼加入
獲取工程師必備禮包
參與熱點(diǎn)資訊討論

prj-mi1dev1-01-04_schematic_prints_hS33bRebOC.pdf

共4個文件

隨著餐館在紐約的重新開業(yè),我注意到它們都已轉(zhuǎn)向非接觸式數(shù)字菜單。由于我最近一直在花時間研究無線應(yīng)用,其中涉及使用MiniZed和Ultra96v2在Zynq SoC FPGAARM處理器上運(yùn)行的自定義Web服務(wù)器,因此我意識到如何輕松地利用FPGA作為解決方案來幫助餐館在COVID期間適應(yīng)。我再次轉(zhuǎn)向值得信賴的MiniZed,以查看為可通過QR碼訪問的數(shù)字餐廳菜單創(chuàng)建獨(dú)立解決方案有多么簡單。

該項目的骨干是在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板項目中為MiniZed創(chuàng)建的ext4根文件系統(tǒng)映像開始。由于Web服務(wù)器是用Python編寫的,因此與Web服務(wù)器的靜態(tài)文件夾所需的Python程序包(Flask和Requests )以及必需的圖像文件相比,MiniZed所需的默認(rèn)initramfs圖像需要更多的空間。

后端Python

對于用Python編寫的Web服務(wù)器的后端,它運(yùn)行Flask應(yīng)用程序,該應(yīng)用程序使用HTML請求來服務(wù)來自前端HTML的GET和POST請求。服務(wù)器的每個網(wǎng)頁都定義為一個函數(shù),概述了如何返回具有所需數(shù)據(jù)的渲染模板。

首先,使用pip安裝Python包Flask和Requests:

然后為Web服務(wù)器創(chuàng)建新文件。我選擇啟用調(diào)試選項(app.debug = True),該選項將HTTP請求和結(jié)果狀態(tài)代碼輸出到串行控制臺。
注意,主頁被定義為home()函數(shù),而GET和POST請求都只是返回主頁的渲染HTML模板。

Web服務(wù)器文件結(jié)構(gòu)

如前所述,要使準(zhǔn)系統(tǒng)Web服務(wù)器運(yùn)行在FPGA或微控制器之類的設(shè)備上,必須滿足最低文件結(jié)構(gòu)要求。
調(diào)用render_template()方法時,它將在模板目錄中查找HTML模板。模板所在的目錄也是webserver.py腳本所在的目錄。HTML模板文件的名稱是傳遞給render_template()方法的唯一必需參數(shù),而可選參數(shù)包括任何要作為關(guān)鍵字參數(shù)傳遞給模板引擎的變量。

另一個所需的目錄是靜態(tài)目錄。Flask應(yīng)用程序在靜態(tài)目錄中提取CSS來獲取Web網(wǎng)頁模板的格式,JavaScript和圖像文件。該圖像目錄是在咖啡館的菜單和標(biāo)識的文件將被放置。

前端模板

有一個默認(rèn)模板可以用作所有網(wǎng)頁的通用基礎(chǔ)。默認(rèn)模板處理諸如基本CSS主題,將出現(xiàn)在每個網(wǎng)頁上的頁眉和頁腳以及列出每個可用頁面的導(dǎo)航工具欄之類的事情。

在此模板中,將在每個網(wǎng)頁的標(biāo)題中調(diào)用咖啡店的徽標(biāo)。目前,菜單只有主頁,因此home.html是導(dǎo)航欄部分中的唯一選項。

默認(rèn)HTML模板:

主頁模板是顯示咖啡店菜單圖像文件的位置??梢哉{(diào)用一種簡單的CSS樣式,使圖像自動調(diào)整大小到當(dāng)前窗口的大小,以便在訪問該設(shè)備的任何設(shè)備上看起來都干凈整潔。

帶有菜單的主頁HTML模板:

HTML模板完成后,在MiniZed上啟動Web服務(wù)器:

然后在瀏覽器中使用MiniZed本地IP來查看網(wǎng)頁。我把它放在手機(jī)上,因為大多數(shù)客戶流量來自他們的智能手機(jī)

  • prj-mi1dev1-01-04_schematic_prints_hS33bRebOC.pdf
    下載
    描述:原理圖
  • bdf-master.zip
    下載
    描述:碼
  • petalinux-master.zip
    下載
    描述:安富利PetaLinux存儲庫
  • hdl-master.zip
    下載
    描述:安富利HDL存儲庫

相關(guān)推薦