[Paid] DeviceMockup - A realistic design and interactive mobile Desktop Laptop Smart Watch ScreenShot Mockup

Extensions
1

🏃‍♂️ DeviceMockup

An extension for MIT App Inventor 2.

:memo: Specifications

:package: Package: io.th.devicemockup
:floppy_disk: Size: 111.86 KB
:gear: Version: 1.0
:iphone: Minimum API Level: 7
:date: Updated On: 2025-05-07T18:30:00Z
:computer: Built & documented using: FAST v2.8.4
:heavy_dollar_sign: Buy On UPI 430rs or 5 USD💲.
:placard: Find More info On GitHub

:handshake: Multi-Components

  1. DeviceMockup
  2. Desktop
  3. Laptop
  4. SmartWatch

Phone Mockup

Output1 Output2
Screenshot_2025-05-09-07-37-13-211_appinventor.ai_Techhamara91.mockup.jpg Screenshot_2025-05-09-07-37-02-560_appinventor.ai_Techhamara91.mockup.jpg

Desktop

output1 Output2
imac_20250509_081503_160.jpg imac_20250509_081340_115.jpg

Laptop

output1 Output2
laptop_20250509_081450_344.jpg laptop_20250509_081327_616.jpg

Smart Watch

output1 Output2
Screenshot_2025-05-09-07-39-35-620_appinventor.ai_Techhamara91.mockup.jpg watch_20250509_081350_620.jpg
Phone Mockup

:jigsaw: DeviceMockup

This component is developed by th using Fast.
This component provides a realistic mobile device mockup with various notch types and physical buttons.
It is designed to simulate the look and feel of a real mobile device, allowing for a more immersive user experience.
The component is developed by th using Fast, ensuring a high level of detail and realism.
It includes a range of notch types, such as iPhone, punch hole, pill shape, slim notch, wide notch, double punch hole, dynamic island, and waterdrop, as well as physical buttons for volume and power control.
The component is highly customizable, allowing developers to tailor the appearance and behavior to their specific needs.
With its advanced features and realistic design, this component is ideal for creating engaging and interactive mobile ScreenShot Mockup.
Telegram | GitHub
Blogger | YouTube
Find More Extension
Terms & Conditions

Events:

DeviceMockup has total 2 events.

SaveSuccess_Event
SaveFailed_Event

SaveSuccess

Event raised when the mockup is successfully saved to a file

Parameter Type
filePath text

SaveFailed

Event raised when there is an error saving the mockup

Parameter Type
errorMessage text

Methods:

DeviceMockup has total 15 methods.

BackgroundRGB_Method
BackgroundGradient_Method
ShowHomeIndicator_Method
ScreenGradient_Method
SaveFrameAsPNG_Method
SaveFrameAsJPEG_Method
SaveAsPNG_Method
SaveAsJPEG_Method
PhoneMockup_Method
FrameGradient_Method
DeviceDimensions_Method
CustomizeVolumeButtons_Method
CustomizePowerButton_Method
ChangeMockupType_Method
CaptionPadding_Method

PhoneMockup

Add mockup layout to the given arrangement

Parameter Type
arrangement component

DeviceDimensions

Set the device dimensions. Example: DeviceDimensions(100, 200) for a 100dp width and 200dp height.

Parameter Type
width number
height number

ShowHomeIndicator

Show or hide the home indicator

Parameter Type
show boolean

ChangeMockupType

Change mockup image (Use numbers 1-5). Example: ChangeMockupType(1) for the first mockup image.

Parameter Type
mockupNumber number

BackgroundRGB

Set background color using RGB values (0-255 for each)

Parameter Type
red number
green number
blue number

BackgroundGradient

Set a gradient background with start and end colors. Example: BackgroundGradient('#FF0000', '#0000FF', true) for a horizontal gradient from red to blue.

Parameter Type
startColorHex text
endColorHex text
isHorizontal boolean

ScreenGradient

Set the screen background to a gradient (in light mode). Example: ScreenGradient('#FF0000', '#0000FF', true) for a horizontal gradient from red to blue.

Parameter Type
startColorHex text
endColorHex text
isHorizontal boolean

FrameGradient

Set frame background to a gradient. Example: FrameGradient('#FF0000', '#0000FF', true) for a horizontal gradient from red to blue.

Parameter Type
startColorHex text
endColorHex text
isHorizontal boolean

CaptionPadding

Set the padding of the caption container (in dp)

Parameter Type
left number
top number
right number
bottom number

CustomizeVolumeButtons

Customize volume buttons position and size

Parameter Type
topButtonMargin number
bottomButtonMargin number
buttonWidth number
buttonHeight number

CustomizePowerButton

Customize power button position and size

