电气猫 发表于 2016-8-26 22:17:20

【教程-入门级】教你做属于自己的数字表盘,敲简单!

本帖最后由 电气猫 于 2016-8-26 22:22 编辑

前言:麦步表盘感觉很少的说……主要是开发人员不够?不过逛了逛社区,发现好多人都想做,但苦于太难(其实不太难,个人认为是教程没做好),今天写一个教程,教大家做自己的属于自己的第一个表盘!无论做得怎样,当显示在自己手表的那一刻,还是相当有成就感的说!





第一步、下载工具:地址http://dev.maibu.cc/sdk/watch,帮助文档(可选)、ARM编译器(必须)、APP模拟器(按照你的系统位数决定32还是64,必须)、Demo(可选)、APP内存检测(可选)


==============科普一下(没兴趣了解每个东西是干嘛的可以跳过这段)==============

这个是编译环境,我们写好的代码是我们看到的C语言
而这个是将代码转化为机器语音的一个标准环境。需要安装




这个是官方做的一个模拟器
可以将做好的文件实际检测一下
但目前还不完善,不过这个教程里足够啦




这个里面包含了很多程序模板
本教程无需使用。









第二步、安装配置:实际上,需要安装的只有ARM编译器,模拟器不需要安装。
把这个装好,然后把模拟器解压好,最好安装的位置和解压的位置在一起,如右图:










第三步、配置:右键我的电脑-属性-高级系统设置-高级-环境变量-PATH-编辑



变量值最后增加ARM编译器和模拟器的的实际地址
比如我的是64位的,安装地址和解压地址都是D:\Program Files\所以在这个变量值上增加下面的部分
;D:\Program Files\GNU Tools ARM Embedded\4.7 2014q2\bin;D:\Program Files\VisualMWatch_W64\mbcc\bin


恭喜你,到这一步你已经把锅碗瓢盆准备好了,开始做饭吧。




第四步、选材:既然是新手,我们先去商城找一款比较喜欢的数字表表盘,这次就用个比较简单的藤蔓十字绣吧选好之后,我们到这个帖子找找http://bbs.maibu.cc/thread-483-1-1.html或者在https://github.com/maibu/Maibu找到,这里我们就用最简单的藤蔓表盘,因为元素少、没有秒更新,省电,下载源码包,解压后如左图,然后把这些放到模拟器安装地址,右图



appinfo.json文件是一个指针文件,无需改动,c是源代码,resource里面是程序调用的一些文件,比如图片。打开之后如下:DATA就是日期用文字、TIME就是时间用的文字、VINES是背景。


第五步、加工素材:最近守望挺火的啊,做个死神表盘吧。截取大小要128*128,保存成单色BMP,注意要留一点空间给表面然后加工一下字体,打开一个数字调用的图片,这里改个比较酷炫的手写字体吧,有点死神的这种风格。最好保留原的分辨率,有个比较简单的办法可以一次性输入10个数字然后用统一的框选出。
做好的素材如下



第六步、编程:程序这种东西三分做,七分调。既然用有模板了,那么我们只用调,但!也是要一步步调。这时我们打开Visual MWatch.exe然后把watchface_vines.c放进去。找到主程序段,将被屏蔽掉的模拟子函数还原回来。就是把红色框住的删掉就行,不然无法模拟。

模拟之后,就有初版的画面啦。然后红色的这块就是我们的各个元素的坐标。通过修改坐标来调整我们文字的位置。(小贴士:如果找不准位置,可以用鼠标指一下模拟的画面,下方可以看到坐标。)

多次调整好了之后,就有下面的效果啦,顺带在背景里再加点字,加两个点,一条杠(当然,这些都是要调整位置的,而且是反复调,大家要有耐心。)

测试满意了之后,把红色这段加回去,然后点击构建-打包或者直接Ctrl+P
然后把OUT.MAI拖到网页微信文件传输里(此方法最简单快捷,IOS安卓都可以)




等待安装……




Tata~~成功啦



实际效果会由于是墨水屏幕效果会好很多
当然,可以再反复调整到自己喜欢位置
按照此思路,各位可以用自己喜欢的字体
自己喜欢的背景来做(比如自己名字、宠物照片)
那么学会了之后,会不会说这个太简单还是不能上传呢?
不会!只要你有好创意,就可以申请上传到表盘商城!
相信我“真正的好设计工程师不是会写多少代码,而是有多好的创意!”
希望这个可以帮到各位小白!
也希望越来越多的朋友加入到开发者行列!




附件是死神表盘,如果大家喜欢,可以自己下载用哦,也可以直接改了用



cw2549 发表于 2016-8-27 15:12:18

不错,学习了。

dualxu 发表于 2016-8-27 20:02:43

扫盲贴啊,非常赞

ZZero 发表于 2016-8-27 20:09:10

接地气的教程,赞一下,希望大神能多发类似的图文并茂的教程。

步往康来 发表于 2016-8-29 10:57:10

非常不错的教程,楼主继续下去:   如何加入农历\体感\节日提醒?............

大王1989 发表于 2016-8-29 11:17:28

这个比较赞

电气猫 发表于 2016-8-29 11:54:48

步往康来 发表于 2016-8-29 10:57
非常不错的教程,楼主继续下去:   如何加入农历\体感\节日提醒?............

有这个想法,最近工作忙,有空的时候打算做一个全功能表盘模板,不需要哪个直接删掉。目前很多的开发都是需要什么加什么,思维逆转一下,不需要什么删除什么,对不是太会写程序的应该是个好事

1076964977 发表于 2016-8-29 12:13:44

电气猫 发表于 2016-8-29 11:54
有这个想法,最近工作忙,有空的时候打算做一个全功能表盘模板,不需要哪个直接删掉。目前很多的开发都是 ...

这个想法很好!!

包子馒头2 发表于 2016-8-29 17:49:51

电气猫 发表于 2016-8-29 11:54
有这个想法,最近工作忙,有空的时候打算做一个全功能表盘模板,不需要哪个直接删掉。目前很多的开发都是 ...

可以参考 EVA 的表盘代码。全部使用数组传递参数的,改数组就能改变表盘了。

练练练 发表于 2016-8-29 19:14:55

很赞很赞很赞
页: [1] 2 3 4 5
查看完整版本: 【教程-入门级】教你做属于自己的数字表盘,敲简单!