FlowerApp Manual

Table of Contents

Introduction

This is a simple web application that allows you to add, edit, and delete flowers. You can export your flowchart as a pseudo-code and also as an PNG image.

Program consists of three main parts:

  1. Navigation and Menu: App name and icon, project title and menu items stored in here.
  2. Toolbar: Simulation controls, block add button and watch display button are here.
  3. Board: This is where the blocks and their connections showed in an interactive display. You can move, drag, zoom in/out the display. There is also a minimap which helps to get an overview of your flowchart.

Navigation and Menu

Navigation Bar

The navigation bar is the top bar of the application. It contains the app name and icon, and the project title.

Project title is the name of the project that you are currently working on. You can change it by clicking on the project title on the navbar and typing in a new name.

The name of the project is also used as the name of the subroutine name that can be used in the Function Block.

Remember
  • The project title can be minimum of 2 characters and maximum of 30 characters.
  • The project title can only contain letters, numbers, and underscores.
  • The project title cannot start with a number.

Menu

Menu items and their functions are listed below:
  • File:
    • New: Create a new project.
    • Open: Open an existing (downloaded) project.
    • Save: Save the current project in the browser memory.
    • Download: Download the current project, which can be used in Function Block.
    • Export: Export the current project as a pseudo-code or PNG image.
  • Project:
    • Find: List all blocks and focus on click.
    • Input Parameters: Add input parameters to the project. These parameters will be automatically used when a Load Block encountered.
    • Output History: Show the history of the output values generated by Store Block.
    • Analyze: Analyze the current project. Displays cyclomatic complexity and block count.
  • Help:
    • How to Use: Show this manual.
    • About: Show the application information.

Toolbar

Toolbar contains simulation controls, block add button and watch display button.

Simulation Controls

The simulation controls are used to control the simulation. You can start, stop and run the simulation step by step.

If you want to step automatically you can click the resume/pause button. The speed of the automatic simulation can be adjusted by using the speed slider which is located at the right of the control buttons.

The block to be processed will be highlighted.

Once you started the simulation, you can no longer add or edit blocks, and save, open, download buttons are disabled.

Remember
  • Speed slider showed only when the simulation is started.
  • The simulation can only be started when all blocks are connected and the flowchart is valid.

Adding Block

By clicking the button a sidebar will pop up. The sidebar contains a list of all available blocks.

You can click on the block name to add the block to the flowchart.

Remember
  • You can only add blocks to the flowchart when the simulation is stopped.
  • Created blocks will be placed on the top-left corner of the board.

Watch Display

By clicking the button, a sidebar will pop up. The sidebar contains the values of the variables that are used in the flowchart.

You can watch the values in real time while the simulation is running.

Remember
  • If simulation is not running, the watch display will be grayed out.

Board

Blocks and their connections are displayed here. You can edit and view your flowchart here.

Display-related Actions

  • You can move the display.
  • You can zoom in/out the display.
  • You can show and hide the minimap. Minimap might help you to get an overview of your flowchart.
  • You can fit the display to the board. This will zoom out the display to fit the board.
  • If your flowchart is too big, fit feature may not work as intented.

Block-related Actions

  • You can drag blocks.
  • You can double click on the block to open its modal.
  • You can select a block by click on it. In order to select multiple blocks apply SHIFT+click and drag selection area. You can move multiple blocks after multiple-select with ease.
  • You can press Backspace on keyboard to remove block(s) after selecting it/them.

Connection-related Actions

  • You can create connections by connecting block handles (the blue dots). The mouse icon changes to indicate a connection creation.
  • If you need to move a connection to another block, ie. changing source or target block of the connection,
    1. Move your mouse around the desired block's handle. The mouse icon will be change accordingly (this icon is different from the create connection action.)
    2. Click and drag the connection to desired block's handle. when the mouse icon is changed
  • To remove a connection, do the same thing as updating a connection but do not connect any other handle, simply drop your connection line on the blank canvas.
  • In mobile,
    • Connecting: you need to click the first handle and than the second one. It may require multiple trials :)
    • Removing: you need to click around the handle and then blank area on the canvas.
    • Updating: you need to click the handle and then the next handle you want to connect.
