Strange Cairo Shading

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Strange Cairo Shading

Stew MacLean
Message
Hi,
 
I'm starting to get the hang of GF/ST::Cairo and hooked into the Handle mechanisim to shade when selected.(after trying to jump through hoops to do a drop shadow dynamically around a png, gave up...).
 
It's looking good
 
The only problem is that when the app opens the shading is slightly darker, than subsequent selects.
 
If I put a one off break point, and then hover over the debugger tool icons, the image progressively goes darker - weird!
 
If anyone has any ideas why the weirdness happens (which I suspect is related to the darker shading) and how to fix this, much appreciated...
 
A big thanks to all the Cairoizers that have helped me get thus far - looking forward to building my tree...
 
Cheers,
 
Stewart
 
============================================
postOpenWith: aBuilder
 
 super postOpenWith: aBuilder.
 self redisplay.
 interface selection: layout rootGOs first.
 treeView invalidateNow.
 
 
 
RoundedBorderHighlightHandle>>displayWith: aPen
 
 | rectangle aGO |
 
 aGO := self owner.
 rectangle := aGO displayBox origin corner: aGO displayBox corner.
 
 aPen cairoDrawOneGC:
  [: cr |   "translates into panel coordinates"
  cr 
   source: (ColorValue hex: 16r767676);
   rectangle: rectangle fillet: 8;
   clip;
   fill;
   paintAlpha: 0.1]

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc
Reply | Threaded
Open this post in threaded view
|

Re: Strange Cairo Shading

Randy Coulman
Stewart,

I've just used Cairo and not GF:ST, but I can suggest a couple of ideas for you:

The progressive darkening typically happens when you're drawing something with a small alpha value and not redrawing the background first.  Instead you keep painting with the same alpha on top of itself over and over again, which makes it darker.  The higher the alpha value, the more obvious the effect and the faster it darkens.  My guess is that when you're in the debugger, you're generating more redraws than normal, which accelerates the effect.

To do a drop shadow, refer to this post by Ken Treis (down near the end):


Randy 


On Tue, Dec 3, 2013 at 1:54 AM, Stewart MacLean <[hidden email]> wrote:
Hi,
 
I'm starting to get the hang of GF/ST::Cairo and hooked into the Handle mechanisim to shade when selected.(after trying to jump through hoops to do a drop shadow dynamically around a png, gave up...).
 
It's looking good
 
The only problem is that when the app opens the shading is slightly darker, than subsequent selects.
 
If I put a one off break point, and then hover over the debugger tool icons, the image progressively goes darker - weird!
 
If anyone has any ideas why the weirdness happens (which I suspect is related to the darker shading) and how to fix this, much appreciated...
 
A big thanks to all the Cairoizers that have helped me get thus far - looking forward to building my tree...
 
Cheers,
 
Stewart
 
============================================
postOpenWith: aBuilder
 
 super postOpenWith: aBuilder.
 self redisplay.
 interface selection: layout rootGOs first.
 treeView invalidateNow.
 
 
 
RoundedBorderHighlightHandle>>displayWith: aPen
 
 | rectangle aGO |
 
 aGO := self owner.
 rectangle := aGO displayBox origin corner: aGO displayBox corner.
 
 aPen cairoDrawOneGC:
  [: cr |   "translates into panel coordinates"
  cr 
   source: (ColorValue hex: 16r767676);
   rectangle: rectangle fillet: 8;
   clip;
   fill;
   paintAlpha: 0.1]

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc




--
Randy Coulman
Email: [hidden email]
Home: http://randycoulman.com
Twitter: @randycoulman      GitHub: randycoulman

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc
Reply | Threaded
Open this post in threaded view
|

Re: Strange Cairo Shading

Stew MacLean
Message
Hi Randy,
 
Thanks for the suggestions - that sounds like what is happening. I guess that there are a couple of redraws occuring during the opening of the interface and the programatic selection of the root node.
 
I have used Ken's routine to generate other buttons, and I'm using it to dynamically generating the cached image for this node (with the image on the right). I did consider doing this for the selected state as well but opted to try and shadow dynamically. Unfortunately by the time I come to do this I've just got a rectangular .png which has already been drawn by the GF/ST framework and I couldn't figure out how to use the masking routine he uses to draw the shadow. I then tried the painting alpha effect, and actually prefer that. Still curious though if it is indeed possible to achieve dynamic shadow of a .png image of a rounded button.
 
Cheers,
 
Stewart
-----Original Message-----
From: Randy Coulman [mailto:[hidden email]]
Sent: 4 December 2013 3:42 a.m.
To: [hidden email]
Cc: VW NC
Subject: Re: [vwnc] Strange Cairo Shading

Stewart,

I've just used Cairo and not GF:ST, but I can suggest a couple of ideas for you:

The progressive darkening typically happens when you're drawing something with a small alpha value and not redrawing the background first.  Instead you keep painting with the same alpha on top of itself over and over again, which makes it darker.  The higher the alpha value, the more obvious the effect and the faster it darkens.  My guess is that when you're in the debugger, you're generating more redraws than normal, which accelerates the effect.

To do a drop shadow, refer to this post by Ken Treis (down near the end):


