LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理

LVGL 之 windows 上 lvgl 模拟器 基于 Visual Studio 搭建方法的简单整理

目录

LVGL 之 windows 上 lvgl 模拟器 基于 Visual Studio 搭建方法的简单整理

一、简单介绍

二、visual studio 安装

 三、搭建 lvgl 模拟器工程

方法一:git clone下载工程

方法二:git 直接下载压缩包


一、简单介绍

LVGL  的PC模拟器的使用。PC 模拟器的好处一方面是我们没有实际硬件的时候也可以学习lvgl,另一方面就是我们在实际设计GUI界面的时候可以大大减少烧录代码地次数。我们可以先在PC模拟器上设计好,然后再把代码移到嵌入式工程里,编译、烧录到板子里。

lvgl 模拟器介绍

lvgl的模拟器配合不同的 IDE软件可以运行在不同的操作系统上,比如 Windows, Linux or OSX,下面是 littleVGL 所支持的 IDE 软件种类 :

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第1张图片

LVGL(Light and Versatile Graphics Library)轻量级通用型图形库,是一个免费的开源图形库,提供了创建嵌入式 GUI 所需的一切,具有易于使用的组件,美观的视觉效果和低内存占用等特点。支持触摸屏操作,移植简单方便,开发者一直在不断完善更新。

特点:

  • 丰富且强大的模块化图形组件:按钮 (buttons)、图表 (charts)、列表 (lists)、滑动条 (sliders)、图片 (images) 等
  • 高级的图形引擎:动画、抗锯齿、透明度、平滑滚动、图层混合等效果
  • 支持多种输入设备:触摸屏、 键盘、编码器、按键等
  • 支持多显示设备
  • 不依赖特定的硬件平台,可以在任何显示屏上运行
  • 配置可裁剪(最低资源占用:64 kB Flash,16 kB RAM)
  • 基于UTF-8的多语种支持,例如中文、日文、韩文、阿拉伯文等
  • 可以通过类CSS的方式来设计、布局图形界面(例如:Flexbox、Grid)
  • 支持操作系统、外置内存、以及硬件加速(LVGL已内建支持STM32 DMA2D、NXP PXP和VGLite)
  • 即便仅有单缓冲区(frame buffer)的情况下,也可保证渲染如丝般顺滑
  • 全部由C编写完成,并支持C++调用
  • 支持Micropython编程,参见:LVGL API in Micropython
  • 支持模拟器仿真,可以无硬件依托进行开发
  • 丰富详实的例程
  • 详尽的文档以及API参考手册,可线上查阅或可下载为PDF格式

运行的硬件要求:

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第2张图片

相关学习网址:

  • 基于野牛开发板的 lvgl 6.0 例程:LittlevGL_Demo: 适用于野牛开发板的 LittlevGL 的 demo 程序,所有例程公用一个库,有 MDK 版本和 VS 模拟器版本
  • 基于荔枝派Nano开发板的lvgl教程:http://nano.lichee.pro/application/littlevgl.html
  • lvgl在线体验例程(可在浏览器体验):Live demos - Test LVGL in your browser | LVGL
  • lvgl基于Visual sudio 的PC模拟器GitHub - lvgl/lv_port_win_visual_studio: LVGL Windows Simulator Visual Studio Edition
  • LVGL官网:https://lvgl.io
  • 官方文档:https://docs.lvgl.io/master/intro/index.html
  • Github仓库:https://github.com/lvgl/lvgl
  • 国内码云仓库:https://gitee.com/mirrors/lvgl 
  • 正点原子教程:http://www.openedv.com/docs/book-videos/zdyzshipin/4free/littleVGL.html

本案例基于环境:

1、windows 10

2、visual studio 2019

3、lvgl 8.3.0

二、visual studio 安装

1、官网下载安装 visual studio

下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第3张图片

2、下载好 visual studio ,安装即可,然后打开 installer ,确认安装 C++ 环境

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第4张图片

 三、搭建 lvgl 模拟器工程

这里有两种方法搭建:

1、git clone下载工程

2、git 直接下载压缩包

方法一:git clone下载工程

默认已经安装 git 环境

1)git 获取克隆地址:https://github.com/lvgl/lv_port_win_visual_studio.git

国内镜像地址:mirrors / lvgl / lv_port_win_visual_studio · GitCode

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第5张图片

 2)在要下载到的文件夹中右键,打开 Git Bash

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第6张图片

 3)使用 git clone 下载工程

因为 lvgl 模拟器包含子工程,所以使用  git clone --recursive  或者  git clone --recurse-submodules 递归下载

命令: git clone --recursive https://github.com/lvgl/lv_port_win_visual_studio.git

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第7张图片

 4)其中可能会遇到 OpenSSL SSL_read: Connection was reset, errno 10054 问题

使用  git config --global http.sslVerify "false" 解除 SSL认证即可,然后重复之前的命令下载即可

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第8张图片

5)下载完后,还没有完,你会发现子目录 “freetype”、“lv_drivers”、“lvgl”、为空

注意:clone 其中有些错误可以忽略先

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第9张图片

 LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第10张图片

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第11张图片

6)进入代码根目录,使用git 下载子模块

命令:cd xxx文件夹;git submodule update --init --recursive

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第12张图片

 7)子目录 “freetype”、“lv_drivers”、“lvgl” 就有了对应的代码

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第13张图片

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第14张图片

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第15张图片

 8)进入代码工程 根目录:lv_port_win_visual_studio,双击 LVGL.Simulator.sln 打开工程

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第16张图片

 9)工程打开如图

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第17张图片

 10)切换平台,这里切换为 x64

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第18张图片

 11)点击 "本地 Windows 调试器",运行工程

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第19张图片

12)运行效果如图

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第20张图片

方法二:git 直接下载压缩包

1)在官网下载lvgl 模拟器压缩包

下载地址:GitHub - lvgl/lv_port_win_visual_studio: LVGL Windows Simulator Visual Studio Edition

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第21张图片

2)解压工程,在下载  子目录 “freetype”、“lv_drivers”、“lvgl” 子模块代码

  • freetype库下载:https://github.com/freetype 并解压到上图freetype文件夹中

  • lvgl库下载:https://github.com/lvgl/lvgl 并解压到lvgl文件夹中

  • lvgl_drivers库下载:https://github.com/lvgl/lv_drivers 并解压到lvgl_drives文件夹中

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第22张图片

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第23张图片

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第24张图片

3)打开 lv_port_win_visual_studio,双击 LVGL.Simulator.sln 打开工程

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第25张图片

 4)工程打开如图

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第26张图片

 5)切换平台,这里切换为 x64

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第27张图片

6)点击 "本地 Windows 调试器",运行工程

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第28张图片

7)运行效果如图

LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理_第29张图片

你可能感兴趣的:(LVGL,visual,studio,lvgl,lvgl,模拟器,GUI)