人机交互之液晶界面设计(交流讨论)

mcu_lover · 发表于 2011-12-26 15:32:36

不知道大家有没有这样的感觉，就是在涉及到界面的项目中，如带液晶显示(1602之类的字符液晶，12864或者更大分辨率的图形点阵液晶)的时候，界面设计往往是非常头疼的一件事情。如果前期没有规划好，后期处理起来更是非常棘手。如果在代码编写的差不多的时候，如果客户又提出了新的需求，则界面又会发生变化，如果程序结构设计的不好，则会耗费相当大的工作量去修改。如果能有类似的PC上位机软件做界面设计管理，如在PC机上面设计好界面以及编写相应的代码，然后上位机编译输出代码，下位机解释执行，或者上位机直接生成完整的.c .h 文件参与工程的编译。这样即可以远远提高工作效率，又可以应对变化的需求。目前市场上面类似的东西除了串口液晶文本显示器 HMI 之外好像还没有针对这样的应用场合的软件。大家在做人机交互的界面设计时候是如何处理的呢？希望大家能够谈谈自己的想法。是否存在一种通用的做法可以适应大多数的应用场合？目前我想深入研究一下基于单色液晶的界面设计，编写一款类似的PC上位机软件。希望大家畅所欲言。下面的资料是在国外论坛找到的，个人感觉这种思路就非常好，如果再配合一下上位机，不愧也为一种好的人机交互处理方式。

国外论坛摘抄的：
The Menu consists of a 8 Byte Table per line... the Table is held in program codespace (see elsewhere on this forum how to do that).

Byte 1 tell the Menu Subroutine what kind of Data Element we are dealing with... ie, Numeric, Numeric with Fixed Decimals, Alphanumeric, Date, Time etc.

Byte 2 is the Data Element Byte Length.

Byte 3 is the Minimum permitted value for any Numeric entry.

Byte 4 is the Maximum permitted value for any Numeric entry.

Byte 5 are Flags... these are Bits that Control frills, eg Cursor ON/OFF, Visible or Invisible Entry (like that required for Passwords) , whether Data-Entry is permitted or not, etc etc

Byte 6 points to the location in EEPROM where the first Byte of Data is to be found.

Byte 7 points to the Message in Program Codespace which will appear on your LCD prompting your Data-Entry (eg "Enter Time Delay").

Byte 8 points to a secondarry Message in Program Codespace for additional information (eg "Minutes").

The Menu Subroutine, sequentially reads the eight control bytes and acts on it accordingly. Once you have built your subroutine, it's a simple matter of adding just eight bytes (plus prompting messages) per Menu item. It's small, it's compact, and everything you need to learn how to do it is on this forum somewhere (though not in a ready cut & paste form). Clue: It does rely very heavilly on reading large Tables of Data from Program Codespace and manipulating Alphanumeric STRINGS (for all the LCD Messages) with PBP. Sort out how to do that first, and the rest is simple!

ljt80158015 · 发表于 2011-12-26 15:38:15

这个方法挺好，但是要实现类似通用HMI，有很多功能要实现。

mcu_lover · 发表于 2011-12-26 15:45:03

回复【1楼】ljt80158015
-----------------------------------------------------------------------

可以参考HMI的一些功能,如控件的属性，但不一定需要做到那么全。很多时候我们的应用场合是一颗AVR级别的微控制器，或者是CM3级别，带一个12864 抑或240*128 320*240的单色液晶。界面如何做到简单，易于维护？在这样资源受限的场合以及受限于所采用的显示设备，几个简单的图标，简单的图形填充，或者文数值输入/显示就已经足够了。

mcu_lover · 发表于 2011-12-26 15:50:21

类似于如下的界面(图片来源于网络)

(原文件名:111.jpg)

(原文件名:222.jpg)

ljt80158015 · 发表于 2011-12-26 15:57:48

这个嵌入式GUI很好实现，关键是PC平台的编辑软件。

