麦步社区-论坛
标题: 【教程-入门级】教你做属于自己的数字表盘，敲简单！ [打印本页]
作者: 电气猫 时间: 2016-8-26 22:17
标题: 【教程-入门级】教你做属于自己的数字表盘，敲简单！
本帖最后由 电气猫 于 2016-8-26 22:22 编辑
前言：麦步表盘感觉很少的说……主要是开发人员不够？不过逛了逛社区，发现好多人都想做，但苦于太难(其实不太难，个人认为是教程没做好)，今天写一个教程，教大家做自己的属于自己的第一个表盘！无论做得怎样，当显示在自己手表的那一刻，还是相当有成就感的说！
第一步、下载工具：地址http://dev.maibu.cc/sdk/watch，帮助文档(可选)、ARM编译器(必须)、APP模拟器(按照你的系统位数决定32还是64，必须)、Demo(可选)、APP内存检测(可选)
==============科普一下(没兴趣了解每个东西是干嘛的可以跳过这段)==============
[attach]2341[/attach]
这个是编译环境，我们写好的代码是我们看到的C语言
而这个是将代码转化为机器语音的一个标准环境。需要安装
[attach]2342[/attach]
这个是官方做的一个模拟器
可以将做好的文件实际检测一下
但目前还不完善，不过这个教程里足够啦
[attach]2343[/attach]
这个里面包含了很多程序模板
本教程无需使用。
第二步、安装配置：实际上，需要安装的只有ARM编译器，模拟器不需要安装。
把这个装好，然后把模拟器解压好，最好安装的位置和解压的位置在一起，如右图：
[attach]2344[/attach][attach]2345[/attach]
第三步、配置：右键我的电脑-属性-高级系统设置-高级-环境变量-PATH-编辑
[attach]2347[/attach]
变量值最后增加ARM编译器和模拟器的的实际地址
比如我的是64位的，安装地址和解压地址都是D:\Program Files\所以在这个变量值上增加下面的部分
;D:\Program Files\GNU Tools ARM Embedded\4.7 2014q2\bin;D:\Program Files\VisualMWatch_W64\mbcc\bin
恭喜你，到这一步你已经把锅碗瓢盆准备好了，开始做饭吧。
第四步、选材：既然是新手，我们先去商城找一款比较喜欢的数字表表盘，这次就用个比较简单的藤蔓十字绣吧
[attach]2348[/attach][attach]2350[/attach]
[attach]2351[/attach][attach]2352[/attach]
appinfo.json文件是一个指针文件，无需改动，c是源代码，resource里面是程序调用的一些文件，比如图片。
DATA就是日期用文字、TIME就是时间用的文字、VINES是背景。
第五步、加工素材：最近守望挺火的啊，做个死神表盘吧。截取大小要128*128，保存成单色BMP，注意要留一点空间给表面
[attach]2354[/attach][attach]2355[/attach]
做好的素材如下
[attach]2376[/attach]
[attach]2374[/attach][attach]2375[/attach]
第六步、编程：程序这种东西三分做，七分调。既然用有模板了，那么我们只用调，但！也是要一步步调。这时我们打开Visual MWatch.exe然后把watchface_vines.c放进去。找到主程序段，将被屏蔽掉的模拟子函数还原回来。就是把红色框住的删掉就行，不然无法模拟。
[attach]2377[/attach]
模拟之后，就有初版的画面啦。然后红色的这块就是我们的各个元素的坐标。通过修改坐标来调整我们文字的位置。(小贴士：如果找不准位置，可以用鼠标指一下模拟的画面，下方可以看到坐标。)
[attach]2378[/attach]
多次调整好了之后，就有下面的效果啦，顺带在背景里再加点字，加两个点，一条杠(当然，这些都是要调整位置的，而且是反复调，大家要有耐心。)
[attach]2379[/attach]
测试满意了之后，把红色这段加回去，然后点击构建-打包或者直接Ctrl+P
然后把OUT.MAI拖到网页微信文件传输里(此方法最简单快捷，IOS安卓都可以)
[attach]2377[/attach][attach]2380[/attach]
等待安装……
[attach]2391[/attach][attach]2390[/attach]
Tata~~成功啦
[attach]2389[/attach]
实际效果会由于是墨水屏幕效果会好很多
当然，可以再反复调整到自己喜欢位置
按照此思路，各位可以用自己喜欢的字体
自己喜欢的背景来做(比如自己名字、宠物照片)
那么学会了之后，会不会说这个太简单还是不能上传呢？
不会！只要你有好创意，就可以申请上传到表盘商城！
相信我“真正的好设计工程师不是会写多少代码，而是有多好的创意！”
希望这个可以帮到各位小白！
也希望越来越多的朋友加入到开发者行列！
附件是死神表盘，如果大家喜欢，可以自己下载用哦，也可以直接改了用
作者: cw2549 时间: 2016-8-27 15:12
不错，学习了。
作者: dualxu 时间: 2016-8-27 20:02
扫盲贴啊，非常赞
作者: ZZero 时间: 2016-8-27 20:09
接地气的教程，赞一下，希望大神能多发类似的图文并茂的教程。
作者: 步往康来 时间: 2016-8-29 10:57
非常不错的教程,楼主继续下去: 如何加入农历\体感\节日提醒?............
作者: 大王1989 时间: 2016-8-29 11:17
这个比较赞
作者: 电气猫 时间: 2016-8-29 11:54
步往康来 发表于 2016-8-29 10:57
非常不错的教程,楼主继续下去: 如何加入农历\体感\节日提醒?............
有这个想法，最近工作忙，有空的时候打算做一个全功能表盘模板，不需要哪个直接删掉。目前很多的开发都是需要什么加什么，思维逆转一下，不需要什么删除什么，对不是太会写程序的应该是个好事
作者: 1076964977 时间: 2016-8-29 12:13
这个想法很好！！
作者: 包子馒头2 时间: 2016-8-29 17:49
可以参考 EVA 的表盘代码。全部使用数组传递参数的，改数组就能改变表盘了。
作者: 练练练 时间: 2016-8-29 19:14
很赞很赞很赞
作者: tda8361 时间: 2016-8-29 19:41
这个极好，对我们不懂代码的
作者: 步往康来 时间: 2016-8-29 22:35
电气猫 发表于 2016-8-29 11:54
有这个想法，最近工作忙，有空的时候打算做一个全功能表盘模板，不需要哪个直接删掉。目前很多的开发都是 ...
你这个想法，真是我多月前的想法，希望大神早日开发
作者: 电气猫 时间: 2016-8-31 23:23
召唤版主加精。。。。
作者: tda8361 时间: 2016-9-1 00:17
楼主坐好了，帮你送上去！
作者: 步往康来 时间: 2016-9-1 06:58
支持给楼主加精，加精。。。。。精多了要尽快放出新品出来啊
作者: cenih 时间: 2016-9-3 06:24
学习了，楼主的教程比较浅显易懂，有点当年改nokia黑白机开机画面的感觉！有时间一定要自己试试
作者: sure 时间: 2016-9-3 21:05
鼓励一下
作者: lWKl666 时间: 2016-10-25 14:13
谢谢楼主分享
作者: niuniumm 时间: 2016-10-25 15:27
接地气的教程，赞一下，希望大神能多发类似的图文并茂的教程
作者: wx_Fmh074CH 时间: 2016-10-26 13:14
膜拜大神，厉害了我的哥
作者: youjj2017 时间: 2017-2-12 16:42
按着步骤来，模拟后，左侧代码中有红字，请问是怎么回事呢？我下别的也都有这个问题，都有红色的字
生成资源文件...
-------------read appinfo.json-------------
uuid:028aeb223182487329dfd1a348612370
app_id:35073
name:藤蔓十字绣
icon:0
version:103
watchface:1
sysapp:0
res_num:21
res:0, type:0, name:PIC_BG, file:vines.bmp
res:1, type:0, name:PIC_0_1, file:0_time.bmp
res:2, type:0, name:PIC_1_1, file:1_time.bmp
res:3, type:0, name:PIC_2_1, file:2_time.bmp
res:4, type:0, name:PIC_3_1, file:3_time.bmp
res:5, type:0, name:PIC_4_1, file:4_time.bmp
res:6, type:0, name:PIC_5_1, file:5_time.bmp
res:7, type:0, name:PIC_6_1, file:6_time.bmp
res:8, type:0, name:PIC_7_1, file:7_time.bmp
res:9, type:0, name:PIC_8_1, file:8_time.bmp
res:10, type:0, name:PIC_9_1, file:9_time.bmp
res:11, type:0, name:PIC_0_2, file:0_date.bmp
res:12, type:0, name:PIC_1_2, file:1_date.bmp
res:13, type:0, name:PIC_2_2, file:2_date.bmp
res:14, type:0, name:PIC_3_2, file:3_date.bmp
res:15, type:0, name:PIC_4_2, file:4_date.bmp
res:16, type:0, name:PIC_5_2, file:5_date.bmp
res:17, type:0, name:PIC_6_2, file:6_date.bmp
res:18, type:0, name:PIC_7_2, file:7_date.bmp
res:19, type:0, name:PIC_8_2, file:8_date.bmp
res:20, type:0, name:PIC_9_2, file:9_date.bmp
-----------------begin create res.h-------------
-----------------create res.h ok-------------
-----------------begin create res_file-------------
type:0, res_key:5001, offset:336, res_size:2048, width:128, height:128
type:0, res_key:5002, offset:2384, res_size:52, width:15, height:26
type:0, res_key:5003, offset:2436, res_size:52, width:15, height:26
type:0, res_key:5004, offset:2488, res_size:52, width:15, height:26
type:0, res_key:5005, offset:2540, res_size:52, width:15, height:26
type:0, res_key:5006, offset:2592, res_size:52, width:15, height:26
type:0, res_key:5007, offset:2644, res_size:52, width:15, height:26
type:0, res_key:5008, offset:2696, res_size:52, width:15, height:26
type:0, res_key:5009, offset:2748, res_size:52, width:15, height:26
type:0, res_key:5010, offset:2800, res_size:52, width:15, height:26
type:0, res_key:5011, offset:2852, res_size:52, width:15, height:26
type:0, res_key:5012, offset:2904, res_size:30, width:9, height:15
type:0, res_key:5013, offset:2934, res_size:30, width:9, height:15
type:0, res_key:5014, offset:2964, res_size:30, width:9, height:15
type:0, res_key:5015, offset:2994, res_size:30, width:9, height:15
type:0, res_key:5016, offset:3024, res_size:30, width:9, height:15
type:0, res_key:5017, offset:3054, res_size:30, width:9, height:15
type:0, res_key:5018, offset:3084, res_size:30, width:9, height:15
type:0, res_key:5019, offset:3114, res_size:30, width:9, height:15
type:0, res_key:5020, offset:3144, res_size:30, width:9, height:15
type:0, res_key:5021, offset:3174, res_size:30, width:9, height:15
-------------create res_file ok---------------
---------------prepare pack head----------
---------------read res_file----------
---------------read code----------
not found file:.\build\maibu_code
create pack failed
正在编译...
arm-none-eabi-gcc -c -mthumb -mcpu=cortex-m0 watchface_vines.c -I .\SDK\
watchface_vines.c: In function 'app_watch_update':
watchface_vines.c:73:11: warning: assignment makes pointer from integer without a cast [enabled by default]
正在打包...
-------------read appinfo.json-------------
uuid:028aeb223182487329dfd1a348612370
app_id:35073
name:藤蔓十字绣
icon:0
version:103
watchface:1
sysapp:0
res_num:21
res:0, type:0, name:PIC_BG, file:vines.bmp
res:1, type:0, name:PIC_0_1, file:0_time.bmp
res:2, type:0, name:PIC_1_1, file:1_time.bmp
res:3, type:0, name:PIC_2_1, file:2_time.bmp
res:4, type:0, name:PIC_3_1, file:3_time.bmp
res:5, type:0, name:PIC_4_1, file:4_time.bmp
res:6, type:0, name:PIC_5_1, file:5_time.bmp
res:7, type:0, name:PIC_6_1, file:6_time.bmp
res:8, type:0, name:PIC_7_1, file:7_time.bmp
res:9, type:0, name:PIC_8_1, file:8_time.bmp
res:10, type:0, name:PIC_9_1, file:9_time.bmp
res:11, type:0, name:PIC_0_2, file:0_date.bmp
res:12, type:0, name:PIC_1_2, file:1_date.bmp
res:13, type:0, name:PIC_2_2, file:2_date.bmp
res:14, type:0, name:PIC_3_2, file:3_date.bmp
res:15, type:0, name:PIC_4_2, file:4_date.bmp
res:16, type:0, name:PIC_5_2, file:5_date.bmp
res:17, type:0, name:PIC_6_2, file:6_date.bmp
res:18, type:0, name:PIC_7_2, file:7_date.bmp
res:19, type:0, name:PIC_8_2, file:8_date.bmp
res:20, type:0, name:PIC_9_2, file:9_date.bmp
-----------------begin create res.h-------------
-----------------create res.h ok-------------
-----------------begin create res_file-------------
type:0, res_key:5001, offset:336, res_size:2048, width:128, height:128
type:0, res_key:5002, offset:2384, res_size:52, width:15, height:26
type:0, res_key:5003, offset:2436, res_size:52, width:15, height:26
type:0, res_key:5004, offset:2488, res_size:52, width:15, height:26
type:0, res_key:5005, offset:2540, res_size:52, width:15, height:26
type:0, res_key:5006, offset:2592, res_size:52, width:15, height:26
type:0, res_key:5007, offset:2644, res_size:52, width:15, height:26
type:0, res_key:5008, offset:2696, res_size:52, width:15, height:26
type:0, res_key:5009, offset:2748, res_size:52, width:15, height:26
type:0, res_key:5010, offset:2800, res_size:52, width:15, height:26
type:0, res_key:5011, offset:2852, res_size:52, width:15, height:26
type:0, res_key:5012, offset:2904, res_size:30, width:9, height:15
type:0, res_key:5013, offset:2934, res_size:30, width:9, height:15
type:0, res_key:5014, offset:2964, res_size:30, width:9, height:15
type:0, res_key:5015, offset:2994, res_size:30, width:9, height:15
type:0, res_key:5016, offset:3024, res_size:30, width:9, height:15
type:0, res_key:5017, offset:3054, res_size:30, width:9, height:15
type:0, res_key:5018, offset:3084, res_size:30, width:9, height:15
type:0, res_key:5019, offset:3114, res_size:30, width:9, height:15
type:0, res_key:5020, offset:3144, res_size:30, width:9, height:15
type:0, res_key:5021, offset:3174, res_size:30, width:9, height:15
-------------create res_file ok---------------
---------------prepare pack head----------
---------------read res_file----------
---------------read code----------
---------------write pack head----------
---------------write res ----------
---------------write code ----------
---------------pack file:藤蔓十字绣 ok ----------
正在编译...
编译完成
作者: dell3 时间: 2018-3-1 10:31
好帖，学习了。
作者: reerayxia 时间: 2018-3-6 16:44
这么老的贴都翻出来，你该与时俱进了。。。
已经有一键式制作工具了。。。
作者: 学彪 时间: 2018-4-15 13:40
没有一个表盘模拟的了，提示不是内部程序
作者: Haichen 时间: 2018-5-9 20:33
求一键式制作工具
作者: Haichen 时间: 2018-5-27 10:51
这个官方的开发环境根本无法调试啊，能共享下其他的sdk么
作者: qs100371 时间: 2018-5-27 11:08
主要真机测试，调试有点费劲，但有现成源码可借鉴。
作者: 步往康来 时间: 2018-5-27 11:29
黑白表盘可以正常调试，彩屏的稍费些周折
作者: Haichen 时间: 2018-5-28 17:31
老大，能共享下开发环境么，orz
作者: 步往康来 时间: 2018-5-28 19:53
本帖最后由 步往康来 于 2018-5-28 20:22 编辑
这贴子已写得很清楚了。
作者: Haichen 时间: 2018-5-28 21:20
我是说调试啊老大，比如，我想单步运行，查看运行过程中某个变量的值是什么，这个帖子的开发环境做不到啊哥~
作者: qs100371 时间: 2018-5-29 11:38
void maibu_print_log(char *log)
可在模拟器左下角的输出窗口显示调试信息，可用于显示中间变量的值。
作者: Haichen 时间: 2018-5-29 14:09
ok，多谢，有没有办法单步运行，能快速了解执行步骤
作者: qs100371 时间: 2018-5-30 07:34
一般用不了这么麻烦去单步调试，大多数是套路式的语句，比较复杂的地方，就把maibu_print_log粘到不同的地方看看得到的值是否是正常的。涉及读取内置资源和浮点数的，必须到手表上才能看出有没有毛病，有问题手表直接不显示或是反复重启挂掉了。处理字符串的语句也比较容易出问题，我做课程表的时候，手表就重置了很多次。
作者: Haichen 时间: 2018-5-30 10:46
唉，现在怕的就是模拟没问题，然后安装到手表上有问题，还找不着问题在哪，头疼的要命。
作者: qs100371 时间: 2018-5-30 16:25
把程序一部分注释掉再装到手表上，直到定位出问题所在，再慢慢改
作者: Haichen 时间: 2018-5-30 16:36
唉，要是能调试就好了
作者: 洪捷书777 时间: 2018-5-31 03:30
DIY表盘没有记步功能，希望能够加上，这样才实用。
作者: wx_KoZ85clK 时间: 2018-9-6 23:03
苹果何时能控制音乐呢？
作者: 重庆生活网b 时间: 2018-12-17 15:48
顶上去!顶上去!
作者: 大表哥saizong 时间: 2019-1-7 16:35
请问大神，没有.\build\maibu_code，如何解决？
In file included from watchface_weather.c:51:0:
maibu_res.h:3:0: warning: "RES_BITMAP_WATCHFACE_WEATHER_BG" redefined [enabled by default]
In file included from .\SDK/maibu_sdk.h:120:0,
from watchface_weather.c:50:
.\SDK/maibu_res_bitmap_base_sdk.h:76:0: note: this is the location of the previous definition
watchface_weather.c: In function 'weather_web_recv_callback':
watchface_weather.c:410:22: warning: initialization makes pointer from integer without a cast [enabled by default]
watchface_weather.c: In function 'weather_time_change':
watchface_weather.c:447:23: warning: initialization makes pointer from integer without a cast [enabled by default]
watchface_weather.c: In function 'app_weather_watch_timer_callback':
watchface_weather.c:521:23: warning: initialization makes pointer from integer without a cast [enabled by default]
watchface_weather.c: In function 'weather_comm_result_callback':
watchface_weather.c:682:3: error: too few arguments to function 'maibu_comm_request_phone'
In file included from .\SDK/maibu_sdk.h:126:0,
from watchface_weather.c:50:
.\SDK/maibu_ble.h:135:17: note: declared here
watchface_weather.c: In function 'main':
watchface_weather.c:716:2: warning: passing argument 1 of 'maibu_comm_register_phone_callback' from incompatible pointer type [enabled by default]
In file included from .\SDK/maibu_sdk.h:126:0,
from watchface_weather.c:50:
.\SDK/maibu_ble.h:121:13: note: expected 'CBCommPhone' but argument is of type 'void (*)(enum ERequestPhone, void *)'
watchface_weather.c:722:2: error: too few arguments to function 'maibu_comm_request_phone'
In file included from .\SDK/maibu_sdk.h:126:0,
from watchface_weather.c:50:
.\SDK/maibu_ble.h:135:17: note: declared here
arm-none-eabi-ld: cannot find .\*.o: Invalid argument
readelf: Error: '.\build\maibu_code': No such file
| 欢迎光临 麦步社区-论坛 (http://bbs.maibu.cc/) |
Powered by Discuz! X3.2 |