src/App/App.tsx

@@ -44,10 +44,8 @@ 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];
 
@@ -251,7 +249,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, showKeys, setShowKeys}}
+              {...{rtIdx, ast, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, mode, setMode, setModal, zoom, setZoom}}
             />
           </Box>
           {/* Below the top bar: Editor */}
@@ -283,7 +281,7 @@ export function App() {
             </PersistentDetails>
             <PersistentDetails localStorageKey="showInputEvents" initiallyOpen={true}>
               <summary>input events</summary>
-              <ShowInputEvents inputEvents={ast.inputEvents} onRaise={onRaise} disabled={rtIdx===undefined} showKeys={showKeys}/>
+              <ShowInputEvents inputEvents={ast.inputEvents} onRaise={onRaise} disabled={rtIdx===undefined}/>
             </PersistentDetails>
             <PersistentDetails localStorageKey="showInternalEvents" initiallyOpen={true}>
               <summary>internal events</summary>

src/App/ShowAST.tsx

@@ -72,12 +72,15 @@ 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, showKeys}: {inputEvents: EventTrigger[], onRaise: (e: string, p: any) => void, disabled: boolean, showKeys: boolean}) {
-  const raiseHandlers = inputEvents.map(({event}) => {
-    return () => {
+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;
@@ -91,41 +94,16 @@ export function ShowInputEvents({inputEvents, onRaise, disabled, showKeys}: {inp
             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[]}) {

src/App/TopPanel.tsx

@@ -43,13 +43,12 @@ 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, showKeys, setShowKeys}: TopPanelProps) {
+export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, ast, mode, setMode, setModal, zoom, setZoom}: TopPanelProps) {
   const [displayTime, setDisplayTime] = useState("0.000");
   const [timescale, setTimescale] = useState(1);
+  const [showKeys, setShowKeys] = usePersistentState("shortcuts", true);
 
   const KeyInfo = showKeys ? KeyInfoVisible : KeyInfoHidden;
 

src/Plant/DigitalWatch/DigitalWatch.tsx

@@ -1,5 +1,6 @@
 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";
@@ -37,10 +38,10 @@ export function DigitalWatch({light, h, m, s, alarm, callbacks}: DigitalWatchPro
       }
     `}</style>
     <svg version="1.1" width="222" height="236" style={{userSelect: 'none'}}>
-      <image width="222" height="236" xlinkHref={imgWatch}/>
-
-      {light &&
-        <rect x={52} y={98} width={120} height={52} fill="#deeaffff" rx={5} ry={5} />}
+      {light ?
+        <image width="222" height="236" xlinkHref={imgWatchLight}/>
+      : <image width="222" height="236" xlinkHref={imgWatch}/>
+      }
 
       <text x="111" y="126" dominantBaseline="middle" textAnchor="middle" fontFamily="digital-font" fontSize={28} style={{whiteSpace:'preserve'}}>{hhmmss}</text>