很多是这样做的，PC平台的编辑软件设计成XML文件。
将XML文件下载到下位机，下位机做XML文件的解析，生成界面。

mcu_lover · 发表于 2011-12-26 16:08:25

回复【4楼】ljt80158015
-----------------------------------------------------------------------

不错，但是受限于处理速度以及内存资源的限制，我个人认为上位机生成binary byte ，下位机解析执行效率会更高一筹。
PC上位机坛子里面有村长设计过的一款，不过个人并不怎么喜欢那种操作方式。下面这种上位机的操作方式非常直观，遗憾的是作者仅仅只是完成了一个demo版本之后就未曾更新过。但是可以借鉴它的操作方式。
图片截取自menugen_v03 (来源于google code )

(原文件名:333.jpg)

applejie · 发表于 2011-12-26 16:17:36

楼主牛呀，我现在做的12864都是自己用一个字符串数组来保存界面内容，而且这样只能够显示字，图与字的结合还用数组来处理的话就会显得好麻烦的，这是我采用的方法，可能思维还是有点局限，求教

role_2099 · 发表于 2011-12-26 16:18:04

3楼蓝色背景的图片是多大的屏呢？
楼主ID不注意看，还以为是红金龙吸珠呢

xjmlfm1 · 发表于 2011-12-26 16:35:59

这东西，靠上位机来生成.c的代码，貌似比较困难。在单片机上，编写界面的时候，考虑用数据结构去解决，可以很方便的移值，扩展，修改。但这个玩的是经验，多做几次，就有体会了。

mcu_lover · 发表于 2011-12-26 16:41:22

回复【7楼】role_2099
-----------------------------------------------------------------------

我猜测是240*128的分辨率

dzmcs · 发表于 2011-12-26 16:44:38

以前简单考虑过

定义和编写简单的控件代码，然后有两种方式

1.定义xml的文件,上位机解析成c代码然后编译成二进制(这样解析的代码要从头自己写，解析的时候根据xml定义组合控件代码,android的开发类似这样)

2.或者定义简单的界面语言,使用lex,yacc来处理生产c语言源程序（解析的部分很容易实现，lex&yacc那本书就有个差不多的历程,这样子也比较灵活,功能比xml的要强的多，定义语言如果控件代码能实现好，这个很快就能搞定的）

但是最关键的是好的适用的控件抽象集，不可能像pc的GUI控件集合，这个集合不好定义，另外特殊的交互也不好实现。
之前特别想找个类似的12864的GUI,但像222.jpg这种，个人感觉控件的定义对于12864这样的液晶不太舒服。

楼主能不能谈一谈你在设计交互的时候怎么处理的？输入时间的时候怎么实现的隔点循环跳转？
111.jpg的焦点是用什么数据结构管理的？

_yuming · 发表于 2011-12-26 16:44:45

回复【5楼】mcu_lover 红金龙吸味
回复【4楼】ljt80158015
-----------------------------------------------------------------------
不错，但是受限于处理速度以及内存资源的限制，我个人认为上位机生成binary byte ，下位机解析执行效率会更高一筹。
pc上位机坛子里面有村长设计过的一款，不过个人并不怎么喜欢那种操作方式。下面这种上位机的操作方式非常直观，遗憾的是作者仅仅只是完成了一个demo版本之后就未曾更新过。但是可以借鉴它的操作方式。
图片截取自menugen_v03 (来源于google code )

(原文件名:333.jpg)
<center><a class=tt16 onclick="fnquickimagequot......
-----------------------------------------------------------------------

这个软件哪里能下载到？

mcu_lover · 发表于 2011-12-26 16:48:44

