Online demo here: casio-f91w.pages.dev
Interactive model of the Casio F-91W watch using statecharts.
Statecharts are an extension of state machines, introduced by David Harel in 1987. In the paper, Harel used a digital wristwatch as an example model.
I always thought it would be great to have an interactive demo that allows to see statecharts in action. Unfortunately, that particular wristwatch (Citizen Quartz Multi-Alarm III) is now a rarity.
However, there is the iconic Casio F-91W, which despite being introduced only two years after the paper was published, remains widely popular and is still manufactured and sold today. Alexis Philip created an online version digitizing the graphical elements.
This demo builds on Alexis' work, demonstrates using statecharts by replacing the logic using the XState library, and uses the Stately visualizer to show states and transitions side by side for educational purposes. You can also check out the official manual official manual for the watch.
- Setting date and time is slightly different since it is represented using the builtin JavaScript Date object. Setting the day of week is therefore not used in the demo.
- Holding A button to continue incrementing time in alarm or date time setting is not implemented.
- You can set daily alarm time, but actual triggering the alarm is not implemented.
File structure:
- demo/script - the original implementation, only the code for rendering is used
- src/casio - contains statecharts-based implementation
- machine.js - the XState machine definition
- machine.cljs - implementation of machine actions
- xstate_service.cljs - helpers for using XState in ClojureScript
- statecharts_service.cljs - wrapper for XState machine definition with clj-statecharts
- app.cljs - main app that runs the machine
Run bb dev to start the dev process (requires Babashka)
Open the app: http://localhost:8888/
Run tests in browser: http://localhost:8888/test