(→Summary: add full code snippets) |
m (Protected "Sweet Boxes": Excessive spamming: This is for a very old version of JFX; starting to retire the wiki. ([edit=sysop] (indefinite) [move=sysop] (indefinite)) [cascading]) |
||
(8 intermediate revisions by 4 users not shown) | |||
Line 6: | Line 6: | ||
{| border="1" |
{| border="1" |
||
+ | |- |
||
+ | ! Code !! Preview |
||
|- |
|- |
||
| <code><pre> |
| <code><pre> |
||
Line 39: | Line 41: | ||
== Code == |
== Code == |
||
+ | |||
+ | |||
+ | To work in JavaFXPad, add the following: |
||
<code><pre> |
<code><pre> |
||
+ | Canvas { |
||
− | import javafx.ui.*; |
||
+ | content: SweetBox { |
||
− | import javafx.ui.canvas.*; |
||
+ | color: red |
||
− | import javafx.ui.filter.*; |
||
+ | roundness: 1 |
||
+ | x: 10 |
||
+ | y: 10 |
||
+ | w: 200 |
||
+ | h: 40 |
||
+ | } |
||
+ | } |
||
+ | </pre></code> |
||
+ | CustomNode |
||
− | function lighter(c: Color, k: Number) = |
||
+ | <code><pre> |
||
− | Color |
||
+ | //new API |
||
− | { |
||
+ | import javafx.application.Frame; |
||
− | red: (1 - (1 - c.red) * k) |
||
+ | import javafx.application.Stage; |
||
− | green: (1 - (1 - c.green) * k) |
||
+ | import javafx.scene.CustomNode; |
||
− | blue: (1 - (1 - c.blue) * k) |
||
+ | import javafx.scene.Node; |
||
− | opacity: c.opacity |
||
+ | import javafx.scene.Group; |
||
− | }; |
||
+ | import javafx.scene.paint.LinearGradient; |
||
+ | import javafx.scene.paint.RadialGradient; |
||
+ | import javafx.scene.geometry.Rectangle; |
||
+ | import javafx.scene.paint.Stop; |
||
+ | import javafx.scene.paint.Color; |
||
+ | import javafx.scene.effect.GaussianBlur; |
||
− | function darker(c: Color, k: Number) = |
||
− | Color |
||
− | { |
||
− | red: c.red * k |
||
− | green: c.green * k |
||
− | blue: c.blue * k |
||
− | opacity: c.opacity |
||
− | }; |
||
+ | function lighter(c: Color, k: Number) |
||
− | class SweetBox extends CompositeNode |
||
{ |
{ |
||
− | + | Color |
|
+ | { |
||
− | attribute roundness: Number; |
||
+ | red: bind (1 - (1 - c.red) * k) |
||
+ | green: bind (1 - (1 - c.green) * k) |
||
+ | blue: bind (1 - (1 - c.blue) * k) |
||
+ | opacity: bind c.opacity |
||
+ | }; |
||
+ | } |
||
+ | function darker(c: Color, k: Number) |
||
− | attribute inset: Number; |
||
+ | { |
||
+ | Color |
||
+ | { |
||
+ | red: bind c.red * k |
||
+ | green: bind c.green * k |
||
+ | blue: bind c.blue * k |
||
+ | opacity: bind c.opacity |
||
+ | }; |
||
+ | } |
||
+ | public class SweetBox extends CustomNode |
||
+ | { |
||
+ | attribute color: Color; |
||
+ | attribute roundness: Number; |
||
+ | attribute inset: Number = 1; |
||
+ | attribute x: Number; |
||
+ | attribute y: Number; |
||
+ | attribute w: Number; |
||
+ | attribute h: Number; |
||
− | + | function frame(x:Number, y: Number, w:Number, h:Number) |
|
+ | { |
||
− | attribute y: Number; |
||
− | + | this.x = x; |
|
− | + | this.y = y; |
|
+ | this.w = w; |
||
− | |||
+ | this.h = h; |
||
− | operation frame(x:Number, y: Number, w:Number, h:Number); |
||
+ | } |
||
+ | |||
+ | public function create(): Node |
||
+ | { |
||
+ | Group |
||
+ | { |
||
+ | effect:GaussianBlur {radius: 2} |
||
+ | content: |
||
+ | [ |
||
+ | Rectangle |
||
+ | { |
||
+ | x: bind x |
||
+ | y: bind y |
||
+ | width: bind w |
||
+ | height: bind h |
||
+ | arcHeight: bind roundness * h |
||
+ | arcWidth: bind roundness * h |
||
+ | fill: bind LinearGradient |
||
+ | { |
||
+ | startX: x, |
||
+ | startY: y, |
||
+ | endX: x, |
||
+ | endY: y + h |
||
+ | proportional: false; |
||
+ | stops: |
||
+ | [ |
||
+ | Stop {offset: 0.0 color: darker(color, 0.5)}, |
||
+ | Stop {offset: 1.0 color: color} |
||
+ | ] |
||
+ | //spreadMethod: SpreadMethod.PAD |
||
+ | } |
||
+ | |||
+ | |||
+ | |||
+ | }, |
||
+ | Rectangle |
||
+ | { |
||
+ | x: bind x+inset |
||
+ | y: bind y+inset |
||
+ | width: bind w-2*inset |
||
+ | height: bind h-2*inset |
||
+ | arcHeight: bind roundness * h |
||
+ | arcWidth: bind roundness * h |
||
+ | opacity: 0.8 |
||
+ | fill: bind LinearGradient |
||
+ | { |
||
+ | |||
+ | //startX: 0, startY: 0, endX: 0, endY: 0.5 |
||
+ | startX:x |
||
+ | startY:y |
||
+ | endX:x |
||
+ | endY:y + h |
||
+ | proportional: false; |
||
+ | stops: |
||
+ | [ |
||
+ | Stop {offset: 0.0 color: Color.WHITE}, |
||
+ | Stop {offset: 1.0 color: lighter(color, 0.8)} |
||
+ | ] |
||
+ | //spreadMethod: SpreadMethod.PAD |
||
+ | } |
||
+ | clip: Rectangle |
||
+ | { |
||
+ | x: bind x+inset |
||
+ | y: bind y+inset |
||
+ | width: bind w-2*inset |
||
+ | height: bind (h-2*inset) /2 |
||
+ | arcHeight: bind roundness * h /3 |
||
+ | arcWidth: bind roundness * h /3 |
||
+ | } |
||
+ | |||
+ | } |
||
+ | |||
+ | ] |
||
+ | |||
+ | }; |
||
+ | } |
||
+ | |||
} |
} |
||
− | attribute SweetBox.inset = 1; |
||
+ | |||
− | operation SweetBox.frame(x:Number, y: Number, w:Number, h:Number) |
||
+ | |||
+ | |||
+ | |||
+ | public class Model |
||
{ |
{ |
||
− | + | public attribute boxColor:Color; |
|
− | this.y = y; |
||
− | this.w = w; |
||
− | this.h = h; |
||
} |
} |
||
+ | var model1 = Model{}; |
||
− | function SweetBox.composeNode() = |
||
+ | model1.boxColor = Color.LIME; |
||
− | Group |
||
− | + | ||
+ | |||
− | filter: [GaussianBlur {radius: 2}] |
||
+ | Frame { |
||
− | content: |
||
− | + | visible: true |
|
− | + | stage: |
|
− | + | Stage |
|
− | + | { |
|
− | + | content:[SweetBox { |
|
− | + | color: bind model1.boxColor |
|
− | + | roundness: 1 |
|
− | + | x: 10 |
|
− | + | y: 10 |
|
− | + | w: 200 |
|
− | + | h: 40 |
|
− | + | } |
|
− | + | ] |
|
− | + | } |
|
+ | |||
− | Stop {offset: 0.0 color: darker(color, 0.5)}, |
||
+ | } |
||
− | Stop {offset: 1.0 color: color} |
||
− | ] |
||
− | spreadMethod: PAD |
||
− | } |
||
− | }, |
||
− | Clip |
||
− | { |
||
− | shape: Rect |
||
− | { |
||
− | x: bind x+inset |
||
− | y: bind y+inset |
||
− | width: bind w-2*inset |
||
− | height: bind (h-2*inset) /2 |
||
− | arcHeight: bind roundness * h /3 |
||
− | arcWidth: bind roundness * h /3 |
||
− | } |
||
− | content: Rect |
||
− | { |
||
− | x: bind x+inset |
||
− | y: bind y+inset |
||
− | width: bind w-2*inset |
||
− | height: bind h-2*inset |
||
− | arcHeight: bind roundness * h |
||
− | arcWidth: bind roundness * h |
||
− | opacity: 0.8 |
||
− | fill: bind LinearGradient |
||
− | { |
||
− | x1: 0, y1: 0, x2: 0, y2: 0.5 |
||
− | stops: |
||
− | [ |
||
− | Stop {offset: 0.0 color: white}, |
||
− | Stop {offset: 1.0 color: lighter(color, 0.8)} |
||
− | ] |
||
− | spreadMethod: PAD |
||
− | } |
||
− | } |
||
− | } |
||
− | ] |
||
− | }; |
||
</pre></code> |
</pre></code> |
||
+ | |||
− | To work in JavaFXPad, add the following: |
||
+ | Rewritted with New syntax and binding. |
||
<code><pre> |
<code><pre> |
||
+ | package javafxapplication1; |
||
− | Canvas { |
||
+ | |||
− | content: SweetBox { |
||
+ | import javafx.ui.*; |
||
− | color: red |
||
+ | import javafx.ui.canvas.*; |
||
+ | import javafx.ui.filter.*; |
||
+ | |||
+ | //updated by devantor |
||
+ | function lighter(c: Color, k: Number) |
||
+ | { |
||
+ | Color |
||
+ | { |
||
+ | red: bind (1 - (1 - c.red) * k) |
||
+ | green: bind (1 - (1 - c.green) * k) |
||
+ | blue: bind (1 - (1 - c.blue) * k) |
||
+ | opacity: bind c.opacity |
||
+ | }; |
||
+ | } |
||
+ | |||
+ | function darker(c: Color, k: Number) |
||
+ | { |
||
+ | Color |
||
+ | { |
||
+ | red: bind c.red * k |
||
+ | green: bind c.green * k |
||
+ | blue: bind c.blue * k |
||
+ | opacity: bind c.opacity |
||
+ | }; |
||
+ | } |
||
+ | public class SweetBox extends CompositeNode |
||
+ | { |
||
+ | attribute color: Color; |
||
+ | attribute roundness: Number; |
||
+ | attribute inset: Number = 1; |
||
+ | attribute x: Number; |
||
+ | attribute y: Number; |
||
+ | attribute w: Number; |
||
+ | attribute h: Number; |
||
+ | |||
+ | function frame(x:Number, y: Number, w:Number, h:Number) |
||
+ | { |
||
+ | this.x = x; |
||
+ | this.y = y; |
||
+ | this.w = w; |
||
+ | this.h = h; |
||
+ | } |
||
+ | |||
+ | function composeNode() |
||
+ | { |
||
+ | Group |
||
+ | { |
||
+ | filter: GaussianBlur {radius: 2} |
||
+ | content: |
||
+ | [ |
||
+ | Rect |
||
+ | { |
||
+ | x: bind x |
||
+ | y: bind y |
||
+ | width: bind w |
||
+ | height: bind h |
||
+ | arcHeight: bind roundness * h |
||
+ | arcWidth: bind roundness * h |
||
+ | fill: bind LinearGradient |
||
+ | { |
||
+ | startX: x, |
||
+ | startY: y, |
||
+ | endX: x, |
||
+ | endY: y + h |
||
+ | stops: |
||
+ | [ |
||
+ | Stop {offset: 0.0 color: darker(color, 0.5)}, |
||
+ | Stop {offset: 1.0 color: color} |
||
+ | ] |
||
+ | spreadMethod: SpreadMethod.PAD |
||
+ | } |
||
+ | }, |
||
+ | Clip |
||
+ | { |
||
+ | shape: Rect |
||
+ | { |
||
+ | x: bind x+inset |
||
+ | y: bind y+inset |
||
+ | width: bind w-2*inset |
||
+ | height: bind (h-2*inset) /2 |
||
+ | arcHeight: bind roundness * h /3 |
||
+ | arcWidth: bind roundness * h /3 |
||
+ | } |
||
+ | content: Rect |
||
+ | { |
||
+ | x: bind x+inset |
||
+ | y: bind y+inset |
||
+ | width: bind w-2*inset |
||
+ | height: bind h-2*inset |
||
+ | arcHeight: bind roundness * h |
||
+ | arcWidth: bind roundness * h |
||
+ | opacity: 0.8 |
||
+ | fill: bind LinearGradient |
||
+ | { |
||
+ | |||
+ | //startX: 0, startY: 0, endX: 0, endY: 0.5 |
||
+ | startX:x |
||
+ | startY:y |
||
+ | endX:x |
||
+ | endY:y + h |
||
+ | stops: |
||
+ | [ |
||
+ | Stop {offset: 0.0 color: Color.WHITE}, |
||
+ | Stop {offset: 1.0 color: lighter(color, 0.8)} |
||
+ | ] |
||
+ | spreadMethod: SpreadMethod.PAD |
||
+ | } |
||
+ | } |
||
+ | } |
||
+ | ] |
||
+ | }; |
||
+ | } |
||
+ | |||
+ | } |
||
+ | |||
+ | public class Model |
||
+ | { |
||
+ | public attribute boxColor:Color; |
||
+ | } |
||
+ | |||
+ | var model1 = Model{}; |
||
+ | |||
+ | Canvas { |
||
+ | content: [SweetBox { |
||
+ | color: bind model1.boxColor |
||
roundness: 1 |
roundness: 1 |
||
x: 10 |
x: 10 |
||
Line 159: | Line 359: | ||
w: 200 |
w: 200 |
||
h: 40 |
h: 40 |
||
− | } |
+ | }, |
+ | View{ content: Button { |
||
+ | text: "Press Me" |
||
+ | action: function() { |
||
+ | model1.boxColor = Color.LIME; |
||
+ | } |
||
+ | } |
||
+ | }, |
||
+ | |||
+ | ] |
||
} |
} |
||
+ | |||
</pre></code> |
</pre></code> |
||
+ | Old version |
||
− | [[Category:Code Example]] [[Category:Widget]] |
||
+ | <code><pre> |
||
+ | import javafx.ui.*; |
||
+ | import javafx.ui.canvas.*; |
||
+ | import javafx.ui.filter.*; |
||
+ | |||
+ | function lighter(c: Color, k: Number) = |
||
+ | Color |
||
+ | { |
||
+ | red: (1 - (1 - c.red) * k) |
||
+ | green: (1 - (1 - c.green) * k) |
||
+ | blue: (1 - (1 - c.blue) * k) |
||
+ | opacity: c.opacity |
||
+ | }; |
||
+ | |||
+ | function darker(c: Color, k: Number) = |
||
+ | Color |
||
+ | { |
||
+ | red: c.red * k |
||
+ | green: c.green * k |
||
+ | blue: c.blue * k |
||
+ | opacity: c.opacity |
||
+ | }; |
||
+ | |||
+ | class SweetBox extends CompositeNode |
||
+ | { |
||
+ | attribute color: Color; |
||
+ | attribute roundness: Number; |
||
+ | attribute inset: Number; |
||
+ | attribute x: Number; |
||
+ | attribute y: Number; |
||
+ | attribute w: Number; |
||
+ | attribute h: Number; |
||
+ | |||
+ | operation frame(x:Number, y: Number, w:Number, h:Number); |
||
+ | } |
||
+ | |||
+ | attribute SweetBox.inset = 1; |
||
+ | |||
+ | operation SweetBox.frame(x:Number, y: Number, w:Number, h:Number) |
||
+ | { |
||
+ | this.x = x; |
||
+ | this.y = y; |
||
+ | this.w = w; |
||
+ | this.h = h; |
||
+ | } |
||
+ | |||
+ | function SweetBox.composeNode() = |
||
+ | Group |
||
+ | { |
||
+ | filter: [GaussianBlur {radius: 2}] |
||
+ | content: |
||
+ | [ |
||
+ | Rect |
||
+ | { |
||
+ | x: bind x |
||
+ | y: bind y |
||
+ | width: bind w |
||
+ | height: bind h |
||
+ | arcHeight: bind roundness * h |
||
+ | arcWidth: bind roundness * h |
||
+ | fill: bind LinearGradient |
||
+ | { |
||
+ | x1: 0, y1: 0, x2: 0, y2: 1 |
||
+ | stops: |
||
+ | [ |
||
+ | Stop {offset: 0.0 color: darker(color, 0.5)}, |
||
+ | Stop {offset: 1.0 color: color} |
||
+ | ] |
||
+ | spreadMethod: PAD |
||
+ | } |
||
+ | }, |
||
+ | Clip |
||
+ | { |
||
+ | shape: Rect |
||
+ | { |
||
+ | x: bind x+inset |
||
+ | y: bind y+inset |
||
+ | width: bind w-2*inset |
||
+ | height: bind (h-2*inset) /2 |
||
+ | arcHeight: bind roundness * h /3 |
||
+ | arcWidth: bind roundness * h /3 |
||
+ | } |
||
+ | content: Rect |
||
+ | { |
||
+ | x: bind x+inset |
||
+ | y: bind y+inset |
||
+ | width: bind w-2*inset |
||
+ | height: bind h-2*inset |
||
+ | arcHeight: bind roundness * h |
||
+ | arcWidth: bind roundness * h |
||
+ | opacity: 0.8 |
||
+ | fill: bind LinearGradient |
||
+ | { |
||
+ | x1: 0, y1: 0, x2: 0, y2: 0.5 |
||
+ | stops: |
||
+ | [ |
||
+ | Stop {offset: 0.0 color: white}, |
||
+ | Stop {offset: 1.0 color: lighter(color, 0.8)} |
||
+ | ] |
||
+ | spreadMethod: PAD |
||
+ | } |
||
+ | } |
||
+ | } |
||
+ | ] |
||
+ | }; |
||
+ | </pre></code> |
||
+ | [[Category:Code Example]] |
||
+ | [[Category:Widget]] |
Latest revision as of 15:39, 16 August 2011
Summary
See this thread in the mailing lists.
Here is a pretty box widget. Adjust the color attribute of a SweetBox when you add it for different results.
Code
To work in JavaFXPad, add the following:
Canvas {
content: SweetBox {
color: red
roundness: 1
x: 10
y: 10
w: 200
h: 40
}
}
CustomNode
//new API
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.RadialGradient;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;
function lighter(c: Color, k: Number)
{
Color
{
red: bind (1 - (1 - c.red) * k)
green: bind (1 - (1 - c.green) * k)
blue: bind (1 - (1 - c.blue) * k)
opacity: bind c.opacity
};
}
function darker(c: Color, k: Number)
{
Color
{
red: bind c.red * k
green: bind c.green * k
blue: bind c.blue * k
opacity: bind c.opacity
};
}
public class SweetBox extends CustomNode
{
attribute color: Color;
attribute roundness: Number;
attribute inset: Number = 1;
attribute x: Number;
attribute y: Number;
attribute w: Number;
attribute h: Number;
function frame(x:Number, y: Number, w:Number, h:Number)
{
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
public function create(): Node
{
Group
{
effect:GaussianBlur {radius: 2}
content:
[
Rectangle
{
x: bind x
y: bind y
width: bind w
height: bind h
arcHeight: bind roundness * h
arcWidth: bind roundness * h
fill: bind LinearGradient
{
startX: x,
startY: y,
endX: x,
endY: y + h
proportional: false;
stops:
[
Stop {offset: 0.0 color: darker(color, 0.5)},
Stop {offset: 1.0 color: color}
]
//spreadMethod: SpreadMethod.PAD
}
},
Rectangle
{
x: bind x+inset
y: bind y+inset
width: bind w-2*inset
height: bind h-2*inset
arcHeight: bind roundness * h
arcWidth: bind roundness * h
opacity: 0.8
fill: bind LinearGradient
{
//startX: 0, startY: 0, endX: 0, endY: 0.5
startX:x
startY:y
endX:x
endY:y + h
proportional: false;
stops:
[
Stop {offset: 0.0 color: Color.WHITE},
Stop {offset: 1.0 color: lighter(color, 0.8)}
]
//spreadMethod: SpreadMethod.PAD
}
clip: Rectangle
{
x: bind x+inset
y: bind y+inset
width: bind w-2*inset
height: bind (h-2*inset) /2
arcHeight: bind roundness * h /3
arcWidth: bind roundness * h /3
}
}
]
};
}
}
public class Model
{
public attribute boxColor:Color;
}
var model1 = Model{};
model1.boxColor = Color.LIME;
Frame {
visible: true
stage:
Stage
{
content:[SweetBox {
color: bind model1.boxColor
roundness: 1
x: 10
y: 10
w: 200
h: 40
}
]
}
}
Rewritted with New syntax and binding.
package javafxapplication1;
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
//updated by devantor
function lighter(c: Color, k: Number)
{
Color
{
red: bind (1 - (1 - c.red) * k)
green: bind (1 - (1 - c.green) * k)
blue: bind (1 - (1 - c.blue) * k)
opacity: bind c.opacity
};
}
function darker(c: Color, k: Number)
{
Color
{
red: bind c.red * k
green: bind c.green * k
blue: bind c.blue * k
opacity: bind c.opacity
};
}
public class SweetBox extends CompositeNode
{
attribute color: Color;
attribute roundness: Number;
attribute inset: Number = 1;
attribute x: Number;
attribute y: Number;
attribute w: Number;
attribute h: Number;
function frame(x:Number, y: Number, w:Number, h:Number)
{
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
function composeNode()
{
Group
{
filter: GaussianBlur {radius: 2}
content:
[
Rect
{
x: bind x
y: bind y
width: bind w
height: bind h
arcHeight: bind roundness * h
arcWidth: bind roundness * h
fill: bind LinearGradient
{
startX: x,
startY: y,
endX: x,
endY: y + h
stops:
[
Stop {offset: 0.0 color: darker(color, 0.5)},
Stop {offset: 1.0 color: color}
]
spreadMethod: SpreadMethod.PAD
}
},
Clip
{
shape: Rect
{
x: bind x+inset
y: bind y+inset
width: bind w-2*inset
height: bind (h-2*inset) /2
arcHeight: bind roundness * h /3
arcWidth: bind roundness * h /3
}
content: Rect
{
x: bind x+inset
y: bind y+inset
width: bind w-2*inset
height: bind h-2*inset
arcHeight: bind roundness * h
arcWidth: bind roundness * h
opacity: 0.8
fill: bind LinearGradient
{
//startX: 0, startY: 0, endX: 0, endY: 0.5
startX:x
startY:y
endX:x
endY:y + h
stops:
[
Stop {offset: 0.0 color: Color.WHITE},
Stop {offset: 1.0 color: lighter(color, 0.8)}
]
spreadMethod: SpreadMethod.PAD
}
}
}
]
};
}
}
public class Model
{
public attribute boxColor:Color;
}
var model1 = Model{};
Canvas {
content: [SweetBox {
color: bind model1.boxColor
roundness: 1
x: 10
y: 10
w: 200
h: 40
},
View{ content: Button {
text: "Press Me"
action: function() {
model1.boxColor = Color.LIME;
}
}
},
]
}
Old version
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
function lighter(c: Color, k: Number) =
Color
{
red: (1 - (1 - c.red) * k)
green: (1 - (1 - c.green) * k)
blue: (1 - (1 - c.blue) * k)
opacity: c.opacity
};
function darker(c: Color, k: Number) =
Color
{
red: c.red * k
green: c.green * k
blue: c.blue * k
opacity: c.opacity
};
class SweetBox extends CompositeNode
{
attribute color: Color;
attribute roundness: Number;
attribute inset: Number;
attribute x: Number;
attribute y: Number;
attribute w: Number;
attribute h: Number;
operation frame(x:Number, y: Number, w:Number, h:Number);
}
attribute SweetBox.inset = 1;
operation SweetBox.frame(x:Number, y: Number, w:Number, h:Number)
{
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
function SweetBox.composeNode() =
Group
{
filter: [GaussianBlur {radius: 2}]
content:
[
Rect
{
x: bind x
y: bind y
width: bind w
height: bind h
arcHeight: bind roundness * h
arcWidth: bind roundness * h
fill: bind LinearGradient
{
x1: 0, y1: 0, x2: 0, y2: 1
stops:
[
Stop {offset: 0.0 color: darker(color, 0.5)},
Stop {offset: 1.0 color: color}
]
spreadMethod: PAD
}
},
Clip
{
shape: Rect
{
x: bind x+inset
y: bind y+inset
width: bind w-2*inset
height: bind (h-2*inset) /2
arcHeight: bind roundness * h /3
arcWidth: bind roundness * h /3
}
content: Rect
{
x: bind x+inset
y: bind y+inset
width: bind w-2*inset
height: bind h-2*inset
arcHeight: bind roundness * h
arcWidth: bind roundness * h
opacity: 0.8
fill: bind LinearGradient
{
x1: 0, y1: 0, x2: 0, y2: 0.5
stops:
[
Stop {offset: 0.0 color: white},
Stop {offset: 1.0 color: lighter(color, 0.8)}
]
spreadMethod: PAD
}
}
}
]
};