e17 - Animated Background (Mini) How-To

[giglio]

I recently started using e17 and wanted to make some animated backgrounds for it.
I couldnt find a How-To so I poked around in some example files and put together a Mini How-To.

I dont have any webspace to put up a zip-file so I'll just be giving instructions.
There werent any comments so I tried to add my own where I could.

Images used - 5 numberd PNG's, 1 overlay image, 1 background image. 1 placeholder image.

Open gimp
make a black 800x600 image , save it as black.png
make a 1 pixel transparent image, save it as 1pix.png
make 5 transparent pngs, each with a different number in it, 1 to 5, and save them as 1- 5 .png.
Save this as reflection_overlay.png http://img131.imageshack.us/img131/2363 ... lay0ee.png

Save the following as demo.edc

Code: Select all

/*---------------------------------*/
/* Load Images to Use */
/*---------------------------------*/
images {
   image: "1.png" COMP; /* Animation Image */
   image: "2.png" COMP; /* Animation Image */
   image: "3.png" COMP; /* Animation Image */
   image: "4.png" COMP; /* Animation Image */
   image: "5.png" COMP; /* Animation Image */
   image: "1pix.png" COMP; /* Placeholder Image */
   image: "black.png" COMP; /* Background Image */
   image: "reflection_overlay.png" COMP; /* Background Overlay */
}

/*-----------------------------------------*/
/* Finished Loading Images  */
/* Begin the madness          */
/*-----------------------------------------*/

