[Paid] Circular-Motion-View A circular motion view component that displays boxes moving in a circular path

Extensions
1

🧩 CircularMotionView

An extension for MIT App Inventor 2.
This Extension is developed by th using Fast.
A circular motion view component that displays boxes moving in a circular path.
Telegram | GitHub
Blogger | YouTube
Find More Extension
Terms & Conditions

:memo: Specifications

:package: Package: io.th.circularmotionview.circularmotionview
:floppy_disk: Size: 25.78 KB
:gear: Version: 1.0
:iphone: Minimum API Level: 7
:date: Updated On: 2025-04-05T18:30:00Z
:computer: Built & documented using: FAST-CLI v2.8.1
Buy on upi 180rs or USD - 2 :heavy_dollar_sign:

Output

fbc8ed1d-d495-45b9-b3a7-704d3cfd1eb9.gif

Bloks

BoxClicked_Event
AnimationStarted_Event
AnimationStopped_Event


XYPosition_Method
BoxText_Method
BoxTextColor_Method
Initialize_Method


StartAnimation_Method
StopAnimation_Method


BoxColor_Set_Property
AvailableShapes_Get_Property
AutoRotation_Set_Property
AutoRotation_Get_Property
Visible_Set_Property
Visible_Get_Property
TouchGesturesEnabled_Set_Property
TouchGesturesEnabled_Get_Property
TextSize_Set_Property
TextColor_Set_Property
Text_Set_Property
RotationSpeed_Set_Property
PositionY_Set_Property
PositionX_Set_Property
PathWidth_Set_Property
PathRadius_Set_Property
PathColor_Set_Property
NumberOfBoxes_Set_Property
NumberOfBoxes_Get_Property
GetBoxText_Set_Property
BoxSize_Set_Property
BoxSize_Get_Property
BoxShape_Set_Property


Demo Bloks

blocks


OutPut



Events:

CircularMotionView has total 3 events.

:yellow_heart: BoxClicked

Triggered when a box is clicked. Returns the box's index (0 to NumberOfBoxes-1) and its current text.

Parameter Type
boxIndex number
boxText text

:yellow_heart: AnimationStarted

Triggered when the animation starts after calling StartAnimation.

:yellow_heart: AnimationStopped

Triggered when the animation stops after calling StopAnimation.

Methods:

CircularMotionView has total 6 methods.

:purple_heart: Initialize

Initialize the circular motion view in a VerticalArrangement or HorizontalArrangement. This must be called before using any other functions.

Parameter Type
arrangement component

:purple_heart: StartAnimation

Start the automatic circular motion animation. The boxes will move around the circular path.

:purple_heart: StopAnimation

Stop the current animation. The boxes will remain in their current positions.

:purple_heart: BoxTextColor

Set text color for a specific box by its index (0 to NumberOfBoxes-1).

Parameter Type
boxIndex number
color number

:purple_heart: BoxText

Set text for a specific box by its index (0 to NumberOfBoxes-1).

Parameter Type
boxIndex number
text text

:purple_heart: XYPosition

Set the exact X and Y position of the circular motion view's center point in pixels.

Parameter Type
x number
y number

Setters:

CircularMotionView has total 17 setter properties.

:green_heart: RotationSpeed

Set the speed of rotation in milliseconds. Lower values make it rotate faster. Default is 5000.

  • Input type: number

:green_heart: BoxColor

Set the background color of all boxes. Use the color blocks to select a color.

  • Input type: number

:green_heart: PathColor

Set the color of the circular path. Use the color blocks to select a color.

  • Input type: number

:green_heart: PathWidth

Set the width/thickness of the circular path line. Default is 4.

  • Input type: number

:green_heart: PathRadius

Set the radius of the circular path. This determines how large the circle will be. Default is 180.

  • Input type: number

:green_heart: Text

Set the text that appears inside all boxes. Leave empty for no text.

  • Input type: text

:green_heart: TextColor

Set the text color for all boxes. Use the color blocks to select a color.

  • Input type: number

:green_heart: TextSize

Set the text size for all boxes. Default is 14.

  • Input type: number

:green_heart: BoxSize

Set the size of each box in pixels. This affects both width and height. Default is 75.

  • Input type: number

:green_heart: NumberOfBoxes

Set the number of boxes that appear on the circular path. Default is 9.

  • Input type: number

:green_heart: GetBoxText

Get text from a specific box

  • Input type: number

:green_heart: BoxShape

Set the shape of all boxes. Available shapes: RECTANGLE, ELLIPSE, TRIANGLE_UP, TRIANGLE_DOWN, TRIANGLE_RIGHT, TRIANGLE_LEFT, TRAPEZIUM, PARALLELOGRAM, CAPSULE, LEAF, RHOMBUS, HEART_1, HEART_2, DROP, STAR_1, STAR_2, DIAMOND, PENTAGON, HEXAGON

  • Input type: text
  • Helper class: Shape
  • Helper enums: RECTANGLE, ELLIPSE, TRIANGLE_UP, TRIANGLE_DOWN, TRIANGLE_RIGHT, TRIANGLE_LEFT, TRAPEZIUM, PARALLELOGRAM, CAPSULE, LEAF, TRIANGLE_TOP_LEFT, TRIANGLE_TOP_RIGHT, RHOMBUS, HEART_1, HEART_2, DROP, STAR_1, STAR_2, DIAMOND, PENTAGON, HEXAGON

:green_heart: AutoRotation

Enable or disable automatic rotation. When disabled, the view can only be rotated manually.

  • Input type: boolean

:green_heart: TouchGesturesEnabled

Enable or disable touch gestures. When enabled, users can drag to rotate the view.

  • Input type: boolean

:green_heart: Visible

Show or hide the entire circular motion view including all boxes.

  • Input type: boolean

:green_heart: PositionX

Set the X coordinate of the circular motion view's center point in pixels.

  • Input type: number

:green_heart: PositionY

Set the Y coordinate of the circular motion view's center point in pixels.

  • Input type: number

Getters:

CircularMotionView has total 6 getter properties.

:green_circle: BoxSize

Set the size of each box in pixels. This affects both width and height. Default is 75.

  • Return type: number

:green_circle: NumberOfBoxes

Set the number of boxes that appear on the circular path. Default is 9.

  • Return type: number

:green_circle: AvailableShapes

Get available shape styles

  • Return type: any

:green_circle: AutoRotation

Enable or disable automatic rotation. When disabled, the view can only be rotated manually.

  • Return type: boolean

:green_circle: TouchGesturesEnabled

Enable or disable touch gestures. When enabled, users can drag to rotate the view.

  • Return type: boolean

:green_circle: Visible

Show or hide the entire circular motion view including all boxes.

  • Return type: boolean

Thanks

TechHamara

Buy On PayPal

paypal
paypal750×983 55.3 KB

3 Likes