Component: SevenSeg ( Indicator): Difference between revisions

Latest revision as of 15:30, 13 July 2026

Author	MatrixTSL
Version	1.1
Category	Indicator

SevenSeg component

A single 7 segment web component.

Version information

Library Version, Component Version, Date, Author, Info
1, 1.0, 20-06-24, ST, Created
2, 1.1, 19-02-26, ST, Set colOn and colOff during Ev_Initialising

Detailed description

No detailed description exists yet for this component

Examples

7 Segment from a Slider

This example takes an input from a slider and outputs the number to a seven segment display. The display prints Err if the number is out of range.

SevenSegSlider.fcweb

The web app created by this example can be viewed here: SevenSegSlider Example

7 Segment - set individual segments

This uses switches to control each individual segment. The hex value displayed is the value that can be passed to the SetRawValue macro to show that pattern.

SevenSegTest.fcweb

The web app created by this example can be viewed here: SevenSegTest Example

Macro reference

SetDigit

	SetDigit
Sets the 7seg to display a digit (0-9) with an optional decimal point
- LONG	Digit
The digit to display (0-9)
- BOOL	ShowDP
Set true to show the decimal point
- VOID	Return

SetOffColour

	SetOffColour
Sets the 'off' colour of the segments
- STRING	Colour
A string defining the colour (e.g. "maroon" or "#ff0099")
- VOID	Return

SetOnColour

	SetOnColour
Sets the 'on' colour of the segments
- STRING	Colour
A string defining the colour (e.g. "maroon" or "#ff0099")
- VOID	Return

SetRawValue

	SetRawValue
Sets the raw byte value for the 7seg (0 - 255), allowing each segment to be individually set
- LONG	Value
The raw byte value for the display (0-255)
- VOID	Return

Property reference

	Properties
	Digit
	On colour

	Off colour

	Background
	Back colour
Specifies the fill colour of the shape
	Outline size
The outline size in pixels
	Outline colour
The outline colour of the shape
	Value

Component Source Code

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

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

@@ Line 27: / Line 27: @@
 ==Examples==
-''<span style="color:red;">No additional examples</span>''
+===7 Segment from a Slider===
+This example takes an input from a slider and outputs the number to a seven segment display. The display prints Err if the number is out of range.
+{{Fcfile|SevenSegSlider.fcweb|SevenSegSlider.fcweb}}
+The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/SevenSegSlider.html SevenSegSlider Example]
+===7 Segment - set individual segments===
+This uses switches to control each individual segment. The hex value displayed is the value that can be passed to the SetRawValue macro to show that pattern.
+{{Fcfile|SevenSegTest.fcweb|SevenSegTest.fcweb}}
+The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/SevenSegTest.html SevenSegTest Example]
 ==Macro reference==
 ===SetDigit===
-{| 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;" | '''SetDigit'''
+| width="90%" class="mtx-class-macrohead" | '''SetDigit'''
 |-
 | colspan="2" | Sets the 7seg to display a digit (0-9) with an optional decimal point&nbsp;
@@ Line 56: / Line 69: @@
 ===SetOffColour===
-{| 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;" | '''SetOffColour'''
+| width="90%" class="mtx-class-macrohead" | '''SetOffColour'''
 |-
 | colspan="2" | Sets the 'off' colour of the segments&nbsp;
@@ Line 75: / Line 88: @@
 ===SetOnColour===
-{| 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;" | '''SetOnColour'''
+| width="90%" class="mtx-class-macrohead" | '''SetOnColour'''
 |-
 | colspan="2" | Sets the 'on' colour of the segments&nbsp;
@@ Line 94: / Line 107: @@
 ===SetRawValue===
-{| 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;" | '''SetRawValue'''
+| width="90%" class="mtx-class-macrohead" | '''SetRawValue'''
 |-
 | colspan="2" | Sets the raw byte value for the 7seg (0 - 255), allowing each segment to be individually set&nbsp;
@@ Line 114: / Line 127: @@
 ==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;" | Digit
+| width="90%" class="mtx-class-propfolder" | Digit
 |-
 |-
@@ Line 134: / Line 147: @@
 | colspan="2" | &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;" | Background
+| width="90%" class="mtx-class-propfolder" | Background
 |-
 |-

SteveT (talk | contribs)