gui design studio乱码 gui designer studio教程

---

学习目标：
1、修改GUI
2、更新到开发板

目录

• 前言
• 一、准备
• 二、步骤

• 1.打开工程
• 2.用TouchGFX Designer修改GUI
• 3.用VS2017修改GUI

• 总结

---

前言

本文仅仅简单介绍了如何使用TouchGFX Designer和Visual Studio 2017修改GUI。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、准备

硬件：ART-PI@STM32H750、正点原子4.3寸RGB屏
软件：RT-Thread Studio、TouchGFX Designer、Visual Studio 2017

二、步骤

1.打开工程

打开上周建立的RT-Thread Studio工程，双击.touchgfx文件。

然后跳转到TouchGFX Designer，就可以修改GUI了。进入edit->import gui，可以看到有几个demo，注意：太大的工程是无法用的。

2.用TouchGFX Designer修改GUI

以软件包自带的demo为例：

比如加个按钮，按下后显示文字：

注意：如果要显示中文的话，就需要添加中文字体。

编译完成后回到RT-Thread Studio，F5刷新->debug->download。

可以看到整个过程不用写一行代码，还是比较方便的，就是编译慢了点。

3.用VS2017修改GUI

但是有时候我们需要修改下曲线，那还是要自己写代码的，点击TouchGFX Designer右下角的Browse Code。

找到Application.sln，用Visual Studio 2017打开（亲测VS2010会提示版本太高，VS2019会提示版本太低）。

找到MainView.cpp

修改函数：

void MainView::handleTickEvent()
{
    tickCounter++;

    // Insert each second tick
    if (tickCounter % 2 == 0)
    {
        float yMax = graph.getGraphRangeYMaxAsFloat();

        // Insert "random" points along a sine wave
		graph.addDataPoint((int)((sinf(tickCounter * .2f) + 1) * (yMax / 2.2f)));
	}
}

仿真下看看，编译速度是不是比TouchGFX Designer快多了。

OK，然后我理所当然地回到RT-Thread Studio进行编译，报了几千个错误…只好重新加载软件包，倒腾来倒腾去，发现不能在VS里编译，要在TouchGFX Designer里编译…

最后还要在RT-Thread Studio里编译一遍，经过漫长的等待，终于0 errors, 0 warnings了。

看看是不是实现了预想的功能。

总结

以上就是今天要讲的内容，本文仅仅简单介绍了如何使用TouchGFX Designer和Visual Studio 2017修改GUI。
今天看到了TouchGFX的源码，每个控件都是用Callback来实现跳转的，这种优秀的架构可以运用到自己的项目里去。相比Emwin和LittleVGL，TouchGFX Designer的功能更加强大，生成的并不只是个框架，还有简单的逻辑业务。
明天本来是打算移植FreeModbus的，但是移植到一半发现身边没有USB转串口没法调试，所以下周吧，把Modbus协议解析到曲线图里，这样就有实战意义了。