淘晶驰串口屏：复刻苹果计算器，了解代码编写

用淘晶驰串口屏完成了一个具备加减乘除运算功能的计算器（暂时不支持负号，小数点和百分号），不仅熟悉了工程创建、字库导入、控件拖放等全流程操作，更掌握了变量存储、事件逻辑，切图，代码编写等核心开发思维。这些技能不仅适用于简单计算器，更能延伸至智能家居控制面板、工业仪表监测界面、智能设备调试终端等丰富场景。

jmlinux

1544人浏览 · 2025-06-12 07:57:34

jmlinux · 2025-06-12 07:57:34 发布

引言

本文基于上一篇文章改进，修改前，仅仅支持两个单位数字加法运算，修改后，支持加减乘除运算-不支持负号，小数点和百分号。我们将借助陶晶驰串口屏的按钮控件的按下事件，以1:1复刻苹果手机计算器为目标，初步了解陶晶驰串口屏的代码编写。

1）所有的赋值操作都不支持多余空格，添加进任何空格，编译都会报错

2）covx-变量类型转换

3）运算操作

4）跨页面赋值，全局变量操作（本例程未用到。）

5）所有的判断语句都不支持多余空格，添加进任何空格，编译都会报错

淘晶驰串口屏系列文章：

002：淘晶驰USART HMI 上位机软件安装

003：淘晶驰串口屏开发初体验：10分钟实现简易加法器

004：淘晶驰串口屏：复刻苹果计算器，掌握按键控件的切图使用

005：淘晶驰串口屏：复刻苹果计算器，掌握按键控件的切图使用-2个图片

006：淘晶驰串口屏：复刻苹果计算器，掌握切图控件的使用

一、基本概念

1.控件是什么？

控件是串口屏想实现相关功能的“功能组件”，需要串口屏显示什么内容就使用相对应的控件。在串口屏上位机的界面编辑窗口中,一切你能看到的,都是控件。有三十种控件，常见的控件有，文本，按钮，数字，变量，滚动文本，切图等。

2.控件事件是什么？

控件事件，指的是这个控件被操作时要执行的功能。目前各种控件综合起来被操作的方式有以下几种类型：

触摸被按下：对应名称叫做【按下事件】

触摸被按下后弹起：对应名称叫做【弹起事件】

3.控件属性

控件属性是控件自己的一些设置项，上面提到想要什么功能就选择对应的控件。比如想要显示文本，就用文本控件，但是选择文本控件后，显示什么内容？什么字体？字体什么颜色？文本背景什么颜色？字体间距多少等等这些信息怎么设置呢？

4.编写代码的位置

只有有以下两个地方

program.s

控件事件

在本例程中，program.s先不用管，主要负责初始化的工作，只要理解控件时间的代码就可以了。每个按钮控件的弹起事件都有代码。

5.书写语法

1）所有的赋值操作都不支持多余空格，添加进任何空格，编译都会报错

txt属性为字符串类型，字符串类型的属性赋值常量必须加双引号

赋值操作
t0.txt="123"

//给n0控件的val属性赋值123
n0.val=123

2）covx-变量类型转换

covx att1,att2,lenth,format

att1:源变量

att2:目标变量

lenth:字符串的长度(0为自动长度，非0为固定长度)

format:申明数值类型(0-数字;1-货币;2-Hex)

字符串属性赋值数值属性赋值-val和txt属性相互转换

//把滑块h0的val数值变量转换成10进制数字字符串并赋值给文本t0的txt变量,长度为自动
covx h0.val,t0.txt,0,0

字符串属性和数值属性相互转换赋值操作-txt和val属性相互转换

//把文本t0.txt转为数字n0.val

covx t0.txt,n0.val,0,0

3）运算操作

运算操作所有运算不支持乘除法优先，也不支持括号优先级，统一从左到右的顺序，请特别注意。

所有的运算操作可以在上位编辑状态下写入控件事件中，也可以串口传输过来(串口传输记得加三个0xff的结束符)

所有的运算操作都不支持多余空格，添加进任何空格，编译都会报错

正确的运算操作
n0.val=n0.val+n1.val+2
n0.val++
n0.val+=2
n0.val=n1.val%3
n0.val=h0.val*10
n0.val*=10
n0.val|=n1.val //按位或
n0.val=n1.val&0x03 //按位与
n0.val=n1.val^0x05 //按位异或

4）跨页面赋值，全局变量操作（本例程未用到。）

