Re: [Sugar-devel] xo colors gradients
Of course special cases like icons with alpha gradients may well be measurably helped by such optimisations, but are not part of the core Sugar style guidelines, Are there more guidelines than this? http://wiki.sugarlabs.org/go/Human_Interface_Guidelines/The_Sugar_Interface/Icons#Icon_Design_Guidelines ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
On Mon, Aug 23, 2010 at 4:49 PM, Gary Martin garycmar...@googlemail.comwrote: I don't think I've seen any activity icons try this yet, but it might work for some specific cases if it's not used to try and make 3d style shaded button icons. The sample activity icon with a graident I put on the almanac causes the launching of a dummy activity on the xo-1 (and other older computers too, I presume) to stutter. I suspect this is because sugar is rendering the colored version of the icon at launch time. If this is the case, the xo-colored activity icon might be something sugar should pre-render? ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
Also see http://wiki.sugarlabs.org/go/Development_Team/Almanac/Making_Icons (and maybe add your findings) Thanks for the link. I added a way to create the effect I had in mind using your suggested idea. I hope it is helpful to others in the future. ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
On Mon, Aug 23, 2010 at 1:52 PM, Erik Blankinship er...@mediamods.com wrote: When I launch an activity, the SVG icon used to display my activity changes appearance by rendering with the XO colors. (1) Is there a way to render gradients using the fill color? For example, if the child's XO fill color is red, I would like to render an activity icon using a red gradient. Maybe there are tricks in SVG which make this possible? SVG does have a gradient you can use. I use them in the Turtle Art blocks. For example, defs linearGradient id=linearGradient1234 stop style=stop-color:#ff;stop-opacity:1; offset=0 / stop style=stop-color:#00;stop-opacity:1; offset=1 / /linearGradient linearGradient xlink:href=#linearGradient1234 id=linearGradient5678 x1=0 y1=100 x2=200 y2=300 gradientUnits=userSpaceOnUse / /defs later, fill = url(#linearGradient5678) -walter (2) Also, is there a way to override the XO colors and use different colors? I know this is against UI guidelines, I am just wondering if it is possible. Thank you. ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel -- Walter Bender Sugar Labs http://www.sugarlabs.org ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
On Mon, Aug 23, 2010 at 3:14 PM, Walter Bender walter.ben...@gmail.comwrote: On Mon, Aug 23, 2010 at 1:52 PM, Erik Blankinship er...@mediamods.com wrote: When I launch an activity, the SVG icon used to display my activity changes appearance by rendering with the XO colors. (1) Is there a way to render gradients using the fill color? For example, if the child's XO fill color is red, I would like to render an activity icon using a red gradient. Maybe there are tricks in SVG which make this possible? SVG does have a gradient you can use. I use them in the Turtle Art blocks. For example, defs linearGradient id=linearGradient1234 stop style=stop-color:#ff;stop-opacity:1; offset=0 / stop style=stop-color:#00;stop-opacity:1; offset=1 / /linearGradient linearGradient xlink:href=#linearGradient1234 id=linearGradient5678 x1=0 y1=100 x2=200 y2=300 gradientUnits=userSpaceOnUse / /defs later, fill = url(#linearGradient5678) Thank you, it is helpful to see how gradients can be used in SVG. How would I specify that I want to sugar to use the XO color to create a gradient from the XO fill color when my activity is running? As I understand it, sugar activity icons can expect stroke_color and fill_color to be provided when an activity is launched: !ENTITY stroke_color #010101 !ENTITY fill_color #FF Given one of these colors, it would like to calculate the stop-colors in your example. Can I do this calculation in SVG? Can my activity somehow pass this information to the SVG renderer when it is launched? ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
rephrased: How would I specify that I want sugar to use an XO color to create a gradient when my activity is running? On Mon, Aug 23, 2010 at 3:46 PM, Erik Blankinship er...@mediamods.comwrote: On Mon, Aug 23, 2010 at 3:14 PM, Walter Bender walter.ben...@gmail.comwrote: On Mon, Aug 23, 2010 at 1:52 PM, Erik Blankinship er...@mediamods.com wrote: When I launch an activity, the SVG icon used to display my activity changes appearance by rendering with the XO colors. (1) Is there a way to render gradients using the fill color? For example, if the child's XO fill color is red, I would like to render an activity icon using a red gradient. Maybe there are tricks in SVG which make this possible? SVG does have a gradient you can use. I use them in the Turtle Art blocks. For example, defs linearGradient id=linearGradient1234 stop style=stop-color:#ff;stop-opacity:1; offset=0 / stop style=stop-color:#00;stop-opacity:1; offset=1 / /linearGradient linearGradient xlink:href=#linearGradient1234 id=linearGradient5678 x1=0 y1=100 x2=200 y2=300 gradientUnits=userSpaceOnUse / /defs later, fill = url(#linearGradient5678) Thank you, it is helpful to see how gradients can be used in SVG. How would I specify that I want to sugar to use the XO color to create a gradient from the XO fill color when my activity is running? As I understand it, sugar activity icons can expect stroke_color and fill_color to be provided when an activity is launched: !ENTITY stroke_color #010101 !ENTITY fill_color #FF Given one of these colors, it would like to calculate the stop-colors in your example. Can I do this calculation in SVG? Can my activity somehow pass this information to the SVG renderer when it is launched? ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
Use the entities. E.g. replace #ff with stroke_color; Just look at the source of any activity icon. - Bert - On 23.08.2010, at 22:03, Erik Blankinship wrote: rephrased: How would I specify that I want sugar to use an XO color to create a gradient when my activity is running? On Mon, Aug 23, 2010 at 3:46 PM, Erik Blankinship er...@mediamods.com wrote: On Mon, Aug 23, 2010 at 3:14 PM, Walter Bender walter.ben...@gmail.com wrote: On Mon, Aug 23, 2010 at 1:52 PM, Erik Blankinship er...@mediamods.com wrote: When I launch an activity, the SVG icon used to display my activity changes appearance by rendering with the XO colors. (1) Is there a way to render gradients using the fill color? For example, if the child's XO fill color is red, I would like to render an activity icon using a red gradient. Maybe there are tricks in SVG which make this possible? SVG does have a gradient you can use. I use them in the Turtle Art blocks. For example, defs linearGradient id=linearGradient1234 stop style=stop-color:#ff;stop-opacity:1; offset=0 / stop style=stop-color:#00;stop-opacity:1; offset=1 / /linearGradient linearGradient xlink:href=#linearGradient1234 id=linearGradient5678 x1=0 y1=100 x2=200 y2=300 gradientUnits=userSpaceOnUse / /defs later, fill = url(#linearGradient5678) Thank you, it is helpful to see how gradients can be used in SVG. How would I specify that I want to sugar to use the XO color to create a gradient from the XO fill color when my activity is running? As I understand it, sugar activity icons can expect stroke_color and fill_color to be provided when an activity is launched: !ENTITY stroke_color #010101 !ENTITY fill_color #FF Given one of these colors, it would like to calculate the stop-colors in your example. Can I do this calculation in SVG? Can my activity somehow pass this information to the SVG renderer when it is launched? ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
Hi Erik, On 23 Aug 2010, at 18:52, Erik Blankinship er...@mediamods.com wrote: When I launch an activity, the SVG icon used to display my activity changes appearance by rendering with the XO colors. (1) Is there a way to render gradients using the fill color? For example, if the child's XO fill color is red, I would like to render an activity icon using a red gradient. Maybe there are tricks in SVG which make this possible? Yep, that's possible. Personally I edit all my SVGs by hand, so it's easy for me to generate clean XML code and put the fill and stroke variables in the correct places. It would seem to feel somewhat off the spirit of the sugar icon style (strong, clear, flat shaded silhouettes), but there are a few cases where I have considered something along this line, i.e. an icon that represents something specifically with different colours like ColourDeducto vs Deducto. I don't think I've seen any activity icons try this yet, but it might work for some specific cases if it's not used to try and make 3d style shaded button icons. (2) Also, is there a way to override the XO colors and use different colors? I know this is against UI guidelines, I am just wondering if it is possible. Yes, unfortunately :( There are still many activity icons that don't correctly use the owner fill and stroke colours. I try and fix them best I can and post to the original authors, but it can be slow going. The main issue here is that folks completely loose any metaphor of colour representing identity throughout the Sugar UI. It only takes a few incorrect icons dotted about to dilute this idea. GCompris is the tough to solve case here, there are 100 plus ported activities all with multi coloured icons. Do you need a hand with a specific icon? Regards, --Gary Thank you. ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
On Mon, Aug 23, 2010 at 4:46 PM, Bert Freudenberg b...@freudenbergs.dewrote: Use the entities. E.g. replace #ff with stroke_color; Just look at the source of any activity icon. - Bert - Thank you for your response Bert. I have looked at a number of activity icons and have not yet seen behavior which create a gradient using the stroke_color as an input parameter. Maybe I should provide an example to help. I would like to use stroke_color as the basis for a gradient. For example: if stroke_color was #FF, I might want to generate #E6 and #FF1A1A (darker and lighter, respectively). Maybe you can refer to me an activity icon which does this? ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
(1) Is there a way to render gradients using the fill color? For example, if the child's XO fill color is red, I would like to render an activity icon using a red gradient. Maybe there are tricks in SVG which make this possible? Yep, that's possible. Personally I edit all my SVGs by hand, so it's easy for me to generate clean XML code and put the fill and stroke variables in the correct places. It would seem to feel somewhat off the spirit of the sugar icon style (strong, clear, flat shaded silhouettes), but there are a few cases where I have considered something along this line, i.e. an icon that represents something specifically with different colours like ColourDeducto vs Deducto. I don't think I've seen any activity icons try this yet, but it might work for some specific cases if it's not used to try and make 3d style shaded button icons. That's good news! Do you need a hand with a specific icon? Let's use the hereunder svg as an example. How would I use the fill_color as a parameter to create a gradient from the top to the bottom of the rectangle? (I can see how I would make a gradient from fill_color to a hard-coded color, but I would like to create a gradient with stop-color attributes derived from the fill_color). ?xml version=1.0 ?!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' ' http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ !ENTITY stroke_color #010101 !ENTITY fill_color #FF ]svg enable-background=new 0 0 55 55 height=55px version=1.1 viewBox=0 0 55 55 width=55px x=0px xml:space=preserve xmlns= http://www.w3.org/2000/svg; xmlns:xlink=http://www.w3.org/1999/xlink; y=0pxg display=block id=activity-example rect display=inline fill=fill_color; height=30.771 stroke=stroke_color; stroke-linejoin=round stroke-width=3.5 width=41.438 x=6.705 y=12.213/ circle cx=27.504 cy=27.598 display=inline fill=stroke_color; r=2.946/ /g/svg ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
On 23.08.2010, at 23:07, Erik Blankinship wrote: I would like to use stroke_color as the basis for a gradient. For example: if stroke_color was #FF, I might want to generate #E6 and #FF1A1A (darker and lighter, respectively). Maybe you can refer to me an activity icon which does this? Can't do that. But you can use the stroke_color itself as one stop on the gradient, so you could e.g. fade from stroke_color to white. To lighten or darken, just use a plain stroke/fill color, and layer a translucent white or black shape on top of it. - Bert - ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
To lighten or darken, just use a plain stroke/fill color, and layer a translucent white or black shape on top of it. That is a great idea! Now, who here has the SVG skills to make an example of how that would work? I will give it a shot and see how I do. ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] xo colors gradients
On 23.08.2010, at 23:25, Erik Blankinship wrote: To lighten or darken, just use a plain stroke/fill color, and layer a translucent white or black shape on top of it. That is a great idea! Now, who here has the SVG skills to make an example of how that would work? I will give it a shot and see how I do. Use the gradient tool in Inkscape (or your favorite SVG drawing program). I once made a shiny Sugar icon using an overlaid white-to-transparent gradient, but had no real use for it, and can't find it anymore. My technique for making an icon is drawing in plain red and yellow (to represent stroke and color) and after finishing, search and replace #ff (red) and #00 (yellow) with the entities. Also see http://wiki.sugarlabs.org/go/Development_Team/Almanac/Making_Icons (and maybe add your findings) - Bert - ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