Randy 


On Tue, Dec 3, 2013 at 1:54 AM, Stewart MacLean <[hidden email]> wrote:
Hi,
 
I'm starting to get the hang of GF/ST::Cairo and hooked into the Handle mechanisim to shade when selected.(after trying to jump through hoops to do a drop shadow dynamically around a png, gave up...).
 
It's looking good
 
The only problem is that when the app opens the shading is slightly darker, than subsequent selects.
 
If I put a one off break point, and then hover over the debugger tool icons, the image progressively goes darker - weird!
 
If anyone has any ideas why the weirdness happens (which I suspect is related to the darker shading) and how to fix this, much appreciated...
 
A big thanks to all the Cairoizers that have helped me get thus far - looking forward to building my tree...
 
Cheers,
 
Stewart
 
============================================
postOpenWith: aBuilder
 
 super postOpenWith: aBuilder.
 self redisplay.
 interface selection: layout rootGOs first.
 treeView invalidateNow.
 
 
 
RoundedBorderHighlightHandle>>displayWith: aPen
 
 | rectangle aGO |
 
 aGO := self owner.
 rectangle := aGO displayBox origin corner: aGO displayBox corner.
 
 aPen cairoDrawOneGC:
  [: cr |   "translates into panel coordinates"
  cr 
   source: (ColorValue hex: 16r767676);
   rectangle: rectangle fillet: 8;
   clip;
   fill;
   paintAlpha: 0.1]

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc




--
Randy Coulman
Email: [hidden email]
Home: http://randycoulman.com
Twitter: @randycoulman      GitHub: randycoulman

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc
Reply | Threaded
Open this post in threaded view
|

Re: Strange Cairo Shading

Randy Coulman
Stewart,

I haven't tried with a .png image.  I've used ImageSurfaces, but not .pngs for this.

Randy


On Tue, Dec 3, 2013 at 9:46 AM, Stewart MacLean <[hidden email]> wrote:
Hi Randy,
 
Thanks for the suggestions - that sounds like what is happening. I guess that there are a couple of redraws occuring during the opening of the interface and the programatic selection of the root node.
 
I have used Ken's routine to generate other buttons, and I'm using it to dynamically generating the cached image for this node (with the image on the right). I did consider doing this for the selected state as well but opted to try and shadow dynamically. Unfortunately by the time I come to do this I've just got a rectangular .png which has already been drawn by the GF/ST framework and I couldn't figure out how to use the masking routine he uses to draw the shadow. I then tried the painting alpha effect, and actually prefer that. Still curious though if it is indeed possible to achieve dynamic shadow of a .png image of a rounded button.
 
Cheers,
 
Stewart
-----Original Message-----
From: Randy Coulman [mailto:[hidden email]]
Sent: 4 December 2013 3:42 a.m.
To: [hidden email]
Cc: VW NC
Subject: Re: [vwnc] Strange Cairo Shading

Stewart,

I've just used Cairo and not GF:ST, but I can suggest a couple of ideas for you:

The progressive darkening typically happens when you're drawing something with a small alpha value and not redrawing the background first.  Instead you keep painting with the same alpha on top of itself over and over again, which makes it darker.  The higher the alpha value, the more obvious the effect and the faster it darkens.  My guess is that when you're in the debugger, you're generating more redraws than normal, which accelerates the effect.

To do a drop shadow, refer to this post by Ken Treis (down near the end):


Randy 


On Tue, Dec 3, 2013 at 1:54 AM, Stewart MacLean <[hidden email]> wrote:
Hi,
 
I'm starting to get the hang of GF/ST::Cairo and hooked into the Handle mechanisim to shade when selected.(after trying to jump through hoops to do a drop shadow dynamically around a png, gave up...).
 
It's looking good
 
The only problem is that when the app opens the shading is slightly darker, than subsequent selects.
 
If I put a one off break point, and then hover over the debugger tool icons, the image progressively goes darker - weird!
 
If anyone has any ideas why the weirdness happens (which I suspect is related to the darker shading) and how to fix this, much appreciated...
 
A big thanks to all the Cairoizers that have helped me get thus far - looking forward to building my tree...
 
Cheers,
 
Stewart
 
============================================
postOpenWith: aBuilder
 
 super postOpenWith: aBuilder.
 self redisplay.
 interface selection: layout rootGOs first.
 treeView invalidateNow.
 
 
 
RoundedBorderHighlightHandle>>displayWith: aPen
 
 | rectangle aGO |
 
 aGO := self owner.
 rectangle := aGO displayBox origin corner: aGO displayBox corner.
 
 aPen cairoDrawOneGC:
  [: cr |   "translates into panel coordinates"
  cr 
   source: (ColorValue hex: 16r767676);
   rectangle: rectangle fillet: 8;
   clip;
   fill;
   paintAlpha: 0.1]

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc




--
Randy Coulman
Email: [hidden email]
Home: http://randycoulman.com
Twitter: @randycoulman      GitHub: randycoulman



--
Randy Coulman
Email: [hidden email]
Home: http://randycoulman.com
Twitter: @randycoulman      GitHub: randycoulman

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc