Edje Rotations

Edje isn't able to rotate objects at runtime. Because of this reason you need to before-compute all rotation frames. In some cases this is many work and costs a lot of time if you do it with Gimp, Inkscape or another drawing application. So what I like to show in this article is an easy way to create automatic computed rotation frames.

In this example we've a compass and like to rotate the direction marker (N,W,S,E). So at first take a look at the background image.

The background image

I decided to have the arrow at a fixed position and rotate the markers. It would be easy to fix the markers and rotate the arrow. Now take a look at the direction marker template image.

The direction marker image

So the next step is to rotate the direction marker template and generate the frames. There's a little script that does all this work for us. You need imagemagick installed to get it working.

#!/bin/sh

i=1
n=360
infile="degree.png"
imgdir="images"

test -f programm.edc && rm program.edc
test -f description.edc && rm description.edc
test -f images.edc && rm images.edc

while [ $i -le $n ]; do
  num=`printf "%.3d\n" $i`

  outfile="degree"$num.png
  rotate=`echo $n + 1 - $i | bc`

  echo "creating file $outfile..."
  CONVERT="$imgdir/$infile -matte ( +clone -background none -rotate $rotate  ) -gravity center  -compose Src -composite $imgdir/$outfile"

  convert $CONVERT

  if [ $i != 1 ] 
  then
      echo "DESC_DEGREE($num)" >> description.edc
  fi

  echo "PROG_DEGREE($num)" >> program.edc
  echo "image:  \"degree"$num".png\" COMP;" >> images.edc

  i=`expr $i + 1`
done

This script does simply create some files that saves us a lot of work. Now we could create our main EDC and insert all this automatic generated files.

images {
        image:  "empass_bg.png" COMP;
#include "images.edc"
}

collections {
   group {
      name: "main";
      min, 0 0;

      parts {

        part {
                name:   "background";
                type:   IMAGE;
                mouse_events: 0;

                description {
                        state: "default" 0.0;
                        min: 0 0;
                        aspect: 1 1;

                        rel1 {
                                relative: 0 0;
                                offset: 0 0;
                        }

                       rel2 {
                                relative: 1 1;
                                offset: -1 -1;
                        }

                       image {
                                normal: "empass_bg.png";
                      }
                }
        }

        part {
                name:   "degree";
                type:   IMAGE;
                mouse_events: 0;

                description {
                        state: "degree001" 0.0;
                        min: 0 0;
                        aspect: 1 1.156;

                        rel1 {
                                relative: 0.12 0.242;
                                to: "background";
                        }

                        rel2 {
                                relative, 0.873 0.893;
                                to: "background";
                        }

                       image {
                                normal: "degree001.png";
                      }
                }
# ifdef DESC_DEGREE
#  undef DESC_DEGREE
# endif
# define DESC_DEGREE(num) \
            description { \
               state: "degree"num 0.0; \
               inherit: "default" 0.0; \
               image { \
                  normal: "degree"num".png"; \
               } \
            }
#include "description.edc"
        }
   } /* Close Parts */

   programs {

# ifdef PROG_DEGREE
#  undef PROG_DEGREE
# endif
# define PROG_DEGREE(num) \
            program { \
                name, "prog_degree"num; \
                signal, "signal_degree"num; \
                source, "degree"; \
                action, STATE_SET "degree"num 0.0; \
                target, "degree"; \
            }
#include "program.edc"
        
   } /* Close Prog */
 } /* Close Group */
} /* Close Coll */

Now compile your EDC and try the result. As you see an rotation with 360 frames with not much work. :-)

This example may not fit exactly fit your purposes. But I think you're able to understand the idea of automatic generated frames.

TODO

• Find out how to use SVG images as imagemagick data source.