Difference between revisions of "Component: GLCD Graph Creator XY (Graphical Library)"

From Flowcode Help
Jump to navigationJump to search
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
+
{| style="width:50%"
−
 
 
−
{| width="50%"
 
 
|-
 
|-
−
| width="20%" style="color: gray;" | Author
+
| width="20%" style="color:gray;" | Author
 
| Matrix TSL
 
| Matrix TSL
 
|-
 
|-
−
| width="20%" style="color: gray;" | Version
+
| width="20%" style="color:gray;" | Version
−
| 1.2 (Release)
+
| 1.2
 
|-
 
|-
−
| width="20%" style="color: gray;" | Category
+
| width="20%" style="color:gray;" | Category
 
| Graphical Library
 
| Graphical Library
 
|}
 
|}
  
  
−
 
+
==GLCD Graph Creator XY component==
−
==[[File:Component Icon 7b198227_81d6_404c_a2d4_ce1e59ef84f8.png|Image]] GLCD Graph Creator XY component==
 
 
A component to simplify the process of drawing XY graphs and charts using a graphical LCD.
 
A component to simplify the process of drawing XY graphs and charts using a graphical LCD.
  
−
==Examples==
+
==Component Pack==
  
−
The graph creator XY component must be linked to the graphical LCD using the gLCD Object property.
+
DISPLAYS
  
 +
==Detailed description==
  
−
[[File:GraphCreatorProp.jpg]]
 
  
  
−
The X Coord, Y Coord, Width and Height component properties set the size and position of the graph on the gLCD.
 
  
  
−
In the attached example the ADC component sets the input to the graph. Every 50ms a sample is taken and added to the graph.
 
  
  
−
{{Fcfile|GraphCreatorXYDemo.fcfx|Graph Creator Demo}}
 
  
  
−
[[File:GraphCreatorXYDemo.jpg]]
 
  
  
−
Any size of graph can be created. For efficiency it is best to try and stick to the following rules.
+
''No detailed description exists yet for this component''
  
−
* The width should be equal to or a multiple of the X input range - Min Value 0 to Max Value 255 = input range of 256
+
==Examples==
−
* The height should be equal to or a multiple of the Y input range - Min Value 0 to Max Value 255 = input range of 256
 
−
* If Show Border is enabled then Width and Height should be as above plus 2 to account for the border pixels
 
  
−
==Downloadable macro reference==
 
  
−
===<span style="font-weight: normal;"><u><tt>AddPoint</tt></u></span>===
 
−
Adds a new data point to the graph.
 
  
−
'''Parameters'''
 
  
−
:[[Variable Types|INT]] ''X''
 
−
::X Data Value to plot
 
  
−
:[[Variable Types|INT]] ''Y''
 
−
::Y Data Value to plot
 
  
−
:[[Variable Types|BYTE]] ''Index''
 
−
::Plot Index: Range 0-7
 
  
  
−
'''Return value'''
 
  
−
:''This call does not return a value''
 
  
  
−
===<span style="font-weight: normal;"><u><tt>Initialise</tt></u></span>===
 
−
Initialises the graph object on the GLCD to the specified dimensions.
 
  
−
'''Parameters'''
 
  
−
:''This macro has no parameters''
+
The graph creator XY component must be linked to the graphical LCD using the gLCD Object property.
  
  
−
'''Return value'''
+
[[File:GraphCreatorProp.jpg]]
  
−
:''This call does not return a value''
 
  
 +
The X Coord, Y Coord, Width and Height component properties set the size and position of the graph on the gLCD.
  
  
−
==Simulation macro reference==
+
In the attached example the ADC component sets the input to the graph. Every 50ms a sample is taken and added to the graph.
  
−
===<span style="font-weight: normal;"><u><tt>ExportToCSV</tt></u></span>===
 
−
Exports the data in the graph to a CSV file.
 
  
−
'''Parameters'''
+
{{Fcfile|GraphCreatorXYDemo.fcfx|Graph Creator Demo}}
  
−
:[[Variable Types|<- STRING]] ''Filename''
 
−
::''This parameter may be returned back to the caller''
 
  
 +
[[File:GraphCreatorXYDemo.jpg]]
  
−
'''Return value'''
 
  
−
:''This call does not return a value''
+
Any size of graph can be created. For efficiency it is best to try and stick to the following rules.
  
 +
* The width should be equal to or a multiple of the X input range - Min Value 0 to Max Value 255 = input range of 256
 +
* The height should be equal to or a multiple of the Y input range - Min Value 0 to Max Value 255 = input range of 256
 +
