I hope to find some time to make a video soon to better show how things work.. I'll try to explain it in text here: the statemachine definition is shown on the left. The states are the boxes with only a border and the current state is the blue box. The event/messages to trigger a state transition are defined by the boxes with a grey background. The flows on the right side use this statemachine: the flow on the top right handles storing the current state in a cookie but also initialises the statemachine with the stored state when the flow is loaded. A special node "OnStateChange" responds to statemachine changes... you can define the state that a OnStateChange node reponds to and trigger the output flow. In this example the statemachine shows the behavior of a lightswitch which can have 3 states: off, on and max.. the lightswitch can be put in "max-mode" only when the lightswitch is on. This is visualized by the image in the form-node. The buttons in the form-node also respond to the currentstate. Currently there's only support for 1 statemachine per flow, which is far too limiting offcourse, so I am going to change that soon.

I notice that my current rendering method using html5 canvas with dom elements on top is getting really to its limits.. at some near point in the future I will need to rewrite the rendering and handle the UI elements differently .. I am thinking of an approach where I use only svg together with a floating propert editor (which will only be visible when a node is selected or hovered). Another approach would be pure webgl, although the complexity of that is a lot bigger then using pure svg. I hope to find the time to experiment with both.

Spend some time again on the flow-based editor part of my project instead of the new renderer, because thanks to a colleague I've gotten an idea on how to render complex forms automatically based on a flow.. I'll provide more details in the thread.

In the last years I've had to make some complex forms with backed calculations/logic, a lot of visibility conditions and multiple form-steps and I came to the conclusion that when using a visual flow editor that this can quite easily be made and will provide a lot more insight for people on how the form works (even non-programmers). The missing link was generating the UI.. I already made a simple UI editor with which you can manually create a UI based on a flow and relevant nodes. But this week I came to an insight that this can actually be automated by showing each form node in its own step when a node of a type that is relevant for a user gets executed by the flow engine (for example : nodes of type "Form" require user input) (the advantage is that this also is much more user friendly, because you show less form fields at once to a user: so less cognitive load). The execution of the flow is then paused when that node is shown and continues execution after the user submits the form. I think that I am now much more closer to having a product that can be used in actual real world projects! In the upcoming months I will test this. Meanwhile, next week I'll continue working at the new rendering approach and start focussing on drawing text using fonts with single distance fields. I'll keep you posted! (Screenshots have dutch content.. I still hope that they provide info on what I am talking about in this post)

The flow in the above post is a flow of questions to determine if your kid could go to daycare during the pandemic here in the Netherlands.. I still had this flow in my repo as an example, and I think it illustrates the use-case.

Made some progress on the rendering of text in webgl.. something straight forward in html (or a lot of other environments) is a tough problem in webgl. Luckily a lot is to be found on the internet (I use sdf bitmap fonts). Still a lot of work todo offcourse, next up is adding some interactivity and tweaking the rendering further (the shadows are crap currently, I probably remove them anyway).

For threejs there also lots of example where I can borrow from, although I am not using threejs myself (just pure webgl for now)

Not that I dont like threejs or think that I can do it better (which I can't). But at least I can try to do it without it to have less dependencies and hopefully a smaller codebase and targeted on purely the needs of what I am building. It's also a good learning experience