回复【8楼】xjmlfm1
这东西，靠上位机来生成.c的代码，貌似比较困难。在单片机上，编写界面的时候，考虑用数据结构去解决，可以很方便的移值，扩展，修改。但这个玩的是经验，多做几次，就有体会了。
-----------------------------------------------------------------------
确实如此。界面这个东西谁做谁知道，即便是有好的数据结构，还是像绣花活一样，一点点的调整到自己想要的效果。试想一下，如果在PC上面就设计好所有的界面相关的工作，同时无须烧写程序，即可以进行界面的仿真，岂不是大大提高了工作效率。其实生成完整的.c也是可以的，只是没有必要，因为有更好的方案。液晶驱动独立出来，中间widget绘制以及界面管理是通用的。这样任何一个项目你需要做的就是--> 按照规定编写基本的液晶驱动代码，上位机设计界面，然后生成下位机解释执行的代码，最后下载到系统。相较人工编码完成，效率的提高已经不是几倍可以度量的了。

dzmcs · 发表于 2011-12-26 16:54:52

回复【5楼】mcu_lover 红金龙吸味
回复【4楼】ljt80158015
-----------------------------------------------------------------------
不错，但是受限于处理速度以及内存资源的限制，我个人认为上位机生成binary byte ，下位机解析执行效率会更高一筹。
pc上位机坛子里面有村长设计过的一款，不过个人并不怎么喜欢那种操作方式。下面这种上位机的操作方式非常直观，遗憾的是作者仅仅只是完成了一个demo版本之后就未曾更新过。但是可以借鉴它的操作方式。
图片截取自menugen_v03 (来源于google code )

(原文件名:333.jpg)

-----------------------------------------------------------------------
这个软件挺好看的，是不是也是生成c代码？这个的定义莫非就只有一层层的菜单？这样子的话，交互的部分怎么做呢？
简单的功能定义实用GUI完成远没有使用文本强大，出很大的力气设计这样的界面，有点浪费了，不灵活功能不强。

mcu_lover · 发表于 2011-12-26 16:56:42

回复【10楼】dzmcs
以前简单考虑过
定义和编写简单的控件代码，然后有两种方式
1.定义xml的文件,上位机解析成c代码然后编译成二进制(这样解析的代码要从头自己写，解析的时候根据xml定义组合控件代码,android的开发类似这样)
2.或者定义简单的界面语言,使用lex,yacc来处理生产c语言源程序（解析的部分很容易实现，lex&yacc那本书就有个差不多的历程,这样子也比较灵活,功能比xml的要强的多，定义语言如果控件代码能实现好，这个很快就能搞定的）
但是最关键的是好的适用的控件抽象集，不可能像pc的gui控件集合，这个集合不好定义，另外特殊的交互也不好实现。
之前特别想找个类似的12864的gui,但像222.jpg这种，个人感觉控件的定义对于12864这样的液晶不太舒服。
楼主能不能谈一谈你在设计交互的时候怎么处理的？输入时间的时候怎么实现的隔点循环跳转？
111.jpg的焦......
-----------------------------------------------------------------------

呵呵，握个手先，很多想法不谋而合啊。我个人目前比较倾向的选择是xml记录界面上面的控件(确实用控件不好定义，或者简单点称之为element或者widget更好？)，然后编译生成二进制代码，下位机系统解释执行。这样空间占用以及解析速度才能够最优化。
焦点的处理我觉得在上位机上面设计的时候直接指定好就可以了，毕竟没有必要弄的像PC上面那么复杂。液晶逻辑细节部分主要是以FSM为主。

mcu_lover · 发表于 2011-12-26 16:58:45

回复【11楼】_yuming
-----------------------------------------------------------------------

点击此处下载 ourdev_707755QVM9YA.zip(文件大小:26K) (原文件名:menugen_v0.3.zip)
注意要安装JAVA环境才能运行哦。

kingwaykingway · 发表于 2011-12-26 17:01:57

这个必须mark

dzmcs · 发表于 2011-12-26 17:02:23

