View source for Edje examples
From Openmoko
You do not have permission to edit this page, for the following reasons:
You can view and copy the source of this page:
Return to Edje examples.
You do not have permission to edit this page, for the following reasons:
You can view and copy the source of this page:
Return to Edje examples.
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 (which is just a matter of copying files).
Edje user interface design is simular to designing for the web (relative, sort a box model, use of images). Graphical tools used for designing web components can almost be reused for edje (buttons, background and other graphical artifacts).
Edje files are compiled with the edje_cc command, eg: edje_cc edje_file.edc
I personally use eclipse with the pydev plugins, with an extra script which compiles edc files. A external builder can be defined to execute the script on modification, following setting are used in the builder.
Next step would be to copy the files to neo with ssh and execute them.
Bash build_edje.sh:
#!/bin/bash for i in $* do case $i in *.edc) cd `dirname $i`; edje_cc $i;; *);; esac done
Program to launch example edje files, to be used if no alternative python example is provided. e.g:
python launcher.py example.edj
Python: launcher.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 = sys.argv[1] print "opening '%s'" % edje_file c = edje.Edje(ee.evas,file=edje_file,group="test") c.size = ee.evas.size c.show() ee.show() ecore.main_loop_begin();
Note this example show how an edje should be initialized, the examples after this will not do this to make them clear as possible. Real applications should still do proper initialization.
snippet:
#!/usr/bin/env python import ecore import ecore.evas import edje import sys import os # Parse command line from optparse import OptionParser def parse_geometry(option, opt, value, parser): try: w, h = value.split("x") w = int(w) h = int(h) except Exception, e: raise optparse.OptionValueError("Invalid format for %s" % option) parser.values.geometry = (w, h) usage = "usage: %prog [options]" op = OptionParser(usage=usage) op.add_option("-e", "--engine", type="choice", choices=("x11", "x11-16"), default="x11-16", help=("which display engine to use (x11, x11-16), " "default=%default")) op.add_option("-n", "--no-fullscreen", action="store_true", help="do not launch in fullscreen") op.add_option("-g", "--geometry", type="string", metavar="WxH", action="callback", callback=parse_geometry, default=(480, 640), help="use given window geometry") op.add_option("-f", "--fps", type="int", default=20, help="frames per second to use, default=%default") # Handle options and create output window options, args = op.parse_args() if options.engine == "x11": f = ecore.evas.SoftwareX11 elif options.engine == "x11-16": if ecore.evas.engine_type_supported_get("software_x11_16"): f = ecore.evas.SoftwareX11_16 else: print "warning: x11-16 is not supported, fallback to x11" f = ecore.evas.SoftwareX11 w, h = options.geometry ee = f(w=w, h=h) ee.fullscreen = not options.no_fullscreen edje.frametime_set(1.0 / options.fps)
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; } } } } } }
This examples show to boxes where left upper corner of one box is set at the right bottom corner of the other.
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; } } } } } }
Note you also need an image 'image.png' which must be located in the same directory as image.edc.
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; } } } } } }
This examples makes using signal in edje very clear.
Types of signals:
action: SIGNAL_EMIT "button_clicked_signal" "button1" and c.signal_callback_add("button_clicked_signal","button1",button_clicked_signal)
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"; } } }
Maybe better to replace this example with ewl or elementary (instead of the gtk mimic of edje)
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; } } } } } }
Including video in edje is no different than including other external content with swallow part type and smart objects, in fact emotion is a smart object.
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; } } } } } }
What is a smart object ?
<TODO>
Using the embreyo scripting language inside edc files.
<TODO>
Some observations:
Edje source:
collections { group { name: "test"; parts { part { name: "bg"; type: RECT; mouse_events: 1; description { state: "default" 0.0; color: 255 255 255 255; rel1 { relative: 0 0; } rel2 { relative: 1 1; } } } part { name: "main"; type: RECT; mouse_events: 1; description { state: "default" 0.0; color: 128 255 255 255; rel1 { relative: 0.25 0.25; offset: 10 10; } rel2 { relative: 0.75 0.75; offset: -10 -10; } } description { state: "default" 1.0; color: 128 255 255 50; rel1 { relative: 0.0 0.0; offset: 10 10; } rel2 { relative: 1.0 1.0; offset: -10 -10; } } } part { name:"button_open"; type:RECT; mouse_events:1; description { state: "default" 0.0; color: 255 128 128 255; rel1 { relative: 0.0 0.90; } rel2 { relative: 0.25 1; } } description { state: "default" 1.0; color: 255 0 0 255; rel1 { relative: 0.0 0.90; } rel2 { relative: 0.25 1; } } } part { name:"button_close"; type:RECT; mouse_events:1; description { state: "default" 0.0; color: 0 255 0 128; rel1 { relative: 0.25 0.90; } rel2 { relative: 0.50 1; } } description { state: "default" 1.0; color: 0 255 0 255; rel1 { relative: 0.25 0.90; } rel2 { relative: 0.50 1; } } } } programs { program { name: "complete"; source: "button_open"; signal: "mouse,clicked,1"; action: STATE_SET "default" 1.0; target:"main"; transition:SINUSOIDAL 1; } program { name: "reverse"; source: "button_close"; signal: "mouse,clicked,1"; action: STATE_SET "default" 0.5; target:"main"; transition:ACCELERATE 1; } program { name:"button_open_mouse_in"; source:"button_open"; signal:"mouse,in"; action: STATE_SET "default" 1; target:"button_open"; transition:ACCELERATE 0.5; } program { name:"button_open_mouse_out"; source:"button_open"; signal:"mouse,out"; action: STATE_SET "default" 0; target:"button_open"; transition:LINEAR 1; } program { name:"button_close_mouse_in"; source:"button_close"; signal:"mouse,in"; action: STATE_SET "default" 1; target:"button_close"; transition:ACCELERATE 0.5; } program { name:"button_close_mouse_out"; source:"button_close"; signal:"mouse,out"; action: STATE_SET "default" 0; target:"button_close"; transition:LINEAR 1; } } } }
<TODO>
<TODO>
<TODO>
<TODO>
<TODO>