Jump to content

Component: Canvas ( Indicator): Difference between revisions

From Flowcode Help

SteveT (talk | contribs)

4 user groups
6,414 edits
Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 0.1 |- | width="20%" style="color:gray;..."
 
m Text replacement - "style="background-color:#EAE1EA;"" to "class="mtx-class-propfolder""
 
(6 intermediate revisions by 2 users not shown)
Line 28: Line 28:


''<span style="color:red;">No additional examples</span>''
''<span style="color:red;">No additional examples</span>''


==Macro reference==
==Macro reference==


===Clear===
===Clear===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
{| class="mtx-class-macrotable wikitable"
|-
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Clear'''
| width="90%" class="mtx-class-macrohead" | '''Clear'''
|-
|-
| colspan="2" | Clear the canvas to the background colour&nbsp;
| colspan="2" | Clear the canvas to the background colour&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''
|}
===ClearToColour===
{| class="mtx-class-macrotable wikitable"
|-
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
| width="90%" class="mtx-class-macrohead" | '''ClearToColour'''
|-
| colspan="2" | Sets a new background colour and clears the canvas&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | col
|-
| colspan="2" | The new colour for the background&nbsp;
|-
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
Line 46: Line 67:


===DrawRectangle===
===DrawRectangle===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
{| class="mtx-class-macrotable wikitable"
|-
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''DrawRectangle'''
| width="90%" class="mtx-class-macrohead" | '''DrawRectangle'''
|-
|-
| colspan="2" | Draw the outline of a rectangle on the canvas&nbsp;
| colspan="2" | Draw the outline of a rectangle on the canvas&nbsp;
|-
|-
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | x0
| width="90%" | x0
|-
|-
| colspan="2" | Start coordinate&nbsp;
| colspan="2" | Start coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | y0
| width="90%" | y0
|-
|-
| colspan="2" | Start coordinate&nbsp;
| colspan="2" | Start coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | dx
| width="90%" | dx
|-
|-
| colspan="2" | Width&nbsp;
| colspan="2" | Width&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | dy
| width="90%" | dy
|-
|-
| colspan="2" | Height&nbsp;
| colspan="2" | Height&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u32-icon.png]] - ULONG
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | col
| width="90%" | col
|-
|-
Line 90: Line 111:


===FillRectangle===
===FillRectangle===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
{| class="mtx-class-macrotable wikitable"
|-
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''FillRectangle'''
| width="90%" class="mtx-class-macrohead" | '''FillRectangle'''
|-
|-
| colspan="2" | Draw a filled rectangle on the canvas&nbsp;
| colspan="2" | Draw a filled rectangle on the canvas&nbsp;
|-
|-
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | x0
| width="90%" | x0
|-
|-
| colspan="2" | Start coordinate&nbsp;
| colspan="2" | Start coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | y0
| width="90%" | y0
|-
|-
| colspan="2" | Start coordinate&nbsp;
| colspan="2" | Start coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | dx
| width="90%" | dx
|-
|-
| colspan="2" | Width&nbsp;
| colspan="2" | Width&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | dy
| width="90%" | dy
|-
|-
| colspan="2" | Height&nbsp;
| colspan="2" | Height&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u32-icon.png]] - ULONG
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | col
| width="90%" | col
|-
|-
Line 129: Line 150:


===PlotLine===
===PlotLine===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
{| class="mtx-class-macrotable wikitable"
|-
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''PlotLine'''
| width="90%" class="mtx-class-macrohead" | '''PlotLine'''
|-
|-
| colspan="2" | Draws a line on the canvas&nbsp;
| colspan="2" | Draws a line on the canvas&nbsp;
|-
|-
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | x0
| width="90%" | x0
|-
|-
| colspan="2" | Start coordinate&nbsp;
| colspan="2" | Start coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | y0
| width="90%" | y0
|-
|-
| colspan="2" | Start coordinate&nbsp;
| colspan="2" | Start coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | x1
| width="90%" | x1
|-
|-
| colspan="2" | End coordinate&nbsp;
| colspan="2" | End coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | y1
| width="90%" | y1
|-
|-
| colspan="2" | End coordinate&nbsp;
| colspan="2" | End coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u32-icon.png]] - ULONG
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | col
| width="90%" | col
|-
|-
Line 173: Line 194:


===PlotPoint===
===PlotPoint===
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
{| class="mtx-class-macrotable wikitable"
|-
|-
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''PlotPoint'''
| width="90%" class="mtx-class-macrohead" | '''PlotPoint'''
|-
|-
| colspan="2" | Draw a pixel on the canvas&nbsp;
| colspan="2" | Draw a pixel on the canvas&nbsp;
|-
|-
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | x
| width="90%" | x
|-
|-
| colspan="2" | Coordinate&nbsp;
| colspan="2" | Coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | y
| width="90%" | y
|-
|-
| colspan="2" | Coordinate&nbsp;
| colspan="2" | Coordinate&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-u32-icon.png]] - ULONG
| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
| width="90%" | col
| width="90%" | col
|-
|-
Line 203: Line 224:
==Property reference==
==Property reference==


{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
{| class="mtx-class-macrotable wikitable"
|-
|-
| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-prop-icon.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''  
| width="90%" class="mtx-class-macrohead" | '''Properties'''  
|-
|-
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Canvas
| width="90%" class="mtx-class-propfolder" | Canvas
|-
|-
|-
|-
Line 223: Line 244:
| colspan="2" | Set to draw a border around the canvas&nbsp;
| colspan="2" | Set to draw a border around the canvas&nbsp;
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
| width="90%" class="mtx-class-propfolder" | Advanced
|-
|-
|-
|-

Latest revision as of 14:37, 13 July 2026

Author MatrixTSL
Version 0.1
Category Indicator


Canvas component

Creates a simple canvas for drawing.

Component Source Code

Please click here to download the component source project: FC_Comp_Source_WEBEXP_Canvas.fcsx

Please click here to view the component source code (Beta): FC_Comp_Source_WEBEXP_Canvas.fcsx

Detailed description

No detailed description exists yet for this component

Examples

No additional examples


Macro reference

Clear

Clear
Clear the canvas to the background colour 
- VOID Return


ClearToColour

ClearToColour
Sets a new background colour and clears the canvas 
- LONG col
The new colour for the background 
- VOID Return


DrawRectangle

DrawRectangle
Draw the outline of a rectangle on the canvas 
- LONG x0
Start coordinate 
- LONG y0
Start coordinate 
- LONG dx
Width 
- LONG dy
Height 
- LONG col
Outline colour 
- BYTE thickness
Width of the line 
- VOID Return


FillRectangle

FillRectangle
Draw a filled rectangle on the canvas 
- LONG x0
Start coordinate 
- LONG y0
Start coordinate 
- LONG dx
Width 
- LONG dy
Height 
- LONG col
Fill colour 
- VOID Return


PlotLine

PlotLine
Draws a line on the canvas 
- LONG x0
Start coordinate 
- LONG y0
Start coordinate 
- LONG x1
End coordinate 
- LONG y1
End coordinate 
- LONG col
Colour of the line 
- BYTE thickness
Width of the line 
- VOID Return


PlotPoint

PlotPoint
Draw a pixel on the canvas 
- LONG x
Coordinate 
- LONG y
Coordinate 
- LONG col
Pixel colour 
- VOID Return


Property reference

Properties
Canvas
Background colour
The colour of the canvas background 
Border
Set to draw a border around the canvas 
Advanced
Custom Attributes
 
Retrieved from "https://www.flowcode.co.uk/wiki/index.php?title=Component:_Canvas_(_Indicator)&oldid=48155"