Edje examples

From Openmoko

(Difference between revisions)
Jump to: navigation, search
(Signals)
m (Signals)
Line 199: Line 199:
 
</pre>
 
</pre>
 
== Signals ==
 
== Signals ==
This examples makes the using signal in edje very clear.
+
This examples makes using signal in edje very clear.
  
 
Types of signals:
 
Types of signals:

Revision as of 15:06, 24 January 2009

This page is meant for developers who are totally new enlightment and wish to have the simplest examples possible. These are my first steps to getting started and are tested on the host machine. This page does not describe howto setup a build environment or how to deploy on openmoko.

Contents

TODO

  • Add proper openmoko initialization example.
  • Add text example
  • Add font and color sets examples
  • Add macro examples
  • Add Smart object
  • Add scripting example

Compiling edj files

Edje files are compiled with the edje_cc command, eg: edje_cc edje_file.edc


Simple box with margin

Python source:box_margin.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
#import edje.decorators
import sys
import os

ee = ecore.evas.SoftwareX11(w=480, h=640)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"box_margin.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

c.show()
ee.show()
ecore.main_loop_begin();

Edje source: box_margin.edc

collections {
   group {
      name: "test";
      	parts {
	    part {
	       name: "main";
	       type: RECT;
	       mouse_events: 0;
	       description {
	          state: "default" 0.0;
	          color: 128 255 255 255;
	          rel1 {
	             relative: 0.0 0.0;
	             offset: 10 10;
	          }
	          rel2 {
	              relative: 1.0 1.0;
	              offset: -10 -10;
	          }
	       }
	    }
        }
    }
}

Relative box position

This examples show to boxes where left upper corner of one box is set at the right bottom corner of the other.

Python source: relative_box_position.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import sys
import os

ee = ecore.evas.SoftwareX11(w=400, h=400)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"relative_box_position.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

c.show()
ee.show()
ecore.main_loop_begin();

Edje source: relative_box_position.edc

collections {
    group {
        name: "test";
      	parts {
            part {
                name: "box-red";
                type: RECT;
                mouse_events: 0;
                description {
                   state: "default" 0.0;
                   color: 255 0 0 255;
                   rel1 {
                      relative: 0.0 0.0;
                      offset: 0 0;
                   }
                   rel2 {
                      relative: 0.5 0.5;
                      offset: 0 0;
                   }
                }
            }
            part {
                name: "box-blue";
                type: RECT;
                mouse_events: 0;
                description {
                    state: "default" 0.0;
                    color: 0 0 255 255;
                    rel1 {
                        relative: 1.0 1.0;
                        offset: 0 0;
                        to: "box-red";
                    }
                    rel2 {
                        relative: 1.0 1.0;
                        offset: 0 0;  
                    }
                }
            } 
        }
    }
}

Image

Note you also need an image 'image.png' which must be located in the same directory as image.edc.

Python source: image.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import sys
import os

ee = ecore.evas.SoftwareX11(w=400, h=400)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"image.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

c.show()
ee.show()
ecore.main_loop_begin();

Edje source: image.edc

images {
    image: "image.png" COMP;
}

collections {
    group {
        name: "test";
        parts {
            part {
                name: "image-block";
                type: IMAGE;
                
                description {
                   state: "default" 0.0;
                   
                   image { 
                      normal: "image.png"; 
                   }
                   
                   rel1 {
                      relative: 0.25 0.25;
                      offset: 0 0;
                   }
                   rel2 {
                      relative: 0.75 0.75;
                      offset: 0 0;
                   }
                }
            }
        }
    }
}

Signals

This examples makes using signal in edje very clear.

Types of signals:

  • Handle signal inside edc, e.g: program: "button_hot";
  • Handle event directly within the python code, e.g: c.signal_callback_add("mouse,clicked,1","button1",button_clicked)
  • Resize callback, e.g: ee.callback_resize = resize_callback
  • Custom signal emitted in edc program, e.g:
 action: SIGNAL_EMIT "button_clicked_signal" "button1" and
 c.signal_callback_add("button_clicked_signal","button1",button_clicked_signal)
  • Emit signal from python to edje


Python source: signal.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import edje.decorators;
import sys
import os

ee = ecore.evas.SoftwareX11(w=400, h=400)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"signal.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

