随着餐馆在纽约的重新开业,我注意到它们都已转向非接触式数字菜单。由于我最近一直在花时间研究无线应用,其中涉及使用MiniZed和Ultra96v2在Zynq SoC FPGA的ARM处理器上运行的自定义Web服务器,因此我意识到如何轻松地利用FPGA作为解决方案来帮助餐馆在COVID期间适应。我再次转向值得信赖的MiniZed,以查看为可通过QR码访问的数字餐厅菜单创建独立解决方案有多么简单。
该项目的骨干是在MiniZed的Zynq芯片的ARM内核上运行的Web服务器。过去,我已经介绍了如何为MiniZed创建自定义Web服务器,但是由于在定制它以满足餐厅的需求方面有一些不同的重点,因此我想在这里再次进行概述。我家乡的一家本地咖啡店在他们的社交媒体上发布了他们正在寻找数字菜单解决方案的信息,因此我决定在Web服务器的主页中使用其菜单和徽标。
我从在Ouija板项目中为MiniZed创建的ext4根文件系统映像开始。由于Web服务器是用Python编写的,因此与Web服务器的静态文件夹所需的Python程序包(Flask和Requests )以及必需的图像文件相比,MiniZed所需的默认initramfs图像需要更多的空间。
后端Python
对于用Python编写的Web服务器的后端,它运行Flask应用程序,该应用程序使用HTML请求来服务来自前端HTML的GET和POST请求。服务器的每个网页都定义为一个函数,概述了如何返回具有所需数据的渲染模板。
首先,使用pip安装Python包Flask和Requests:
然后为Web服务器创建新文件。我选择启用调试选项(app.debug = True),该选项将HTTP请求和结果状态代码输出到串行控制台。
注意,主页被定义为home()函数,而GET和POST请求都只是返回主页的渲染HTML模板。
Web服务器文件结构
如前所述,要使准系统Web服务器运行在FPGA或微控制器之类的设备上,必须满足最低文件结构要求。
调用render_template()方法时,它将在模板目录中查找HTML模板。模板所在的目录也是webserver.py脚本所在的目录。HTML模板文件的名称是传递给render_template()方法的唯一必需参数,而可选参数包括任何要作为关键字参数传递给模板引擎的变量。
另一个所需的目录是静态目录。Flask应用程序在静态目录中提取CSS来获取Web网页模板的格式,JavaScript和图像文件。该图像目录是在咖啡馆的菜单和标识的文件将被放置。
前端模板
有一个默认模板可以用作所有网页的通用基础。默认模板处理诸如基本CSS主题,将出现在每个网页上的页眉和页脚以及列出每个可用页面的导航工具栏之类的事情。
在此模板中,将在每个网页的标题中调用咖啡店的徽标。目前,菜单只有主页,因此home.html是导航栏部分中的唯一选项。
默认HTML模板:
主页模板是显示咖啡店菜单图像文件的位置。可以调用一种简单的CSS样式,使图像自动调整大小到当前窗口的大小,以便在访问该设备的任何设备上看起来都干净整洁。
带有菜单的主页HTML模板:
HTML模板完成后,在MiniZed上启动Web服务器:
然后在浏览器中使用MiniZed本地IP来查看网页。我把它放在手机上,因为大多数客户流量来自他们的智能手机。