nilix/tint2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Gradients: update man page

Browse source
This commit is contained in:
o9000 2017-02-26 17:02:51 +01:00
parent 4c45538f6e
commit e594cf4560
2 changed files with 31 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
doc/manual.html
View file

@ -291,11 +291,13 @@ clock_background_id = 0
<p>Identifier 0 refers to a special background which is fully transparent, identifier 1 applies the first background defined in the config file etc.</p><h3 id="gradients">Gradients<a name="gradients" href="#gradients" class="md2man-permalink" title="permalink"></a></h3><p>(Available since 0.13.0)</p><p>Backgrounds also allow specifying gradient layers
that are drawn on top of the solid color background.</p><p>First the user must define one or more gradients in the config file,
each starting with <code>gradient = TYPE</code>. These must be added before backgrounds.</p><p>Then gradients can be added by index to backgrounds,
using the <code>gradient_id = INDEX</code>, <code>hover_gradient_id = INDEX</code> and
<code>pressed_gradient_id = INDEX</code>, where <code>INDEX</code> is
the gradient index, starting from 1.</p><h4 id="simple-gradients">Simple gradients<a name="simple-gradients" href="#simple-gradients" class="md2man-permalink" title="permalink"></a></h4><p>These are gradients that vary from fixed control points (top-to-bottom, left-to-right
or center-to-corners). The user must specify the start and end colors,
and can optionally add extra color stops in between.</p><h5 id="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors">Vertical gradient, with color varying from the top edge to the bottom edge, two colors<a name="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" href="#vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = vertical
using the <code>gradient_id = INDEX</code>, <code>gradient_id_hover = INDEX</code> and
<code>gradient_id_pressed = INDEX</code>, where <code>INDEX</code> is
the gradient index, starting from 1.</p><h4 id="gradient-types">Gradient types<a name="gradient-types" href="#gradient-types" class="md2man-permalink" title="permalink"></a></h4><p>Gradients vary the color between fixed control points:
* vertical gradients: top-to-bottom;
* horizontal gradients: left-to-right;
* radial gradients: center-to-corners.</p><p>The user must specify the start and end colors, and can optionally add extra color stops in between
using the <code>color_stop</code> option, as explained below.</p><h5 id="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors">Vertical gradient, with color varying from the top edge to the bottom edge, two colors<a name="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" href="#vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = vertical
start_color = #rrggbb opacity
end_color = #rrggbb opacity
</code></pre>
@ -303,103 +305,29 @@ end_color = #rrggbb opacity
start_color = #rrggbb opacity
end_color = #rrggbb opacity
</code></pre>
<h5 id="centered-radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors">Centered radial gradient, with color varying from the center to the corner, two colors:<a name="centered-radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors" href="#centered-radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = centered
<h5 id="radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors">Radial gradient, with color varying from the center to the corner, two colors:<a name="radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors" href="#radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = radial
start_color = #rrggbb opacity
end_color = #rrggbb opacity
</code></pre>
<h5 id="adding-extra-color-stops-0-and-100-remain-fixed-more-colors-at-x-between-the-start-and-end-control-points">Adding extra color stops (0% and 100% remain fixed, more colors at x% between the start and end control points)<a name="adding-extra-color-stops-0-and-100-remain-fixed-more-colors-at-x-between-the-start-and-end-control-points" href="#adding-extra-color-stops-0-and-100-remain-fixed-more-colors-at-x-between-the-start-and-end-control-points" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>color_stop = percentage #rrggbb opacity
</code></pre>
<h4 id="advanced-gradients">Advanced gradients<a name="advanced-gradients" href="#advanced-gradients" class="md2man-permalink" title="permalink"></a></h4><p>These gradient types allow specifying the control points. This permits, for example,
adding off-center radial glow effects, linear gradients with arbitrary angles,
or using another element&#39;s edge as a control point.</p><p>Note: updates are currently a little buggy for task buttons.</p><h5 id="linear-or-radial-gradients-with-arbitrary-control-points-and-orientation">Linear or radial gradients, with arbitrary control points (and orientation)<a name="linear-or-radial-gradients-with-arbitrary-control-points-and-orientation" href="#linear-or-radial-gradients-with-arbitrary-control-points-and-orientation" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = linear | radial
# Geometry
from_offset_x = SIZE_EXPRESSION
from_offset_y = SIZE_EXPRESSION
# from_offset_r for radial only
from_offset_r = SIZE_EXPRESSION
to_offset_x = SIZE_EXPRESSION
to_offset_y = SIZE_EXPRESSION
# to_offset_r for radial only
to_offset_r = SIZE_EXPRESSION
# Colors
start_color = #rrggbb opacity
end_color = #rrggbb opacity
# Optional: more color stops
color_stop = percentage #rrggbb opacity
color_stop = percentage #rrggbb opacity
</code></pre>
<p><code>SIZE_EXPRESSION</code> is an expression that encodes an offset,
following the grammar:</p><pre class="highlight plaintext"><code>SIZE_EXPRESSION = number |
SIZE |
SIZE * number |
SIZE * number%
SIZE = width | height | radius | left | right | top | bottom | centerx | centery |
ELEMENT width | ELEMENT height | ELEMENT radius | ELEMENT left | ELEMENT right | ELEMENT top | ELEMENT bottom | ELEMENT centerx | ELEMENT centery
ELEMENT = self | parent | panel
</code></pre>
<p>All coordinates are computed in the drawn element&#39;s coordinate system,
with origin in the top-left corner and the vertical axis growing down.</p><p>Numbers are any real numbers. Negative numbers must not have spaces between
the minus sign and the first digit, for example <code>-1.234</code> is correct,
while <code>- 1.234</code> is not.</p><p>Multiple <code>*_offset_*</code> can be given, in which case they are added together.</p><h4 id="gradient-examples">Gradient examples<a name="gradient-examples" href="#gradient-examples" class="md2man-permalink" title="permalink"></a></h4><pre class="highlight plaintext"><code># Gradient 1: thin film effect
<h4 id="gradient-examples">Gradient examples<a name="gradient-examples" href="#gradient-examples" class="md2man-permalink" title="permalink"></a></h4><pre class="highlight plaintext"><code># Gradient 1: thin film effect
gradient = horizontal
start_color = #111122 30
end_color = #112211 30
color_stop = 60 #221111 30
# Gradient 2: center glow
gradient = centered
start_color = #ffffff 20
end_color = #ffffff 0
# Gradient 3: glow
# Gradient 2: radial glow
gradient = radial
start_color = #ffffff 20
end_color = #ffffff 0
from_offset_x = width * 0.28
from_offset_y = height * 0.28
from_offset_r = 0
to_offset_x = width * 0.28
to_offset_y = height * 0.28
to_offset_r = radius * 2
# Gradient 4: aurora
gradient = linear
start_color = #ffffff 0
end_color = #ffffff 0
from_offset_x = panel left
from_offset_y = panel top
to_offset_x = panel width * 3
to_offset_x = panel height * 3
to_offset_y = panel width
to_offset_y = panel height
color_stop = 0.1 #ffffff 30
color_stop = 0.8 #ffffff 30
color_stop = 2.1 #7777aa 30
color_stop = 3.1 #7777aa 30
color_stop = 4.0 #ffffaa 30
color_stop = 4.8 #aa7733 30
color_stop = 5.1 #ff7733 30
color_stop = 6.5 #337788 30
color_stop = 9.2 #ffffaa 30
color_stop = 10.1 #777777 30
color_stop = 12.1 #aaaaff 30
color_stop = 14.0 #77ff77 30
color_stop = 18.0 #ffff77 30
color_stop = 19.8 #77ffaa 30
color_stop = 21.1 #ffffaa 20
color_stop = 23.5 #337733 30
color_stop = 25.5 #337733 30
color_stop = 29.2 #77ffff 30
color_stop = 30.1 #77ffaa 30
color_stop = 31.0 #ffffaa 30
color_stop = 34.8 #aa7733 30
# Gradient 5: elegant black
# Gradient 3: elegant black
gradient = vertical
start_color = #444444 100
end_color = #222222 100
# Gradient 6: elegant black
# Gradient 4: elegant black
gradient = horizontal
start_color = #111111 100
end_color = #222222 100
@ -415,8 +343,8 @@ border_color_hover = #ffffff 60
background_color_pressed = #555555 10
border_color_pressed = #ffffff 60
gradient_id = 3
hover_gradient_id = 4
pressed_gradient_id = 2
gradient_id_hover = 4
gradient_id_pressed = 2
[...]
</code></pre>

