squareline搭档OneOS图形组件之可视化GUI开发
LVGL+OneOS!
LVGL
,一款很火的GUI
开发库,一个高度可裁剪、低资源占用、界面美观且易用的嵌入式系统图形库。本身并不依赖特定的硬件平台,任何满足LVGL
硬件配置要求的微控制器均可运行LVGL
。
OneOS
,中国移动针对物联网领域推出的轻量级操作系统,具有可裁剪、跨平台、低功耗、高安全等特点,支持ARM Cortex-M/R/A、MIPS、RISC-V
等主流CPU架构,兼容POSIX、CMSIS
等标准接口,支持Micropython
语言开发,提供图形化开发工具,能够有效提高开发效率并降低开发成本,帮助客户开发稳定可靠、安全易用的物联网应用。
最近,浏览OneOS
专区的时候,发现有网页在写OneOS+LVGL
的有效结合。也就是说,OneOS
适配了LVGL
了?想着,yeah,有时间一定要试试。
有趣的GUI开发方式
我们可以直接写代码来生成图片,但更有趣且容易的方式是使用拖拽的方式,直观快速地生成代码,从而生成图片。一直对LVGL有些许好感,刚好今年发布了SquareLine Studio,所以体验一下!
SquareLine Studio是一个可视化的拖放式UI编辑器,可以快速轻松地为嵌入式和桌面应用程序创建漂亮的图形用户界面。它面向爱好者、专业人士、程序员和设计师。
SquareLine Studio官方网址:SquareLine Studio
体验SquareLine 生成代码
下载安装好SquareLine
以后,拖拽体验下。
然后,export
导出生成源代码。
最后,把源码放入板级项目中去,这里以stm32f469-st-disco
为例。
并在main.c文件中调用ui_init
接口。
static void user_task(void *parameter)
{
int i = 0;
for (i = 0; i < led_table_size; i++)
{
os_pin_mode(led_table[i].pin, PIN_MODE_OUTPUT);
}
ui_init();
直接编译,发现报错了。。。。什么情况!
application\heart\ui.h(13): error: #59: function call is not allowed in a constant expression
百度了一下,发现是c++ 17扩展了预处理器,使其能够检查是否包含特定的头文件。所以,直接把它屏蔽了。。。
然后,加大了任务的栈。显示如下,颜色深度没有匹配,有点失真。。。:
源码
https://gitee.com/miracle_get/squareline
squareline搭档OneOS图形组件之可视化GUI开发的更多相关文章
- HT图形组件设计之道(三)
上篇我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更多的矢量应用场景,本篇我们先切换个话题, ...
- HTML5拓扑图形组件设计之道(一)
HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表 ...
- HT图形组件设计之道(一)
HT for Web简称HT提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供:Everything you need to create ...
- java容器Container和组件Component之GUI
GUI全称Graphical User Interfaces,意为图形用户户界面,又称为图形用户接口,GUI指的就是采用图形方式显示的计算机操作用户界面,打个比方吧,我们点击QQ图标,就会弹出一个QQ ...
- 使用 Eclipse 可视化插件 windowbuilder 进行Java GUI开发(插件安装的两种方法)
对于Java GUI开发 其实最方便的方法是用插件制作,当然先了解完代码原理是最好的. eclispe安装windowbuilder有两种方式,一种是离线安装,一种是在线安装. 一.第一种在线安装: ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
随机推荐
- python数据处理-matplotlib入门(2)-利用随机函数生成变化图形2
鉴于上一篇中最后三个问题: 1.上述程序是否能进行优化(比如功能相同的) 2.创建三个3个实例,用了3个语句,能否建一个函数,只输入一个数n,就自动创建n个实例?同时,每个实例的num_times随机 ...
- SQL安装
安装教程 点击传送 遇到的问题 解决方案1:
- SpringBoot项目刚刚创建就报异常,Failed to configure a DataSource: 'url' attribute is not specified and no embedded 的解决办法
错误信息: Description: Failed to configure a DataSource: 'url' attribute is not specified and no embedde ...
- MySQL常用数据类型及细节
目录 1 整数类型 1.1 可选属性 1.1.1 M 1.1.2 UNSIGNED 1.1.3 ZEROFILL 2 浮点类型 2.1 精度误差 3 定点数类型 3.1 数据精度说明 3.2 类型介绍 ...
- Blazor和Vue对比学习(基础1.2):模板语法和Razor语法
Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰 ...
- 拖动元素调换位置——sortable.js
使用简介: https://github.com/SortableJS/Sortable https://segmentfault.com/a/1190000008209715 /**! * Sort ...
- Nginx代理websocket为什么要这样做?
Nginx反向代理websocket 示例: http { map $http_upgrade $connection_upgrade { default upgrade; '' close; } s ...
- UDP协议,多道技术,进程,同步与异步,阻塞与非阻塞
UDP协议 简介 UDP叫做用户数据报协议,是OSI七层参考模型中传输层使用的协议,他提供的是不可靠传输,既它在传输过程 中不保证数据的完整性! 端口号 UDP使用IP地址和端口号进行标识,以此将数据 ...
- Java 15 新特性:隐藏类
什么是隐藏类 隐藏类,是一种不能被其他类直接使用的类.引入隐藏类的主要目的是给框架来使用,使得框架可以在运行时生成类,并通过反射间接使用它们.可能有点抽象,不要紧,下面我们通过一个例子来直观的认识它! ...
- 配置中心的设计-nacos vs apollo
简介 前面我们分析了携程的 apollo(见 详解apollo的设计与使用),现在再来看看阿里的 nacos. 和 apollo 一样,nacos 也是一款配置中心,同样可以实现配置的集中管理.分环境 ...