Difference between revisions of "Component: Switch ( Control)"
From Flowcode Help
Jump to navigationJump to search (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;...") |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 5: | Line 5: | ||
|- | |- | ||
| width="20%" style="color:gray;" | Version | | width="20%" style="color:gray;" | Version | ||
| − | | 0 | + | | 1.0 |
|- | |- | ||
| width="20%" style="color:gray;" | Category | | width="20%" style="color:gray;" | Category | ||
| Line 15: | Line 15: | ||
Creates an on/off type toggle switch control. | Creates an on/off type toggle switch control. | ||
| − | == | + | ==Version information== |
| − | + | Library Version, Component Version, Date, Author, Info | |
| + | |||
| − | |||
==Detailed description== | ==Detailed description== | ||
| Line 28: | Line 28: | ||
''<span style="color:red;">No additional examples</span>'' | ''<span style="color:red;">No additional examples</span>'' | ||
| + | |||
| + | |||
==Macro reference== | ==Macro reference== | ||
| Line 37: | Line 39: | ||
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetState''' | | width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetState''' | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Returns the current state of the switch |
|- | |- | ||
|- | |- | ||
| Line 51: | Line 53: | ||
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetState''' | | width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetState''' | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Sets the current state of the switch |
|- | |- | ||
|- | |- | ||
| Line 57: | Line 59: | ||
| width="90%" | bState | | width="90%" | bState | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The state to set (true = on) |
|- | |- | ||
| 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 79: | Line 81: | ||
| width="90%" | State | | width="90%" | State | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The initial state of the switch |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-24-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-24-icon.png]] | ||
| width="90%" | OnClick Macro | | width="90%" | OnClick Macro | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The macro to call when the user clicks this switch |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | ||
| width="90%" | Cursor | | width="90%" | Cursor | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The cursor shape when the user hovers the mouse over this switch |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-21-icon.png]] | ||
| width="90%" | Transition Speed | | width="90%" | Transition Speed | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The animation speed (in ms) when the switch is pressed |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | ||
| width="90%" | Auto Return | | width="90%" | Auto Return | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Set true to automatically return the switch to its default state |
|- | |- | ||
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | ||
| Line 108: | Line 110: | ||
| width="90%" | On Label | | width="90%" | On Label | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The text to show when the switch is in the on state |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-10-icon.png]] | ||
| width="90%" | Off Label | | width="90%" | Off Label | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The text to show when the switch is in the off state |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | ||
| width="90%" | Style | | width="90%" | Style | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The colour style of the switch |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | ||
| width="90%" | Show Thumb | | width="90%" | Show Thumb | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Show or hide the thumb of the switch |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-21-icon.png]] | ||
| − | + | | width="90%" | Outline Size | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | | width="90%" | Outline | ||
|- | |- | ||
| colspan="2" | The outline size in pixels | | colspan="2" | The outline size in pixels | ||
| Line 138: | Line 135: | ||
| width="90%" | Border Radius | | width="90%" | Border Radius | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The curvature radius of the corners of the switch |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Border Colour | | width="90%" | Border Colour | ||
|- | |- | ||
| − | | colspan="2" | The outline colour of the | + | | colspan="2" | The outline colour of the switch |
|- | |- | ||
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | ||
| Line 152: | Line 149: | ||
| width="90%" | Font | | width="90%" | Font | ||
|- | |- | ||
| − | | colspan="2" | Specifies the font style for the | + | | colspan="2" | Specifies the font style for the switch |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-21-icon.png]] | ||
| width="90%" | Font Size | | width="90%" | Font Size | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| colspan="2" | The font size in pixels | | colspan="2" | The font size in pixels | ||
| Line 167: | Line 159: | ||
| width="90%" | Bold | | width="90%" | Bold | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Make the caption text bold |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-7-icon.png]] | ||
| width="90%" | Italic | | width="90%" | Italic | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Make the caption text italicised |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Colour | | width="90%" | Colour | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The fill colour of the switch when off |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Gradient | | width="90%" | Gradient | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The secondary fill colour of the switch when off |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | ||
| width="90%" | Gradient Style | | width="90%" | Gradient Style | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The gradient fill type of the switch when off |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Text | | width="90%" | Text | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The font colour for the switch when off |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Colour | | width="90%" | Colour | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The fill colour of the switch when on |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Gradient | | width="90%" | Gradient | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The secondary fill colour of the switch when on |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-12-icon.png]] | ||
| width="90%" | Gradient Style | | width="90%" | Gradient Style | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The gradient fill type of the switch when on |
|- | |- | ||
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | | width="10%" align="center" | [[File:Fc9-type-2-icon.png]] | ||
| width="90%" | Text | | width="90%" | Text | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | The font colour for the switch when on |
|- | |- | ||
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | | width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]] | ||
| Line 221: | Line 213: | ||
| width="90%" | Custom Attributes | | width="90%" | Custom Attributes | ||
|- | |- | ||
| − | | colspan="2" | | + | | colspan="2" | Text here will be added to the html tag of this component to allow advanced customisation |
|} | |} | ||
| + | |||
| + | ==Component Source Code== | ||
| + | |||
| + | Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_Switch.fcsx FC_Comp_Source_WEBEXP_Switch.fcsx] | ||
| + | |||
| + | Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_Switch.fcsx FC_Comp_Source_WEBEXP_Switch.fcsx] | ||
Latest revision as of 08:59, 9 June 2025
| Author | MatrixTSL |
| Version | 1.0 |
| Category | Control |
Contents
Switch component
Creates an on/off type toggle switch control.
Version information
Library Version, Component Version, Date, Author, Info
Detailed description
No detailed description exists yet for this component
Examples
No additional examples
Macro reference
GetState
|
GetState |
| Returns the current state of the switch | |
 - BOOL
