📗 [Free] Base64 Encoded Image to Component

Base64 Image To Component

Adds a background image to just about any user interface component in the palette, even those that do not have a built-in image property. If you want to use base64 encoded images, this may provide some flexibility in your block coding and UI design.

  • Latest version : 1.0
  • Tested : tested on App inventor 2 (n187d), in companion (2.61u) on Android 10.
  • Released : 2021-10-29T23:00:00Z
  • Last updated : 2021-10-29T23:00:00Z
  • Built : using the RUSH Extension Builder by @shreyash

Blocks / Usage

This comes with some features / quirks, depending on the component.

I originally set about creating an extension purely to add a base64 background image to the vertical and horizontal arrangements, but found that the code will place a background image on most components found in the User Interface palette.

There are some gotchas with this method, which I will call features (you might call them bugs, or just plain lazy :wink: )

The method places the image at the "back of the stack", it will be set below any existing image or background that the component may have. You will need to use the components built-in blocks to remove the existing image or colour to see the base64 image. The benefits to this are that you can set two images to one component, switch between the two, or have a transparent one on top of the base64 one (set a plain colour image as the background). Some components will need their sizes managed, because they will show the image at full size. Some components will be able to remove the base64 image through the built-in property setting for an image, others will require the provided remove block.

Tested with:

vertical arrangement, horizontal arrangement, vertical scroll arrangement, horizontal scroll arrangement, image, canvas, textbox, label, checkbox, switch, slider, listview. Oddly doesn't work with screen.

AIX:
Base64EncodedImageToComponent

Enjoy :smiley: , and all feedback and comments welcome.

Available for use in any MIT AppInventor projects or competitions

#####################################################################
This work by TIMAI2 is licensed under a
Creative Commons Attribution-ShareAlike 4.0 Unported License with attribution.
Please use name = TIMAI2 and link to this source page when giving credit.
#####################################################################

Also see: Base64 Tools

and some help required...

[NOTE]
If anyone can define a method for doing the same to a screen background image, please let me know.

base64Component.java.txt (1.8 KB)

12 Likes

Cool one this time too...
:wink:

1 Like