基于AliOS Things 使用 littleVGL 设计的手表

简介: 使用developer-kit开发板,用alios things 系统自己制作的一款手表

导言:最近智能手表非常的火,小编想着如果自己能设计一款电子手表也是非常时尚的,所以就尝试着自己动手实现一下。

硬件:developer-kit开发板;
软件:alios things 2.0以上
编译环境:ubuntu 16.04

一、编译环境的安装:
请参考阿里官方教程:https://github.com/alibaba/AliOS-Things/wiki/Quick-Start

二、设计的手表代码可以参考littlevgl官方文档中的lmeter和gauge两大控件。
lmeter:线表控件

clipboard

#include "lvgl/lvgl.h"
void lv_ex_lmeter_1(void)
{
/*Create a style for the line meter*/
static lv_style_t style_lmeter;
lv_style_copy(&style_lmeter, &lv_style_pretty_color);
style_lmeter.line.width = 2;
style_lmeter.line.color = LV_COLOR_SILVER;
style_lmeter.body.main_color = lv_color_hex(0x91bfed); /*Light blue*/
style_lmeter.body.grad_color = lv_color_hex(0x04386c); /*Dark blue*/
style_lmeter.body.padding.left = 16; /*Line length*/

/*Create a line meter */
lv_obj_t * lmeter;
lmeter = lv_lmeter_create(lv_scr_act(), NULL);
lv_lmeter_set_range(lmeter, 0, 100); /*Set the range*/
lv_lmeter_set_value(lmeter, 80); /*Set the current value*/
lv_lmeter_set_scale(lmeter, 240, 31); /*Set the angle and number of lines*/
lv_lmeter_set_style(lmeter, LV_LMETER_STYLE_MAIN, &style_lmeter); /*Apply the new style*/
lv_obj_set_size(lmeter, 150, 150);
lv_obj_align(lmeter, NULL, LV_ALIGN_CENTER, 0, 0); 

首先获取默认的风格,然后设置线条的宽度,设置线条的颜色有三种,浅蓝,深蓝和银色,在下部分代码有对其进一步设置,范围是0-100,被分成31份,角度是240度,颜色应该是由浅蓝到深蓝渐变的,但是因为有80这个设置,所以从80-100就变成银色了。整个线表的大小是150的正方体包裹的源,在显示器的中间显示。

gauge:仪表控件

clipboard1

#include "lvgl/lvgl.h"
void lv_ex_gauge_1(void)
{
/*Create a style*/
static lv_style_t style;
lv_style_copy(&style, &lv_style_pretty_color);
style.body.main_color = lv_color_hex3(0x666); /*Line color at the beginning*/
style.body.grad_color = lv_color_hex3(0x666); /*Line color at the end*/
style.body.padding.left = 10; /*Scale line length*/
style.body.padding.inner = 8 ; /*Scale label padding*/
style.body.border.color = lv_color_hex3(0x333); /*Needle middle circle color*/
style.line.width = 3;
style.text.color = lv_color_hex3(0x333);
style.line.color = LV_COLOR_RED; /*Line color after the critical value*/
/*Describe the color for the needles*/
static lv_color_t needle_colors[3];
needle_colors[0] = LV_COLOR_BLUE;
needle_colors[1] = LV_COLOR_ORANGE;
needle_colors[2] = LV_COLOR_PURPLE;
/*Create a gauge*/
lv_obj_t * gauge1 = lv_gauge_create(lv_scr_act(), NULL);
lv_gauge_set_style(gauge1, LV_GAUGE_STYLE_MAIN, &style);
lv_gauge_set_needle_count(gauge1, 3, needle_colors);
lv_obj_set_size(gauge1, 150, 150);
lv_obj_align(gauge1, NULL, LV_ALIGN_CENTER, 0, 20);
/*Set the values*/
lv_gauge_set_value(gauge1, 0, 10);
lv_gauge_set_value(gauge1, 1, 20);
lv_gauge_set_value(gauge1, 2, 30);
}

首先我们通过lv_style_copy()来获取系统的样式,然后修改需要改变的属性达到我们所想的样子。设置主体颜色,设置线条的长度,文字距线条的距离,中心圆心的颜色。设置字体颜色。
通过数组static lv_color_t needle_colors[3]设置指针的数量和颜色,最后创建一个新的仪表,将之前的设置样式都通过lv_gauge_set_style()函数进行修改。最后设置指针的值。

三、成果
通过以上两个示例:我做出了手表的样式

clipboard2

视频和源码可以关注微信公众号查看【物联网人家】https://mp.weixin.qq.com/s/gIDnozLKyTrzevm7YJ6IOA
设置12个label,360度的圆盘里60等份。并设置了三个指针,从短到长分别是时针、分针和秒针。颜色分别是蓝色,黄色和紫色。表盘居中在屏幕的中间。

虽然样子还比较粗糙,但是基本功能已经实现,后续还需要更加精细的修改。喜欢的小伙伴麻烦点个关注,谢谢。

相关文章
|
11月前
|
机器学习/深度学习 传感器 自动驾驶
基于深度学习的图像识别技术及其在自动驾驶中的应用####
本文深入探讨了深度学习驱动下的图像识别技术,特别是在自动驾驶领域的革新应用。不同于传统摘要的概述方式,本节将直接以“深度学习”与“图像识别”的技术融合为起点,简述其在提升自动驾驶系统环境感知能力方面的核心作用,随后快速过渡到自动驾驶的具体应用场景,强调这一技术组合如何成为推动自动驾驶从实验室走向市场的关键力量。 ####
355 24
|
7月前
|
机器学习/深度学习 数据采集 存储
深度学习在DOM解析中的应用:自动识别页面关键内容区块
本文探讨了如何通过深度学习模型优化东方财富吧财经新闻爬虫的性能。针对网络请求、DOM解析与模型推理等瓶颈,采用代理复用、批量推理、多线程并发及模型量化等策略,将单页耗时从5秒优化至2秒,提升60%以上。代码示例涵盖代理配置、TFLite模型加载、批量预测及多线程抓取,确保高效稳定运行,为大规模数据采集提供参考。
172 0
|
Rust 前端开发 JavaScript
Tauri 开发实践— Tauri 怎么样
Tauri 是一个用于构建高效、小型二进制文件的框架,适用于所有主流桌面及移动平台。开发人员可以利用任何可编译为 HTML、JavaScript 和 CSS 的前端框架构建应用,并借助 Rust、Swift 或 Kotlin 进行后端开发。Tauri 采用三层架构,包括 tauri-app、WRY(跨平台 Webview 库)和 TAO(跨平台窗口管理器)。相较于 Electron,Tauri 使用系统内置浏览器引擎执行 Web APP,具有更小的资源占用和更高性能。详情见:[Tauri 官网](https://tauri.app/)。
1157 0
Tauri 开发实践— Tauri 怎么样
|
机器学习/深度学习 数据采集 TensorFlow
TensorFlow在图像识别中的应用
【4月更文挑战第17天】本文探讨了TensorFlow在图像识别中的应用,介绍了图像识别的基本步骤,包括数据准备、特征提取、模型训练和评估。重点讨论了卷积神经网络(CNN)和预训练模型(如VGG、ResNet、Inception)在模型架构中的作用。数据预处理方面,提到了归一化、大小调整和数据增强等技术。通过示例展示了如何使用TensorFlow构建、编译和训练CNN模型,并评估其性能。文章强调,结合最佳实践,TensorFlow能有效支持高效的图像识别模型开发。
|
移动开发 前端开发 JavaScript
淘宝小部件 Canvas 渲染流程与原理全解析
淘宝小部件 Canvas 渲染流程与原理全解析
692 0
淘宝小部件 Canvas 渲染流程与原理全解析
|
自然语言处理
分享开源项目Chatwoot
Chatwoot是一个开源的客户支持平台,它提供了一系列工具,使企业能够通过各种渠道(如电子邮件、社交媒体、网站聊天窗口等)与客户进行沟通。它的目标是为企业提供一个统一的界面,汇总来自不同渠道的客户对话,从而提高客户服务效率和效果。
460 0
|
存储 传感器 编解码
图像格式:常见图像格式RAW, RGB, YUV&&图像格式的解析、格式转换和看图软件
图像格式:常见图像格式RAW, RGB, YUV&&图像格式的解析、格式转换和看图软件
3538 1
|
存储 算法 C语言
C语言编写一个计算器(附全源代码)
C语言编写一个计算器(附全源代码)
4654 0
C语言编写一个计算器(附全源代码)
|
存储 C++ 异构计算
|
存储 人工智能 运维
AliOS Things 技术分享(一)|学习笔记
开始学习 AliOS Things 技术分享(一)
828 0
AliOS Things 技术分享(一)|学习笔记