Cropping image or masking layer?

[klaasdc]

Hi,

I am trying to make a custom battery gauge using the Smart Widgets Editor. I got the hang of it but I am stuck on one issue.
The "charge level" image of the battery is placed at the lowest layer and translated "inside" the cylinder based on the actual charge level. However, on layer 1 I placed the bottom cap of the battery, including some drop shadow so the background comes through. As you can see, the charge level image slides under the bottom cap. How can I hide it at the bottom, so I can still use the drop shadow? Is there maybe some kind of cropping function available? Or even better, a way to "mask" a layer?


Thanks,

[John Kevin]

Hello,

We do have an application note regarding Smart Widgets, perhaps the example provided can help you in sorting the problem you are having right now:
AN-00040S Smart Widgets: Tank: https://4dsystems.com.au/blog/4dls-an-00040s/

You can find similar topics on the Smart Widget through browsing app notes in the 4D Website
https://4dsystems.com.au/blog/app-notes

Best Regards,
Kevin

[klaasdc]

Hello,

We do have an application note regarding Smart Widgets, perhaps the example provided can help you in sorting the problem you are having right now:
AN-00040S Smart Widgets: Tank: https://4dsystems.com.au/blog/4dls-an-00040s/

You can find similar topics on the Smart Widget through browsing app notes in the 4D Website
https://4dsystems.com.au/blog/app-notes

Best Regards,
Kevin

Thanks for the reply.
I loaded most of the examples in the Widgets Editor before. In fact, the water tank example mentioned has exactly the same problem I am having. The example has a face image with rounded corners. When the water level is 'low', you can see the blue water image appearing in the rounded corners, as it is moved up and down under the face image. In the case of the example, this could be easily solved by changing the size of the water level image. For my battery gauge this is not an option, as I would like to have the background of the form to come through for the shadow.

After thinking about it more, I see the following options:
* Making each of the individual image frames of the battery level in an external editor.
* Having a crop function on a layer in addition to the rotate/translate functions now.
* Having a layer mask, that 'blocks' parts of the layer's image(s) that does not appear inside the mask.

I think the last 2 options are not in the Smart Widgets Editor and would be a Feature Request 😳 🙏

[John Kevin]

Hi,

Thank you for your reply and for the explanation.

Yes, one option will be generating individual images of the charge level and put it on the User Images widget.

Another option that you can do is layering the bottom of the base image with the background color. When the charge level changes it will not have that effect similar in the attached picture. Although, you mentioned that the bottom cap of the battery is on layer1? and is needed for the drop shadow? Do you want to attach here your project so I can visualize it clearly?

Best Regards,
Kevin

[klaasdc]

Hi,

Thank you for your reply and for the explanation.

Yes, one option will be generating individual images of the charge level and put it on the User Images widget.

Another option that you can do is layering the bottom of the base image with the background color. When the charge level changes it will not have that effect similar in the attached picture. Although, you mentioned that the bottom cap of the battery is on layer1? and is needed for the drop shadow? Do you want to attach here your project so I can visualize it clearly?

Best Regards,
Kevin

Hi John,
Thanks!
Yes, I use the transparancy of layer 1 to let the background of the form come through.
I added the zipped project in attachment,

Best regards,
Klaas

[John Kevin]

Hi Klaas,

Thank you for the attached files. The image files look neat. Great job!

The only way for the 'charge level' to not exceed the bottom cap is to color it with the background color, otherwise, the transparent area will always let the charge level to be seen. You could manually edit this using your own graphics editor. Still, the easiest route will be to generate images of the battery per frame.

Best Regards,
Kevin

[klaasdc]

On this forum I found a nice example using Magic Code on cropping 2 images to make a rev counter. I'm sure I could implement my battery gauge like that, but when loading the PNG images of the battery, the alpha channel is replaced by white 😭
The Smart Widget supports the PNG alpha channel but the Image widget not?

[John Kevin]

Hi,

You could use the "User Images" widget in this case.

Best Regards,
Kevin