HMI串口显示屏的使用总结（二）

上一篇文章已经介绍了HMI串口显示屏的开发工具，下面我们开始制作一个小的显示效果，首先打开USART HMI，打开上次的项目，由于我们要在显示屏上显示文字与图片，所以我们需要先将我们需要的图片导入到这款软件中，并且将我们需要的文字生成字库。

第一步首先先将图片导入到软件中，刚开始新建的页面与插件背景颜色是白色，看着很单调不好看所以我们先导入背景所需要的图片，导入的步骤：点击左侧下脚“图片”–>点击“+”–>“添加图片”–>选择想要添加的图片打开。

图1：导入图片

图片导入后，在图片区域会显示导入的图片，在每张图片的左下角有ID号，这个ID号在后面控制的时候会发挥作用。

图2：图片导入成功

第二步制作字库，点击工具–>字库制作，会出现字库制作工具界面，制作字库的时候要注意，每个字库里的文字必须大小一致，编码一致，是否加粗也要一致，如果我们的项目中需要不同大小的文字，就学要建立多个字库了，并且每个控件在现实文字的时候，只能显示同一个字库的文字。我们为了方便，建了两个字库，文字最好都加粗，不加粗的话本人感觉不太清楚，编码的话最好选择gb2312码，如果不确定会用到什么文字的话可以选择所有字符，可以多多尝试。

图3：字库制作工具

完成了图片与字库的导入后，接下来开始正式做我们的显示效果，首先我们需要两个界面，一个放Logo，另一个放入我们的正式界面。

图4：页面区域

图4中点击框起来的第一个是新建一个页面，第二个是删除，最后的两个红色箭头是来调整页面的上下关系的，最上面的页面会首先被显示出来，第三个是在光标前插入一个页面。

新建完页面后我们要首先选中page0，然后在属性栏中，找到sta属性，将这个属性的值改为“图片”，这个属性设置的是页面的背景是“图片”还是“纯色”，然后点击bco属性–>browse–>选择那张作为Logo背景的图片。接下来：
工具项–>文本–>选中界面中的文本->属性栏
–>将font属性改为大一点的字的字库ID
–>将sta属性改为切图，即控件的背景会显示这张图片在控件这个位置上能显示一部分图片
–>将picc属性设置为与背景图片相同的图片
–>将控件拖动到合适的位置(也可以通过属性栏中的x、y、w来改变控件的位置和大小形状)
–>通过pco属性可以修改控件中文字的颜色
–>通过txt属性来修改控件的文字内容
–>通过txt_maxl来修改这个控件可也显示的最大byte
制作完的页面如图5所示。