Remember
  • You can only create connections between blocks, if that connection is valid. For example, if you try to create a connection between two connected blocks or between a block and itself, the connection will not be created.

Features

There are two main features that FlowerApp brings a solution for. These are the simulating a flowchart and exporing into various formats.

Simulation

Writing a program in FlowerApp has the following benefits:

  • Easy to learn
  • Helps to understand structured language
  • Forces to create correct flowcharts in a natural way. If something looks bad, probably, its not right!
  • It can be run on all modern browsers which is easy access.

Even though you can write anything you want into the blocks, if you want to run your flowchart you have to follow FlowerApp syntax which is very similar to JavaScript. Therefore, it is a great start to learning JavaScript also!

Important!
  • You must think FlowerApp syntax as a subset of JavaScript. There are subtle but not complex differences between the two. For example, no support for objects and functions, you can only create string by double quotes etc.
Hello world flowchart
Hello World in FlowerApp

Flowchart consists of blocks and connections between them. Blocks are the building materials of the flowchart. Blocks can be connected to each other by connecting the blue dots (handles).

The flowchart will run from the START block to the STOP block. If there are any blocks that are not connected or there are more than one START or STOP blocks the flowchart counted as invalid and the simulation will not run.

Each block performs a set of actions that can be executed. Some may branch to other blocks, some may calculate a value and assign variable, or loop through a set of blocks, etc. You, as a programmer, tell what kind of actions are executed in what order in the flowchart.

Each block type detailed under the Blocks section. Please refer to the Blocks section for more information.

Data Types

FlowerApp supports the following data types:

  • String - a sequence of characters.
  • Number - a sequence of digits.
  • Boolean - a true or false value.
  • Array - a list of values.
  • Null is a special value that represents the intentional absence of a value.
Note
  • There is no Object type which is a collection of key-value pairs.
  • There is no support for anonymous functions. Therefore, you cannot use methods that require a function as a parameter (such as filter and map methods).
String

A string is a sequence of characters. You can use double quotes to define a string.

Strings are JavaScript objects. Therefore, you can use string methods to manipulate strings. You can use + to concantate strings

Examples:

  • str = "Hello World!" or str = "Hello" + " World!"
  • str.length returns the length of the string.
  • str.charAt(0) returns the character at the specified index.
  • str.indexOf("o") returns the index of the first occurrence of the specified value.
  • str.substring(0, 4) returns the substring starting at the specified index and up to, but not including, the specified end index.
  • str.toUpperCase() returns the string in upper case.
  • str.toLowerCase() returns the string in lower case.
  • str.replace("World", "Universe") replaces all occurrences of the specified value.
  • str.split(" ") splits the string into an array of substrings.
  • str.trim() removes whitespace from both ends of the string.
  • str.concat("!", "?") concatenates the string with the specified value.
Number

Numbers are JavaScript numbers which are 64-bit floating point. Numbers can be written with or without decimals.

  • x = 3.14 - A number with decimals
  • x = 3 - A number without decimals
  • x = 3.14e-10 - A number with decimals and scientific notation
  • x = 3.14e10 - A number with decimals and scientific notation

You can perform arithmetic operations on Numbers.

  • Addition - 5 + 4
  • Subtraction - 4 - 15
  • Multiplication - 12 * 178
  • Division - 34 / 11
  • Modulo - 64 % 51
Note
  • FlowerApp syntax uses the + operator for both addition and concatenation. Numbers are added. Strings are concatenated
  • If you add two numbers, the result will be a number; if you add two strings, the result will be a string concatenation.
  • If you add a number and a string, the result will be a string concatenation:
    • 10 + "30" → "1030"

Again, you can use some methods of JavaScript numbers:

  • x.toString() returns the number as a string.
  • x.toFixed(2) returns a string, with the number written with a specified number of decimals.
  • x.toExponential(2) returns a string, with a number rounded and written using exponential notation.
  • x.toPrecision(2) returns a string, with a number written with a specified length.

