电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
柿饼派初体验
分 享
扫描二维码分享
柿饼派初体验
柿饼派
柿饼UI
入门电子设计
关注
发布时间: 2020-11-30
丨
阅读: 3000
# 简介 大家好,本篇文章介绍的是柿饼派,柿饼派是上海睿赛德电子科技有限公司基于柿饼UI开发的一款显示屏板卡,我们来看一下实物: ![](https://cf02.ickimg.com/bbsimages/202011/4ab12adbf1c4e8910c4329af449c5ea7.jpg) 在柿饼派背面中间是一块PersimM3模块,我买的这块上面没有单独的M3模块, ![](https://cf02.ickimg.com/bbsimages/202011/07df1bec94e33646ff50eba1c99fbf5d.jpg) PersimM3是上海睿赛德电子科技有限公司基于柿饼UI开发的一款显示屏板卡,用于提供IOT、智能家居、消费电子等领域的屏幕开发解决方案。 硬件模块尺寸小巧,功能强悍,支持丰富的外设通讯接口,可外接传感器或其他主控单元,支持丰富的网络协议和音视频播放,此外,支持功能,便于远程维护升级,外观如下图所示: ![](https://cf02.ickimg.com/bbsimages/202011/684571a82bf807f36564d3d8e3cdb118.png) PersimM3模块的出厂固件是和柿饼派配套使用的,已经为柿饼派集成了相关的驱动,我们拿到柿饼派后可以直接通过javascript来进行UI开发,非常方便。 # UI设计器安装 柿饼派的开发资料我们可以从下面的链接获取: [https://realthread.cowtransfer.com/s/2d91a609453549](https://realthread.cowtransfer.com/s/2d91a609453549) 打开后直接下载解压就可以,在docs文件夹里面是一些说明文档,在tools文件夹中是我们需要用到的开发工具,在本文中我是通过javascript脚本来进行UI开发的,首先需要安装persimmonUI设计工具,设计器在tools/RTGUIBuilderSetup里,双击exe文件安装即可,安装时一路next,安装完成后打开,设计器界面如下: ![](https://cf02.ickimg.com/bbsimages/202011/a21b8ec2e722be998ddc2a57fb8ef0ff.png) 我们可以看到界面左下角显示设备:未连接,通过柿饼派后面的usb口就可以连接至电脑,刚买回来的柿饼派自带一个联网的例程,我们通过usb线上电后就会开始运行,在柿饼派背面还引出了串口,我们可以通过串口助手查看柿饼派输出的信息,便于调试。 ![](https://cf02.ickimg.com/bbsimages/202011/5f53ce841e8168da0657ea0e5f8d7888.jpg) 柿饼派连接到电脑后我们可以看到UI设计器的左下角显示设备:已连接,同时工具栏的下载按钮也变成蓝色的, ![](https://cf02.ickimg.com/bbsimages/202011/653c20b4f1d6c77989409327653f6bb9.png) ![](https://cf02.ickimg.com/bbsimages/202011/ef5243fa40041f3d0596c17c00c123a0.png) 在开发资料的docs/src文件夹下是提供的一些UI界面的例程,我们可以用设计器打开一个例程,要注意项目路径不能包含全角字符,打开后在界面右侧的工程管理器可以看到我们的项目文件 ![](https://cf02.ickimg.com/bbsimages/202011/ca56b862aaaaf6842bd4b1b2de76f97b.png) 这是一个按键切换页面的例程,双击page1.ui可以看到page1的界面, ![](https://cf02.ickimg.com/bbsimages/202011/86a01b4a9c698602fbd7e0080d0e20dc.png) 连接好柿饼派后点击工具栏的下载按钮就可以下载例程了 ![](https://cf02.ickimg.com/bbsimages/202011/40b053a74a12566949c26d5fda28b66a.png) 设计器会提示下载完成,稍等柿饼派重启我们就可以看到新例程已经运行了, ![](https://cf02.ickimg.com/bbsimages/202011/2d48a39e819d0801053876863c29d962.jpg) 点击按钮就可以实现页面的切换: ![](https://cf02.ickimg.com/bbsimages/202011/1a043f7d92b3f9c4006cefb6254b00eb.jpg) 我们也可以使用仿真功能,不用下载到柿饼派也可以查看运行效果,点击工具栏绿色的运行按钮就可以进行仿真操作, ![](https://cf02.ickimg.com/bbsimages/202011/22ea326d72f31618429c54024866c86c.png) 点击界面的按钮同样可以实现页面的切换,与柿饼派上的运行效果一样, ![](https://cf02.ickimg.com/bbsimages/202011/680773e0334b2958fcea41eef7edba50.png) 这样我们可以先进性仿真,测试好后再下载到板卡上。 # 新建工程 现在我们新建一个工程,点击文件——新建——新建工程,或者点击工具栏新建工程,弹出如下窗口: ![](https://cf02.ickimg.com/bbsimages/202011/e023f3d5cd979b8ddd8aa185206a24e9.png) 在这里设置工程名称和路径,工程路径要全英文,在下面来设置屏幕分辨率等,之后点击确定后会弹出另一个新建界面的对话框, ![](https://cf02.ickimg.com/bbsimages/202011/443b72990697fdf08312993d1fc3389f.png) 在这里设置窗口名称,之后点击确定,就可以进入工程页面了, ![](https://cf02.ickimg.com/bbsimages/202011/9c87dd029efc2859160174f7a45da4a4.png) 界面中间灰色的部分就是我们的显示屏幕,在左侧工具箱内是一些基础控件,下方的图片资源可以添加要显示的图片,右侧的工程管理器可以看到工程的文件,下方的属性栏可以对控件等的属性进行设置。 现在简单写一个按钮改变文本的小程序熟悉一下柿饼UI的开发,首先我们需要一个按钮控件,在左侧找到button控件,点击一下,然后就可以在灰色的屏幕上放置按钮了,大小可以随意调整, ![](https://cf02.ickimg.com/bbsimages/202011/309eb001ba2664c04883df6c91cb73a0.png) ![](https://cf02.ickimg.com/bbsimages/202011/30fd2b949f74b2eb8d13a2aa58f2b4a9.png) 我们可以看到在工程管理器里page1.ui的画面控件多了一个button1,然后我们再在左侧控件里找到label控件放到屏幕上, ![](https://cf02.ickimg.com/bbsimages/202011/d48425e91abce0ca3156f22e5dd95ae4.png) ![](https://cf02.ickimg.com/bbsimages/202011/b1840365449eea4f70d9f6f8543d7605.png) 现在我们点击button控件,在右侧属性栏我们可以找到调用属性这一栏,在这里我们设置button的调用属性,在右侧输入函数名称然后回车,之后双击左侧的bindtap就可以到函数中了, ![](https://cf02.ickimg.com/bbsimages/202011/4b37a736896465d904122a90d32fbfbe.png) ![](https://cf02.ickimg.com/bbsimages/202011/8de5df6e9a499f05ec5759dd7f0ab8c4.png) 我们可以看到程序下方有一个刚才添加的buttonclick函数,我们可以在里面添加需要的代码,现在要实现的功能是按钮按下改变label控件的文本,代码如下, ![](https://cf02.ickimg.com/bbsimages/202011/2c3d82693f4868bfd49ebb0369a68a3e.png) 现在我们可以点击运行来看一下效果, ![](https://cf02.ickimg.com/bbsimages/202011/b950b91263469c452bdcc7f2421ad6a2.png) ![](https://cf02.ickimg.com/bbsimages/202011/2af08b3d55c88d87a6c1de5a323a2989.png) 我们可以看到现在已经成功实现了按钮切换文本内容,现在我们把程序下载到柿饼派中看一下效果。 ![](https://cf02.ickimg.com/bbsimages/202011/fc48c39df9f65180fdf90dd4ec6aa0f7.jpg) ![](https://cf02.ickimg.com/bbsimages/202011/f034e6f0c50aaed51b22c5c7e3578bdb.jpg) 可以看到用柿饼UI进行开发还是非常方便的,之后也会通过其他小程序来继续学习柿饼UI的开发。
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
0
)
入门电子设计
关注
评论
(0)
登录后可评论,请
登录
或
注册
相关文章推荐
MK-米客方德推出工业级存储卡
Beetle ESP32 C3 蓝牙数据收发
Beetle ESP32 C3 wifi联网获取实时天气信息
开箱测评Beetle ESP32-C3 (RISC-V芯片)模块
正点原子数控电源DP100测评
DP100试用评测-----开箱+初体验
Beetle ESP32 C3环境搭建
【花雕体验】16 使用Beetle ESP32 C3控制8X32位WS2812硬屏之二
X
你的打赏是对原创作者最大的认可
请选择打赏IC币的数量,一经提交无法退回 !
100IC币
500IC币
1000IC币
自定义
IC币
确定
X
提交成功 ! 谢谢您的支持
返回
我要举报该内容理由
×
广告及垃圾信息
抄袭或未经授权
其它举报理由
请输入您举报的理由(50字以内)
取消
提交