柿饼UI贺岁公测板之小练习

发布于 2019-02-09 21:43:30 浏览：2577 订阅该版

* 本帖最后由 xianting77 于 2019-2-9 22:54 编辑 *

试用小练习参考了【PersimmonUI学习营】DaZhou，二牛哥，chowguihua,等小伙伴的JS脚本，并做了修改和改进。
1，练习WheelString的使用，设定简易时钟
2，练习Canvas的使用， 画布上画仪表盘
3，练习Card的使用， 加入imageBox模拟屏幕滑动的效果
4，练习animation的使用，模拟动画图片的效果
5，练习网络+Canvas的使用， 天气预报
练习的JS脚本上传码云
[https://gitee.com/xianting77/ShiBing_Ex](https://gitee.com/xianting77/ShiBing_Ex)

1，练习WheelString的使用，设定简易时钟，参考了PersimM帮助文档的例子，现在我就使用了点阵字体，显示效果不好，要能使用Demo的Alarm页使用的字体，效果能更好，这里建议Persimmon UI Builder的字体下拉菜单多一些字体选择。目前的方法是在左下角资源管理器中加入TFF字体
![page1.jpg](/uploads/201902/09/212422vtcizcrz0i01ttm2.jpg)

2，练习Canvas的使用， 画布上画仪表盘，参考了二牛哥的例子，把二牛哥的JS文件中回调函数的仪表绘制部分提炼成函数，方便后期修改改进。

![仪表盘.jpg](/uploads/201902/09/212423sudxfedftmidtidd.jpg)
3，练习Card的使用， 加入imageBox模拟屏幕滑动的效果，使用柿饼菜鸟如我也能做出如手机般UI的界面，并且所实际所得，确实很方便。
![播放器.jpg](/uploads/201902/09/212422j1ko9sqpwp4htw50.jpg)
4，练习animation的使用，模拟动画图片的效果。虽然目前柿饼不支持GIF文件，通过animation的图像文件集放入几个GIF的截图，用setData({animatedImage1:'start'}) 控制动画起动，一样可以实现GIF的效果
![开箱1.jpg](/uploads/201902/09/212423ieefcclvpt5xcv89.jpg)
5. 练习网络+Canvas的使用， 天气预报。参考了DaZhou的例子，在连接好WIFI的前提下，通过HTTP的GET方法获取服务器天气API的JSON数据。解析，并在Canvas画出三天内的温度变化曲线。
数值范围匹配刻度还没有很好的测试，先做个小结，马上上班，时间会紧张一些。

视频：[https://pan.baidu.com/s/1Zr0jgPZqvzu1VhJNva7k6g](https://pan.baidu.com/s/1Zr0jgPZqvzu1VhJNva7k6g)

总的来说，柿饼UI有UI设计工具，还带WIFI模块，能USB下载调试，还能更新固件，功能确实强劲，秒杀传统的嵌入式UI设计。还有RT-THREAD强大的组件和操作系统支持，相信很快会赢得很多粉丝。
当然细节仍旧可以打磨，Persimmon UI Builder中的小BUG终结，设计指南的更新，硬件外设和接口更通用。
最后感谢柿饼UI团队组织的试用活动，并给我留了一个机会，让我看到了如此犀利的嵌入式UI套件，我的试用只涉及柿饼UI冰山一角，以后定会关注柿饼UI不断迭代更新。