126
doc/tint2.1
View file

@ -186,14 +186,18 @@ First the user must define one or more gradients in the config file,
each starting with \fB\fCgradient = TYPE\fR\&. These must be added before backgrounds.
.PP
Then gradients can be added by index to backgrounds,
using the \fB\fCgradient_id = INDEX\fR, \fB\fChover_gradient_id = INDEX\fR and
\fB\fCpressed_gradient_id = INDEX\fR, where \fB\fCINDEX\fR is
using the \fB\fCgradient_id = INDEX\fR, \fB\fCgradient_id_hover = INDEX\fR and
\fB\fCgradient_id_pressed = INDEX\fR, where \fB\fCINDEX\fR is
the gradient index, starting from 1.
.SS Simple gradients
.SS Gradient types
.PP
These are gradients that vary from fixed control points (top\-to\-bottom, left\-to\-right
or center\-to\-corners). The user must specify the start and end colors,
and can optionally add extra color stops in between.
Gradients vary the color between fixed control points:
* vertical gradients: top\-to\-bottom;
* horizontal gradients: left\-to\-right;
* radial gradients: center\-to\-corners.
.PP
The user must specify the start and end colors, and can optionally add extra color stops in between
using the \fB\fCcolor_stop\fR option, as explained below.
.SS Vertical gradient, with color varying from the top edge to the bottom edge, two colors
.PP
.RS
@ -212,11 +216,11 @@ start_color = #rrggbb opacity
end_color = #rrggbb opacity
.fi
.RE
.SS Centered radial gradient, with color varying from the center to the corner, two colors:
.SS Radial gradient, with color varying from the center to the corner, two colors:
.PP
.RS
.nf
gradient = centered
gradient = radial
start_color = #rrggbb opacity
end_color = #rrggbb opacity
.fi
@ -228,59 +232,6 @@ end_color = #rrggbb opacity
color_stop = percentage #rrggbb opacity
.fi
.RE
.SS Advanced gradients
.PP
These gradient types allow specifying the control points. This permits, for example,
adding off\-center radial glow effects, linear gradients with arbitrary angles,
or using another element's edge as a control point.
.PP
Note: updates are currently a little buggy for task buttons.
.SS Linear or radial gradients, with arbitrary control points (and orientation)
.PP
.RS
.nf
gradient = linear | radial
# Geometry
from_offset_x = SIZE_EXPRESSION
from_offset_y = SIZE_EXPRESSION
# from_offset_r for radial only
from_offset_r = SIZE_EXPRESSION
to_offset_x = SIZE_EXPRESSION
to_offset_y = SIZE_EXPRESSION
# to_offset_r for radial only
to_offset_r = SIZE_EXPRESSION
# Colors
start_color = #rrggbb opacity
end_color = #rrggbb opacity
# Optional: more color stops
color_stop = percentage #rrggbb opacity
color_stop = percentage #rrggbb opacity
.fi
.RE
.PP
\fB\fCSIZE_EXPRESSION\fR is an expression that encodes an offset,
following the grammar:
.PP
.RS
.nf
SIZE_EXPRESSION = number |
SIZE |
SIZE * number |
SIZE * number%
SIZE = width | height | radius | left | right | top | bottom | centerx | centery |
ELEMENT width | ELEMENT height | ELEMENT radius | ELEMENT left | ELEMENT right | ELEMENT top | ELEMENT bottom | ELEMENT centerx | ELEMENT centery
ELEMENT = self | parent | panel
.fi
.RE
.PP
All coordinates are computed in the drawn element's coordinate system,
with origin in the top\-left corner and the vertical axis growing down.
.PP
Numbers are any real numbers. Negative numbers must not have spaces between
the minus sign and the first digit, for example \fB\fC\-1.234\fR is correct,
while \fB\fC\- 1.234\fR is not.
.PP
Multiple \fB\fC*_offset_*\fR can be given, in which case they are added together.
.SS Gradient examples
.PP
.RS
@ -291,60 +242,17 @@ start_color = #111122 30
end_color = #112211 30
color_stop = 60 #221111 30
# Gradient 2: center glow
gradient = centered
start_color = #ffffff 20
end_color = #ffffff 0
# Gradient 3: glow
# Gradient 2: radial glow
gradient = radial
start_color = #ffffff 20
end_color = #ffffff 0
from_offset_x = width * 0.28
from_offset_y = height * 0.28
from_offset_r = 0
to_offset_x = width * 0.28
to_offset_y = height * 0.28
to_offset_r = radius * 2
# Gradient 4: aurora
gradient = linear
start_color = #ffffff 0
end_color = #ffffff 0
from_offset_x = panel left
from_offset_y = panel top
to_offset_x = panel width * 3
to_offset_x = panel height * 3
to_offset_y = panel width
to_offset_y = panel height
color_stop = 0.1 #ffffff 30
color_stop = 0.8 #ffffff 30
color_stop = 2.1 #7777aa 30
color_stop = 3.1 #7777aa 30
color_stop = 4.0 #ffffaa 30
color_stop = 4.8 #aa7733 30
color_stop = 5.1 #ff7733 30
color_stop = 6.5 #337788 30
color_stop = 9.2 #ffffaa 30
color_stop = 10.1 #777777 30
color_stop = 12.1 #aaaaff 30
color_stop = 14.0 #77ff77 30
color_stop = 18.0 #ffff77 30
color_stop = 19.8 #77ffaa 30
color_stop = 21.1 #ffffaa 20
color_stop = 23.5 #337733 30
color_stop = 25.5 #337733 30
color_stop = 29.2 #77ffff 30
color_stop = 30.1 #77ffaa 30
color_stop = 31.0 #ffffaa 30
color_stop = 34.8 #aa7733 30
# Gradient 5: elegant black
# Gradient 3: elegant black
gradient = vertical
start_color = #444444 100
end_color = #222222 100
# Gradient 6: elegant black
# Gradient 4: elegant black
gradient = horizontal
start_color = #111111 100
end_color = #222222 100
@ -360,8 +268,8 @@ border_color_hover = #ffffff 60
background_color_pressed = #555555 10
border_color_pressed = #ffffff 60
gradient_id = 3
hover_gradient_id = 4
pressed_gradient_id = 2
gradient_id_hover = 4
gradient_id_pressed = 2
[...]
.fi