FaceRate (Blocks only version)

I really liked this rating system!

Visually simple and straightforward. Thanks @mahmoud_hooda for sharing it.

For the ones who would like a blocks-only version (not extension), I spent a couple of hours trying to replicate it in a canvas and it came up pretty good.

Keep in mind that the extension version will be easier to implement in your apps. But if you want to customize it like change colors, line thickness or anything you want and you are not good at editing extensions (just like me! :grin:), you can use this version made with just a canvas and a dragging event.


This is how you set it to read the value into a label:

This is the procedure that draw the face, let you interact with it and returns the value.

If you see a way to optimize this or find any errors, please post it.

To implement it in your projects, open this aia file, copy the procedure in the backpack, and paste it into your project. Just make sure the canvas you use is square, not rectangular. The procedure will scale the face according to the size of the canvas.

AIA fie:
FaceRate_BlocksOnly.aia (74.5 KB)


Really nice work, it is better than my extension and i have some problems with my extension he want some updates but now i will not do that , are you allow to share it on my extension topic ?

Well, it has it’s pros and cons.
An extension is better for when you have a big app with too many blocks, or you want something implemented quickly and fast.
The blocks version is better if you need to customize the look of the component, or sometimes when there are compatibility problems with another extension.

You can go ahead and post it anywhere, no problem. It’s free to use as you wish! :+1:


My secret desire was to add eyes on it! :grin:
Thanks for the customisable version.


Great example. Tried to load the example in App Inventor but that didn’t work. Could you post block images that can be just dragged and dropped in the editor?

I could drag and drop the dragged block but not the other one.


This can be dragged and dropped in the block editor.

moodface.aia (5.7 KB)


But some users using free plan on kodular so using blocks is better for them, i think

1 Like

This way you can give your face a color depending on the value coming back from the FaceRate procedure.


Nice @Peter :heart:

1 Like

Even better with eys.

moodface.aia (6.5 KB)


You could even move the eyes a bit if you want to. In this case they are going up voor bad and down for good.


Oh, yes! I didn’t think of that! One good reason indeed.

1 Like

Awesome! The color really gives a better feel of the rating you are about to give.


Looks great! Thanks for customizing it.


I used the “Download blocks as PNG” option to get that image. I have no idea why is not draggable! I’ll try again and replace the image.

1 Like

Ok, I found out why it’s not draggable.
When an image is too big, Discourse creates a smaller version of it and uses it as a thumbnail.
If you click on the thumbnail, the original image is shown. That one is draggable. I just tried it and it works.


Really nice work guy’s @Italo @Peter @Gordon_Lu :heart:


Thanks for your extension too!

1 Like