search

StateSmith / StateSmith

A state machine code generation tool suitable for bare metal, embedded and more.
Apache License 2.0
470 stars 43 forks source link

simulator - easier event dispatch #327

Open adamfk opened 2 weeks ago

adamfk commented 2 weeks ago

Right now, when I want to exercise a fsm in the simulator, there's a lot of back and forth between looking at the diagram, then finding the correct button for the desired event that will cause a transition, then looking at the diagram... repeat.

It would be great if there was an easier way to exercise the fsm simulation while spending more time focusing on the diagram. It would allow users to spend more time focused on the fsm design/operation.

idea 1 - event key bindings

We could have event key bindings. Number 1 sends event 1...

Easy to do as a first step. Would be nice to be able to use letters as well though like d for DO event.

idea 2 - clickable transitions

Clicking on a transition edge could dispatch the corresponding event trigger for that transition. For example, if I'm in the Start state and I click the circled edge below, the js mouse listener would dispatch event BUTTON2.

image

The downside to this is that it is exceptionally difficult to click on the svg edges. They are tiny!

Thoughts @emmby ?

adamfk commented 1 week ago

Instead of clicking on edges, we might be able to click on edge labels though. Mermaid edge labels have no id that lines up with edge so we'd have to parse the edge labels itself.

Maybe put hidden nbsp; around event names to make it easier to parse in JS. Could be easy.

emmby commented 1 week ago

I was thinking we could make exaggerated touch targets around the edges. When you enter the touch target the edge would swell or highlight it something to indicate it's clickable. That way the edge can still be visually small but easy to click

On Sat, Jun 15, 2024, 8:46 AM Adam Fraser-Kruck @.***> wrote:

Instead of clicking on edges, we might be able to click on edge labels though. Mermaid edge labels have to id that lines up with edge so we'd have to parse the edge labels itself.

Maybe put hidden around event names to make it easier to parse in JS. Could be easy.

— Reply to this email directly, view it on GitHub https://github.com/StateSmith/StateSmith/issues/327#issuecomment-2169997453, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACL4YGDDSBKGILXEY7BEE3ZHROVTAVCNFSM6AAAAABJAKV32GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRZHE4TONBVGM . You are receiving this because you were mentioned.Message ID: @.***>

adamfk commented 1 week ago

I was thinking we could make exaggerated touch targets around the edges. When you enter the touch target the edge would swell or highlight it something to indicate it's clickable. That way the edge can still be visually small but easy to click

That sounds great, but I'm not sure how to do that technically. Maybe with the help of an svg lib or something? Take each mermaid transition edge, make a copy, widen the copy, make copy near transparent, put the copy under original? Then we can use standard html mouseover events?