* If Show Border is enabled then Width and Height should be as above plus 2 to account for the border pixels
  
 +
==Downloadable macro reference==
  
 +
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
 +
|-
 +
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
 +
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''ExportToCSV'''
 +
|-
 +
| colspan="2" | Exports the data in the graph to a CSV file.&nbsp;
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-string-icon.png]] - STRING
 +
| width="90%" | Filename
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-bool-icon.png]] - BOOL
 +
| width="90%" | Erase
 +
|-
 +
| colspan="2" | 0=Append existing data, 1=Reset file data&nbsp;
 +
|-
 +
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
 +
| width="90%" style="border-top: 2px solid #000;" | ''Return''
 +
|}
  
−
==Property reference==
 
−
<span style="font-weight: normal;"><u>gLCD Object</u></span>
 
  
−
This property is of type ''Panel object'' and can be referenced with the variable name ''glcd_obj''.
+
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
 +
|-
 +
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
 +
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''AddPoint'''
 +
|-
 +
| colspan="2" | Adds a new data point to the graph.&nbsp;
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-s16-icon.png]] - INT
 +
| width="90%" | X
 +
|-
 +
| colspan="2" | X Data Value to plot&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-s16-icon.png]] - INT
 +
| width="90%" | Y
 +
|-
 +
| colspan="2" | Y Data Value to plot&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
 +
| width="90%" | Index
 +
|-
 +
| colspan="2" | Plot Index: Range 0-7&nbsp;
 +
|-
 +
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
 +
| width="90%" style="border-top: 2px solid #000;" | ''Return''
 +
|}
  
−
Graphical LCD Object to draw the graph on
 
  
−
<span style="font-weight: normal;"><u>ColourDisplay</u></span>
+
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
 +
