文章目录
前言
@Bingo 昨晚提到:
想做一个虚拟仿真项目, 用 Python 测试了一下可行性, 感觉用 Snap! 实现是否更简单?
@Bingo 目前使用的是 wokwi/avr8js, wokwi/avr8js 使用 wokwi-elements 来呈现硬件设备的外观(基于 SVG)。
我简单查看了 wokwi-elements 的文档, 回复说:
Snap! 的舞台区是一个画布, 无法直接为 wokwi-elements 提供 svg 元素挂载点，可能需要构建一个漂浮的 html 面板来挂载模拟器的 svg 元素
今天尝试后发现, 可以直接将外部 SVG 图像直接渲染到角色上! 而且所有的工作都只是一个普通的 Snap! 项目, 这再一次让我震惊于 Snap! 的可扩展性!
将 SVG 图像渲染为角色造型
wokwi-elements 提供了丰富的组件, 它以 web 组件的方式提供出 API, 这些组件渲染为 SVG 图像。
Snap! 支持 SVG 图像。 如果我们能够动态地将 SVG 数据渲染为角色造型, 我们就可以将 wokwi-elements 包含的组件渲染到 Snap! 里。
之前我们在这篇文章里, 探索过动态添加 Snap! 造型, 当时处理的是 png 图像, 同样的原理似乎也可用于 SVG 图像。我在 Snap! 论坛搜索了一圈, 确认了这样做的可行性
以下是展示这种可行性的一个 demo:
项目地址: wokwi elements demo
FAQ
它有什么用?
之前有许多 MicroBlocks 用户希望 MicroBlocks 的模拟器能够支持更多的硬件设备, John Maloney 明确表示 MicroBlocks 的兴趣在于对物理世界编程, 不打算在模拟器上投入太多时间:
I think using a simulator misses the key point of physical computing, which is to connect to the physical world. Coding against a simulator is not much different than programming in Scratch, except what you can do is much more limited.
Physical computing can be extremely engaging for students – including some students who might not be interested in Scratch – but only if it actually connects to the physical world. Using a simulator, even as just an introduction, could make many students lose interest. Much more fun to dive into using real hardware.
Even a good simulator is a poor approximation to the physical world. A simulator can’t tell you the temperature in your garden, when the sun rises, or how it feels to control a game by tilting a micro:bit.
对于确实需要模拟器的用户, 可以使用 Snap! 中的硬件模拟器。
这样一来，既可以模拟运行项目，也可以实际驱动真实设备(Snap! 中的 MicroBlocks 插件 可以直接对硬件编程)。
目前支持哪些功能?
目前提供出以下两个积木:
- 创建元素
- 设置元素属性
就视觉方面而言, 这涵盖了大部分功能。
值得注意的是, wokwi-elements 仅代表硬件设备的视觉效果。它们不提供硬件的功能模拟代码, 用户可以自己选择驱动它们的模拟器(诸如 wokwi/avr8js)，我喜欢使用 Snap! 的积木来驱动这些设备。
wokwi-elements 的一些元素支持交互式的操作(点击，拉动等), 并产生相应输出, 这部分功能暂未接入, 如果你有需要可以思考如何模仿目前已有的代码接入它们。 我更喜欢直接在 Snap! 中构建交互功能。
如何往 Snap! 里引入 wokwi 元件?
分两步:
- 在 elements.wokwi.com 找到你想引入的元件
- 将元件名字复制到 Snap! 中，创建它:
如何提高清晰度?
有时你想看清元件细节(如引脚编号), 可以通过 Snap! 的积木来放大角色。如果放大之后, 清晰度依然没有达到要求, 可以试将舞台大小设置为更大尺寸，如 800x600。
可以使用 Python 驱动 wokwi-elements 吗?
由于我们往 Snap! 中接入了 Python 解释器, 所以在 Snap! 中使用 Python 驱动 wokwi-elements 应该是可行的。
但是直接使用 wokwi 提供的 Python 编程环境会更容易和专业.
参考
- Load Costume By Data URI: 放大积木图片后下载, 可以在 Snap! 里加载它
- wokwi/avr8js
- wokwi-elements
- SVGViewer
- Load Costume By Data URI