Parameter Type
topMargin number
buttonWidth number
buttonHeight number

SaveAsPNG

Save the current mockup as a PNG image. Returns the full path to the saved file or empty string if failed.

Parameter Type
fileName text
directory text

SaveAsJPEG

Save the current mockup as a JPEG image with specified quality (1-100). Returns the full path to the saved file or empty string if failed.

Parameter Type
fileName text
directory text
quality number

SaveFrameAsPNG

Save only the phone frame portion as PNG image (without the background)

Parameter Type
fileName text
directory text

SaveFrameAsJPEG

Save only the phone frame portion as JPEG image (without the background). Example: SaveFrameAsJPEG('myFrame', 'path/to/directory', 90)

Parameter Type
fileName text
directory text
quality number

Setters:

DeviceMockup has total 36 setter properties.

LoadScreenImage_Set_Property
LoadBackgroundImage_Set_Property
ImageQuality_Set_Property
FrameShadowElevation_Set_Property
FrameRotation_Set_Property
FramePaddingTop_Set_Property
FramePaddingRight_Set_Property
FramePaddingLeft_Set_Property
FramePaddingBottom_Set_Property
FrameColor_Set_Property
EnableDarkMode_Set_Property
DeviceName_Set_Property
CornerRadius_Set_Property
CaptionTextStyle_Set_Property
CaptionTextColor_Set_Property
CaptionText_Set_Property
CaptionSubTextStyle_Set_Property
CaptionSubTextColor_Set_Property
CaptionSubText_Set_Property
CaptionSubFontSize_Set_Property
CaptionRotation_Set_Property
CaptionPaddingTop_Set_Property
CaptionPaddingRight_Set_Property
CaptionPaddingLeft_Set_Property
CaptionPaddingBottom_Set_Property
CaptionFontSize_Set_Property
ButtonColor_Set_Property
BezelWidth_Set_Property
BackgroundColor_Set_Property
ShowVolumeButtons_Set_Property
ShowPowerButton_Set_Property
ShowNotch_Set_Property
ShowDeviceName_Set_Property
ScreenColor_Set_Property
SaveDirectory_Set_Property
NotchType_Set_Property

EnableDarkMode

Enable dark mode mockup

  • Input type: boolean

FrameColor

Set the frame color of the mockup. Example: '#1F2937' for a dark gray frame.

  • Input type: text

ScreenColor

Set the screen color of the mockup (in light mode). Example: '#FFFFFF' for a white screen.

  • Input type: text

CornerRadius

Set corner radius of the device frame. Example: 10 for a 10dp corner radius.

  • Input type: number

BezelWidth

Set the bezel width. Example: BezelWidth(10) for a 10dp bezel width.

  • Input type: number

DeviceName

Set the device type label that appears above the mockup. For example: SetDeviceType("iPhone 14 Pro")

  • Input type: text

ShowDeviceName

Show or hide the device type label

  • Input type: boolean

ShowNotch

Show or hide the notch

  • Input type: boolean

BackgroundColor

Set the background color of the mockup container. Example: BackgroundColor('#FFFFFF') for a white background.

  • Input type: text

NotchType

Set notch type: 1=iPhone notch, 2=punch hole, 3=pill shape, 4=slim notch, 5=wide notch, 6=double punch hole, 7=dynamic island, 8=waterdrop, 9=no notch

  • Input type: number

LoadScreenImage