回复【12楼】mcu_lover 红金龙吸味
回复【8楼】xjmlfm1
这东西，靠上位机来生成.c的代码，貌似比较困难。在单片机上，编写界面的时候，考虑用数据结构去解决，可以很方便的移值，扩展，修改。但这个玩的是经验，多做几次，就有体会了。
-----------------------------------------------------------------------
确实如此。界面这个东西谁做谁知道，即便是有好的数据结构，还是像绣花活一样，一点点的调整到自己想要的效果。试想一下，如果在pc上面就设计好所有的界面相关的工作，同时无须烧写程序，即可以进行界面的仿真，岂不是大大提高了工作效率。其实生成完整的.c也是可以的，只是没有必要，因为有更好的方案。液晶驱动独立出来，中间widget绘制以及界面管理是通用的。这样任何一个项目你需要做的就是--> 按照规定编写基本的液晶驱动代码，上位机设计界面，然后生成下位机解释......
-----------------------------------------------------------------------
太认同这样的观点了，以前深受其苦，再好的数据结构也不好做出来界面和数据结构部分的完全隔离，论坛里的菜单例子看了好几个，用的都不是特别舒服，很多时候还是要做"脏活"。

avrwoo · 发表于 2011-12-26 17:09:44

MARK

mcu_lover · 发表于 2011-12-26 17:12:47

回复【13楼】dzmcs
-----------------------------------------------------------------------

应该是的。原作者并没有完成输出.c文件的功能，这里展示这个软件的界面是觉得它的操作方式比较灵活，不呆板，若是设计上位机，可以参考。
“这样子的话，交互的部分怎么做呢？
简单的功能定义实用GUI完成远没有使用文本强大，出很大的力气设计这样的界面，有点浪费了，不灵活功能不强”

所以希望大家能够踊跃发表自己的看法，探讨单色点阵液晶(128*64 240*128 320*240等规格)的界面究竟该如何设计才是比较合适的。找出一种近乎通用的方式，提高工作效率。

_yuming · 发表于 2011-12-26 17:18:38

回复【15楼】mcu_lover 红金龙吸味
回复【11楼】_yuming
-----------------------------------------------------------------------
点击此处下载 (原文件名:menugen_v0.3.zip)
注意要安装java环境才能运行哦。
-----------------------------------------------------------------------

谢谢了，JAVA环境已经具备。

dzmcs · 发表于 2011-12-26 17:22:29

回复【14楼】mcu_lover 红金龙吸味
回复【10楼】dzmcs
以前简单考虑过
定义和编写简单的控件代码，然后有两种方式
1.定义xml的文件,上位机解析成c代码然后编译成二进制(这样解析的代码要从头自己写，解析的时候根据xml定义组合控件代码,android的开发类似这样)
2.或者定义简单的界面语言,使用lex,yacc来处理生产c语言源程序（解析的部分很容易实现，lex&yacc那本书就有个差不多的历程,这样子也比较灵活,功能比xml的要强的多，定义语言如果控件代码能实现好，这个很快就能搞定的）
但是最关键的是好的适用的控件抽象集，不可能像pc的gui控件集合，这个集合不好定义，另外特殊的交互也不好实现。
之前特别想找个类似的12864的gui,但像222.jpg这种，个人感觉控件的定义对于12864这样的液晶不太舒服。
楼主能不能谈一谈你在设计交互的时候怎么处理的？输入时间的时候怎么实现的隔点循环......
-----------------------------------------------------------------------
状态机用的太多了，改起来也麻烦。
xml应该不能定义交互行为吧，这个"麻烦事"简单定义程序语言是最好的方式了,就像那个333.jpg的功能虽然用xml也做的差不多，不过
定义语言会做的更好。界面的定义不管用xml还是用自定义程序做，界面定义和交互这两部分的粘合要做好了用起来应该都过得去。

10000years · 发表于 2011-12-26 17:30:08

看看我以前发的帖子;http://www.ourdev.cn/bbs/bbs_content.jsp?bbs_sn=5081094&bbs_page_no=1&search_mode=3&search_text=10000years&bbs_id=9999

