Ability to assign No Color to a color property via a Block

aia

#1

Most visible components allow one to choose a color or “no color” in their properties in the Designer.

In the Blocks, however, one can only assign a color. “No color” is not a choice in the list of colors.

If reasonably feasible, kindly add that choice to the color block. (Or a separate “NoColor” block).


Frequently Asked Questions (FAQ)
#2

@dddiam, this exists already, but when coding you don’t use a value like No Color instead you specify an alpha value of 0 to make something transparent.

When you use the Make a Color block you can specify either 3 or 4 parameters, R,G,B or R,G,B,a, These letters stand for Red, Green, Blue and Alpha, and can be any value between 0 and 255 (2^8 for those of you who work in binary)

Alpha values correspond to a colour’s opacity, so in your case you are telling it to have no opacity, in other words that it should be see through.

Some languages uses alpha values between 0 and 1, the App Inventor documentation makes reference to 0 and 100 but Thunkable accepts alpha values between 0 and 255. It’s possible that App Inventor changed this and haven’t updated their docs yet?

Anyway, you just need to use the make color block as in the picture below, and that should work for you.


I’ve also included a demo app of the code in action.

transparencyExample.aia (124.2 KB)

transparencyExample.apk (2.2 MB)


Notifier background color with alpha value (transparency)
[UPDATED] Quickly Creating Material Design Colours in Thunkable
Problem with slider
Custom colors on designer page
Understanding Data Types in Thunkable
Color Changer App Tutorial
Decreasing opacity
Queria fazer meu app mudar a cor da status bar e da navbar de acordo com a cor da tela a ser aberta
#3

You can use this block for “none” color.


#4

So it turns out this works too! :slight_smile:

I did a bit of experimenting and from what I can see, Thunkable uses unsigned ints to represent their colours. In other words there are 2^32 different possible values, in other words any number between 0 and 4,294,967,295 are valid inputs.

The channels are assigned as follows:
Blue: 2^0 to 2^7 - 1
Green: 2^8 to 2^15 - 1
Red: 2^16 to 2^23 - 1
Alpha: 2^24 to 2^31 -1

For some reason (possibly an actual bug!) passing any colour property a value of 0 will result in a white screen but then - technically speaking - passing any number between 1 and 16777216 will result in a transparent colour being applied.

I’ve updated my slider example to display the full 32 bit number in the title of Screen1.
transparencyExample.apk (2.2 MB)


#5

The plot thickens:

According to @Kim_Heaver, using a value of 0 for the colour sets it to the Default - which tallies with my experiences.

Anyway, I wonder if one of the mods (@barreeeiroo or @Conor?) or admins (@amrita?) might move this to #discuss instead?


#6

I’ve changed the category.


#7

Is it working on button with image?


#8

As long as you use a transparent image it seems to work fine @Ali_Aydin

In the screenshot below, the top image is a transparent .png and the bottom image has a solid white background. They work in both Thunkable and as .apk


#9

Thank you for the demo app, and thank you for all of the additional clarification on how the colors and alpha channel are implemented!

David D.


#10

All of the above understandings make sense if you think in hexadecimal (like us old-time mainframe systems programmers).

From this discussion thread, I learned that a color in Thunkable is 0XaaRRGGBB. (Thank you everybody for your replies! And thank you for the transparency demo app!)

Thus 16777215 is 0X00FFFFFF, or totally transparent white.
And 0 is 0X00000000, which is totally transparent black.
And 1 is 0X00000001, which is totally transparent almost black.
Any number from 0 to 16777215 (0X00RRGGBB) is totally transparent.
Add 0XFF000000 (4278190080) to any color, and you will make that color totally opaque. (I haven’t checked yet to see whether or not Thunkable treats the highest order bit, 2^31, as a sign).

Of course the “make color” block does all that arithmetic for you.
.


#11

Note: Through experimenting, I discovered that (at least in Thunkable), alpha=0 is a special case, meaning that the alpha channel is not in use, and all colors are opaque.

The transparency values are alpha=1 (completely transparent, or no color) through alpha=255 (completely opaque).

Thus, alpha=0 and alpha=255 appear the same when painted.

[I do not know whether or not this is consistent with my previous experiments. I will need to check. Sometimes I use the makecolor block, and sometimes I calculate the color as a 32-bit, unsigned integer or as a hexadecimal value.]


#12

As far as I could tell, using a value of 0 give you the “default” colour, so 0 and 255 only appear to be the same if you don’t change any other colour properties in your app (screen background etc)

I’m sure there are instances where this is useful to know, but I haven’t come across one yet! :grinning: