查看: 7882|回复: 2

【童叟咸欺】LattePanda 地面站项目P2.2 起飞条件检测系统2

接上文：

LattePanda 地面站项目P2.2 起飞条件检测系统（CLI & GUI）

Graphics User Interface

前面搞定了CLI界面，基本功能实现了，但是此时的我想起来v2ex上一个段子：

原先 PM 将一个用的人少的运维管理页面（ web application ） JAVA web 给我用 Python 做，期待做成小工具。后来我想给客户的东西总不能没有界面吧，就用 bat 撸了一个。

客户：握草，这界面？！还墨绿色？
我：恩，目前是这样
客户：这滚动的怎么像黑客一样？！！
我：。。。

所以我们准备为地面站系统做一个图形界面。用惯了CLI界面，对图形界面设计编程这个新领域学习了一番，收获颇丰，记录如下。

计划中的地面控制站包括网页版用户交互界面（屏幕软件交互）+物理控制面板（按钮LED交互）。

Windows下的桌面软件开发

快手 aardio| 国人出品，专注于桌面软件快速开发，功能强大，永久免费，不过存在一些争议，名词也从AAuto改成了aardio。相关文章：快手软件存在哪些优点和不足？、桌面程序开发语言选择易语言还是快手aauto 、 AAuto为何更名为aardio？。后续有时间准备学学看。
C#|Windows桌面程序开发非常给力，然而我没学
electron | Build cross platform desktop apps with JavaScript, HTML, and CSS。我不会网页那些东西
Qt | 跨平台，文档众多。Linux下的KDE桌面环境就是基于Qt做出来的，还针对嵌入式系统推出了一个Qt Lite。即使有Qt Design，然而学习成本依然高，需要花时间去学习。
Visual Basic | 也支持Firmata协议。

因为比较熟悉Python，所以后续以它为例。在v2ex.com上搜索了一下：如果 Python 硬要写桌面应用，该如何是好？

已有的Python GUI库方案

tkinter|难看，接口也难用。适合小玩意
wxPython | 还阔以
PyQt | 资料多，依赖复杂
REMI | Python REMote Interface library. Platform independent. In about 100 Kbytes, perfect for your diet.
Kivy | Open source Python library for rapid development of applicationsthat make use of innovative user interfaces, such as multi-touch apps.
Ironpython | IronPython is an open-source implementation of the Python programming language which is tightly integrated with the .NET Framework.
Gooey | Turn (almost) any Python command line program into a full GUI application with one line

最终我们选择REMI库来开发图形界面版程序。主要看中依赖少、身材小巧、上手容易、跨平台能力强等。

Python2 与 Python3 :
因为Python2即将结束支持。使用Python的原因是因为简单方便，库多不用重复造轮子，跨平台，功能强大。运行效率其实已经不是最优先的考虑要求啦，毕竟不是嵌入式设备。之前也学过Visual Basic、C、Linux Shell，但是用上Python之后立即爱上了，此外也有现成优秀的库支持Firmata协议。

REMI

既然有了那么多优秀的GUI库，为什么还要创建一个呢，作者是这样回答的：

Why another GUI lib?Kivy, PyQT and PyGObject all require native code for the host operating system, which means installing or compiling large dependencies. Remi needs only a web browser to show your GUI.
Kivy，PyQT，PyGobject都需要安装编译大量依赖才能在宿主机上原生运行，而Remi仅需要网页浏览器就可以显示GUI界面了。
Do I need to know HTML?NO, It is not required, you have to code only in Python.
仅需要会使用Python编程，而不用学习了解HTML（超文本标记语言，网页开发语言）就可以进行开发。

私以为其他优点包括扩拓展性强，方便外网访问等。我们可以看到REMI目前可实现的控件演示：

包括按钮、文本框、标签、输入对话框、列表、图片、表格、滑动条、颜色选择器、日期、文件选择对话框、菜单栏、菜单选项、视频播放等控件。具体用法可以参考doc 和examples文件夹里的内容。

最后推荐一个好用的Python IDE——PyCharm：

安装与hello_DFROBOT!

REMI项目主页：https://github.com/dddomodossola/remi

安装方法很简单，如上文所述：Win+R——cmd——python -m pip install remi，也可以pip install remi，注意需要管理员身份运行。另外新建的文件名不要和待加载的模块名相同（比如remi.py），否则会提示ModuleNotFoundError: No module named remi之类的错误（别问我怎么知道的。。。）。我们新建一个文件如remi_demo.py，代码如下：

[mw_shl_code=python,true]import remi.gui as gui
from remi import start, App

class Hello_DFRobot(App):
def __init__(self, *args):
      super(Hello_DFRobot, self).__init__(*args)

def main(self):
      container = gui.VBox(width = 120, height = 100)
      self.lbl = gui.Label('DFROBOT')
      self.bt = gui.Button('Press me!')

      # setting the listener for the onclick event of the button
      self.bt.set_on_click_listener(self.on_button_pressed)

      # appending a widget to another, the first argument is a string key
      container.append(self.lbl)
      container.append(self.bt)

      # returning the root widget
      return container

# listener function
def on_button_pressed(self, widget):
      self.lbl.set_text('Drive the Future!')
      self.bt.set_text('Button pressed!')

# starts the webserver
start(Hello_DFRobot)[/mw_shl_code]

效果如图所示：

运行后会自动打开一个网页，点击按钮，按钮和标签文字都会改变。这里简单讲解一下，详细的可以看官方doc文档和examples示例。

我们下面将会结合

requests库获取天气
pyFirmata库与Arduino交互
remi库作为图形显示

REMI editor

相信很多人都用过Visual Basic、Qt Designer这种可视化的用户界面设计工具，而REMI也有类似的，而且是使用remi本身实现的，就在editor文件夹里，具体使用说明参考其下的README.md文件，说明比较简略，这里详述如下：

安装好相关依赖库之后，运行editor.py (我这里是用的PyCharm IDE打开运行的)。

注意：
某个控件的响应可以在左下角signal connections里面设置。
虽然Web界面具有极大的跨平台优势，但是由于存在诸多浏览器、平台、屏幕大小分辨率，仍有可能设计出的界面在其他上面显示不全，所以仍要了解一些基本HTML常识
网页制作的层绝对定位和相对定位：一般选中主widget，右下角最后设置position为absolute绝对定位(相对于浏览器左上角)，其他widget中的控件设置为relative相对定位，然后在Geometry里设置坐标。
菜单栏Project Config可以设置项目的一些基本属性（支持中文项目名称），设计完毕后，点击File->Save YourApp->Save As即可保存界面代码，并在随后的程序中使用。

GUI 来了！