collections {
   group {
      name: "desktop/background";
      script {
	 public is_ready;
	 public do_end;
      } /*script*/
/*---------------------------------*/
      parts { /* Begin Creating Image Entries */
/*---------------------------------*/
	 part { /* This is the Main Background Image, Or Color */
	    name: "background";
	    description {
	       state: "default" 0.0;
	       image {normal: "black.png";}
	    } /*desc*/
	 }    /*part*/
/*---------------------------------*/
	 part { /* This is a little wavy overlay on top of the background */
	    name: "reflection_overlay";
	    description {
	       state: "default" 0.0;
	       image {normal: "reflection_overlay.png";}
	    } /*desc*/
	 }    /*part*/
/*---------------------------------*/
	 part { /* This is the Location of the Animations */ 
	    name: "logo_point";
	    type: RECT;
	    description {
	       state: "default" 0.0;
	       color: 0 0 0 0;
	       visible: 0;
	       aspect: 1 1;
	       max: 160 160; /* Size of the Animations */
	    } /*desc*/
	    description {
	       state: "visible" 0.0;
	       inherit: "default" 0.0;
	       color: 255 255 255 255;
	       visible: 1;
	    } /*desc*/
	 }    /*part*/
/*---------------------------------*/
	 part { /* Animation Setups*/
	    name: "logo";
	    clip_to: "logo_point";
	    description {       /* Zoom In Enable/Disable */
	       state: "default" 0.0;
	       visible: 0; 
	       image {normal: "1pix.png";}; /* Placeholder 1 pix Image*/
	    } /*desc*/
	    description {  /* Animations Below */
	       state: "loop" 0.0;
	       visible: 1;
               rel1 {
		  offset: 0 0;
		  to: "logo_point";
	       } /*rel1*/
	       rel2 {
		  offset: 0 0;
		  to: "logo_point";
	       } /*rel2*/
	       image {
		  normal: "1.png";  /* These are the Animations */
		  tween:  "2.png"; 
		  tween:  "3.png";
		  tween:  "4.png";
		  tween:  "5.png";
	       } /*image*/
	    }    /*desc*/
	 }       /*part*/
/*---------------------------------*/
      } /*parts*/
/*---------------------------------*/
      programs {
	 program {
	    name: "init";
	    signal: "load";
	    source: "";
	    script {
	       set_int(is_ready, 0);
	       set_int(do_end, 0);
	    } /*script*/
	 }    /*program*/
	 program {
	    name: "init_pause";
	    signal: "show";
	    source: "";
	    action: STATE_SET "default" 0.0;
	    transition: LINEAR 0.0;		/* Image Timers */
	    target: "logo_point";
	    after: "logo_show";
	    after: "logo_animate";
	 } /*program*/
	 program {
	    name: "logo_show";
	    action: STATE_SET "visible" 0.0;
	    transition: LINEAR 0.0;          /* Image Timers */
	    target: "logo_point";
	 } /*program*/
	 program {
	    name: "logo_animate";
	    action: STATE_SET "intro_start" 0.0;
	    target: "logo";
	    after: "logo_animate2";
	 } /*program*/
	 program {
	    name: "logo_animate2";
	    action: STATE_SET "intro_go" 0.0;
	    transition: LINEAR 0.0;        /* Image Timers */
	    target: "logo";
	    after: "logo_animate2b";
	 } /*program*/
	 program {
	    name: "logo_animate2b";
	    script {
	       new val;	       
	       val = get_int(do_end);
	       if (val == 1)
		 run_program(PROGRAM:"done2");
	       else
		 set_int(is_ready, 1);
	    } /*script*/
	    after: "logo_animate3";
	 }    /*program*/
	 program {
	    name: "logo_animate3";
	    action: STATE_SET "loop" 0.0;
	    target: "logo";
	    after: "logo_animate4";
	 }   /*program*/
	 program {
	    name: "logo_animate4";
	    action: STATE_SET "loop" 0.0;
	    transition: LINEAR 3.0;        /* Image Timers */
	    target: "logo";
	    after: "logo_animate4";
	 }   /*program*/
	 program {
	    name: "done1";
	    signal: "done";
	    source: "";
	    script {
	       new val;	       
	       val = get_int(is_ready);
	       if (val == 1)
		 run_program(PROGRAM:"done2");
	       else
		 set_int(do_end, 1);
	    } /*script*/
	 }    /*program*/
	 program {
	    name: "done2";
            action: STATE_SET "default" 0.0;
	    transition: LINEAR 0.0;          /* Image Timers */
	    target: "logo_point";
	    after: "done3";
	 }    /*program*/
	 program {
	    name: "done3";
	    action: SIGNAL_EMIT "done_ok" "";
	 }    /*program*/
/*---------------------------------*/
   } /*group*/
} /*collect*/

Open a command line and type

Code: Select all

edje_cc demo.edc demo.edj

then copy demo.edj into ~/.e/e/backgrounds

Open Emblem and select the new Background, you will see it scrolling 1- 5 in the preview pane, click it and it will be on your desktop scrolling 1- 5.

Emblem Screen
http://img130.imageshack.us/img130/3720/emblem15yn.jpg
Bad screen of the image on my desktop
http://img130.imageshack.us/img130/5585/bg16ur.jpg

There ya go, now just replace the 1- 5 pngs with images of your choice and youve got your own animated background.

[JoeG]

giglio, this is too damn cool! I hadn't even bothered to check out how to do this before now. Your script made it really, really simple. As a matter of fact, I hacked up an animated background in the style of gentoo. You can preview it or download the edj here.

Let me know whatcha think. I got the original "g" logo here. I used gimp's light effects to create the 5 png's from the original, and replaced your reflection_overlay with a gradient-filled one of my own.

Thanks again!

JoeG

[grzewho]

that`s cool thanks a lot !

btw. does anyone know an app for making animations (something different than gimp) ?

[JoeG]

that`s cool thanks a lot !

btw. does anyone know an app for making animations (something different than gimp) ?

In what format? You could use MING for shockwave. MAYA for 3D animations. Blender3D for 3D photo ... etc.

[peatCMC]

Code: Select all

/*---------------------------------*/
	 part { /* This is the Main Background Image, Or Color */
	    name: "background";
	    description {
	       state: "default" 0.0;
	       image {normal: "black.png";}
	    } /*desc*/
	 }    /*part*/
/*---------------------------------*/

Instead of a 800x600 black image, a simple black rectangle should also work.

Code: Select all

    part { /* This is the Main Background Image, Or Color */
            name: "background";
            type: RECT;
            description {
               state: "default" 0.0;
               color: 0 0 0 255;
            } /*desc*/
           }    /*part*/

[Maedhros]

Moved from Desktop Environments to Documentation, Tips & Tricks.

[val]

that`s cool thanks a lot !

btw. does anyone know an app for making animations (something different than gimp) ?

In what format? You could use MING for shockwave. MAYA for 3D animations. Blender3D for 3D photo ... etc.

gifsicle for gifs

[JoeG]

btw. does anyone know an app for making animations (something different than gimp) ?

You could also use convert by targeting a group of images and specifying the name of the output file if you already have the static images created.

[perchut2]

/me 's wondering what a mplayer -vo png something.avi would give...

[perchut2]

in fact, quite easy... i'm not an artist, though :/

http://perchut2.free.fr/demo.edj

[Vespira]

very nice stuff..

the problem i have is that i run dual monitors, so my desktop resolution is 2048x768. There are some really nice .edj files, but it seems as if no one in the community uses a dual headed setup >.>

I tried to modify the script posted here and made my own background.. the problem is that the location that i wish to have the animation take place is not in the center of the screen.. in addition the animation i want is only going to be 120x120px, not 160x160.. i tried changing the max line (i cannot find a tutorial or documentation anywhere on compiling wallpapers, so i'm prone to noob it up here), but the resulting .edj file still has a 160x160 animation plopped down in the middle of the screen.

Code: Select all

    part { /* This is the Location of the Animations */
       name: "logo_point";
       type: RECT;
       description {
          state: "default" 0.0;
          color: 0 0 0 0;
          visible: 0;
          aspect: 1 1;
          max: 120 120; /* Size of the Animations */
       } /*desc*/
       description {
          state: "visible" 0.0;
          inherit: "default" 0.0;
          color: 255 255 255 255;
          visible: 1;
       } /*desc*/
    }    /*part*/

I'm trying to get the animation to be constrained to a 120x120 area with upper left corner at 350,400 (where 0,0 is upper left corner of a 2048x768 desktop)

totally clueless, so if someone could provide me direction, i'd be quite grateful.

[rominet7777]

Hi,

I just played a little bit with this code, coz' I felt it was much much complicated for a simple animation...
I created the 5 "X.png" files using a 800x600 size, so that the text is centered on the screen.
I think the following works the same as the first example, except it doesn't shrink the text images as it did before.

Anyway : the programs are much more simpler, and you might want to play with this too (with smaller "X.png" for example, and with the relative positions)
There's still something I don't understand : why doesn't the LINEAR 5.0 seconds transition take 5 seconds to complete ... ??

Here it is :

Code: Select all

/*---------------------------------*/
/* Load Images to Use */
/*---------------------------------*/
images {
   image: "1.png" COMP; /* Animation Image */
   image: "2.png" COMP; /* Animation Image */
   image: "3.png" COMP; /* Animation Image */
   image: "4.png" COMP; /* Animation Image */
   image: "5.png" COMP; /* Animation Image */
   image: "reflection_overlay.png" COMP; /* Background Overlay */
}

/*-----------------------------------------*/
/* Finished Loading Images  */
/* Begin the madness          */
/*-----------------------------------------*/

collections {
   group {
      name: "desktop/background";
      script {
        public dumb;
      } /*script*/
/*---------------------------------*/
      parts { /* Begin Creating Image Entries */
/*---------------------------------*/
    part { /* This is the Main Background Image, Or Color */
        name: "background";
            type: RECT;
            description {
               state: "default" 0.0;
               color: 0 0 0 255;
        } /*desc*/
    }    /*part*/
/*---------------------------------*/
    part { /* This is a little wavy overlay on top of the background */
       name: "reflection_overlay";
       description {
          state: "default" 0.0;
          image {normal: "reflection_overlay.png";}
       } /*desc*/
    }    /*part*/
/*---------------------------------*/
    part { /* Animation Setups*/
       name: "logo";
       description {       /* Zoom In Enable/Disable */
          state: "default" 0.0;
          visible: 1;
          image { normal: "1.png"; }
       } /*desc*/
       description {  /* Animations Below */
          state: "loop" 0.0;
          visible: 1;
          rel1 {
                relative, 0.0 0.0;
                offset: 0 0;
          }
          rel2 {
                relative, 1.0 1.0;
                offset: -1 -1;
          }
          image {
                normal: "1.png";  /* These are the Animations */
                tween:  "2.png";
                tween:  "3.png";
                tween:  "4.png";
                tween:  "5.png";
          }
       }
    }
/*---------------------------------*/
      } /*parts*/
/*---------------------------------*/
programs {
    program {
       name: "init";
       signal: "load";
       source: "";
       script {set_int(dumb, 0);}
    }    /*program*/

    program {
       name: "test";
       signal: "show";
       source: "";
       action: STATE_SET "default" 0.0;
       transition: LINEAR 0.0;      /* Image Timers */
       target: "logo";
       after: "logo_rotate";
    }
    program {
       name: "logo_rotate";
       action: STATE_SET "loop" 0.0;
       transition: LINEAR 5.0;        /* Image Timers */
       target: "logo";
       after: "logo_rotate";
    }
/*---------------------------------*/
   } /*group*/
} /*collect*/

[doubleagent]

Now why didn't I think of doing this!

I didn't read, but thank you for being that thoughtful.

[0x0065]

or you can run many of the xscreensaver programs.
They have options to run in the root window
Works with Mac OS X screensavers too.

I could never get either to do switching for multiple desktops though... !!!
if anyone can get it to work. hint hint

anyway, I'm sure there's a screensaver that'll cycle through a few stills.

[nordic bro]

Anyone know how to scale images using the edc file? Like many startup files have an "e" float into the picture but I manually scaled each one of them up in size (2x) but after rebuilding the edj and trying it out, those images ended up being the same size as they were originally (no, I didn't mix up the files and was definitely using the one with altered images ). So it seems that somewhere in the edc file something sets the size it will appear as on-screen regardless of the physical dimensions of the image files themselves; anyone know what does that?

[MidnighToker]

e17 lets you set different backgrounds for desktops, so you could try and create two "standard" animations and putting them next to each other