只实现了简单的功能，有时间继续做下去。

mcu_lover · 发表于 2011-12-26 17:32:45

回复【21楼】dzmcs
-----------------------------------------------------------------------

可否详细讲解一下交互，或者举例子进行说明亦可。
嵌入式系统输入用的比较普遍的就是key了。其实我个人实际接触看到的大多仅仅只是需要改变输入值，即类似edit 控件即可胜任。

mcu_lover · 发表于 2011-12-26 17:34:56

回复【22楼】10000years
-----------------------------------------------------------------------

不错，已经付诸实践了，赞一个。上位机输出的代码是自定义的 binary byte吗？

10000years · 发表于 2011-12-26 17:53:07

回复【24楼】mcu_lover 红金龙吸味
-----------------------------------------------------------------------

是的，市场上用的hmi原理也是这样的，直接把画面数据编译成下位机可以解析的数据(定义好数据结构)，下位机进行解析，每一个控件有个地址，比如edit控件，只要向地址中写入对应的数据edit就可以显示数据

ucgui也是不错的选择，论坛上有人做uCGUIBuilder 可以看看，ucGUI比HMI更灵活一些
http://www.ourdev.cn/bbs/bbs_content.jsp?bbs_sn=5282395&bbs_page_no=1&search_mode=1&search_text=gui&bbs_id=9999

ljt80158015 · 发表于 2011-12-26 18:00:21

回复【25楼】10000years
回复【24楼】mcu_lover 红金龙吸味
-----------------------------------------------------------------------
是的，市场上用的hmi原理也是这样的，直接把画面数据编译成下位机可以解析的数据(定义好数据结构)，下位机进行解析，每一个控件有个地址，比如edit控件，只要向地址中写入对应的数据edit就可以显示数据
ucgui也是不错的选择，论坛上有人做ucguibuilder 可以看看，ucgui比hmi更灵活一些
http://www.ourdev.cn/bbs/bbs_content.jsp?bbs_sn=5282395&bbs_page_no=1&search_mode=1&search_text=gui&bbs_id=9999
-----------------------------------------------------------------------

uCGUIBuilder 是给软件开发者用的，不是给工程人员或最终用户用的。

mcu_lover · 发表于 2011-12-26 18:11:03

回复【26楼】ljt80158015
-----------------------------------------------------------------------

给工程人员使用的一般是基于HMI 或者文本之类的，类似于组态软件。这里我们讨论面向开发者的基于单色液晶的界面设计，希望可以提升设计时候的效率。

dzmcs · 发表于 2011-12-26 18:29:05

回复【23楼】mcu_lover 红金龙吸味
回复【21楼】dzmcs
-----------------------------------------------------------------------
可否详细讲解一下交互，或者举例子进行说明亦可。
嵌入式系统输入用的比较普遍的就是key了。其实我个人实际接触看到的大多仅仅只是需要改变输入值，即类似edit 控件即可胜任。
-----------------------------------------------------------------------
我就是以前交互的时候做的不太好，现在就特别关注交互该怎么优雅的实现。

估计这方面你比我有经验吧,lineEdit处理带有格式的数据，比如时间、日期、ip这些都快烦死了，不同的功能键在不同的时候不同的作用的实现也没做好。现在不做这些了，还是很期待楼主继续努力研究下优雅的实现，关键是尽量少的代码，能继承些通用的东西，好扩展。

esdart · 发表于 2011-12-26 18:31:35

收藏回家慢慢看。

dzmcs · 发表于 2011-12-26 18:51:29

ucgui这一类的GUI和PC的GUI形式差不多，用在小的黑白点阵上不太好,控件集不适合。ucgui有用在12864这样的点阵的例子吗？

不知道curses的代码和控件对楼主有没有参考价值？

