[F/OS] 🖼️ ViewUtil: Convert a component into an image!

Extensions
, , , ,
1

:computer: Introduction

An extension that creates an image of a visible component. This can be useful to screenshot components with particular information that needs to be stored, such as an arrangement that contains a bill, or images of buttons for other buttons.

Thanks to @Jerin_Jacob for the Convert component to image, I took inspiration from his extension.

:date: Release date: 2022-03-23T03:30:00Z

:package: Package name: com.gordonlu.viewutil.aix

:clock11: Version: 4

:open_book: Documentation

Event blocks

Failed

image

This event is fired when the extension has encountered an error. Possible reasons: quality is not a number between 0 and 100, wrong path, etc.

Parameters: error = text

Saved

component_event

This event is fired when the extension has successfully saved the image of the component. The resulting file path is absolute, while the file size is in bytes.

Parameters: filePath = text, fileSize = number (long)

Method blocks

SaveComponentAsImage

component_method

Saves an image of the component to the given destination path with the given quality. The path can be:

  • An absolute path (starting with /storae/emulated/0/)
  • A full path (starting with file:///storage/emulated/0/)
  • A path with no prefixes that point to the app-specific directory (such as button.png).

Currently only PNG, JPG and JPEG images are supported. The quality parameter should be a value between 0 and 100.

Parameters: component = component, path = text, quality = number (int)

:inbox_tray: Downloads

AIX:
com.gordonlu.viewutil.aix (7.5 KB)

AIA:
ViewUtilTest.aia (10.3 KB)

:lock: Open Source

This extension is built with Rush. As this forum does not support ZIP files, please rename the file extension from AIA to ZIP and unzip the file. This "AIA" will not work when you try to import it into App Inventor.

view-util-src.aia (13.9 KB)

Versions 1 to 3 made with Niotron IDE, compiled with Rush from version 4 onwards.

If you like this extension, please click the :heart: Like button below. Extensions take a long time to make and maintain, and I geniunely appreciate your motivation.

15 Likes
2

Is this extension changes components into image? If yes then it is very usefull extension for me

3

Yes, it changes components into images.

1 Like
4

:grinning: :grinning: :grinning: :grinning_face_with_smiling_eyes:

5

Do note that this extension is still not capable of taking screenshots of screens. That will be a feature for later.

If you want whole screens, use Jerin's extension, and if you want the screen to include status + navigation bars, use @Taifun's screenshot extension.

My screenshot extension is already launched, waiting for approval.

6

Perfect extension :grinning_face_with_smiling_eyes::+1:, add other file types

1 Like
7

Extension is stabilized, which I like...

Anyways, nice extension!

2 Likes
8

Thank you all.

Hmmm...in Android API they removed and added new file types. Because of this, PNG and JPEG are the only types that support all Android versions.

2 Likes
9

:chocolate_bar: Version 2!

  • Updated events and added new ones.

Failed

image

This event is fired when the extension has encountered an error. Possible reasons: quality is not a number between 0 and 100, wrong path, etc.

Parameters: error = text

Saved

image

This event is fired when the extension has saved the image at the path.

Parameters: path = text

EDIT: Added to here.

3 Likes
10

Can you add a return block returing base64 of component image without saving it

1 Like
11

Good extension but still don't understand the main idea and how it can be beneficial actually , thanks for providing the aia file to understand what is doing too

12

Could be beneficial if you have labels in an arrangement that has weather data, and you want to export them.

3 Likes
13

Very useful extension. Thanks Gordon. See: https://community.appinventor.mit.edu/t/padding-adding-a-border-extending-an-image/89200

2 Likes
14

Hi Gordon.
I am facing an issue with this SaveComponentAsImage bloc. It works fine, Thanks a lot. But the image is certainly buffered somewhere, and if I try to read it, it fails. It is REALLY written in the file system when the application is closed.
I tried the GalleryRefresh from Taifun tools extension, but it does not help.
Is there a way to force the file to be written, and get an event when it has been written?
Thanks a lot

15

:question:

image

16

Unfortunately this event indicates that the file is saved, but I suppose, it's still in a buffer, or in a cache but not really written in the file system. It is finally written in the file system only when the app is closed.

17

Try viewing the file from the path provided in the event block.

If you can view the image then the file exists and is saved to the file system.

You could also test with the FileExists block from the file component.

How are you using the GalleryRefresh block ? (and can the file actually be viewed in the Gallery?)

18

Most probably the file is stored in ASD?
What about providing some relevant blocks so we do not have to guess?
To be able to view it in the gallery, the image has to be stored in shared storage

Taifun

19

Hi Taifun, yes, you are right, I store in ASD, so refresh gallery cannot be used, it was just a guess / trial I did

20

Regarding the problem itself, it is a little bit more complex. Actually, after save, the file exists, but it is almost empty, it is filled by the image data later / when app is closed. If I connect my phone with USB to access phone app folders, I see that the image file is created, but it is only 62 bytes, once filled with image data after a while or when app is closed, it becomes around one MB: the real image data.
Also if I try to reload the image from the saved file, I do not get the saved image, but a previous one (I assume in the memory cache)
I am going to clean my test app so I can share it with you