# Mouse click signal from part "button"
def button_clicked(obj, signal,source):
    print "button clicked";
c.signal_callback_add("mouse,clicked,1","button1",button_clicked)

# Resize callback
def resize_callback(ee):
    c.size = ee.evas.size
    
ee.callback_resize = resize_callback


def button_clicked_signal(obj,signal,source):
    print "Custom signal emitted after button clicked";
    c.signal_emit("signal_from_python","")

c.signal_callback_add("button_clicked_signal","button1",button_clicked_signal)

c.show()
ee.show()
ecore.main_loop_begin();

Edje source: signal.edc

fonts {
   font: "VeraBd.ttf" "Sans";
}


collections {
    group {
      name: "test";
        parts {
            part {
                name: "button1";
                type: RECT;
                mouse_events: 1;
                description {
                   state: "default" 0.0;
                   color: 0 0 255 128;
                   rel1 {
                      relative: 0.25 0.25;
                      offset: 10 10;
                   }
                   rel2 {
                      relative: 0.75 0.75;
                      offset: -10 -10;
                   }
                }
                description {
                    state: "hot" 0.0;
                    inherit: "default" 0.0;
                    color: 0 0 255 255;
                }
            }
            
            part {
                type: TEXT;
                name:"text";
                

                description {
                   color: 255 255 255 255;
                    rel1 {
                        relative: 0 0.75;
                      
                    }
                    rel2 {
                        relative: 1 1;
                    }
                    text {
                        text:"default text";
                        font:"VeraBd.ttf";
                        size: 20;
                    }
                }
                description {
                   state: "received_signal_from_python" 0;
                   color: 255 255 255 255;
                    rel1 {
                        relative: 0 0.75;
                      
                    }
                    rel2 {
                        relative: 1 1;
                    }
                    text {
                        text:"Received signal from python";
                        font:"VeraBd.ttf";
                        size: 20;
                    }
                }
            }
        }
        programs {
            program {
                name: "button_hot";
                signal: "mouse,in";
                source: "button1";
                
                action: STATE_SET "hot" 0.0;
                target: "button1";
            }
            program {
                name: "button_cold";
// Input
                signal: "mouse,out";
                source: "button1";
                
// Output
                action: STATE_SET "default" 0.0;
                target: "button1";
                
            }
// Program who emits an signal when mouse clicked.            
            program {
                name:"button_clicked_signal_program";
                signal: "mouse,clicked,1";
                source: "button1";
                
                
                action: SIGNAL_EMIT "button_clicked_signal" "button1";
            }
            program {
                name:"handle_python_signal";
                signal:"signal_from_python";
                
                action: STATE_SET "received_signal_from_python" 0;
                target:"text";
            }
        }
}

Embedded etk widget

Python code: widget_embed.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import sys
import os
import etk

ee = ecore.evas.SoftwareX11(w=400, h=200)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"widget_embed.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

embed = etk.Embed(ee.evas)
entry = etk.Entry()
embed.add(entry)


c.part_swallow("input",embed.object);

embed.show_all()
c.show()
ee.show()

ecore.main_loop_begin();

Edje source: widget_embed.edc

collections {
    group {
        name: "test";
        parts {
            part {
                name: "input";
                type: SWALLOW;
                
                description {
                   state: "default" 0.0;
                   
                   rel1 {
                      relative: 0.25 0.25;
                      offset: 0 0;
                   }
                   rel2 {
                      relative: 0.75 0.75;
                      offset: 0 0;
                   }
                }
            }
        }
    }
}

Video

Not sure howto setup gstreamer because this would be the preferred method.

Python source:video.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import sys
import os
import emotion

ee = ecore.evas.SoftwareX11(w=320, h=200)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"video.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

vid = emotion.Emotion(ee.evas,module_filename="xine");
vid.file_set("video.mpeg");
c.part_swallow("video", vid)

vid.show()
vid.play = True

c.show()
ee.show()
ecore.main_loop_begin()

Edje source: video.edc

collections {
    group {
        name: "test";
        parts {
            part {
                name: "video";
                type: SWALLOW;
                
                description {
                   state: "default" 0.0;
                   aspect: 1.7 1.8;
                   rel1 {
                      relative: 0 0;
                      offset: 0 0;
                   }
                   rel2 {
                      relative: 1 1;
                      offset: 0 0;
                   }
                }
            }
        }
    }
}
Personal tools

This page is meant for developers who are totally new enlightment and wish to have the simplest examples possible. These are my first steps to getting started and are tested on the host machine. This page does not describe howto setup a build environment or how to deploy on openmoko.

TODO

  • Add proper openmoko initialization example.
  • Add text example
  • Add font and color sets examples
  • Add macro examples
  • Add Smart object
  • Add scripting example

Compiling edj files

Edje files are compiled with the edje_cc command, eg: edje_cc edje_file.edc


Simple box with margin

Python source:box_margin.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
#import edje.decorators
import sys
import os

ee = ecore.evas.SoftwareX11(w=480, h=640)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"box_margin.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

c.show()
ee.show()
ecore.main_loop_begin();

Edje source: box_margin.edc

collections {
   group {
      name: "test";
      	parts {
	    part {
	       name: "main";
	       type: RECT;
	       mouse_events: 0;
	       description {
	          state: "default" 0.0;
	          color: 128 255 255 255;
	          rel1 {
	             relative: 0.0 0.0;
	             offset: 10 10;
	          }
	          rel2 {
	              relative: 1.0 1.0;
	              offset: -10 -10;
	          }
	       }
	    }
        }
    }
}

Relative box position

This examples show to boxes where left upper corner of one box is set at the right bottom corner of the other.

Python source: relative_box_position.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import sys
import os

ee = ecore.evas.SoftwareX11(w=400, h=400)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"relative_box_position.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

c.show()
ee.show()
ecore.main_loop_begin();

Edje source: relative_box_position.edc

collections {
    group {
        name: "test";
      	parts {
            part {
                name: "box-red";
                type: RECT;
                mouse_events: 0;
                description {
                   state: "default" 0.0;
                   color: 255 0 0 255;
                   rel1 {
                      relative: 0.0 0.0;
                      offset: 0 0;
                   }
                   rel2 {
                      relative: 0.5 0.5;
                      offset: 0 0;
                   }
                }
            }
            part {
                name: "box-blue";
                type: RECT;
                mouse_events: 0;
                description {
                    state: "default" 0.0;
                    color: 0 0 255 255;
                    rel1 {
                        relative: 1.0 1.0;
                        offset: 0 0;
                        to: "box-red";
                    }
                    rel2 {
                        relative: 1.0 1.0;
                        offset: 0 0;  
                    }
                }
            } 
        }
    }
}

Image

Note you also need an image 'image.png' which must be located in the same directory as image.edc.

Python source: image.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import sys
import os

ee = ecore.evas.SoftwareX11(w=400, h=400)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"image.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

c.show()
ee.show()
ecore.main_loop_begin();

Edje source: image.edc

images {
    image: "image.png" COMP;
}

collections {
    group {
        name: "test";
        parts {
            part {
                name: "image-block";
                type: IMAGE;
                
                description {
                   state: "default" 0.0;
                   
                   image { 
                      normal: "image.png"; 
                   }
                   
                   rel1 {
                      relative: 0.25 0.25;
                      offset: 0 0;
                   }
                   rel2 {
                      relative: 0.75 0.75;
                      offset: 0 0;
                   }
                }
            }
        }
    }
}

Signals

This examples makes the using signal in edje very clear.

Types of signals:

  • Handle signal inside edc, e.g: program: "button_hot";
  • Handle event directly within the python code, e.g: c.signal_callback_add("mouse,clicked,1","button1",button_clicked)
  • Resize callback, e.g: ee.callback_resize = resize_callback
  • Custom signal emitted in edc program, e.g:
 action: SIGNAL_EMIT "button_clicked_signal" "button1" and
 c.signal_callback_add("button_clicked_signal","button1",button_clicked_signal)
  • Emit signal from python to edje


Python source: signal.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import edje.decorators;
import sys
import os

ee = ecore.evas.SoftwareX11(w=400, h=400)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"signal.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

# Mouse click signal from part "button"
def button_clicked(obj, signal,source):
    print "button clicked";
c.signal_callback_add("mouse,clicked,1","button1",button_clicked)

# Resize callback
def resize_callback(ee):
    c.size = ee.evas.size
    
ee.callback_resize = resize_callback


def button_clicked_signal(obj,signal,source):
    print "Custom signal emitted after button clicked";
    c.signal_emit("signal_from_python","")

c.signal_callback_add("button_clicked_signal","button1",button_clicked_signal)

c.show()
ee.show()
ecore.main_loop_begin();

Edje source: signal.edc

fonts {
   font: "VeraBd.ttf" "Sans";
}


collections {
    group {
      name: "test";
        parts {
            part {
                name: "button1";
                type: RECT;
                mouse_events: 1;
                description {
                   state: "default" 0.0;
                   color: 0 0 255 128;
                   rel1 {
                      relative: 0.25 0.25;
                      offset: 10 10;
                   }
                   rel2 {
                      relative: 0.75 0.75;
                      offset: -10 -10;
                   }
                }
                description {
                    state: "hot" 0.0;
                    inherit: "default" 0.0;
                    color: 0 0 255 255;
                }
            }
            
            part {
                type: TEXT;
                name:"text";
                

                description {
                   color: 255 255 255 255;
                    rel1 {
                        relative: 0 0.75;
                      
                    }
                    rel2 {
                        relative: 1 1;
                    }
                    text {
                        text:"default text";
                        font:"VeraBd.ttf";
                        size: 20;
                    }
                }
                description {
                   state: "received_signal_from_python" 0;
                   color: 255 255 255 255;
                    rel1 {
                        relative: 0 0.75;
                      
                    }
                    rel2 {
                        relative: 1 1;
                    }
                    text {
                        text:"Received signal from python";
                        font:"VeraBd.ttf";
                        size: 20;
                    }
                }
            }
        }
        programs {
            program {
                name: "button_hot";
                signal: "mouse,in";
                source: "button1";
                
                action: STATE_SET "hot" 0.0;
                target: "button1";
            }
            program {
                name: "button_cold";
// Input
                signal: "mouse,out";
                source: "button1";
                
// Output
                action: STATE_SET "default" 0.0;
                target: "button1";
                
            }
// Program who emits an signal when mouse clicked.            
            program {
                name:"button_clicked_signal_program";
                signal: "mouse,clicked,1";
                source: "button1";
                
                
                action: SIGNAL_EMIT "button_clicked_signal" "button1";
            }
            program {
                name:"handle_python_signal";
                signal:"signal_from_python";
                
                action: STATE_SET "received_signal_from_python" 0;
                target:"text";
            }
        }
}

Embedded etk widget

Python code: widget_embed.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import sys
import os
import etk

ee = ecore.evas.SoftwareX11(w=400, h=200)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"widget_embed.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

embed = etk.Embed(ee.evas)
entry = etk.Entry()
embed.add(entry)


c.part_swallow("input",embed.object);

embed.show_all()
c.show()
ee.show()

ecore.main_loop_begin();

Edje source: widget_embed.edc

collections {
    group {
        name: "test";
        parts {
            part {
                name: "input";
                type: SWALLOW;
                
                description {
                   state: "default" 0.0;
                   
                   rel1 {
                      relative: 0.25 0.25;
                      offset: 0 0;
                   }
                   rel2 {
                      relative: 0.75 0.75;
                      offset: 0 0;
                   }
                }
            }
        }
    }
}

Video

Not sure howto setup gstreamer because this would be the preferred method.

Python source:video.py

#!/usr/bin/env python

import evas
import ecore
import ecore.evas
import edje
import sys
import os
import emotion

ee = ecore.evas.SoftwareX11(w=320, h=200)
edje_file = os.path.join(os.path.dirname(sys.argv[0]),"video.edj")

c = edje.Edje(ee.evas,file=edje_file,group="test")
c.size = ee.evas.size

vid = emotion.Emotion(ee.evas,module_filename="xine");
vid.file_set("video.mpeg");
c.part_swallow("video", vid)

vid.show()
vid.play = True

c.show()
ee.show()
ecore.main_loop_begin()

Edje source: video.edc

collections {
    group {
        name: "test";
        parts {
            part {
                name: "video";
                type: SWALLOW;
                
                description {
                   state: "default" 0.0;
                   aspect: 1.7 1.8;
                   rel1 {
                      relative: 0 0;
                      offset: 0 0;
                   }
                   rel2 {
                      relative: 1 1;
                      offset: 0 0;
                   }
                }
            }
        }
    }
}