【ESP32之旅】U8g2 在线仿真和UI调试

这篇具有很好参考价值的文章主要介绍了【ESP32之旅】U8g2 在线仿真和UI调试。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

几乎每个玩屏幕的电子DIYer都知道万能的屏幕驱动中间件u8g2库,这个库提供了强大的驱动适配和ui设计能力。但是官方没有一个好用的ui设计和仿真软件,在设计UI布局的时候对单片机频繁的烧录调试浪费了大量的时间。最近在论坛看到有一个第三方维护的在线u8g2 UI设计软件u8g2-simulator,尝试了下发现其非常好用,极大的节约了UI设计的时间。

【ESP32之旅】U8g2 在线仿真和UI调试

不知道为什么原作者删除了自己的仓库并且停止了自己服务器上的部署,现在已经无法访问https://p3dt.net/u8g2sim/这个地址。但是比较庆幸的是可以在自己的电脑上进行部署。

本机部署

简单拜读了一下作者的代码,主要是通过JavaScript来完成界面的显示和输入的解析,因此我们需要安装nodejs来作为JavaScript的运行环境。然后安装依赖库即可完成部署。

NodeJs 安装

这里直接参考文档即可:

Node.js 安装配置 | 菜鸟教程 (runoob.com)

注意这里使用的NodeJs的版本需要是16,过高的版本将会出现诸如加密依赖等异常错误,望周知。

部署

npm i -g mycp			# windows 下没有cp指令因此需要安装此库,linux下不需要安装

npm install 
npm install sass
npm run start			# 运行

【ESP32之旅】U8g2 在线仿真和UI调试
【ESP32之旅】U8g2 在线仿真和UI调试

出现上图的提示信息就说明部署已经完成,在浏览器上输入http://localhost:8081即可运行。

【ESP32之旅】U8g2 在线仿真和UI调试

代码使用的是C++ Arduino风格的API,可以使用 (u)int(8,16,32)_t , float , double 这种风格类型进行变量定义。如果需要在C代码上运行可能需要自己对照API在自己代码中进行逐一替换。

问题汇总

在部署过程中可能会遇到以下小问题:

  • 端口占用:Windows下如何查看某个端口被谁占用 | 菜鸟教程 (runoob.com)

  • web界面点击无效:原作者的仓库已经很久没人维护了,我在github上找到了另外一个后续维护,可以在我的仓库找到他的分支并且使用,地址如下 songzhishuo/u8g2-simulator: A simulator to test small helper functions using U8G2. (github.com)文章来源地址https://www.toymoban.com/news/detail-492851.html

参考

  • Ezzzzzzzzzzzzzz/u8g2-simulator: A simulator to test small helper functions using U8G2. (github.com)