全局变量-常规使用
多数情况下，我们都是在操作当面页面的控件属性，如果需要操作其他页面的控件属性需要提前将对应的控件的属性vscope设置为全局。

HMI逻辑语句（if，for，while）

5）所有的判断语句都不支持多余空格，添加进任何空格，编译都会报错

6）小结

语法跟c语言非常类似，把控件看作成一个结构体变量，控件里面的属性，可以通过“.”来引用。比如b1.txt，b1.val，b1.h。不同点：淘晶驰串口屏没main函数，语句结束没有“；”。赋值操作，运算操作，逻辑语句不支持多余空格。整理如下表格。

序号	特性	C语言	陶晶驰串口屏
1	main函数	main函数和主循环while（1）	无main函数
2	代码位置	.c文件的位置	program.s；控制事件
3	控件操作	无直接对应概念，类比结构体	控件类比成结构体
4	属性访问	struct.member	控件.属性
5	语句结束符	必须使用;	直接换行（无;）
6	语法（空格）	赋值操作，运算操作，逻辑语句支持多余空格	赋值操作，运算操作，逻辑语句不支持多余空格
7	语法（变量类型转换）	covx-变量类型转换 covx att1,att2,lenth,format	itoa() - 整数转字符串 atoi() - 字符串转整数
8	事件处理	单片机的中断，按下事件，弹起事件等，类似Switch语句	按下事件，弹起事件，前初始化事件

二、简单计算器的代码编写

1.使用到的控件

//=== 页面0控件定义 ===//

page0（页面）//页面0

b0(按钮) // 数字0

b1(按钮) // 数字1

b2(按钮) // 数字2

B3(按钮) // 数字3

b4(按钮) // 数字4

b5(按钮) // 数字5

b6(按钮) // 数字6

b7(按钮) // 数字7

b8(按钮) // 数字8

b9(按钮) // 数字9

b10(按钮) // 除号（÷）

b11(按钮) // 乘号（x）

b12(按钮) // 减号（-）

b13(按钮) // 加法（+）

b14(按钮) // 等号（=）

b15(按钮) // 小数点（.）

b16(按钮) // 清除（AC）

b17(按钮) // 正负转换键（+/-）

b18(按钮) // 百分号（%）

N1(数字) // 显示当前数值（主显示屏）

t1(文本) // 显示当前运算符

t2(文本) // 输入状态标记

n0(数字) // 当前输入值/计算结果

va0(数字) //中间计算结果存储

t1(文本) //当前运算符存储（+、-、*、/）

t2(文本) //输入状态标记（"*"表示新输入开始）

2.按钮设置

sta属性 -背景填充方式: 按钮的sta设置成切图。为picc和picc2属性选择对应的照片。 picc属性 -按钮没按下时切图背景(必须是全屏图片)，picc2属性 -按钮按下时切图背景(必须是全屏图片)。

b1（按钮）-b18（按钮）的sta设置成切图，picc设置为编号是0的照片，picc2设置为编号是1的照片。

3.数字按钮代码

1)变量

全局变量说明：初始值是0

n0.val - 当前输入值/计算结果

va0.val - 中间计算结果存储

t1.txt - 当前运算符存储（+、-、*、/）

t2.txt - 输入状态标记（"*"表示新输入开始）

2)逻辑

// 数字按钮通用逻辑：

// 如果t2标记为"*"（表示新输入开始），则直接设置当前值

// 否则将当前值追加到已有数字后（通过*10+新数字实现）

3)举例

b0（按钮）为例，sta设置成切图，picc设置为编号是0的照片，picc2设置为编号是1的照片。

在按钮b0的弹起事件输入代码:

if(t2.txt=="isNewInput")
{
  t2.txt=""
  n0.val=0
}else
{
  n0.val=n0.val*10
}

类似地,在按钮b9的弹起事件输入代码:

if(t2.txt=="isNewInput")
{
  t2.txt=""
  n0.val=9
}else
{
  n0.val=n0.val*10+9
}

4.运算符按钮按下事件的代码

运算逻辑：当点击数字时候，用n0.val 记录当前输入值。用va0.val 记录中间计算结果存储。当用户点击（+、-、*、/）按钮时，记录下该运算符，并等待下一个数字输入。当点击“=”按钮时，根据之前记录的数字和运算符进行运算，并将结果显示在屏幕的显示区域。

b10(按钮) // 除号（÷）

