Here is an example for an edje theme which makes an Elementary slider widget look and behave like a knob.
It will look like this {{:themes:edje-knob.png?nolink}} and works by displaying one of 60 images, depending on how much you drag the knob (up and down). Each of the images corresponds to a different rotation of the knob.
The important parts of the edc file for this theme will be described below.
In the ''group'' block we define the name we will later use to load the theme from within a C program.
<code>
collections{
group{
name: "elm/slider/horizontal/knob";
alias: "elm/slider/horizontal/default";
min: 64 64;
</code>
Next we list the ''images'' we will be using
<code>
images{
image: "0000.png" COMP;
image: "0001.png" COMP;
image: "0002.png" COMP
//Similar for 0003.png to 0059.png.
image: "0060.png" COMP;
image: "knobbg.png" COMP;
}
</code>
The ''script'' block contains global variables and functions. The function ''update_knob_state'' is used to load new images when the knob is turned. The variables are used to store the state of the knob.
The following ''part'' is needed so we can set the value of the knob from the C source via elm_slider_value_set.
<code>
part{
//The real slider for elm_slider
name: "elm.dragable.slider";
scale: 1;
dragable.x: 1 1 0;
dragable.y: 1 1 0;
type: RECT;
description{
state: "default" 0.0;
visible: 0;
}
dragable{
x: 1 1 0;
y: 1 1 0;
}
}
</code>
This ''part'' named "dragger" is the actually draggable part of the slider.
It's invisible but will measure how much the knob has been turned (or dragged).
<code>
part{
name: "dragger";
type: RECT;
description{
state: "default" 0.0;
rel1.to: "knob";
rel2.to: "knob";
color: 0 0 0 0;
}
description{
state: "hoki" 0.0;
rel1.to: "knob";
rel2.to: "knob";
color: 0 0 0 0;
}
dragable{
x: 0 0 0;
y: 1 1 0;
}
}
}
</code>
Now the ''parts'' block is finished and we continue with the ''programs'' block which contains small scripts which control the behaviour of our knob. The programs are called when a certain signal
from a certain source is received. Signals can be emitted from inside this edje
or from outside (C source).
<code>
programs{
</code>
The script part of the ''program'' named "on_drag_move" runs when the
signal "drag" from source "dragger" (the part defined above) is received.
<code>
program{
name: "on_drag_move";
signal: "drag";
source: "dragger";
script{
new Float:p1;
new Float:p2;
//The drag value is subtracted from the last knob position
The variable "signal_from_dragger" is used as a guard to distinguish if calls of set_drag for "elm.dragable.slider" are made from within the edje theme (then it is 1), ore from outside, e.g. C source, (then it is 0).
Next are some more programs
<code>
program{
name: "on_drag_stop";
signal: "drag,stop";
source: "dragger";
script{
set_float(knob_last, get_float(knob_pos));
reset_dragger();
}
}
program{
name: "on_wheel";
signal: "mouse,wheel*";
source: "dragger";
//after: "on_slider_set";
}
program{
signal: "elm,state,enabled";
source: "elm";
script {
set_int(signal_from_dragger, 0);
}
}
</code>
The following ''program'' is called when set_drag for elm.dragable.slider is called.
<code>
program{
signal: "drag,set";
source: "elm.dragable.slider";
script {
</code>
If we were called because the part "dragger" was dragged, "signal_from_dragger" is 1 and nothing else
will happen here except that "signal_from_dragger" will be set to 0.