到了这里,关于【ESP32之旅】U8g2 在线仿真和UI调试的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [低端局][cx32L003] 移植U8G2

    在低端芯片上使用U8G2 U8g2:单色显示库,版本2 U8g2是一个用于嵌入式设备的单色图形库。U8g2支持单色oled和lcd,其中包括以下控制器:Ssd1305、ssd1306、ssd1309、ssd1312、ssd1316、ssd1318、ssd1320、ssd1322、ssd1325、ssd1327、ssd1327、ssd1327、ssd1327、ssd1327、ssd1327、ssd1106、sh1107、sh1108、ssd1607、

    2024年02月13日
    浏览(43)
  • ESP8266基于Lua开发使用U8g2模块驱动 i2c ssd1306 OLED显示

    📍相关篇《ESP8266基于Lua开发点灯示例》 📖U8g2对应的API接口函数: https://nodemcu.readthedocs.io/en/release/modules/u8g2/ 📺驱动显示效果: 🔖官方U8g2驱动Demo : https://github.com/nodemcu/nodemcu-firmware/blob/release/lua_examples/u8g2/graphics_test.lua ✨在使用U8g2时,可能会出现上传过程中报错的问题:

    2024年02月06日
    浏览(50)
  • 【STM32 MCU】使用标准外设库(SPL)移植 u8g2 图形库

    MCU STM32F103C8T6 Module 0.96 inch OLED with SSD1306 Library Standard peripheral library Porting to new MCU platform · olikraus/u8g2 Wiki (github.com) 为了减小编译后的大小,我们需要删除或精简以下的文件 U8g2 的源码为了支持多种控制器(controller),包含了许多兼容性的代码。首先,类似 u8x8_d_xxx.c 命名的

    2024年04月10日
    浏览(46)
  • STM32移植u8g2玩转oled 用软件iic实现驱动oled

    移植u8g2到stm 这里是驱动iic 这里可以驱动u8g2 具体作用后续学习 下面就基本上可以驱动成功 最主要是修改后的u8g2的图

    2024年02月11日
    浏览(55)
  • 【U8G2库移植到STM32F103C8T6上】

    最近在B站上刷到了一位up主设计的oled丝滑界面WouoUI,一个优雅得比较像话的UI框架,128 * 64 经过询问,得知up用的是U8G2库,U8G2多用于arduino编译器上,但是我们学校常用的是stm32。 所以经过一段时间的研究,我将U8G2库移植到了stm32f103c8t6上进行使用。 关于U8G2的使用,可以参考

    2024年02月11日
    浏览(42)
  • U8g2库的STM32硬件SPI(DMA)移植教程(HAL、OLED显示、四线SPI、DMA)

    本文教你把U8g2图形库移植到STM32上,基于STM32的硬件SPI、CubeMX U8g2库Github网址:https://github.com/olikraus/u8g2 U8g2库CSDN镜像网址:https://gitcode.net/mirrors/olikraus/u8g2?utm_source=csdn_github_accelerator 硬件准备:STM32C8T6(STM32系列芯片)、0.96寸OLED(128×64)、J-Link(或其他) 引脚连接: 出自此

    2024年02月09日
    浏览(49)
  • U8G2中文显示问题(u8g2.drawStr()中文不显示)

            在使用u8g2进行中文先显示时,踩到一个坑,其他大佬也没有专门提过这一点,现跟大家分享一下。         起因是在看一些例程时,直接采用u8g2.drawStr()来进行英文输出,在想用该方法进行中文输出时,无法显示中文。 运行代码如下: 显示效果为: 只显示\\\"Hello\\\",

    2024年02月11日
    浏览(46)
  • HAL/LL/STD STM32 U8g2库 +I2C SSD1306/sh1106 WouoUI磁贴案例

    📍基于STM32F103C8T6 LL库驱动版本: https://gitee.com/chcsx/platform-test/tree/master/MDK-ARM 🎬视频演示: WouoUI移植磁贴案例,新增确认弹窗 📍基于标准库驱动,STM32F103RCT6移植u8g2 硬件i2c WouoUI磁贴: https://gitee.com/henrycrh/stm32-f103-rct6_-wouo-ui/tree/master/STM32F10x_FWlib/src 🎬视频演示: 🔖使用LL库

    2024年02月22日
    浏览(41)
  • u8g2库的使用及驱动LCD显示中文

    1、准备工作 Env 工具包含了 RT-Thread 源代码开发编译环境和软件包管理系统。 从 RT-Thread 官网下载 Env 工具。https://www.rt-thread.org/download.html。 在电脑上装好 git,软件包管理功能需要 git 的支持。git 的下载地址为https://git-scm.com/downloads,根据向导正确安装 git,并将 git 添加到系

    2024年02月02日
    浏览(48)
  • Adafruit_GFX u8g2库添加中文字体

    u8g2字体生成工具 下载完成后,将文件解压至没有中文字符的路径下。 免费字体下载网站 我这里选择下载优设标题圆这一字体。 打开解压好的字体生成工具,将下载好的ttf字体复制至font文件夹中。 并将字体文件重命名,名称不能包含中文字符,否则会转换失败。 接下来,

    2024年02月13日
    浏览(96)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包