|-
 +
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
 +
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Initialise'''
 +
|-
 +
| colspan="2" | Initialises the graph object on the GLCD to the specified dimensions.&nbsp;
 +
|-
 +
|-
 +
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
 +
| width="90%" style="border-top: 2px solid #000;" | ''Return''
 +
|}
  
−
This property is of type ''True or false'' and can be referenced with the variable name ''Colour_Display''.
 
  
−
Automatically detects if the graphical LCD object is colour or monochrome
 
  
−
<span style="font-weight: normal;"><u>X Coord</u></span>
 
  
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''XC''.
+
==Property reference==
  
−
X coordinate for the top left of the graph container rectangle
+
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
−
 
+
|-
−
<span style="font-weight: normal;"><u>Y Coord</u></span>
+
| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
−
 
+
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''  
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''YC''.
+
|-
−
 
+
|-
−
Y coordinate for the top left of the graph container rectangle
+
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
−
 
+
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Display Properties
−
<span style="font-weight: normal;"><u>Width</u></span>
+
|-
−
 
+
|-
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''WP''.
+
| width="10%" align="center" | [[File:Fc9-type-17-icon.png]]
−
 
+
| width="90%" | gLCD Object
−
Horizontal size of the graph in pixels
+
|-
−
 
+
| colspan="2" | Graphical LCD Object to draw the graph on&nbsp;
−
<span style="font-weight: normal;"><u>Height</u></span>
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''HP''.
+
| width="90%" | ColourDisplay
−
 
+
|-
−
Vertical size of the graph in pixels
+
| colspan="2" | Automatically detects if the graphical LCD object is colour or monochrome&nbsp;
−
 
+
|-
−
<span style="font-weight: normal;"><u>Number Of Plots</u></span>
+
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
−
 
+
| width="90%" | X Coord
−
This property is of type ''Fixed list of ints'' and can be referenced with the variable name ''NumPlots''.
+
|-
−
 
+
| colspan="2" | X coordinate for the top left of the graph container rectangle&nbsp;
−
Determines the number of plots that can be displayed simultaneously on the graph.
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
−
Monochrome displays can only support a single plot.
+
| width="90%" | Y Coord
−
 
+
|-
−
<span style="font-weight: normal;"><u>Number Of Points</u></span>
+
| colspan="2" | Y coordinate for the top left of the graph container rectangle&nbsp;
−
 
+
|-
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''NumPoints''.
+
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
−
 
+
| width="90%" | Width
−
Number of data points the graph can store, multiplied by the number of plots.
+
|-
−
 
+
| colspan="2" | Horizontal size of the graph in pixels&nbsp;
−
<span style="font-weight: normal;"><u>Graph Style</u></span>
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
−
This property is of type ''Fixed list of ints'' and can be referenced with the variable name ''GraphStyle''.
+
| width="90%" | Height
−
 
+
|-
−
Controls the graph draw style.
+
| colspan="2" | Vertical size of the graph in pixels&nbsp;
−
 
+
|-
−
Point - Draws a single point
+
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
−
 
+
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Graph Properties
−
Line - Draws a line from the last point to the new point
+
|-
−
 
+
|-
−
<span style="font-weight: normal;"><u>Min X Value</u></span>
+
| width="10%" align="center" | [[File:Fc9-type-16-icon.png]]
−
 
+
| width="90%" | Number Of Plots
−
This property is of type ''Signed integer'' and can be referenced with the variable name ''MinXVal''.
+
|-
−
 
+
| colspan="2" | Determines the number of plots that can be displayed simultaneously on the graph. Monochrome displays can only support a single plot.&nbsp;
−
Value to represent the bottom Y axis on the graph
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
−
<span style="font-weight: normal;"><u>Max X Value</u></span>
+
| width="90%" | Number Of Points
−
 
+
|-
−
This property is of type ''Signed integer'' and can be referenced with the variable name ''MaxXVal''.
+
| colspan="2" | Number of data points the graph can store, multiplied by the number of plots.&nbsp;
−
 
+
|-
−
Value to represent the top Y axis on the graph
+
| width="10%" align="center" | [[File:Fc9-type-16-icon.png]]
−
 
+
| width="90%" | Graph Style
−
<span style="font-weight: normal;"><u>Min Y Value</u></span>
+
|-
−
 
+
| colspan="2" | Controls the graph draw style. Point - Draws a single point Line - Draws a line from the last point to the new point&nbsp;
−
This property is of type ''Signed integer'' and can be referenced with the variable name ''MinYVal''.
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-14-icon.png]]
−
Value to represent the bottom Y axis on the graph
+
| width="90%" | Min X Value
−
 
+
|-
−
<span style="font-weight: normal;"><u>Max Y Value</u></span>
+
| colspan="2" | Value to represent the bottom Y axis on the graph&nbsp;
−
 
+
|-
−
This property is of type ''Signed integer'' and can be referenced with the variable name ''MaxYVal''.
+
| width="10%" align="center" | [[File:Fc9-type-14-icon.png]]
−
 
+
| width="90%" | Max X Value
−
Value to represent the top Y axis on the graph
+
|-
−
 
+
| colspan="2" | Value to represent the top Y axis on the graph&nbsp;
−
<span style="font-weight: normal;"><u>Show Border</u></span>
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-14-icon.png]]
−
This property is of type ''True or false'' and can be referenced with the variable name ''ShowBorder''.
+
| width="90%" | Min Y Value
−
 
+
|-
−
Decides if a border for the graph is generated
+
| colspan="2" | Value to represent the bottom Y axis on the graph&nbsp;
−
 
+
|-
−
<span style="font-weight: normal;"><u>Show Grid</u></span>
+
| width="10%" align="center" | [[File:Fc9-type-14-icon.png]]
−
 
+
| width="90%" | Max Y Value
−
This property is of type ''Fixed list of ints'' and can be referenced with the variable name ''ShowGrid''.
+
|-
−
 
+
| colspan="2" | Value to represent the top Y axis on the graph&nbsp;
−
Decides if a X or Y grid is shown for the graph
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
−
<span style="font-weight: normal;"><u>Background Colour</u></span>
+
| width="90%" | Show Border
−
 
+
|-
−
This property is of type ''Color picker'' and can be referenced with the variable name ''BgCol''.
+
| colspan="2" | Decides if a border for the graph is generated&nbsp;
−
 
+
|-
−
Determines the graph background colour.
+
| width="10%" align="center" | [[File:Fc9-type-16-icon.png]]
−
 
+
| width="90%" | Show Grid
−
<span style="font-weight: normal;"><u>Plot 0 Colour</u></span>
+
|-
−
 
+
| colspan="2" | Decides if a X or Y grid is shown for the graph&nbsp;
−
This property is of type ''Color picker'' and can be referenced with the variable name ''P1Col''.
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
−
Determines the graph plot colour.
+
| width="90%" | X Subdivisions
 +
|-
 +
| colspan="2" | Number of horizontal divisions to draw&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
 +
| width="90%" | Y Subdivisions
 +
|-
 +
| colspan="2" | Number of vertical divisions to draw&nbsp;
 +
|-
 +
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 +
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Theme
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
 +
| width="90%" | Background Colour
 +
|-
 +
| colspan="2" | Determines the graph background colour. &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
 +
| width="90%" | Grid Colour
 +
|-
 +
| colspan="2" | Determines the graph grid colour. &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
 +
| width="90%" | Plot 0 Colour
 +
|-
 +
| colspan="2" | Determines the graph plot colour. &nbsp;
 +
|}

Latest revision as of 17:25, 9 November 2022

Author Matrix TSL
Version 1.2
Category Graphical Library


GLCD Graph Creator XY component

A component to simplify the process of drawing XY graphs and charts using a graphical LCD.

Component Pack

DISPLAYS

Detailed description

No detailed description exists yet for this component

Examples

The graph creator XY component must be linked to the graphical LCD using the gLCD Object property.


GraphCreatorProp.jpg


The X Coord, Y Coord, Width and Height component properties set the size and position of the graph on the gLCD.


In the attached example the ADC component sets the input to the graph. Every 50ms a sample is taken and added to the graph.


FC6 Icon.png Graph Creator Demo


GraphCreatorXYDemo.jpg


Any size of graph can be created. For efficiency it is best to try and stick to the following rules.

  • The width should be equal to or a multiple of the X input range - Min Value 0 to Max Value 255 = input range of 256
  • The height should be equal to or a multiple of the Y input range - Min Value 0 to Max Value 255 = input range of 256
  • If Show Border is enabled then Width and Height should be as above plus 2 to account for the border pixels

Downloadable macro reference

Fc9-comp-macro.png ExportToCSV
Exports the data in the graph to a CSV file. 
Fc9-string-icon.png - STRING Filename
 
Fc9-bool-icon.png - BOOL Erase
0=Append existing data, 1=Reset file data 
Fc9-void-icon.png - VOID Return


Fc9-comp-macro.png AddPoint
Adds a new data point to the graph. 
Fc9-s16-icon.png - INT X
X Data Value to plot 
Fc9-s16-icon.png - INT Y
Y Data Value to plot 
Fc9-u8-icon.png - BYTE Index
Plot Index: Range 0-7 
Fc9-void-icon.png - VOID Return


Fc9-comp-macro.png Initialise
Initialises the graph object on the GLCD to the specified dimensions. 
Fc9-void-icon.png - VOID Return



Property reference

Fc9-prop-icon.png Properties
Fc9-conn-icon.png Display Properties
Fc9-type-17-icon.png gLCD Object
Graphical LCD Object to draw the graph on 
Fc9-type-7-icon.png ColourDisplay
Automatically detects if the graphical LCD object is colour or monochrome 
Fc9-type-21-icon.png X Coord
X coordinate for the top left of the graph container rectangle 
Fc9-type-21-icon.png Y Coord
Y coordinate for the top left of the graph container rectangle 
Fc9-type-21-icon.png Width
Horizontal size of the graph in pixels 
Fc9-type-21-icon.png Height
Vertical size of the graph in pixels 
Fc9-conn-icon.png Graph Properties
Fc9-type-16-icon.png Number Of Plots
Determines the number of plots that can be displayed simultaneously on the graph. Monochrome displays can only support a single plot. 
Fc9-type-21-icon.png Number Of Points
Number of data points the graph can store, multiplied by the number of plots. 
Fc9-type-16-icon.png Graph Style
Controls the graph draw style. Point - Draws a single point Line - Draws a line from the last point to the new point 
Fc9-type-14-icon.png Min X Value
Value to represent the bottom Y axis on the graph 
Fc9-type-14-icon.png Max X Value
Value to represent the top Y axis on the graph 
Fc9-type-14-icon.png Min Y Value
Value to represent the bottom Y axis on the graph 
Fc9-type-14-icon.png Max Y Value
Value to represent the top Y axis on the graph 
Fc9-type-7-icon.png Show Border
Decides if a border for the graph is generated 
Fc9-type-16-icon.png Show Grid
Decides if a X or Y grid is shown for the graph 
Fc9-type-21-icon.png X Subdivisions
Number of horizontal divisions to draw 
Fc9-type-21-icon.png Y Subdivisions
Number of vertical divisions to draw 
Fc9-conn-icon.png Theme
Fc9-type-1-icon.png Background Colour
Determines the graph background colour.  
Fc9-type-1-icon.png Grid Colour
Determines the graph grid colour.  
Fc9-type-1-icon.png Plot 0 Colour
Determines the graph plot colour.  
Retrieved from "https://www.flowcode.co.uk/wikiv9/index.php?title=Component:_GLCD_Graph_Creator_XY_(Graphical_Library)&oldid=28953"