Component: Orientation ( Data) - Revision history

SteveT: Text replacement - "width="90%" style="background-color:#D8C9D8; color:#4B008D;"" to "width="90%" class="mtx-class-macrohead""

2026-07-13T14:23:27Z

Text replacement - "width="90%" style="background-color:#D8C9D8; color:#4B008D;"" to "width="90%" class="mtx-class-macrohead""

← Older revision		Revision as of 14:23, 13 July 2026
Line 63:		Line 63:
	\|-		\|-
	\| width="10%" align="center" class="mtx-class-macrohead" \| [[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;~~" \| '''GetAlpha'''		\| width="90%" class="mtx-class-macrohead" \| '''GetAlpha'''
	\|-		\|-
	\| colspan="2" \| Returns rotation around the z-axis, i.e. twisted anticlockwise around the centre of the screen (in degrees between 0 and 360)		\| colspan="2" \| Returns rotation around the z-axis, i.e. twisted anticlockwise around the centre of the screen (in degrees between 0 and 360)
Line 77:		Line 77:
	\|-		\|-
	\| width="10%" align="center" class="mtx-class-macrohead" \| [[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;~~" \| '''GetBeta'''		\| width="90%" class="mtx-class-macrohead" \| '''GetBeta'''
	\|-		\|-
	\| colspan="2" \| Returns rotation around the x-axis, i.e. tilted forwards/backwards (in degrees between -180 and 180)		\| colspan="2" \| Returns rotation around the x-axis, i.e. tilted forwards/backwards (in degrees between -180 and 180)
Line 91:		Line 91:
	\|-		\|-
	\| width="10%" align="center" class="mtx-class-macrohead" \| [[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;~~" \| '''GetGamma'''		\| width="90%" class="mtx-class-macrohead" \| '''GetGamma'''
	\|-		\|-
	\| colspan="2" \| Returns rotation around the y-axis, i.e. tilted left/right (in degrees between -90 and 90)		\| colspan="2" \| Returns rotation around the y-axis, i.e. tilted left/right (in degrees between -90 and 90)
Line 105:		Line 105:
	\|-		\|-
	\| width="10%" align="center" class="mtx-class-macrohead" \| [[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;~~" \| '''Initialise'''		\| width="90%" class="mtx-class-macrohead" \| '''Initialise'''
	\|-		\|-
	\| colspan="2" \| Begins monitoring of the device's orientation information. Returns true if the device can provide orientation information.		\| colspan="2" \| Begins monitoring of the device's orientation information. Returns true if the device can provide orientation information.
Line 119:		Line 119:
	\|-		\|-
	\| width="10%" align="center" class="mtx-class-macrohead" \| [[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;~~" \| '''IsAbsolute'''		\| width="90%" class="mtx-class-macrohead" \| '''IsAbsolute'''
	\|-		\|-
	\| colspan="2" \| Returns true if the device is providing absolute orientation information. Absolute data will be in reference to the Earth's coordinate frame.		\| colspan="2" \| Returns true if the device is providing absolute orientation information. Absolute data will be in reference to the Earth's coordinate frame.
Line 134:		Line 134:
	\|-		\|-
	\| width="10%" align="center" class="mtx-class-macrohead" \| [[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'''
	\|-		\|-
	\|-		\|-

SteveT: Text replacement - "width="10%" align="center" style="background-color:#D8C9D8;"" to "width="10%" align="center" class="mtx-class-macrohead""

2026-07-13T14:21:17Z

Text replacement - "width="10%" align="center" style="background-color:#D8C9D8;"" to "width="10%" align="center" class="mtx-class-macrohead""

← Older revision		Revision as of 14:21, 13 July 2026
Line 133:		Line 133:
	{\| class="mtx-class-macrotable wikitable"		{\| 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%" style="background-color:#D8C9D8; color:#4B008D;" \| '''Properties'''
	\|-		\|-

SteveT: Text replacement - "width="10%" align="center" style="background-color:#D8C9D8;" align="center"" to "width="10%" align="center" class="mtx-class-macrohead""

2026-07-13T14:17:35Z

Text replacement - "width="10%" align="center" style="background-color:#D8C9D8;" align="center"" to "width="10%" align="center" class="mtx-class-macrohead""

← Older revision		Revision as of 14:17, 13 July 2026
Line 62:		Line 62:
	{\| class="mtx-class-macrotable wikitable"		{\| 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;" \| '''GetAlpha'''		\| width="90%" style="background-color:#D8C9D8; color:#4B008D;" \| '''GetAlpha'''
	\|-		\|-
Line 76:		Line 76:
	{\| class="mtx-class-macrotable wikitable"		{\| 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;" \| '''GetBeta'''		\| width="90%" style="background-color:#D8C9D8; color:#4B008D;" \| '''GetBeta'''
	\|-		\|-
Line 90:		Line 90:
	{\| class="mtx-class-macrotable wikitable"		{\| 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;" \| '''GetGamma'''		\| width="90%" style="background-color:#D8C9D8; color:#4B008D;" \| '''GetGamma'''
	\|-		\|-
Line 104:		Line 104:
	{\| class="mtx-class-macrotable wikitable"		{\| 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;" \| '''Initialise'''		\| width="90%" style="background-color:#D8C9D8; color:#4B008D;" \| '''Initialise'''
	\|-		\|-
Line 118:		Line 118:
	{\| class="mtx-class-macrotable wikitable"		{\| 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;" \| '''IsAbsolute'''		\| width="90%" style="background-color:#D8C9D8; color:#4B008D;" \| '''IsAbsolute'''
	\|-		\|-

SteveT: Text replacement - "class="wikitable" style="width:60%; background-color:#FFFFFF;"" to "class="mtx-class-macrotable wikitable""

2026-07-13T14:15:50Z

Text replacement - "class="wikitable" style="width:60%; background-color:#FFFFFF;"" to "class="mtx-class-macrotable wikitable""

← Older revision		Revision as of 14:15, 13 July 2026
Line 60:		Line 60:

	===GetAlpha===		===GetAlpha===
	{\| 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" style="background-color:#D8C9D8;" align="center" \| [[File:Fc9-comp-macro.png]]
Line 74:		Line 74:

	===GetBeta===		===GetBeta===
	{\| 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" style="background-color:#D8C9D8;" align="center" \| [[File:Fc9-comp-macro.png]]
Line 88:		Line 88:

	===GetGamma===		===GetGamma===
	{\| 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" style="background-color:#D8C9D8;" align="center" \| [[File:Fc9-comp-macro.png]]
Line 102:		Line 102:

	===Initialise===		===Initialise===
	{\| 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" style="background-color:#D8C9D8;" align="center" \| [[File:Fc9-comp-macro.png]]
Line 116:		Line 116:

	===IsAbsolute===		===IsAbsolute===
	{\| 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" style="background-color:#D8C9D8;" align="center" \| [[File:Fc9-comp-macro.png]]
Line 131:		Line 131:
	==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" style="background-color:#D8C9D8;" \| [[File:Fc9-prop-icon.png]]

SteveT: /* Examples */

2026-04-29T13:52:39Z

Examples

← Older revision		Revision as of 13:52, 29 April 2026
Line 31:		Line 31:

	==Examples==		==Examples==

			Note that these examples depend on hardware-specific features typically found only in mobile tablets and phones.

	===Graphing the device orientation===		===Graphing the device orientation===
Line 54:		Line 56:

	The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/TiltPlotter.html TiltPlotter Example]		The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/TiltPlotter.html TiltPlotter Example]


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

SteveT: tilt sensor canvas example

2026-04-29T10:52:24Z

tilt sensor canvas example

← Older revision		Revision as of 10:52, 29 April 2026
Line 46:		Line 46:

	The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/DeviceOrientationWithCallback.html DeviceOrientationWithCallback Example]		The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/DeviceOrientationWithCallback.html DeviceOrientationWithCallback Example]


			===Drawing with the tilt sensor===
			An example using the tilt sensor to draw onto a canvas.

			{{Fcfile\|TiltPlotter.fcweb\|TiltPlotter.fcweb}}

			The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/TiltPlotter.html TiltPlotter Example]

SteveT at 15:40, 27 April 2026

2026-04-27T15:40:32Z

← Older revision		Revision as of 15:40, 27 April 2026
Line 14:		Line 14:
	==Orientation component==		==Orientation component==
	Component that provides orientation data for the mobile device using its internal magnetometer		Component that provides orientation data for the mobile device using its internal magnetometer


	==Version information==		==Version information==
Line 24:		Line 25:
	==Detailed description==		==Detailed description==

	~~''No detailed description exists yet for~~ this ~~component''~~		Many mobile devices contain an internal accelerometer and magnetometer which together can report the orientation of the device.

			This component allows access to this orientation data (if it is available on the device), returning with 3 angles showing the rotation of the device in the 3 axes (x, y and z).


	==Examples==		==Examples==

	~~''<span style~~=~~"color~~:~~red;">No additional examples<~~/~~span>''~~		===Graphing the device orientation===
			This example shows the orientation of the device in the 3 axes on a chart.

			{{Fcfile\|DeviceOrientation.fcweb\|DeviceOrientation.fcweb}}

			The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/DeviceOrientation.html DeviceOrientation Example]


			===Using the Orientation component with a callback===
			The is a similar example to above, but this one uses a callback function to retrieve the orientation of the device whenever there is new data available.

			{{Fcfile\|DeviceOrientationWithCallback.fcweb\|DeviceOrientationWithCallback.fcweb}}

			The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/DeviceOrientationWithCallback.html DeviceOrientationWithCallback Example]

Wiki bot: Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 1.0 |- | width="20%" style="color:gray;..."

2026-04-27T08:58:29Z

Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 1.0 |- | width="20%" style="color:gray;..."

New page

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

==Orientation component==
Component that provides orientation data for the mobile device using its internal magnetometer

==Version information==

Library Version, Component Version, Date, Author, Info
1, 1.0, 24-04-26, ST, Created

==Detailed description==

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

==Examples==

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

==Macro reference==

===GetAlpha===
{| 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;" | '''GetAlpha'''
|-
| colspan="2" | Returns rotation around the z-axis, i.e. twisted anticlockwise around the centre of the screen (in degrees between 0 and 360) 
|-
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-f32-icon.png]] - FLOAT
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===GetBeta===
{| 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;" | '''GetBeta'''
|-
| colspan="2" | Returns rotation around the x-axis, i.e. tilted forwards/backwards (in degrees between -180 and 180) 
|-
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-f32-icon.png]] - FLOAT
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===GetGamma===
{| 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;" | '''GetGamma'''
|-
| colspan="2" | Returns rotation around the y-axis, i.e. tilted left/right (in degrees between -90 and 90) 
|-
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-f32-icon.png]] - FLOAT
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===Initialise===
{| 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" | Begins monitoring of the device's orientation information. Returns true if the device can provide orientation information. 
|-
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

===IsAbsolute===
{| 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;" | '''IsAbsolute'''
|-
| colspan="2" | Returns true if the device is providing absolute orientation information. Absolute data will be in reference to the Earth's coordinate frame. 
|-
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-bool-icon.png]] - BOOL
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}

==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" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Use Callback
|-
| colspan="2" | Set true to use a callback that retrieves regular updates of the device orientation 
|}

==Component Source Code==

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

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