• AVR Freaks

Helpful ReplyPercentage Bar

Author
bordlab
Starting Member
  • Total Posts : 56
  • Reward points : 0
  • Joined: 2018/01/29 06:45:53
  • Location: 0
  • Status: offline
2018/01/30 06:52:28 (permalink)
0

Percentage Bar

Background: MPLAB X IDE v4.05, XC32 v1.44B, Harmony v2.05.01, PIC32MZ2064DAG169, PIC32MZ2064DAG169 development board with display.
 
I would like to have a percentage bar that I can programmatically change the percentage of the bar that is viewable so that I can easily represent the bar at different stages of percent as time goes on.  The bar will be a raw image and needs to look just as the designer wants.
 
My first though is put an alpha gradient over this image so that I can change the gradient to make more or less of the bar visible.  I have tried setting the color using (set_drawGradientColor, defDrawGradientColorSet) with no luck.
 
Next I tried to reduce the image size from the right so that it becomes less and less visible.  I am trying to do this using (laWidget_SetWidth, laWidget_Resize, laWidget_SetPosition).  I can’t seem to get this to work as expected.
 
Any help you can give with either of these solutions or if there is a better one I would love to hear it.
 
Thank you
Andy

Attached Image(s)

#1
Ed@Microchip
Super Member
  • Total Posts : 152
  • Reward points : 0
  • Joined: 2017/04/06 09:39:29
  • Location: 0
  • Status: offline
Re: Percentage Bar 2018/01/30 09:30:31 (permalink) ☄ Helpfulby bordlab 2018/01/30 12:24:08
0
Hi bordlab,
 
   You should be able to just use laWidget_SetWidth to clip the right side of the image. Make sure you set the image alignment to Horizontal -> Left. If not, the default alignment will always center the image in the widget and it will get clipped on both ends when you reduce the width.
 
Thanks,
 
Ed
 
#2
bordlab
Starting Member
  • Total Posts : 56
  • Reward points : 0
  • Joined: 2018/01/29 06:45:53
  • Location: 0
  • Status: offline
Re: Percentage Bar 2018/01/30 12:05:41 (permalink)
0
I figured out why it did not seem to work.  I was going from the full image and setting the width to smaller.  The widget does not redraw properly so it looks like the images is the same.  I figured this out by setting the image to a small size on startup then increased it as I went.  This worked great.
 
So now my question is how to I force a redraw of the widget/layer so that it clears the image that was drawn the first time and replaces it with an image of the new width?
#3
Ed@Microchip
Super Member
  • Total Posts : 152
  • Reward points : 0
  • Joined: 2017/04/06 09:39:29
  • Location: 0
  • Status: offline
Re: Percentage Bar 2018/01/30 13:19:59 (permalink)
0
bordlab
 
So now my question is how to I force a redraw of the widget/layer so that it clears the image that was drawn the first time and replaces it with an image of the new width?




Try calling laWidget_Invalidate(<your image widget>) to force a redraw.
 
#4
bordlab
Starting Member
  • Total Posts : 56
  • Reward points : 0
  • Joined: 2018/01/29 06:45:53
  • Location: 0
  • Status: offline
Re: Percentage Bar 2018/01/31 06:44:35 (permalink)
0
I have this code on a button press.  I can see the width go down on each click.  The image does not change as the width goes down.  On init the width is set to the image width. 
 

    width -= 10;
    laWidget_SetWidth((laWidget*)FilterbarImage, width);
    laWidget_Invalidate(FilterbarImage);

 
Once the image is present I do not see the width decreasing.  I only see it when the image is set small at the beginning and the width is increased on a button press.  Should I invalidate the layer or screen?
 
Update:
Not sure if this has any effect but when I call laWidget_Invalidate its laWidget_RectToLayerSpace for the laLayer_AddDamageRect is of the new size that I have when I do laWidget_SetWidth.  This means I am not invalidating the image area that I need to be cleared.  It then redraw the current image and not the part of the image that should not be on the display.  Any suggestions?
 
