Point Cloud – Graphing (part 1)

This article will begin the 3-part series for creating the graphing component created with a point cloud feature of Flowcode 6.

For this component, the data for the graph itself will accept an array of floating point variables, where their index indicates the location on the x-axis. The graph will be created in a manner that the user defines the maximum number of data points, and then data is plotted from left to right. The units for the Y-Axis will be dynamic and be scale to accommodate the max and min value of the data passed to it.

Firstly, a shape is added to the system panel to indicate where the graph is shown. For the moment, the graph will be 2D and plotted on the X and Y plane. This can be added onto towards the end of the 3rd part of this set of blog posts.


Next we’ll create the external connections by adding a colour picker property and integer to indicate number of datapoints.


Next the component calls for the graph will be added. These will be available to the user to make changes to the graph manually. 2 macros are created:

– PlotGraph – this macro will accept the user defined floating point values that are to be plotted. A limit must be put in here to define the size of the array allowed. For continuity, the value of 2048 was chosen as a graph with more pixels will require a large screen to reproduce. This value can be changed later

– EditGraph – This macro will accept an index argument and value. These will then be amended on the graph.

Both macro edit screens are shown below.


Also added to the project are the callback macros for events. Chosen macros include:

– Ev_Initialise, for the graph axis to be plotted on initialisation, rather than a blank shape being shown.

– Ev_Property, for when the user changes the colour of the graph in the porperties panel (or if any other properties are changed that may be added later

– Ev_Start, to facilitate the graph being re-set on simulation commencement.


Because when the user makes a change to the graph, the entire graph will be re-plotted, we must store the existing graph in a local variable to the whole component. DynYCoords[] serves this purpose in the main() macro. When the user passes a new graph, or edits a point. The graph from this array will be edited, and re-plotted.

Also, because the graph will be re-plotted from several callbacks, and different macro’s it makes sense to modularise the code and create a macro specifically to plot the graph. This is called ReDoGraph. It will not be accessible to the user when the component is used in practice.

Next week, all these prepared sections will be populated with appropriate code ready for test and final improvements in the final week. Click here for this weeks Flowcode file: Point Cloud graphing

5,141 total views, 1 views today

Leave a Reply