Component: Button ( Control) - Revision history

SteveT: added an example

2026-04-28T17:05:20Z

added an example

Wiki bot at 21:16, 27 January 2026

2026-01-27T21:16:58Z

Wiki bot at 08:59, 9 June 2025

2025-06-09T08:59:47Z

Wiki bot at 15:07, 5 December 2023

2023-12-05T15:07:27Z

Wiki bot: 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;..."

2023-11-27T14:10:32Z

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;..."

New page

{| style="width:50%"
|-
| width="20%" style="color:gray;" | Author
| MatrixTSL
|-
| width="20%" style="color:gray;" | Version
| 0.1
|-
| width="20%" style="color:gray;" | Category
| Control
|}

==Button component==
Creates a momentary or latching button.

==Component Source Code==

Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_Button.fcsx FC_Comp_Source_WEBEXP_Button.fcsx]

Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_Button.fcsx FC_Comp_Source_WEBEXP_Button.fcsx]

==Detailed description==

''No detailed description exists yet for this component''

==Examples==

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

==Macro reference==

==Property reference==

{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
|-
| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Caption
|-
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | Text
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Horizontal Alignment
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-3-icon.png]]
| width="90%" | Font
|-
| colspan="2" | Specifies the font style for the item 
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Font Size
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Font size
|-
| colspan="2" | The font size in pixels 
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
|-
| colspan="2" | Specifies the font colour for the item 
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Bold
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Italic
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Underline
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Strikethrough
|-
| colspan="2" |  
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Shape
|-
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
|-
| colspan="2" | Specifies the fill colour of the shape 
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Style
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Border Width
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Outline size
|-
| colspan="2" | The outline size in pixels 
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Colour
|-
| colspan="2" | The outline colour of the shape 
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Shadow
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Shadow Colour
|-
| colspan="2" | Specifies the fill colour of the shape 
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Interaction
|-
|-
| width="10%" align="center" | [[File:Fc9-type-24-icon.png]]
| width="90%" | OnClick Macro
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
| width="90%" | Cursor
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Show Press
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Auto-colour
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Hover Colour
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
| width="90%" | Click Colour
|-
| colspan="2" |  
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
|-
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | Custom Attributes
|-
| colspan="2" |  
|}

← Older revision		Revision as of 21:16, 27 January 2026
Line 18:		Line 18:

	Library Version, Component Version, Date, Author, Info		Library Version, Component Version, Date, Author, Info
		+	2, 1.0, 14-02-25, ST, Changed generated CSS to ensure disabled button has appropriate features

@@ Line 14: / Line 14: @@
 ==Button component==
 Creates a momentary or latching button.
 ==Version information==
@@ Line 28: / Line 29: @@
 ==Examples==
-''<span style="color:red;">No additional examples</span>''
+===BasicControls example===

@@ Line 5: / Line 5: @@
 |-
 | width="20%" style="color:gray;" | Version
-| 0.1
+| 1.0
 |-
 | width="20%" style="color:gray;" | Category
@@ Line 15: / Line 15: @@
 Creates a momentary or latching button.
-==Component Source Code==
+==Version information==
-Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_Button.fcsx FC_Comp_Source_WEBEXP_Button.fcsx]
+ Library Version, Component Version, Date, Author, Info
 ==Detailed description==
@@ Line 167: / Line 167: @@
 | colspan="2" | Text here will be added to the html tag of this component to allow advanced customisation&nbsp;
 |}

@@ Line 28: / Line 28: @@
 ''<span style="color:red;">No additional examples</span>''
 ==Macro reference==
@@ Line 46: / Line 48: @@
 | width="90%" | Text
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The caption displayed on the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 | width="90%" | Horizontal Alignment
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Aligns the caption text on the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-3-icon.png]]
@@ Line 60: / Line 62: @@
 | width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
 | width="90%" | Font Size
 |-
 | colspan="2" | The font size in pixels&nbsp;
@@ Line 76: / Line 73: @@
 | width="90%" | Bold
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text bold&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Italic
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text italicised&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Underline
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text underlined&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Strikethrough
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text crossed-out&nbsp;
 |-
 | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
@@ Line 100: / Line 97: @@
 | width="90%" | Colour
 |-
-| colspan="2" | Specifies the fill colour of the shape&nbsp;
+| colspan="2" | Specifies the fill colour of the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 | width="90%" | Style
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The shape of the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
-| width="90%" | Outline size
+| width="90%" | Outline Size
 |-
 | colspan="2" | The outline size in pixels&nbsp;
@@ Line 120: / Line 112: @@
 | width="90%" | Colour
 |-
-| colspan="2" | The outline colour of the shape&nbsp;
+| colspan="2" | The outline colour of the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Shadow
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Add a shadow to the button to provide a 3d look&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 | width="90%" | Shadow Colour
 |-
-| colspan="2" | Specifies the fill colour of the shape&nbsp;
+| colspan="2" | Specifies the fill colour of the shadow&nbsp;
 |-
 | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
@@ Line 139: / Line 131: @@
 | width="90%" | OnClick Macro
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The macro to call when the user clicks this button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 | width="90%" | Cursor
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The cursor shape when the user hovers the mouse over the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Show Press
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Offset the button when the user presses it&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Auto-colour
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Use default colour changes when the user hovers and presses the button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 | width="90%" | Hover Colour
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The colour of the button when the user hovers the mouse over it&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 | width="90%" | Click Colour
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The colour of the button when the user presses it&nbsp;
 |-
 | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
@@ Line 173: / Line 165: @@
 | width="90%" | Custom Attributes
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Text here will be added to the html tag of this component to allow advanced customisation&nbsp;
 |}