Update:
I went into the laWidget_Invalidate code and forced the area to be larger.  This still did not help the image that is not being displayed from reducing the width to be clean up and removed from the screen. 

    filter_width -= 10;
    laWidget_Invalidate((laWidget*)FilterbarImage);
    laWidget_SetWidth((laWidget*)FilterbarImage, filter_width);
   
    layer = laUtils_GetLayer((laWidget*)FilterbarImage);
    // invalidate entire area
    area = laWidget_RectToLayerSpace((laWidget*)FilterbarImage);
    area.width = 320;
    laLayer_AddDamageRect(layer, &area, LA_FALSE);

 
Thank you
Andy
post edited by bordlab - 2018/01/31 08:38:06
#5
Ed@Microchip
Super Member
  • Total Posts : 152
  • Reward points : 0
  • Joined: 2017/04/06 09:39:29
  • Location: 0
  • Status: offline
Re: Percentage Bar 2018/01/31 09:22:12 (permalink) ☄ Helpfulby bordlab 2018/01/31 10:51:39
0
 
Hi Andy,
 
   Here's a sample project that works for me on an PIC32MZ2064DAG169 + MEBII with 4.3" display. I'm able to increase/decrease the width of an image widget using buttons (plus & minus). Check it out and see if it helps with your design. It works for both cases where the image widget is at minimum (1 pixel) or full width. The image width is incremented/decremented at button press using the following routines:
 
 
// ButtonWidget2 - PressedEvent
void ButtonWidget2_PressedEvent(laButtonWidget* btn)
{
    // Custom Action
    int32_t width = laWidget_GetWidth((laWidget*)ImageWidget1);
    width += 10;
    
    if (width <= 420)
     laWidget_SetWidth((laWidget*)ImageWidget1, width);
}

// ButtonWidget3 - PressedEvent
void ButtonWidget3_PressedEvent(laButtonWidget* btn)
{
    // Custom Action
    int32_t width = laWidget_GetWidth((laWidget*)ImageWidget1);
    width -= 10;
    
    if (width >= 0)
     laWidget_SetWidth((laWidget*)ImageWidget1, width);
     
}

 
Thanks,
 
Ed
#6
bordlab
Starting Member
  • Total Posts : 56
  • Reward points : 0
  • Joined: 2018/01/29 06:45:53
  • Location: 0
  • Status: offline
Re: Percentage Bar 2018/01/31 10:51:08 (permalink)
0
Your program works great for me.  I still can't figure out why mine is not working.  The only real difference I could see is that I do not have a default scheme.  If that is what the problem is...  How do I set one up?  Attached is my test code for this.
#7
Ed@Microchip
Super Member
  • Total Posts : 152
  • Reward points : 0
  • Joined: 2017/04/06 09:39:29
  • Location: 0
  • Status: offline
Re: Percentage Bar 2018/01/31 11:11:10 (permalink)
0
Hi Andy,
 
    Yes, the lack of color scheme for the layer is the problem. A 'defaultScheme' should have been created automatically the first time you started the graphics composer, not sure why it has been removed. Without a color scheme, the library does not have a color to draw the background layer with, thus the previous rendered image persists. This is evident when you reduce the width, but not when you increase the size (since new image section is drawn).
 
   To add a scheme, click the "+" sign in the schemes window on the lower left corner of the composer window. You can change the colors to your preference. Assign that scheme to the layer. For some reason, I'm unable to assign a scheme to myLayer0 in your project. So I just added a new layer, assigned the new scheme to the layer, moved the widgets to the new layer and removed the old one. I also switched the background type of the image widget to "None".
 
  With these changes, I can see the image width reduced when I press the button. Give the above steps a try and see if it works for you.
 
Thanks,
 
Ed
#8
Jump to:
© 2019 APG vNext Commercial Version 4.5