You can use Math library to perform common mathematical operations like random number generation.

  • Math.random() returns a random number between 0 and 1.
  • Math.trunc() returns the integer part of a number by removing any fractional digits.
  • Math.floor(x) returns the largest integer less than or equal to the specified number.
  • Math.ceil(x) returns the smallest integer greater than or equal to the specified number.
  • Math.round(x) returns the nearest integer to the specified number.
  • Math.abs(x) returns the absolute value of the specified number.
  • Math.pow(x, y) returns the value of the specified number raised to the specified power.
  • Math.sqrt(x) returns the square root of the specified number.
  • Math.min(x, y) returns the smaller of the two specified numbers.
  • Math.max(x, y) returns the larger of the two specified numbers.
  • Math.sin(x) returns the sine of the specified angle.
  • Math.cos(x) returns the cosine of the specified angle.
  • Math.tan(x) returns the tangent of the specified angle.
  • Math.atan(x) returns the angle whose tangent is the specified number.
  • Math.atan2(x, y) returns the angle whose tangent is the quotient of two specified numbers.
  • Math.log(x) returns the natural logarithm of the specified number.
  • Math.log10(x) returns the base 10 logarithm of the specified number.
  • Math.exp(x) returns the specified number raised to the power of Euler's number.
  • Math.PI returns the value of pi.
  • Math.E returns the value of e.
Remember
  • The Math library is actually JavaScript's Math object. Thus, you can use its methods that not presented here. Reference
Boolean

Boolean represents one of two values: true or false. Very often, in programming, you will need a data type that can only have one of two values, like yes/no, on/off, or true/false.

Booleans used for conditioning and logical operations. You can apply following operations to booleans:

  • Logical AND - true && true → true
  • Logical OR - true || false → true
  • Logical NOT - !true → false

Comparision operators:

  • x == y - x is equal to y
  • x != y - x is not equal to y
  • x === y - x is equal to y and they are of the same type
  • x !== y - x is not equal to y or they are not of the same type
  • x > y - x is greater than y
  • x < y - x is less than y
  • x >= y - x is greater than or equal to y
  • x <= y - x is less than or equal to y
Array

An array is a list of values. The values can be of any type. The order of the values is important and each value can be accessed by its index. An array can be created by using square brackets. The values inside the square brackets are separated by commas.

Arrays are JavaScript objects. The syntax is similar to that of JavaScript.

Examples:

  • arr = [1, 2, 3] - a number array
  • arr = ["a", "b", "c"] - a string array
  • arr = [true, false] - a boolean array
  • arr = [true, 1, 2, "hello!!"] - an array of different types
  • arr.push(4) - add a value to the end of the array
  • arr.pop() - remove the last value from the array and return it.
  • arr.shift() - remove the first value from the array
  • arr.unshift(0) - add a value to the beginning of the array
  • arr.splice(1, 1) - remove the value at index 1 from the array
  • arr.slice(1, 2) - return a new array with the values at index 1 and 2
  • arr.indexOf(2) - return the index of the value 2
  • arr.join("-") - return a string with the values separated by the character "-"
  • arr.sort() - sort the values in the array
  • arr.reverse() - reverse the order of the values in the array
  • arr.concat(["d", "e", "f"]) - return a new array with the values from the original array and the values from the array passed as a parameter

Examples

In this section you will find some examples of various algorithms written in FlowerApp. I higly encourage you to realise them in your browser.

Remember
  • Follow these simple steps to create your flowchart:
    1. First of all, please think your inputs and outputs. What are you trying to solve? What information given to you and what do you need to return?
    2. Select your blocks that will be used in your algorithm. If you are confused, please read the Blocks section.
    3. After adding block, write its content. Remember, every block requires a different code syntax and does different things.
    4. Now we have our blocks on the board. Think logically and connect them in order they should be.
    5. You may need to adjust your blocks to present them beautifully. After your adjustments finished, you can simulate or export your flowchart.
  • Do not forget to save your work often! You do not want to lose your hardwork.
Flowchart Description Simulation
flow-addtwonumbers.png

Add two numbers entered by the user