|
Return |
SetState
|
|
SetState |
| Sets the current state of the switch | |
| - BOOL
|
bState |
| The state to set (true = on) | |
 - VOID
|
Return |
Property reference
|
Properties |
|
Behaviour |
|
State |
| The initial state of the switch | |
|
OnClick Macro |
| The macro to call when the user clicks this switch | |
|
Cursor |
| The cursor shape when the user hovers the mouse over this switch | |
|
Transition Speed |
| The animation speed (in ms) when the switch is pressed | |
|
|
Auto Return |
| Set true to automatically return the switch to its default state | |
|
|
Appearance |
|
On Label |
| The text to show when the switch is in the on state | |
|
|
Off Label |
| The text to show when the switch is in the off state | |
|
|
Style |
| The colour style of the switch | |
|
|
Show Thumb |
| Show or hide the thumb of the switch | |
|
|
Outline Size |
| The outline size in pixels | |
|
|
Border Radius |
| The curvature radius of the corners of the switch | |
|
Border Colour |
| The outline colour of the switch | |
|
|
Font |
|
Font |
| Specifies the font style for the switch | |
|
|
Font Size |
| The font size in pixels | |
|
|
Bold |
| Make the caption text bold | |
|
|
Italic |
| Make the caption text italicised | |
|
|
Colour |
| The fill colour of the switch when off | |
|
|
Gradient |
| The secondary fill colour of the switch when off | |
|
|
Gradient Style |
| The gradient fill type of the switch when off | |
|
|
Text |
| The font colour for the switch when off | |
|
|
Colour |
| The fill colour of the switch when on | |
|
|
Gradient |
| The secondary fill colour of the switch when on | |
|
|
Gradient Style |
| The gradient fill type of the switch when on | |
|
|
Text |
| The font colour for the switch when on | |
|
|
Advanced |
|
|
Custom Attributes |
| Text here will be added to the html tag of this component to allow advanced customisation | |
Component Source Code
Please click here to download the component source project: FC_Comp_Source_WEBEXP_Switch.fcsx
Please click here to view the component source code (Beta): FC_Comp_Source_WEBEXP_Switch.fcsx
