Part7_按钮控件切换界面
<p>[TOC]</p>
<h1>功能描述</h1>
<p>通过触摸显示屏上的按钮发送字符串消息，arduino系统接收消息后发送界面切换指令控制ATF显示模块界面切换。</p>
<h4>接线方法</h4>
<p>将彩屏和Arduino控制器进行连接，RX-TX,GND-GND（用到了RX和TX串口）</p>
<h4>实现功能</h4>
<p>本例所需资源已在下方资源链接中准备好。
将图片导入后，点击位图按钮，框选大概位置后进入配置，配置详述可查看相应模块的技术详解文档进行了解，按需配置完成后可再进行位置的调整。本例设置了三个位图按钮进行控制，调整好后即可编程使用测试。</p>
<h4>操作示例</h4>
<p>1.新建资源文件，本例仍使用ATF043模块做演示，配置如图：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=4b7ce16062ce3360b5126e0f0a00818e&amp;file=file.png" alt="" />
2.切换资源列表，使用图片导入按钮导入所需图片。
注意不同格式的图片有不同的添加按钮，具体可查看<strong>常规应用教程part5</strong>。
3.新建界面，双击进入界面编辑，添加背景图片以及背光设置指令。
4.进入界面控制页，点击<strong>位图按钮控件</strong>添加，框选大概位置后出现位图按钮配置，用户可根据需求进行配置，本例设置了两个按钮，id分别为100和101。其中100按钮为位图按钮，添加方法可参考part6，101按钮为区域按钮。
具体设置如图：
位图按钮100：与之前不同，本例位图按钮显示响应类型改为<strong>截图切换显示</strong>，这样控件将会从所配置的常态按下图片中，根据控件在显示屏中的位置截取图片的局部图像进行显示切换。
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=276c882ed50eb54db4f1f8b0d12ff925&amp;file=file.png" alt="" />
区域按钮101：由于在界面的背景画面中已经有按钮的图像了，所以设置区域按钮重绘属性选择为不重绘，调节一下外框缩进值，控件中可以不设置字符串内容。
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e40de5eba540c8e3239dc577cd6d8c8a&amp;file=file.png" alt="" />
5.新建界面，同上在界面中添加区域按钮，用于之后返回主界面。
6.复制步骤5新建的界面，可添加文字区分两个界面以便测试时观察效果。
具体操作如图：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=43b5d886746c2d9cedfb7d3cd665bb68&amp;file=file.png" alt="" />
设置字库及颜色：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=39cc8c980aa30e193f503949df014ce4&amp;file=file.png" alt="" />
添加字符：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=817b8afcd7d6f8131ec9f97e0f3f5206&amp;file=file.png" alt="" /></p>
<h1>使用代码</h1>
<pre><code class="language-c">void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
Serial.setTimeout(20);
}
unsigned char m_ReciverHeader; //ATF Message Header char = @/#/$
unsigned short m_ReciverBodyID; //ATF Message BodyID 0:GUI Swtich 100~65535:Body Msg
int m_ReciverVarInt; //ATF Message int Val(Header=@)
float m_ReciverVarFloat; //ATF Message float Val(Header=#)
String m_ReciverVarString; //ATF Message String Val(Header=$)
void loop() {
// put your main code here, to run repeatedly:
if(ATFMessageService(2))
{
if(m_ReciverBodyID==100)
{
Serial.println(&quot;@GUIS 1&quot;);
}
if(m_ReciverBodyID==101)
{
Serial.println(&quot;@GUIS 2&quot;);
}
if(m_ReciverBodyID==102||m_ReciverBodyID==103)
{
Serial.println(&quot;@GUIS 0&quot;);
}
}
}
unsigned char ATFMessageService(unsigned char delaytimer)
{
char n_TempChar;
n_TempChar = Serial.available();
if(n_TempChar)
{
delay(delaytimer);
n_TempChar = Serial.read();
while(n_TempChar!='@'&amp;&amp;n_TempChar!='#'&amp;&amp;n_TempChar!='$'&amp;&amp;n_TempChar&gt;=0)
{
n_TempChar = Serial.read();
}
m_ReciverHeader = n_TempChar;
m_ReciverBodyID = Serial.parseInt();
if(n_TempChar=='@')
{
m_ReciverVarInt = Serial.parseInt();
}
else if(n_TempChar=='#')
{
m_ReciverVarFloat = Serial.parseFloat();
}
else if(n_TempChar=='$')
{
Serial.read();
m_ReciverVarString = Serial.readStringUntil('\r');
}
else return 0;
return 1;
}
return 0;
}</code></pre>
<h1>资源文件</h1>
<p><a href="https://pan.baidu.com/e/1cN5MDMWqXWExINp2Hq2p0Q?pwd=ATFC">高级篇part7_资源文件</a></p>
<h1>视频教程</h1>
<p><a href="https://www.bilibili.com/video/BV1dY4y1p7ur/?spm_id_from=333.999.0.0&amp;vd_source=8adc070117854dc6967b17bf3379321b">【高级篇】Part7_按钮控件切换界面</a></p>