10000years 这个界面貌似没有交互,如果有交互的话下载到mcu的就不能只是数据了，差不多就得要有个解释型的语言了，人工上比在上位机编译成二进制，再下载到mcu的要节省，像cortex-m3这样的单片机，做这点解释都是小意思，如果楼主不是在八位机上做的话，
做成解释性的更有优势，而且可以找到现成的很小的开源的解释器的代码，自己修改后配上一套自己的控件就很完美了。

ljt80158015 · 发表于 2011-12-26 19:05:37

w回复【27楼】mcu_lover 红金龙吸味
回复【26楼】ljt80158015
-----------------------------------------------------------------------
给工程人员使用的一般是基于hmi 或者文本之类的，类似于组态软件。这里我们讨论面向开发者的基于单色液晶的界面设计，希望可以提升设计时候的效率。
-----------------------------------------------------------------------

如果这样的话，生成源代码的方法就挺好的！

wazhiyi · 发表于 2011-12-26 19:43:34

楼主可以组织一下，大家一起尝试着写一下这些东西

king_cd_126 · 发表于 2011-12-26 20:27:54

好资料，学习！

yxyy · 发表于 2011-12-26 21:10:40

唉，都很out了。有颗28pin的菜单芯片，支持KS0108，完全无需编程，仅需PC软件配置下菜单再下载就可以了

newhz · 发表于 2011-12-26 21:18:28

回复【34楼】yxyy
-----------------------------------------------------------------------

叫什么？

mcu_lover · 发表于 2011-12-26 22:33:42

回复【28楼】dzmcs
-----------------------------------------------------------------------

呵呵，是的。光是数值显示就有 +/- 十进制(0~99) (0~9999) (0~0xFF) (0~0xFFFF)等格式，还有定点的浮点数等等。

mcu_lover · 发表于 2011-12-26 22:40:24

回复【30楼】dzmcs
-----------------------------------------------------------------------

ucgui是可以用在单色液晶上的。可以在PC上面看到仿真的结果。

mcu_lover · 发表于 2011-12-26 22:40:55

回复【34楼】yxyy
唉，都很out了。有颗28pin的菜单芯片，支持ks0108，完全无需编程，仅需pc软件配置下菜单再下载就可以了
-----------------------------------------------------------------------

不妨告之一二。

zwb27 · 发表于 2011-12-27 01:16:09

MARK

Jesen · 发表于 2011-12-27 03:05:46

mark

johnwjl · 发表于 2011-12-27 08:49:03

mark，人机界面。

mcu_lover · 发表于 2011-12-27 09:20:25

放狗搜了一下，发现国外已经有类似的产品卖了~~

(原文件名:5555.jpg)

(原文件名:6666.jpg)

activeleo · 发表于 2011-12-27 10:24:28

搞搞T_i_l_c_o_n的破_解吧？这个应该不错!

sxx123 · 发表于 2012-1-12 10:44:43

不错，下载下来试试！

omega333 · 发表于 2012-1-12 12:44:24

MARK

ljt80158015 · 发表于 2012-1-12 12:52:22

LUA脚本虚拟机和ucGUI以及嵌入式

http://www.ourdev.cn/bbs/bbs_content.jsp?bbs_sn=5349129&bbs_page_no=1&search_mode=4&search_text=ljt80158015&bbs_id=9999

guaiguaima · 发表于 2012-1-12 13:10:03

mark

dragonbbc · 发表于 2012-1-12 13:31:38

最近正在做相关的东西，做个标记先

carolxr · 发表于 2012-1-13 12:37:10

关注，mark

lqdjdy · 发表于 2012-1-13 13:00:44

mark

Crosss_vip · 发表于 2012-1-13 13:56:26

这个学习一下

senbaby2 · 发表于 2012-2-13 19:49:18

你，有需要，谢谢。Mark

黄晨0410 · 发表于 2014-9-13 18:52:08

mark

jiafa918 · 发表于 2014-9-13 21:10:19

mark

人机交互之液晶界面设计(交流讨论)

阿莫论坛20周年了！感谢大家的支持与爱护！！