Input:
2 ⏎ 3


Output:
5

flow-quadratic.png

Find Root of the quadratic equation ax2 + bx + c = 0

First element of the returned array indicates equation has a solution or not.

Input:
1 ⏎ 4 ⏎ 4


Output:
[true, -2, -2]

factorial.png

Find the factorial of a number with a loop.

Input:
5


Output:
120

isprime.png

Check whether a number is prime or not

Input:
11


Output:
true

getprimes.png

Find all primes up to N

In this flowchart is_prime (previous example) used!

Input:
10


Output:
[2, 3, 5, 7]

Exporting

This feature of the program does not require a lot of knowledge about the programming language. It is just a simple way to export your flowchart into various formats. You can write whatever you want in the code of the blocks and export it to the desired format, since we are not simulating it.

Image Exporting

You can export the flowchart into a PNG image file. To do so, follow File > Export path in the menu and select second option in the opened modal.

This feature implemented as converting DOM element (the Board) into an image file. Therefore, it is simulates a screenshot of the board display.

  • If your flowchart does not fit into the board, the resulting image will not contain the whole flowchart but a part of it.

Code Exporting

You can export the flowchart into a pseudo-code. Every valid (detailed under) flowchart can be exported this way.

After selecting File > Export menu item, you will be presented with a modal that contains "Pseudocode" with gears button. Clicking on the gears button will generate the code.

A valid flowchart means each block is correctly connected. Since the process produces a pseudo-code the texts of the blocks do not matter.

Blocks

Blocks are the building material of your flowchart. In this section, available blocks are described. If you want to learn about interacting with blocks, please refer to Board section.

Every block has an id that is unique to that block. This can be used to select/find the desired block. Moreover, you can specify a name for a block to easier access.

How to name a block?
  • Block names do not need to be unique.
  • In order to change the name, open a block modal and click on the id.
  • You do not need to hit Enter or click Save to update name. Changes are immediate after the lost of focus of the name field.
  • To remove the name, clear the name field in the block.

START Block

Description: The START block marks the beginning of the flowchart.
Input Details: This block does not take any inputs.
On Successful Execution: The flow will proceed to the next connected block.
Notes:
  • There can only be one START block in the flowchart.
  • In order to simulate the diagram there should be exactly one START block.
  • The simulation will flow from the START block.

STOP Block

Description: The STOP block marks the endpoint of the flowchart.
Input Details: This block does not take any inputs.
On Successful Execution: The simulation should end.
Notes:
  • There can only be one STOP block in the flowchart.
  • In order to simulate the diagram there should be exactly one STOP block.
  • To finish simulation last block must be STOP block.

STATEMENT Block

Description: The STATEMENT block is used to execute a statement. This block is used to execute a statement, such as a variable assignment, but not a function call.
Input Details:
  • This block takes one input, which is the statement to be executed.
  • The statement can be any valid JavaScript statement in the forms of,
    • <VARIABLE> = <EXPRESSION>
    • <ARRAY>.<ARRAY_FUNC>
    This means you cannot use <VARIABLE>++ or <VARIABLE> += <EXPRESSION>
On Successful Execution: Statement is executed and the result stored in the memory, and the flow will proceed to the next connected block.
Notes:
  • It can be used to execute a single line of code.

DECISION Block

Description: The DECISION block is used to create branches in a flow. It enables to change the work logic of the program by the given expression.
Input Details:
  • This block takes one input, which is the expression which decision to be decide.
  • The expression can be any valid JavaScript expression that evaluates to a boolean value.
    Be careful! You have to use === and !== for equality and in-equality checking!
