自定义小部件的改进

Prev Next

借助 Tulip 自定义小部件的最新增强功能,探索新的可能性,实现更顺畅的开发。

Updating Custom Widgets

Custom Widget updates are rolling in r332. Read more about the runtimes here

自定义控件是扩展 Tulip 平台的强大方式,既是 Tulip 团队的试验场,也是用户的试验场。

自定义小部件的改进提升了其功能、易用性和集成能力,重点在于 API 交互、新的设备访问功能、可用性和稳定性。

这些改进的重点之一是“自定义小部件 iFrame 沙盒”,它增强了与外部系统和 Tulip API 连接的能力。

新的运行时选项:传统模式与更新模式

自定义小部件现支持两种运行时环境:传统版和更新版。

更新后的运行时在安全性和性能方面得到了增强,特别是在处理外部 API 调用和大量新的设备访问功能时(如下所述)。

通过自定义小部件访问新设备:

通过直接访问设备功能来扩展您的自定义小部件:

  • 摄像头:使小部件能够拍摄图像,用于检查、缺陷追踪或视觉记录。
  • 麦克风:支持在小部件内直接录音,以简化文档记录、录制语音备忘录或丰富教学内容。
  • 地理位置:允许小部件获取用户或设备位置,以追踪资产、提供基于位置的信息,或优化物流工作流程。
  • WebUSB:直接从各种 USB 设备捕获数据,将更多物理世界数据引入您的 Tulip 应用程序。
  • WebSerial:监控和控制串行设备,实现与各类工业设备和传感器的通信。

自定义小部件的数据持久化增强:

  • 本地存储:自定义小部件现可访问本地存储,从而更高效地缓存信息或在不同步骤间保留信息。

易用性与开发者体验

运行时信息

  1. 从**“账户设置”中,导航至“自定义小部件**”页面。
  2. 点击任意自定义小部件的行,即可打开信息侧边栏。
  3. 在信息面板的名称下方,有一个字段会显示当前小部件的运行时(现有小部件显示为“Legacy”)。

image.png

启用跨域运行时

  1. 在“自定义小部件”信息侧边栏中,点击**“权限”标题旁边的“编辑**”链接。

这将打开权限设置侧边面板。对于已启用跨域功能的实例,该切换开关可更改特定自定义小部件的运行时。

image.png

从“传统”模式切换至“跨域”模式时,您将看到以下警告:

image.png

将运行时保存为“跨域”后,若重新打开权限设置,您应能看到新的**“设备访问权限**”部分。

image.png

运行时在编辑器中的使用体验

在“自定义小部件”编辑器中,小部件名称旁边的圆点将指示当前的运行时(例如,“传统”或“跨域”)。

对于旧版小部件,编辑器页面顶部会显示一条警告,提示您正在运行旧版自定义小部件。跨域小部件不会显示此警告。

image.png

image.png

切换回“Legacy”模式:

将跨域小部件切换回“旧版”运行时,您将看到以下警告:

image.png

可发现性与导航

自定义小部件在平台中的可见性更高,且更易于管理和编辑。这包括更便捷的小部件编辑器访问方式,以及更清晰的小部件信息展示。

开发

开发体验将更加流畅,具体增强功能包括: * 小部件函数的自动补全功能更完善。 * 小部件内的事件跟踪能力得到提升。 * 更强大的错误处理和调试辅助功能。

用户界面与工作流

我们已修复了各种细微的 UI 和工作流问题,这将提升小部件的构建体验和易用性,包括:* 小部件列表的显示方式* 权限的管理方式

加载与性能

对自定义小部件加载机制的改进将确保更佳的性能和可靠性,包括:* 加载跨域小部件的重试逻辑* 访问受阻时的错误提示

下一步计划

对自定义小部件的这些投入,彰显了 Tulip 对其可扩展潜力的坚定信心。通过提供更强大的工具和功能,我们旨在赋能用户,使其能够利用 Tulip 平台创建创新解决方案并应对特定的应用场景。

Tulip 团队将密切跟踪这些新功能的采用情况及其影响,以持续优化和扩展自定义小部件的功能。

示例

Tulip库中的以下自定义控件展示了本文重点介绍的新功能和改进功能。

日程安排小部件

日程安排小部件

该小部件允许用户在 Tulip 应用中查看、创建和管理已安排的任务或事件。其交互式界面使您能够直接在工作流中轻松组织工作、分配资源并跟踪即将进行的活动。

Screenshot 2025-07-02 at 15.41.08.png

图像注释小部件

图像标注小部件

该小部件允许用户直接在Tulip应用中的图片上进行绘图、高亮标注和添加备注。它非常适合在相关图片上标注视觉内容、提供反馈或记录问题。

Screenshot 2025-07-02 at 15.42.24.png