嵌入式UI

此库是为个人使用而创建的，需要进行一些修改才能使其通用。但我希望与所有对创建嵌入式系统复杂UI（可能不是那么复杂）感兴趣的人分享。

需要注意的是，几乎所有核心功能都是 iced-rs 的副本，因为在Rust中开发UI框架对我来说是一项艰难的任务。 但不要以任何方式将 嵌入式UI 与 iced 进行比较，最好是独立学习这个库。

优点 & 缺点

此库的主要缺点是由于实际上它并不是为嵌入式系统准备的，因为

• core::any 用于小部件状态消耗性能
• Box 被使用，因此您必须拥有全局堆分配器
• Vec - 再次，需要全局堆分配器。

我计划尝试重新编写代码以使用 heapless 或固定大小的数组，同时仍保留 Any 但使用引用而不是 Box。我没有开始这项工作，因为它会很痛苦，我敢打赌我永远不会满足这样的要求。

优点

• 从一开始就开发了它与128x32单色OLED显示屏一起使用，是的，您可以使用它制作即使在如此小的显示屏上的UI。
• 几乎与渲染器无关，但针对 embedded_graphics::DrawTarget
• 无控制。这意味着，您可以使用单个编码器控制整个UI
• 与颜色无关
• 事件可定制
• 我制作了从5x5像素大小的图标开始的大型图标集合！
• 支持自动调整大小和弹性布局

缺点

• 当然，它处于非常早期的开发阶段
• 它有些未经验证 😢
• 您可能会在计算和内存使用中发现很多开销，这对于嵌入式系统是不可接受的
• 目前仅支持等宽字体

图标

为了设计图标，我使用了名为 Piskel 的免费在线应用程序来进行像素艺术。它支持导出为 C 头文件，您可以将它放入仓库中，作为 icons-input.c，并运行 node make-icons.js Node.JS 脚本来将这个头文件转换到 src/icons 目录。您需要做的只是给每个图标及其对应的方法命名。为了方便，我在生成的文件中为每个图标添加了顶部绘画，以便您可以查看其外观。

我的图标包与目录不保持一致，因为这样的小尺寸无法描绘一些图形。因此，图标尺寸越大，目录越宽。这也意味着在挑选图标而不知道确切界限的情况下，可以使用通用图标名称，系统将自动选择最佳尺寸。

有一个特殊的属性 InternalIconSet，它被用于所有图标包（您也可以为您自己的图标包实现），其中包含用于系统小部件的图标，例如 Select 的箭头或 Checkbox 中的勾选符号。

长度

长度是一个通用的单维尺寸类型，用于宽度或高度。在 Length 枚举中有四个选项

• Fixed - 像素中的固定长度
• Shrink - 占用尽可能少的自由空间，为其他元素提供更多空间
• Fill - 占用尽可能多的自由空间
• Div(N) - 占用 free / N 的空间。例如，在 100px 宽的容器中，具有 Div(4) 宽度的元素将占用 25px。

弹性布局

有一个使用弹性布局的单个容器 —— Linear。它是一个用于行和列的通用元素。

弹性

组件

复选框

焦点输入

图形

图标

图片

旋钮

TODO

• 将子元素添加到旋钮的中心。对于文本值和任何其他内容

线性

进度条

TODO

单选按钮

推迟。使用 Select，因为我认为 Select 覆盖了单选按钮的逻辑，所以 Radio 推迟。

滚动

选择

滑块

TODO

• 滑块文本，用于显示真实值。它应跟随旋钮，不要超出视口。
• 如果合适，添加最小/最大值

表格

推迟。使用 Linear 与 row 和 col 宏。

切换

推迟。使用 Checkbox。

路线图

近期计划

• 旋钮
• 图形
• 进度条
• 滑块
• 焦点输入
• 滚动
• 基本页面和链接

未来

• 更好的导航和链接
• 转换
• 添加动画。这打开了不仅限于动画，还包括新的基于时间的逻辑的大门
  • 动画转换
  • 旋转器、加载器和其他类似的东西
• 窗口作为弹出窗口、覆盖层
• 更多高级小部件（大多数不适用于小屏幕）
  • 文本输入
  • 工具栏
  • 页眉/页脚（不确定是否需要）
  • 手风琴
  • 徽章和芯片
  • 日期/时间选择器
  • 下拉菜单
  • 树（树形结构表示）
• 复杂特殊效果
  • 背景中的图片、边框等。
  • 阴影（128x32 单色显示器的阴影怎么办？哈哈）
  • 视差
  • 透明度滤镜