GitHub - dundalek/casio-f91w-fsm: Interactive model of the Casio F-91W watch using statecharts

Online demo here: casio-f91w.pages.dev Interactive model of the Casio F-91W watch using statecharts. Intro 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 for the watch. Differences & limitations 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. Resources Citizen watch statechart - similar statechart implementation of the original Citizen watch Statecharts paper - original 1987 paper by David Harel Casio F-91W manual - official manual for the watch Implementation 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 Development Run bb dev to start the dev process (requires Babashka) Open the app: http://localhost:8888/ Run tests in browser: http://localhost:8888/test