dundalek/casio-f91w-fsm

来源：https://github.com/dundalek/casio-f91w-fsm

使用状态图实现 Casio F-91W

在线演示：casio-f91w.pages.dev (https://casio-f91w.pages.dev)

使用状态图构建的 Casio F-91W 手表交互模型。

简介

状态图 (https://statecharts.dev) 是状态机的扩展，由 David Harel 于 1987 年提出。 在这篇论文 (https://web.archive.org/web/20140828085002/http://www.wisdom.weizmann.ac.il/~harel/papers/Statecharts.pdf) 中，Harel 使用了一款数字腕表作为示例模型。

我一直觉得，如果能有一个交互式演示，让人看到状态图的实际运行效果，那就太好了。 遗憾的是，那款腕表（Citizen Quartz Multi-Alarm III）如今已十分罕见。

不过，还有经典的 Casio F-91W (https://en.wikipedia.org/wiki/Casio_F-91W)。尽管它在论文发表仅两年后就已推出，但至今仍广受欢迎，并且仍在生产和销售。 Alexis Philip 创建了一个在线版本 (https://github.com/alexisphilip/Casio-F-91W)，将其图形元素数字化。

本演示 (https://casio-f91w.pages.dev) 基于 Alexis 的工作，通过使用 XState (https://xstate.js.org/) 库替换原有逻辑来展示状态图的用法，并使用 Stately 可视化工具并排展示状态和转换，以便学习。你还可以查阅这款手表的官方说明书 (https://web.archive.org/web/20240310073811/https://support.casio.com/storage/en/manual/pdf/EN/009/qw593.pdf)。

Casio F-91W 状态图演示 (https://casio-f91w.pages.dev)

差异与限制

• 日期和时间的设置方式略有不同，因为它们使用 JavaScript 内置的 Date 对象表示。因此，演示中不提供星期设置。
• 尚未实现通过按住 A 按钮，在设置闹钟或日期时间时持续递增时间的功能。
• 可以设置每日闹钟时间，但尚未实现实际触发闹钟的功能。

资源

• Citizen 手表状态图 (https://github.com/andyjakubowski/statechart-watch) - 对原版 Citizen 手表的类似状态图实现
• 状态图论文 (https://web.archive.org/web/20140828085002/http://www.wisdom.weizmann.ac.il/~harel/papers/Statecharts.pdf) - David Harel 于 1987 年发表的原始论文
• Casio F-91W 说明书 (https://web.archive.org/web/20240310073811/https://support.casio.com/storage/en/manual/pdf/EN/009/qw593.pdf) - 这款手表的官方说明书

实现

文件结构：

• demo/script - 原始实现，仅使用其中的渲染代码
• src/casio - 包含基于状态图的实现
  • machine.js - XState 状态机定义
  • machine.cljs - 状态机动作的实现
  • xstate_service.cljs - 在 ClojureScript 中使用 XState 的辅助函数
  • statecharts_service.cljs - 使用 clj-statecharts (https://github.com/lucywang000/clj-statecharts) 对 XState 状态机定义进行封装
  • app.cljs - 运行状态机的主应用

开发

运行 bb dev 启动开发进程（需要 Babashka (https://babashka.org/)）

打开应用：http://localhost:8888/
在浏览器中运行测试：http://localhost:8888/test