Draw a portion of a gradient?

For general discussion related FlowStone
Post Reply
Perfect Human Interface
Posts: 643
Joined: Sun Mar 10, 2013 7:32 pm

Draw a portion of a gradient?

Post by Perfect Human Interface »

Hi all. I'm working on some GUI elements currently, and I know often with things like bar meters and slider controls it's common to have gradients on them. However if you simply draw a gradient in FS to the dimensions of the bar, the full range of the gradient is always scaled to the height of the bar (meaning even if the bar is at 25% it scales 100% of the gradient within that area) and it looks funny.

One possible solution to this is to draw the gradient full-scale, then draw a "background" color on top of the gradient to be the negative space in the bar/meter. This works perfectly fine, however, it doesn't allow for proper transparency if you wanted something other than a solid drawn color as the background.

Seeking another solution to this, I thought I could use Float to Area with the Redraw Area primitive to simply draw a portion of the gradient in the view. I tried this, but I realized (if I'm not mistaken) that even if it's only "redrawing" that area, the rest of the area in the view is still "drawn" and doesn't just un-draw itself (I think that's how it works).

So what I'm seeking is a way to draw this gradient bar without scaling the gradient and while achieving proper transparency. Any input is welcome and appreciated.

Edit: I believe I could use the method I attempted before if I also redraw a background element before redrawing the gradient area, but I would much prefer to maintain "true" transparency without having to specify a background, such that anything I place this over will show through.

I think I may be able to fake it by drawing the full gradient scaled, but adjusting the 2nd color closer to the first as it's drawn smaller. Since the gradient is linear, I think that will work? I'm not sure how to blend colors given just RGB/HSV but I think I can look that up.
TheOm
Posts: 103
Joined: Tue Jan 28, 2014 7:35 pm
Location: Germany

Re: Draw a portion of a gradient?

Post by TheOm »

I think you might be looking for the clip primitive.
Attachments
clip.fsm
(7.41 KiB) Downloaded 982 times
Perfect Human Interface
Posts: 643
Joined: Sun Mar 10, 2013 7:32 pm

Re: Draw a portion of a gradient?

Post by Perfect Human Interface »

Works beautifully. Thanks so much. :)
User avatar
Nubeat7
Posts: 1347
Joined: Sat Apr 14, 2012 9:59 am
Location: Vienna
Contact:

Re: Draw a portion of a gradient?

Post by Nubeat7 »

in ruby you can define an area for the gradient brush (whole size) and an area to draw (value)
Attachments
schematic1.fsm
(7.33 KiB) Downloaded 931 times
tulamide
Posts: 2714
Joined: Sat Jun 21, 2014 2:48 pm
Location: Germany

Re: Draw a portion of a gradient?

Post by tulamide »

Just one week in hospital and already so much to read! You're first :P

Perfect Human Interface wrote:I'm not sure how to blend colors given just RGB/HSV but I think I can look that up.
You already got the help you needed, but since the following is a more general question I thought I'd point to my linear color interpolation module, which does exactly that. Since it's "green" you should be able to follow its logic.
Linear Color Interpolation
"There lies the dog buried" (German saying translated literally)
Post Reply