Load an image from a URL, file path (like e.g. /storage/emulated/0/Pictures/demo.png

  • Input type: text

LoadBackgroundImage

Load a background image for the mockup container (like e.g. /storage/emulated/0/Pictures/demo.png

  • Input type: text

FramePaddingLeft

Set the left padding of the phone frame (in dp)

  • Input type: number

FramePaddingTop

Set the top padding of the phone frame (in dp)

  • Input type: number

FramePaddingRight

Set the right padding of the phone frame (in dp)

  • Input type: number

FramePaddingBottom

Set the bottom padding of the phone frame (in dp)

  • Input type: number

FrameShadowElevation

Set the shadow elevation of the phone frame (in dp)

  • Input type: number

FrameRotation

Set the rotation of the phone frame in degrees. Example: FrameRotation(90) for a 90 degree rotation.

  • Input type: number

CaptionText

Set the caption text displayed above the mockup

  • Input type: text

CaptionSubText

Set the caption sub-text displayed below the main caption text

  • Input type: text

CaptionFontSize

Set the font size of the caption text (in sp)

  • Input type: number

CaptionSubFontSize

Set the font size of the caption sub-text (in sp)

  • Input type: number

CaptionTextColor

Set the color of the caption text

  • Input type: text

CaptionSubTextColor

Set the color of the caption sub-text

  • Input type: text

CaptionTextStyle

Set the text style of the caption (0=normal, 1=bold, 2=italic, 3=bold italic)

  • Input type: number

CaptionSubTextStyle

Set the text style of the caption sub-text (0=normal, 1=bold, 2=italic, 3=bold italic)

  • Input type: number

CaptionPaddingLeft

Set the left padding of the caption container (in dp)

  • Input type: number

CaptionPaddingTop

Set the top padding of the caption container (in dp)

  • Input type: number

CaptionPaddingRight

Set the right padding of the caption container (in dp)

  • Input type: number

CaptionPaddingBottom

Set the bottom padding of the caption container (in dp)

  • Input type: number

CaptionRotation

Set the rotation of the caption text in degrees. Example: CaptionRotation(90) for a 90 degree rotation.

  • Input type: number

ShowVolumeButtons

Show or hide the volume buttons

  • Input type: boolean

ShowPowerButton

Show or hide the power button

  • Input type: boolean

ButtonColor

Set the color of the phone buttons. Example: ButtonColor('#FF0000') for a red button.

  • Input type: text

ImageQuality

Set the image quality for JPEG format (1-100). Only applies when saving as JPEG.

  • Input type: number

SaveDirectory

Set the default directory to save images to. If empty, will use the external storage Pictures directory

  • Input type: text

Getters:

DeviceMockup has total 2 getter properties.

ImageQuality_Get_Property
SaveDirectory_Get_Property

ImageQuality

Set the image quality for JPEG format (1-100). Only applies when saving as JPEG.

  • Return type: number

SaveDirectory

Set the default directory to save images to. If empty, will use the external storage Pictures directory

  • Return type: text
Desktop Mockup

:jigsaw: Desktop

This component is developed by th using Fast.
This component provides a realistic desktop device mockup.
It is designed to simulate the look and feel of a desktop device, allowing for a more immersive user experience.
The component is developed by th using Fast, ensuring a high level of detail and realism.
The component is highly customizable, allowing developers to tailor the appearance and behavior to their specific needs.
With its advanced features and realistic design, this component is ideal for creating engaging and interactive desktop Screenshot Mockups.
Telegram | GitHub
Blogger | YouTube
Find More Extension
Terms & Conditions

SaveFailed_Event
SaveSuccess_Event

BackgroundRGB_Method
BackgroundGradient_Method
ScreenGradient_Method
SaveFrameAsPNG_Method

SaveFrameAsJPEG_Method
SaveAsPNG_Method
SaveAsJPEG_Method
LoadIMacScreenImage_Method
IMacMockup_Method

CustomizeIMacMockup_Method
CaptionPadding_Method

ImageQuality_Set_Property
ImageQuality_Get_Property
IMacName_Set_Property
DarkMode_Set_Property
DarkMode_Get_Property
CaptionTextStyle_Set_Property
CaptionTextColor_Set_Property
CaptionText_Set_Property
CaptionSubTextStyle_Set_Property
CaptionSubTextColor_Set_Property
CaptionSubText_Set_Property
CaptionSubFontSize_Set_Property
CaptionRotation_Set_Property
CaptionPaddingTop_Set_Property
CaptionPaddingRight_Set_Property
CaptionPaddingLeft_Set_Property
CaptionPaddingBottom_Set_Property
CaptionFontSize_Set_Property
BackgroundColor_Set_Property
ShowIMacName_Set_Property
ShadowElevation_Set_Property
SaveDirectory_Set_Property
SaveDirectory_Get_Property
LoadBackgroundImage_Set_Property

Events:

Desktop has total 2 events.

SaveSuccess

Event raised when the mockup is successfully saved to a file

Parameter Type
filePath text

SaveFailed

Event raised when there is an error saving the mockup

Parameter Type
errorMessage text

Methods:

Desktop has total 11 methods.

IMacMockup

Add iMac style desktop mockup to the given arrangement

Parameter Type
arrangement component

BackgroundRGB

Set background color using RGB values (0-255 for each)

Parameter Type
red number
green number
blue number

BackgroundGradient

Set a gradient background with start and end colors. Example: BackgroundGradient('#FF0000', '#0000FF', true) for a horizontal gradient from red to blue.

Parameter Type
startColorHex text
endColorHex text
isHorizontal boolean

ScreenGradient

Set the screen background to a gradient (in light mode). Example: ScreenGradient('#FF0000', '#0000FF', true) for a horizontal gradient from red to blue.

Parameter Type
startColorHex text
endColorHex text
isHorizontal boolean

CaptionPadding

Set the padding of the caption container (in dp)

Parameter Type
left number
top number
right number
bottom number

SaveAsPNG

Save the current mockup as a PNG image. Returns the full path to the saved file or empty string if failed.

Parameter Type
fileName text
directory text

SaveAsJPEG

Save the current mockup as a JPEG image with specified quality (1-100). Returns the full path to the saved file or empty string if failed.

Parameter Type
fileName text
directory text
quality number

SaveFrameAsPNG

Save only the desktop frame portion as PNG image (without the background)

Parameter Type
fileName text
directory text

SaveFrameAsJPEG

Save only the desktop frame portion as JPEG image (without the background). Example: SaveFrameAsJPEG('myDesktop', 'path/to/directory', 90)

Parameter Type
fileName text
directory text
quality number

LoadIMacScreenImage

Load an image into the iMac mockup screen

Parameter Type
imagePath text

CustomizeIMacMockup

Customize the iMac mockup dimensions and appearance

Parameter Type
screenWidth number
screenHeight number
standWidth number
standHeight number
screenBorderColor text
chinColor text
standColor text

Setters:

Desktop has total 21 setter properties.

IMacName

Set the device type label that appears above the mockup. For example: IMacName("iMac 24-inch")

  • Input type: text

ShowIMacName

Show or hide the device type label

  • Input type: boolean

BackgroundColor

Set the background color of the mockup container. Example: BackgroundColor('#FFFFFF') for a white background.

  • Input type: text

LoadBackgroundImage

Load a background image for the mockup container (like e.g. /storage/emulated/0/Pictures/demo.png

  • Input type: text

ShadowElevation

Set the shadow elevation of the desktop frame (in dp)

  • Input type: number

CaptionText

Set the caption text displayed above the mockup

  • Input type: text

CaptionSubText

Set the caption sub-text displayed below the main caption text

  • Input type: text

CaptionFontSize

Set the font size of the caption text (in sp)

  • Input type: number

CaptionSubFontSize

Set the font size of the caption sub-text (in sp)

  • Input type: number

CaptionTextColor

Set the color of the caption text

  • Input type: text

CaptionSubTextColor

Set the color of the caption sub-text

  • Input type: text

CaptionTextStyle

Set the text style of the caption (0=normal, 1=bold, 2=italic, 3=bold italic)

  • Input type: number

CaptionSubTextStyle

Set the text style of the caption sub-text (0=normal, 1=bold, 2=italic, 3=bold italic)

  • Input type: number

CaptionPaddingLeft

Set the left padding of the caption container (in dp)

  • Input type: number

CaptionPaddingTop

Set the top padding of the caption container (in dp)

  • Input type: number

CaptionPaddingRight

Set the right padding of the caption container (in dp)

  • Input type: number

CaptionPaddingBottom

Set the bottom padding of the caption container (in dp)

  • Input type: number

CaptionRotation

Set the rotation of the caption text in degrees. Example: CaptionRotation(90) for a 90 degree rotation.

  • Input type: number

ImageQuality

Set the image quality for JPEG format (1-100). Only applies when saving as JPEG.

  • Input type: number

SaveDirectory

Set the default directory to save images to. If empty, will use the external storage Pictures directory

  • Input type: text

DarkMode

Set to true for dark mode, false for light mode

  • Input type: boolean

Getters:

Desktop has total 3 getter properties.

ImageQuality

Set the image quality for JPEG format (1-100). Only applies when saving as JPEG.

  • Return type: number
Laptop Mockup

:jigsaw: Laptop

This component is developed by th using Fast.
This component provides a realistic laptop device mockup with customizable screen content.
It is designed to simulate the look and feel of a real laptop, allowing for a more immersive user experience.
The component is highly customizable, allowing developers to tailor the appearance and behavior to their specific needs.
With its advanced features and realistic design, this component is ideal for creating engaging and interactive laptop ScreenShot Mockup.
Telegram | GitHub
Blogger | YouTube
Find More Extension
Terms & Conditions

Smart Watch

:jigsaw: SmartWatch

This component is developed by th using Fast.
This component provides a realistic smartwatch device mockup with customizable properties.
It is designed to simulate the look and feel of a real smartwatch, allowing for a more immersive user experience.
The component is developed by th using Fast, ensuring a high level of detail and realism.
It includes features for customizing the watch face, buttons, and bands.
The component is highly customizable, allowing developers to tailor the appearance and behavior to their specific needs.
With its advanced features and realistic design, this component is ideal for creating engaging and interactive smartwatch mockups.
Telegram | GitHub
Blogger | YouTube
Find More Extension
Terms & Conditions

Thank

TechHamara

  • Thanks @JEWEL your file picker extension. To use on load image/Screenshot to Mockup.
  • Feel free to contact us any quarry or suggestions.
  • More Documents on GitHub here on limit characters 32000 only.
Next Update
  • Phone Backside Mockup implement.