Announcement

Collapse
No announcement yet.

Cropping image or masking layer?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • John Kevin
    commented on 's reply
    Hi,

    Thank you for your reply. Yes, the process is not dynamic, and you need to have a fix location of the image.
    Okay, sure. Good luck with your project!

    Best Regards,
    Kevin
    Last edited by John Kevin; 29 February 2020, 01:21 PM.

  • klaasdc
    replied
    Thanks for the example. I understand what you mean now. But with this approach I cannot change the position or background image dynamically, which is what I was hoping to do in a later phase☺
    I'll look at generating the inner battery level at various level of 'fullness'

    Leave a comment:


  • John Kevin
    replied
    Hi,

    That method seems to be rather complicated. I think doing this all in the Smart Widget Editor will be easier. As mentioned previously,
    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.
    The bottom part of the bottom cap needs to be layered with the background of the form while the top part of the bottom cap must be transparent in order for the charge level to slide through

    Please have a look at the attached file. Perhaps you can use this as a reference.

    Note: The image for the bottom cap is not perfectly smooth, perhaps, you can edit this far better.

    I hope this helps.

    Best Regards,
    Kevin
    Attached Files

    Leave a comment:


  • klaasdc
    replied
    So, I implemented the gauge with Userimages now, similar to the rpm bar from the example on the forum. My code looks like this:

    Code:
    var Range := 100;
    
    func ImageSlide(var Baseimage var Coverimage, var range, var value)
    
    var xpos;
    var ypos;
    var height;
    var width;
    var step;
    
    xpos := img_GetWord(hndl, Baseimage, IMAGE_XPOS);
    ypos := img_GetWord(hndl, Baseimage, IMAGE_YPOS);
    height := img_GetWord(hndl, Baseimage, IMAGE_HEIGHT);
    width := img_GetWord(hndl, Baseimage, IMAGE_WIDTH);
    
    step := height / range;
    if(value > 0)
    gfx_ClipWindow(xpos, ypos, xpos + width, ypos + (value * step));
    gfx_Set(CLIPPING, ON);
    img_Show(hndl,Baseimage);
    gfx_Set(CLIPPING, OFF);
    endif
    gfx_ClipWindow(xpos, ypos + (value * step), xpos + width, ypos + height);
    gfx_Set(CLIPPING, ON);
    img_Show(hndl,Coverimage);
    gfx_Set(CLIPPING, OFF);
    
    img_Show(hndl,iUserimages1);
    img_Show(hndl,iUserimages0);
    
    endfunc
    To draw the battery top and bottom cap after the dynamic part was drawn, there are 2 img_Show functions at the end. However, as there is no Z support, the background of the form is drawn on top of the Baseimage and Coverimage... Even if this would be solved by adding these parts to the Baseimage and Coverimage, the same problem would occur when drawing the internal circle inside the battery. 😭
    In workshop4 however, it seems as if it would work, as images are actually drawn properly on top of each other. Only when you transfer it to the display the issue becomes apparent.
    I'm slowly losing the hope to ever get this to work properly. There is always some limitation in the system.
    Next I will try to generate all of the images separately, but I had hoped to be able to avoid such brute-force approach.

    Click image for larger version

Name:	battgauge_test.jpg
Views:	81
Size:	117.9 KB
ID:	71361

    Leave a comment:


  • John Kevin
    commented on 's reply
    Hi,

    Sure, please keep me posted.

    Best Regards,
    Kevin

  • klaasdc
    replied
    Thanks for your support Kevin.
    I'll try the user images and if that does not work I fall back to generating the frames externally.

    Leave a comment:


  • John Kevin
    commented on 's reply
    Hi,

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

    Best Regards,
    Kevin

  • John Kevin
    commented on 's reply
    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
    replied
    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?

    Leave a comment:


  • klaasdc
    replied
    Originally posted by John Kevin View Post
    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
    Attached Files

    Leave a comment:


  • John Kevin
    replied
    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

    Leave a comment:


  • klaasdc
    replied
    Originally posted by John Kevin View Post
    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 😳 🙏

    Leave a comment:


  • John Kevin
    replied
    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

    Leave a comment:


  • klaasdc
    started a topic Cropping image or masking layer?

    Cropping image or masking layer?

    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?

    Click image for larger version  Name:	batt_smartgauge.JPG Views:	0 Size:	12.4 KB ID:	71267
    Thanks,
Working...
X