Building FlowPro – a flowchart based programming tool

I’ve always wanted to build something like this and I’ll be honest its not entirely what I expected it to be but also it kinda is. During my years of programming in my head I also thought of making something more graphical. Something where I didn’t always had to type. I’ve even tried some game programming to help with that. I’m sure there are a lot of no code solutions but I thinking coding is still the way it has always been. To be honest FlowPro wouldn’t be changing that. What it is or how it can be used is still unclear but it is my interpretation of how coding can be in the future maybe. It’s my newest pet project and was the most fun to build and create. Some parts really got me stuck and as always its a bit simplified to match my talent but its complete. Walk with me while I explore building this tool.

Vroom.. The Engine

So FlowPro is built using flowy a really awesome JavaScript tool to create flowcharts or automation or whatever. This was the really start. I had to make some minor modifications to the best of my ability to allow for some smoother movements and to solve random detachments issues. I don’t understand this plugin so I’m just glad to be able to use it. Flowy allows for export and import and I stuck with that for the most part so I can save the text to a file and import and display easily. This was really the start of the project finding this awesome and simple to use tool.

Some adjustments for cleaner movements where made

Of course there was another problem. How to get the paths. Flowy allowed for multiple parts and I had to create an algorithm of sorts to get the blocks in the order they are displayed. Because there are can be multiple branches I had to account for this. Reallyyyyyy simple maybe for some hots shot but this one took a while for me. However I’m proud to say that was solved and while FlowPro only allows for one path of travel the algorithm can execute for multiple paths. It just didn’t make sense to do that at the time. Maybe I will find a use for it in the future.

There were other issues. Getting the blocks to drag across correctly and applying the styling when required and saving properties where some other issues but there were simpler. I think the hardest part of this and I’m not sure it was solved correctly but I had to use recursive programming for everything eventually. I tried other methodologies but recursive and passing functions was the core of what made FlowPro work. Even the for loops are built using recursion.

Anyway building the engine was the most difficult part of the project but I think it was done correctly so making adjustments were pretty straight forward afterwards.

Core Application Structure

Every block in FlowPro is tied to a function. That function can receive the properties from the block and takes action based how it is implemented. The function then calls the next function and passes the results of the function as the output. Properties can be adjusted during the scripting phase but not during execution. The World consists of all the variables assiged during the running of the script.

A whole lot of terminology but basically each block is a function and calls the next block (as a function). Any variables are stored somewhere (lol) in memory. Lets look at the example below

Example showing blocks usage

We have three blocks. Start, Math Constants and Output Results. Each block is tied to a function that carries out a specific task. Start does nothing really and calls the next block. Math Constants code is shown below.

function(properties, output, cb){
        let results = "";
        let ip1 = (properties[0].value) ? properties[0].value : "";
        if(ip1 == "E"){
            results =  Math.E;
        }else if(ip1 == "LN2"){
            results = Math.LN2;
        }else if(ip1 == "LN10"){
            results = Math.LN10;
        }else if(ip1 == "LOG2E"){
            results = Math.LOG2E;
        }else if(ip1 == "PI"){
            results = Math.PI;
        }else if(ip1 == "SQRT1_2"){
            results = Math.SQRT1_2;
        }else if(ip1 == "SQRT2"){
            results = Math.SQRT2;

Pretty simple right. ip1 usage is referred to incorrectly and will fixed that in future builds but for now this is how the block works. ip is the property chosen before runtime and is accessed at runtime to get the selected value. cb is the callback not very creative naming wise.

Output results sends the current output to the console. That’s basically how everything block runs.

Environment Variables

A cool feature that I thought to implement was environment variables. They work more or less the same way you would expect them to. Basically you will create predefined variables and the script will have access to these variables at run time.

Added and editing environment variables

This is great because for long reusable properties we only have to apply them once and we can use them in a varying number of scripts. One of the blocks is called print world. This allows you to see all the variables that are in the world at any point in time. The picture below demonstrates this you can see some preset environment variables.

Printing the results of the current world

Working with Forms

Somewhere along the way I got the idea to add forms to the application so I did. Its a pretty simple concept. I’m thinking it can bridge the gap between cli scripts allowing user input more easily instead of having to build a complex application with UI components etc. But idk.

Adding form elements

In our blocks menu we have an option called builder. This allows use to create form elements. We can added simple text inputs, a textarea, date, time and dropdowns. We can also have two column layouts. Its pretty cool. Each element is assigned to a variable in the world. When the user submits the form the form data is assigned to the variable attached to that particular element. This happens at the start of the script so you now have access to use those variables in whatever way you choose to use them. In the picture above we can see that we used the Print World block to see the results when we submit the form. The variable test was assigned to hello.

A very simple example of this is building a calculator. I’ve embedded a video showing just that.

Creating a calculator with flowpro

Output to a Window

We can send our output to the screen instead of showing it in the console. To do this we can use the block Output in window.

Using this block and with the help of HTML we can create different layouts and display different information on the screen. A lot is possible if you tried but its not really out of the box per se.

A simple example is shown in the slideshow script. The file name and the image of a doggie is shown.

Slideshow image shown in new window

Another great example of this is building a clock you can check out this demo in the video below.

Playing with the blocks is so cool

Honestly playing with the blocks is so cool. If this was fully fleshed out I would never stop coding.

Playing around

Much Much more!

Well there is more flowpro can do but you should just check it out. Links will be added. I’m trying to release for all the OS hopefully.

Check out the release page here for more information also you can view the documentation here for flowpro. I also trying to create more tutorials on this project so you can view the playlist here.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s