t2.txt="isNewInput"
if(t1.txt=="")
{
  va0.val=n0.val
}else if(t1.txt=="+")
{
  va0.val=va0.val+n0.val
  n0.val=va0.val
}else if(t1.txt=="-")
{
  va0.val=va0.val-n0.val
  n0.val=va0.val
}else if(t1.txt=="*")
{
  va0.val=va0.val*n0.val
  n0.val=va0.val
}else if(t1.txt=="/")
{
  va0.val=va0.val/n0.val
  n0.val=va0.val
}
t1.txt="/"

b11(按钮) // 乘号（x）

t2.txt="isNewInput"
if(t1.txt=="")
{
  va0.val=n0.val
}else if(t1.txt=="+")
{
  va0.val=va0.val+n0.val
  n0.val=va0.val
}else if(t1.txt=="-")
{
  va0.val=va0.val-n0.val
  n0.val=va0.val
}else if(t1.txt=="*")
{
  va0.val=va0.val*n0.val
  n0.val=va0.val
}else if(t1.txt=="/")
{
  va0.val=va0.val/n0.val
  n0.val=va0.val
}
t1.txt="*"

b12(按钮) // 减号（-）

t2.txt="isNewInput"
if(t1.txt=="")
{
  va0.val=n0.val
}else if(t1.txt=="+")
{
  va0.val=va0.val+n0.val
  n0.val=va0.val
}else if(t1.txt=="-")
{
  va0.val=va0.val-n0.val
  n0.val=va0.val
}else if(t1.txt=="*")
{
  va0.val=va0.val*n0.val
  n0.val=va0.val
}else if(t1.txt=="/")
{
  va0.val=va0.val/n0.val
  n0.val=va0.val
}
t1.txt="-"

b13(按钮) // 加法（+）

t2.txt="isNewInput"
if(t1.txt=="")
{
  va0.val=n0.val
}else if(t1.txt=="+")
{
  va0.val=va0.val+n0.val
  n0.val=va0.val
}else if(t1.txt=="-")
{
  va0.val=va0.val-n0.val
  n0.val=va0.val
}else if(t1.txt=="*")
{
  va0.val=va0.val*n0.val
  n0.val=va0.val
}else if(t1.txt=="/")
{
  va0.val=va0.val/n0.val
  n0.val=va0.val
}
t1.txt="+"

b14(按钮) // 等号（=）

t2.txt="isNewInput"
if(t1.txt!="")
{
  if(t1.txt=="+")
  {
    va0.val=va0.val+n0.val
  }else if(t1.txt=="-")
  {
    va0.val=va0.val-n0.val
  }else if(t1.txt=="*")
  {
    va0.val=va0.val*n0.val
  }else if(t1.txt=="/")
  {
    va0.val=va0.val/n0.val
  }
  n0.val=va0.val
}

b15(按钮) // 小数点（.）

n0.val=0//此版本不支持负号，小数点和百分号，后面再实现

b16(按钮) // 清除（AC）

n0.val=0
va0.val=0
t1.txt=""
t1.txt=""

b17(按钮) // 正负转换键（+/-）

n0.val=0//此版本不支持负号，小数点和百分号，后面再实现

b18(按钮) // 百分号（%）

n0.val=0//此版本不支持负号，小数点和百分号，后面再实现

N1(数字) 、t1(文本) 、t2(文本) 、n0(数字)

三、测试

1.点击调试

不会报错，可以正常运行。

2.采用模拟器在测试

按下2222÷1111=2,可以得到结果2.恭喜你已经成功了.

如果你有淘晶驰的串口屏在手，可以烧录到硬件测试。

3.硬件测试

淘晶驰的串口屏x5触摸屏烧录到硬件后的测试效果。

至此，您已成功用淘晶驰串口屏完成了一个具备加减乘除运算功能的计算器（暂时不支持负号，小数点和百分号），不仅熟悉了工程创建、字库导入、控件拖放等全流程操作，更掌握了变量存储、事件逻辑，切图，代码编写等核心开发思维。这些技能不仅适用于简单计算器，更能延伸至智能家居控制面板、工业仪表监测界面、智能设备调试终端等丰富场景。

不妨尝试修改计算器代码实现支持负号，小数点和百分号的功能，或添加图像控件让界面更美观。遇到问题时，可随时参考文末的官方教程文献。

下期预告： 淘晶驰串口屏：复刻苹果计算器，支持小数点。关注我，解锁更多实战技巧！