On Successful Execution: The flow will continue on the block connected to TRUE or FALSE handles according to the value of the expression.
Notes:

    LOAD Block

    Description: The LOAD block is used to gather information from user.
    Input Details:
    • Code should be comma separated variable names (not an_array[1]).
    • The input provided by the user should be JavaScript expression. For example;
      • 1 + 2
      • array[0]
      • "hello world!" not hello world!
      • "hello" not hello, the latter will assign the value of the hello variable.
    On Successful Execution: Input values assigned to the variables, after that, the flow will proceed to the next connected block.
    Notes:
    • Upon execution of the block, a modal will pop-up and the flow will wait untill the user enters the values.
    • The menu item Project > Input Parameters enables you to predefine input values for the simulation. Each line processed as a separete input. This means, if there is enough predefined input the modal will not appear and the required values will be automatically taken from the predefined input area.
    • This block behaves as function parameters if used in a subroutine. More details can be found in FUNCTION block.

    STORE Block

    Description: The STORE block is used to display information to the user.
    Input Details:
    • Code should be consists of only one expression (no comma separated values like in LOAD block) and it should be valid JavaScript expression. For example;
      • (1 + 2) / 3
      • array[0]
      • "The \"answer\" is: " + ans
    • You cannot use ' or ` to print strings.
    On Successful Execution: The flow will proceed to the next connected block.
    Notes:
    • Upon execution of the block, a toast message will appear. If you have missed the message or want to see previous messages click on Project > Output History menu item to display the message history.
    • In a subroutine call, the return value is generated by the STORE block that's the last executed one. In other words, subroutine will return the last STORE block's value.
    • In subroutine call, execution of STORE block will not produce a toast message nor stored in output history.

    WHILE Loop Block

    Description: The WHILE block is used to execute a block of code while a condition is true.
    Input Details:
    • This block takes two input; one is the expression which decision to be decide, as explained in DECISION block, and other one is the blocks
    • The expression can be any valid JavaScript expression that evaluates to a boolean value.
      Be careful! You have to use === and !== for equality and in-equality checking!
    • Second input is the block selection. Blocks are listed in a searchable dropdown. You can use name and id property of the blocks to select which ones to include. You can also remove blocks from the selection. Adding or removing will remove all connections of the target block and re-position them on the top-left corner of the WHILE block.
    • If a block is selected and removed from the list without saving, its connections and position will be changed nevertheless.
    On Successful Execution: The flow will loop through the child blocks (next executed block is the connected by the blue-violet colored triangular handle) while the condition is true. If the condition is false, the flow will continue through the block that is connected from the outer handle (blue dot handle).
    Notes:
    • You can resize the WHILE block to match its size to fit the child blocks.

    FUNCTION Block

    Description: The FUNCTION block is used to call a subroutine. Subroutines are the flowcharts that downloaded via File > Download menu item.
    Input Details:
    • This block takes two input; one is the file path of the subroutine file (project file), the other one is the signature of the subroutine.
    • Subroutine file is simply a FlowerApp project file. You can download any project and open them as a subroutine.
      • The subroutine name determined by the project title. This is displayed when you load the file into the editor.
    • Signature defines the input parameters and the returned value. It has the following syntax: (<EXPR>) => <VARIABLE>.
      • The part before the arrow defines the arguments of the call. Paranthesis are mandatory and more than one argument needed to pass use comma for separation. Arguments should be valid STORE block expressions.
      • Right hand side of the arrow tells where to store returned value. It should be a plain variable name like retVal not returnArray[0]. This variable name should be valid LOAD block expression (except there is only one variable).
      • Example signatures: (an_array, "find this string") => index, (5)=>factorial, ()=>x
    On Successful Execution: Subroutine called with the given parameters and returned value stored into memory. The flow will proceed to the next connected block.
    Notes:
    • Important! After you load your subroutine into the memory (selecting file and clicking on Save button on the modal), the subroutine will be statically attached to your FUNCTION block. This means, if you change your subroutine file, you have to re-load the subroutine file into the memory. This applies to all subroutines in the project, even if they are using the same subroutine.
    • Calling subroutines done in isolation. Yours/theirs variables will not interact with each other which means, you cannot set a variable that is used in the main flowchart in a subroutine or vice versa. The only way of interaction is to use the LOAD and STORE blocks.
    • If your subroutine does not contain a STORE block, this means it does not mutate/return any value (due to the isolation) and therefore, it is most likely useless.
    • After loading your subroutine you can view it on the modal. But you cannot change it. To do so, re-open that project and re-load.