Custom Spotlight Extension

Custom Spotlight Extension

Release Date: 2021-03-31T22:00:00Z
Last Update Date: 2021-03-31T22:00:00Z
Current Update: 1.1
Required Permissions: None ( it would require the READ_EXTERNAL_STORAGE when reading a custom typeface from the external storage )
Used Libraries: A customized version from the Spotlight-3 by matrixxun and TakuSemba

Description

This extension creates a spotlight on visible components, or on a specific coordinate on the screen. You can customize the title, description and mask properties or use your custom layout. This extension can be useful to create a tutorial when the user enters your app for the first time, to point out to the primary functions and their usage.

Blocks Picture

Documentation

Ended

Called when a spotlight ends.

component_event (31)

Type Name Description
String id the spotlight's id

Started

Called when a spotlight starts.

component_event (33)

Type Name Description
String id the spotlight's id

Error

Called when an error occurs, if you don't handle this event, the error would be dispatched to app's UI.

component_event (32)

Type Name Description
String error the full error message

Target Closed

Called when a target is closed, either by user or programmatically.

component_event (34)

Type Name Description
String error the id of the target, uses the spotlight id when using one of the blocks that shows a single spotlight

Dismiss Spotlight

Dismisses the whole currently shown spotlight.

component_method - 2021-04-01T165801.056

Dismiss Target

Dismisses the currently shown target.

component_method - 2021-04-01T165826.523

Show Custom Spotlight

Shows a spotlight using a custom layout.

Type Name Description
Component component the component to show the spotlight on, can be any visible component, or a FloatingActionButton
Number duration the duration that the spotlight show take to show or hide, in melliseconds
Number radius the spotlight circle radius
Componet spotlightLayout the layout used for the spotlight
Number layoutY tthe y position of the layout, in pixels
Number layoutX the X position of the layout, in pixels
String id a unique id for the spotlight, used when calling the Started and Ended events

Show Custom Spotlights At Point

Shows a spotlight at a specific coordinate using a custom layout.

Type Name Description
Number x the x coordinate to show the spotlight at, in pixels
Number y the y coordinate to show the spotlight at, in pixels
Number duration the duration that the spotlight show take to show or hide, in melliseconds
Number radius the spotlight circle radius
Componet spotlightLayout the layout used for the spotlight
Number layoutY the y position of the layout, in pixels
Number layoutX the X position of the layout, in pixels
String id a unique id for the spotlight, used when calling the Started and Ended events

Show Multiple Custom Spotlights

Shows multiple spotlight using a custom layout.

Type Name Description
List components ta list of components to show the spotlights on
Number duration the duration that the spotlight show take to show or hide, in melliseconds
List radii a list of the spotlights' circle radii
List spotlightLayouts a list of layouts used for the spotlight
List layoutYPositions a list of the y positions of the layout, in pixels
List layoutXPositions a list of the x positions of the layout, in pixels
String id a unique id for the spotlight, used when calling the Started and Ended events
List targetIds the ids of the targerts, used when calling TargetClosed event

Show Multiple Custom Spotlights At Positions

Shows multiple spotlight using a custom layout at a specific coordinate.

Type Name Description
List xPositions a list of x coordinate to show the spotlight at, in pixels
List yPositions a list of y coordinate to show the spotlight at, in pixels
Number duration the duration that the spotlight show take to show or hide, in melliseconds
List radii a list of the spotlights' circle radii
List spotlightLayouts a list of layouts used for the spotlight
List layoutYPositions a list of the y positions of the layout, in pixels
List layoutXPositions a list of the x positions of the layout, in pixels
String id a unique id for the spotlight, used when calling the Started and Ended events
List targetIds the ids of the targerts, used when calling TargetClosed event

Show Multiple Spotlights

Shows multiple spotlights on the components given.

Type Name Description
Component component the component to show the spotlight on, can be any visible component, or a FloatingActionButton
List titles a list of the spotlights' titles, supports HTML text
List descriptions a list of the spotlights' descriptions, supports HTML text
Number duration the duration that the spotlight show take to show or hide, in melliseconds
List radii the spotlight circle radius
String id a unique id for the spotlight, used when calling the Started and Ended events
List targetIds the ids of the targerts, used when calling TargetClosed event

Show Multiple Spotlights At Positions

Shows multiple spotlights on a specific coordinates.

Type Name Description
List xPositions ta list of x coordinate to show the spotlight at, in pixels
List yPositions ta list of y coordinate to show the spotlight at, in pixels
List titles a list of the spotlights' titles, supports HTML text
List descriptions a list of the spotlights' descriptions, supports HTML text
Number duration the duration that the spotlight show take to show or hide, in melliseconds
List radii the spotlight circle radius
String id a unique id for the spotlight, used when calling the Started and Ended events
List targetIds the ids of the targerts, used when calling TargetClosed event

Show Spotlight

Shows a spotlight on the given component.

component_method - 2021-04-01T170156.419

Type Name Description
Component component the component to show the spotlight on, can be any visible component, or a FloatingActionButton
String title the spotlight's titles, supports HTML text
String description the spotlight's descriptions, supports HTML text
Number duration the duration that the spotlight show take to show or hide, in melliseconds
List radii the spotlight circle radius
String id a unique id for the spotlight, used when calling the Started and Ended events

Show Spotlight At Point

Shows a spotlight at a specific coordinate.

Type Name Description
Number x the x coordinate to show the spotlight at, in pixels
Number y the y coordinate to show the spotlight at, in pixels
String title the spotlight's titles, supports HTML text
String description the spotlight's descriptions, supports HTML text
Number duration the duration that the spotlight show take to show or hide, in melliseconds
List radii the spotlight circle radius
String id a unique id for the spotlight, used when calling the Started and Ended events

Designer Properties

image

Usage Example

This is a very simple example blocks that demonstrates how to use this extension, you will find the AIA attached in the Downloads section

Screenshots And Screen Recordings




Open Source

This extension and the code of the customized library are open source:


Downloads

AIX: io.mohamed.CustomSpotlight.aix (62.0 KB)
AIA (AppInventor): spotlight.aia (100.5 KB)

Credits

Thanks for @themaayur for suggesting the extension's idea, and for testing the extension.
Also thanks for the library authors, and for the MIT stuff for creating this awesome platform.
Thank You!

16 Likes

Another great useful extension :+1:

1 Like

This extension and the library's source are opensource now!


4 Likes

Once again, you've done a great work!

1 Like

Thanks for the amazing extension

2 Likes

You did a great job. I'm going to use it.

3 Likes

Please give permission to use in appathon 2021

2 Likes

Sure, here's the permission for this extension to be used in your MIT Appinventor Apathon 2021 projects:

I, Mohamed Tamer, hereby attest that I am the author of the extension, Custom Spotlight, and grant that MIT has a non-exclusive irrevocable license to republish these extensions as part of the project file for the purposes of MIT App Inventor Apathon 2021.

5 Likes

Custom spotlight*

2 Likes

Sorry, That was a copy-paste mistake, Corrected!

2 Likes

@MohamedTamer, what block should be added to the spotlightLayout parameter?

With the example aia (posted by @MohamedTamer):

grafik

2 Likes

Thanks @Anke