From 1ce7bdb9bdf9e0e4c460cadd647907c57316d439 Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Wed, 22 Oct 2025 11:47:43 +0200
Subject: [PATCH 1/2] better rendering of digital watch

---
 src/Plant/DigitalWatch/DigitalWatch.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Plant/DigitalWatch/DigitalWatch.tsx b/src/Plant/DigitalWatch/DigitalWatch.tsx
index 9d41279..7817457 100644
--- a/src/Plant/DigitalWatch/DigitalWatch.tsx
+++ b/src/Plant/DigitalWatch/DigitalWatch.tsx
@@ -1,6 +1,5 @@
 import imgNote from "./noteSmall.png";
 import imgWatch from "./watch.png";
-import imgWatchLight from "./watch-light.png";
 import digitalFont from "./digital-font.ttf";
 import { Plant } from "../Plant";
 import { RaisedEvent } from "@/statecharts/runtime_types";
@@ -38,10 +37,10 @@ export function DigitalWatch({light, h, m, s, alarm, callbacks}: DigitalWatchPro
       }
     `}</style>
     <svg version="1.1" width="222" height="236" style={{userSelect: 'none'}}>
-      {light ?
-        <image width="222" height="236" xlinkHref={imgWatchLight}/>
-      : <image width="222" height="236" xlinkHref={imgWatch}/>
-      }
+      <image width="222" height="236" xlinkHref={imgWatch}/>
+
+      {light &&
+        <rect x={52} y={98} width={120} height={52} fill="#deeaffff" rx={5} ry={5} />}
 
       <text x="111" y="126" dominantBaseline="middle" textAnchor="middle" fontFamily="digital-font" fontSize={28} style={{whiteSpace:'preserve'}}>{hhmmss}</text>
     

From 694380aa183b8e1c0f68cc766d7712c6979a0e1c Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Wed, 22 Oct 2025 11:48:45 +0200
Subject: [PATCH 2/2] shortcuts for raising input events

---
 src/App/App.tsx      |  6 ++--
 src/App/ShowAST.tsx  | 76 ++++++++++++++++++++++++++++----------------
 src/App/TopPanel.tsx |  5 +--
 3 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/src/App/App.tsx b/src/App/App.tsx
index d7d119a..48d20c3 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -44,8 +44,10 @@ export function App() {
   const [rtIdx, setRTIdx] = useState<number|undefined>();
   const [time, setTime] = useState<TimeMode>({kind: "paused", simtime: 0});
   const [modal, setModal] = useState<ReactElement|null>(null);
+
   const [plantName, setPlantName] = usePersistentState("plant", "dummy");
   const [zoom, setZoom] = usePersistentState("zoom", 1);
+  const [showKeys, setShowKeys] = usePersistentState("shortcuts", true);
 
   const plant = plants.find(([pn, p]) => pn === plantName)![1];
 
@@ -249,7 +251,7 @@ export function App() {
           >
             <TopPanel
               rt={rtIdx === undefined ? undefined : rt[rtIdx]}
-              {...{rtIdx, ast, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, mode, setMode, setModal, zoom, setZoom}}
+              {...{rtIdx, ast, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, mode, setMode, setModal, zoom, setZoom, showKeys, setShowKeys}}
             />
           </Box>
           {/* Below the top bar: Editor */}
@@ -281,7 +283,7 @@ export function App() {
             </PersistentDetails>
             <PersistentDetails localStorageKey="showInputEvents" initiallyOpen={true}>
               <summary>input events</summary>
-              <ShowInputEvents inputEvents={ast.inputEvents} onRaise={onRaise} disabled={rtIdx===undefined}/>
+              <ShowInputEvents inputEvents={ast.inputEvents} onRaise={onRaise} disabled={rtIdx===undefined} showKeys={showKeys}/>
             </PersistentDetails>
             <PersistentDetails localStorageKey="showInternalEvents" initiallyOpen={true}>
               <summary>internal events</summary>
diff --git a/src/App/ShowAST.tsx b/src/App/ShowAST.tsx
index c858005..68983ff 100644
--- a/src/App/ShowAST.tsx
+++ b/src/App/ShowAST.tsx
@@ -72,38 +72,60 @@ export function ShowAST(props: {root: ConcreteState | PseudoState, transitions:
 }
 
 import BoltIcon from '@mui/icons-material/Bolt';
+import { KeyInfoHidden, KeyInfoVisible } from "./KeyInfo";
+import { useEffect } from "react";
 
-export function ShowInputEvents({inputEvents, onRaise, disabled}: {inputEvents: EventTrigger[], onRaise: (e: string, p: any) => void, disabled: boolean}) {
-  return inputEvents.map(({event, paramName}) =>
-    <div key={event+'/'+paramName} className="toolbarGroup">
-      <button
-        className="inputEvent"
-        title={`raise this input event`}
-        disabled={disabled}
-        onClick={() => {
-          // @ts-ignore
-          const param = document.getElementById(`input-${event}-param`)?.value;
-          let paramParsed;
-          try {
-            if (param) {
-              paramParsed = JSON.parse(param); // may throw
-            }
-          }
-          catch (e) {
-            alert("invalid json");
-            return;
-          }
-          onRaise(event, paramParsed);
-        }}>
-        <BoltIcon fontSize="small"/>
-        {event}
-      </button>
+export function ShowInputEvents({inputEvents, onRaise, disabled, showKeys}: {inputEvents: EventTrigger[], onRaise: (e: string, p: any) => void, disabled: boolean, showKeys: boolean}) {
+  const raiseHandlers = inputEvents.map(({event}) => {
+    return () => {
+      // @ts-ignore
+      const param = document.getElementById(`input-${event}-param`)?.value;
+      let paramParsed;
+      try {
+        if (param) {
+          paramParsed = JSON.parse(param); // may throw
+        }
+      }
+      catch (e) {
+        alert("invalid json");
+        return;
+      }
+      onRaise(event, paramParsed);
+    };
+  });
+  const onKeyDown = (e: KeyboardEvent) => {
+    const n = (parseInt(e.key)+9) % 10;
+    if (raiseHandlers[n] !== undefined) {
+      raiseHandlers[n]();
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+  useEffect(() => {
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [raiseHandlers]);
+  const KeyInfo = showKeys ? KeyInfoVisible : KeyInfoHidden;
+  return inputEvents.map(({event, paramName}, i) => {
+    const shortcut = (i+1)%10;
+    const KI = (i <= 10) ? KeyInfo : KeyInfoHidden;
+    return <div key={event+'/'+paramName} className="toolbarGroup">
+      <KI keyInfo={<kbd>{shortcut}</kbd>}>
+        <button
+          className="inputEvent"
+          title={`raise this input event`}
+          disabled={disabled}
+          onClick={raiseHandlers[i]}>
+          <BoltIcon fontSize="small"/>
+          {event}
+        </button>
+      </KI>
       {paramName &&
         <><input id={`input-${event}-param`} style={{width: 20}} placeholder={paramName}/></>
       }
       &nbsp;
-    </div>
-  )
+    </div>;
+  })
 }
 
 export function ShowInternalEvents(props: {internalEvents: EventTrigger[]}) {
diff --git a/src/App/TopPanel.tsx b/src/App/TopPanel.tsx
index 623fae4..b5abf59 100644
--- a/src/App/TopPanel.tsx
+++ b/src/App/TopPanel.tsx
@@ -43,12 +43,13 @@ export type TopPanelProps = {
   setModal: Dispatch<SetStateAction<ReactElement|null>>,
   zoom: number,
   setZoom: Dispatch<SetStateAction<number>>,
+  showKeys: boolean,
+  setShowKeys: Dispatch<SetStateAction<boolean>>,
 }
 
-export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, ast, mode, setMode, setModal, zoom, setZoom}: TopPanelProps) {
+export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, ast, mode, setMode, setModal, zoom, setZoom, showKeys, setShowKeys}: TopPanelProps) {
   const [displayTime, setDisplayTime] = useState("0.000");
   const [timescale, setTimescale] = useState(1);
-  const [showKeys, setShowKeys] = usePersistentState("shortcuts", true);
 
   const KeyInfo = showKeys ? KeyInfoVisible : KeyInfoHidden;