Dit project beschrijft de creatie van een interactief model van het Casio F-91W polshorloge om het concept van statecharts te demonstreren. Statecharts, geïntroduceerd door David Harel in 1987, zijn een uitbreiding van state machines.
Technische details:
- Implementatie: De logica is gebouwd met de XState-bibliotheek en de Stately-visualisator, waardoor statussen en overgangen direct zichtbaar zijn. De applicatie is geschreven in ClojureScript.
- Beperkingen: Er zijn enkele functionele verschillen met het echte horloge; zo is het versneld verhogen van waarden niet geïmplementeerd en wordt de tijd aangestuurd via het JavaScript
Date-object.
- Ontwikkeling: Het project maakt gebruik van Babashka voor het ontwikkelproces en bevat een specifieke mappenstructuur voor de machine-definitie en services.
De demo is bedoeld voor educatieve doeleinden en is online beschikbaar.
Casio F-91W met Statecharts
Online demo: casio-f91w.pages.dev
Introductie
Statecharts zijn een uitbreiding van state machines, geïntroduceerd door David Harel in 1987. In zijn paper gebruikte Harel een digitaal polshorloge als voorbeeldmodel.
Het doel van dit project was om een interactieve demo te creëren waarmee men statecharts in actie kan zien. Omdat het specifieke horloge uit de paper (de Citizen Quartz Multi-Alarm III) inmiddels zeldzaam is, is er gekozen voor de iconische Casio F-91W. Ondanks dat dit model pas twee jaar na de publicatie van de paper verscheen, blijft het wereldwijd populair en wordt het nog steeds geproduceerd en verkocht.
Deze demo bouwt voort op het werk van Alexis Philip, die een online versie maakte waarin de grafische elementen werden gedigitaliseerd. In deze versie is de logica vervangen door de XState-bibliotheek en wordt de Stately-visualisator gebruikt om statussen en overgangen zij aan zij te tonen voor educatieve doeleinden. Voor meer informatie kan de officiële handleiding van het horloge worden geraadpleegd.
Verschillen en beperkingen
- Datum en tijd: Het instellen van de datum en tijd wijkt enigszins af, aangezien dit is gerealiseerd met het ingebouwde JavaScript
Date-object. Het instellen van de dag van de week is daarom niet opgenomen in de demo.
- Knoppen: De functie waarbij men knop A ingedrukt houdt om de tijd in het alarm- of datum/tijdmenu sneller te verhogen, is niet geïmplementeerd.
- Alarm: Het is mogelijk om de tijd voor het dagelijkse alarm in te stellen, maar het daadwerkelijk triggeren van het alarm is niet geïmplementeerd.
Bronnen
- Citizen watch statechart – een vergelijkbare statechart-implementatie van het originele Citizen-horloge.
- Statecharts paper – het originele paper uit 1987 door David Harel.
- Casio F-91W handleiding – de officiële handleiding voor het horloge.
Implementatie
De mappenstructuur is als volgt opgebouwd:
demo/script – de originele implementatie; alleen de code voor het renderen wordt gebruikt.src/casio – bevat de implementatie op basis van statecharts.machine.js – de definitie van de XState-machine.machine.cljs – implementatie van de machine-acties.xstate_service.cljs – helpers voor het gebruik van XState in ClojureScript.statecharts_service.cljs – wrapper voor de XState-machinedefinitie met clj-statecharts.app.cljs – de hoofdapplicatie die de machine aanstuurt.
Ontwikkeling
- Voer
bb dev uit om het ontwikkelproces te starten (hiervoor is Babashka vereist).
- Open de applicatie via:
http://localhost:8888/
- Voer tests uit in de browser via:
http://localhost:8888/test
Casio F-91W met Statecharts
Online demo: casio-f91w.pages.dev
Introductie
Statecharts zijn een uitbreiding van state machines, geïntroduceerd door David Harel in 1987. In zijn paper gebruikte Harel een digitaal polshorloge als voorbeeldmodel.
Het doel van dit project was om een interactieve demo te creëren waarmee men statecharts in actie kan zien. Omdat het specifieke horloge uit de paper (de Citizen Quartz Multi-Alarm III) inmiddels zeldzaam is, is er gekozen voor de iconische Casio F-91W. Ondanks dat dit model pas twee jaar na de publicatie van de paper verscheen, blijft het wereldwijd populair en wordt het nog steeds geproduceerd en verkocht.
Deze demo bouwt voort op het werk van Alexis Philip, die een online versie maakte waarin de grafische elementen werden gedigitaliseerd. In deze versie is de logica vervangen door de XState-bibliotheek en wordt de Stately-visualisator gebruikt om statussen en overgangen zij aan zij te tonen voor educatieve doeleinden. Voor meer informatie kan de officiële handleiding van het horloge worden geraadpleegd.
Verschillen en beperkingen
- Datum en tijd: Het instellen van de datum en tijd wijkt enigszins af, aangezien dit is gerealiseerd met het ingebouwde JavaScript
Date-object. Het instellen van de dag van de week is daarom niet opgenomen in de demo.
- Knoppen: De functie waarbij men knop A ingedrukt houdt om de tijd in het alarm- of datum/tijdmenu sneller te verhogen, is niet geïmplementeerd.
- Alarm: Het is mogelijk om de tijd voor het dagelijkse alarm in te stellen, maar het daadwerkelijk triggeren van het alarm is niet geïmplementeerd.
Bronnen
- Citizen watch statechart – een vergelijkbare statechart-implementatie van het originele Citizen-horloge.
- Statecharts paper – het originele paper uit 1987 door David Harel.
- Casio F-91W handleiding – de officiële handleiding voor het horloge.
Implementatie
De mappenstructuur is als volgt opgebouwd:
demo/script – de originele implementatie; alleen de code voor het renderen wordt gebruikt.src/casio – bevat de implementatie op basis van statecharts.machine.js – de definitie van de XState-machine.machine.cljs – implementatie van de machine-acties.xstate_service.cljs – helpers voor het gebruik van XState in ClojureScript.statecharts_service.cljs – wrapper voor de XState-machinedefinitie met clj-statecharts.app.cljs – de hoofdapplicatie die de machine aanstuurt.
Ontwikkeling
- Voer
bb dev uit om het ontwikkelproces te starten (hiervoor is Babashka vereist).
- Open de applicatie via:
http://localhost:8888/
- Voer tests uit in de browser via:
http://localhost:8888/test
Groetjes,