[F/OS] Custom Spotlight Extension

Mohamed_Tamer · March 14, 2021, 4:20pm

Custom Spotlight Extension

Release Date: 2021-03-13T22:00:00Z
Last Update Date: 2021-03-14T22: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, with a different style than kodular’s built-in component. 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 description.

Blocks Picture

Documentation

Ended

Called when a spotlight ends.

component_event(1)

Params
String	id

Started

Called when a spotlight starts.

component_event(2)

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(3)

Type	Name	Description
String	error	the full error message

Target Closed

Called when a target is closed.

component_event(4)

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.

Dismiss Target

Dismisses the currently shown target.

Show Custom Spotlights

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.

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

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

Downloads

Version 1.0

AIX: io.mohamed.CustomSpotlight.aix (61.0 KB)
AIA: spotlight_test.aia (218.6 KB)
APK: spotlight_test.apk (5.6 MB)

AIX: io.mohamed.CustomSpotlight.aix (62.0 KB)
AIA: spotlight_test(1).aia (219.5 KB)
APK: spotlight_test(1).apk (5.6 MB)

Change Logs

Version 1.1

New Blocks

1-

2-

Improvments

Added helpUrl
Removed the android support library. Since it’s no longer needed.

Bug Fixes

Fixed a bug when using assets as a custom TypeFace in the companion, on android 10+ devices.

Open Source

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

Credits

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

Mohamed_Tamer · March 14, 2021, 4:22pm

Sorry for the inconvenience, i mistakenly posted the topic before completing the documentation. It will be completed now.

luv.ak.tech · March 14, 2021, 4:24pm

nice extension

Vaibhav · March 14, 2021, 4:59pm

Thanks for the extension as well as for keeping your word! @Mohamed_Tamer

I downloaded and checked the apk you provided. From that I just had one query that can the speed of revealing and fading be increased or can it be set manually from blocks?

Edit: I just now read that we can set the duration.

ashishthakoor58 · March 14, 2021, 4:59pm

Really great extension .

tmohank · March 14, 2021, 5:18pm

Very useful

Mohamed_Tamer · March 14, 2021, 5:23pm

Thanks everyone for your patience and feedback, the topic has been fully updated

Chocoduba_BR · March 14, 2021, 5:32pm

Just what i needed, Thanks!

Bharat_Android_App_Develo · March 14, 2021, 5:55pm

Great extension @Mohamed_Tamer can you pm me

marco_tanzi · March 14, 2021, 6:35pm

Great extension!!
Very useful

Victor_Ken · March 14, 2021, 7:35pm

Great extension!!

WatermelonIce · March 14, 2021, 8:16pm

Thank you for publishing this extension Appreciated!

Berkat-has · March 15, 2021, 12:51am

Wow its great extension thank you my friend

Shatrudhn_Kumar · March 15, 2021, 2:47am

oh very thanks

Aditya_Singh · March 15, 2021, 6:58am

Very useful extension.

msr79526 · March 15, 2021, 2:23pm

Helpful extension

iamwsumit · March 15, 2021, 2:41pm

Realy useful extension thanks @Mohamed_Tamer

Alaqmar_Bohori · March 15, 2021, 3:47pm

Awesome extension @Mohamed_Tamer

Mohamed_Tamer · March 15, 2021, 5:22pm

Version 1.1 Change Log

New Blocks

1-

2-

Improvments

Added helpUrl
Removed the android support library. Since it’s no longer needed.

Bug Fixes

Fixed a bug when using assets as a custom TypeFace in the companion, on android 10+ devices. ( Thanks for @themaayur for reporting this bug )

Muhammad_Iqbal · March 18, 2021, 9:09am

@Mohamed_Tamer Thanks a lot dear

Topic		Replies	Views
How to put Multiple Spotlight in a sequence, one after the other Guides	11	3410	May 4, 2023
[FREE] MultiLamp (Spotlight) Extension Extensions	12	3143	April 2, 2022
How to activate spotlight? Discuss question , help	2	676	November 16, 2022
[DISCONTINUED] 💌 Notification Style: extension with various types of notification. 💌 Extensions	301	53581	March 10, 2023
Spotlight Wrong Bugs bug	11	1284	April 17, 2021

[F/OS] Custom Spotlight Extension

Description

Blocks Picture

Documentation

Ended

Started

Error

Target Closed

Dismiss Spotlight

Dismiss Target

Show Custom Spotlights

Show Custom Spotlights At Point

Show Multiple Custom Spotlights

Show Multiple Custom Spotlights At Positions

Show Multiple Spotlights

Show Multiple Spotlights At Positions

Show Spotlight

Show Spotlight At Point

Designer Properties

Usage Example

Screenshots And Screen Recordings

Downloads

Change Logs

New Blocks

Improvments

Bug Fixes

Open Source

Credits

Version 1.1 Change Log

New Blocks

Improvments

Bug Fixes

Related topics