Gentoo Forums
Gentoo Forums
Gentoo Forums
Quick Search: in
e17 - Animated Background (Mini) How-To
View unanswered posts
View posts from last 24 hours

 
Reply to topic    Gentoo Forums Forum Index Documentation, Tips & Tricks
View previous topic :: View next topic  
Author Message
giglio
n00b
n00b


Joined: 22 Jul 2005
Posts: 24

PostPosted: Sat Jul 30, 2005 4:50 pm    Post subject: e17 - Animated Background (Mini) How-To Reply with quote

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/reflectionoverlay0ee.png

Save the following as demo.edc
Code:

/*---------------------------------*/
/* 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:
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.
Back to top
View user's profile Send private message
JoeG
Apprentice
Apprentice


Joined: 30 Jul 2003
Posts: 179
Location: Kentucky, USA

PostPosted: Thu Aug 04, 2005 3:26 am    Post subject: Reply with quote

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
_________________
Linux User#226477
Back to top
View user's profile Send private message
grzewho
l33t
l33t


Joined: 31 Dec 2002
Posts: 626
Location: /home/g

PostPosted: Thu Aug 04, 2005 7:47 am    Post subject: Reply with quote

that`s cool thanks a lot !

btw. does anyone know an app for making animations (something different than gimp) ?
_________________
Code:
USE="freedom -software_patents" emerge --deep --update world
Back to top
View user's profile Send private message
JoeG
Apprentice
Apprentice


Joined: 30 Jul 2003
Posts: 179
Location: Kentucky, USA

PostPosted: Thu Aug 04, 2005 12:19 pm    Post subject: Reply with quote

grzewho wrote:
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.
_________________
Linux User#226477
Back to top
View user's profile Send private message
peatCMC
n00b
n00b


Joined: 14 Jan 2005
Posts: 10
Location: nbg

PostPosted: Mon Aug 08, 2005 2:38 pm    Post subject: Re: e17 - Animated Background (Mini) How-To Reply with quote

giglio wrote:

Code:

/*---------------------------------*/
    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:

    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*/
Back to top
View user's profile Send private message
Maedhros
Bodhisattva
Bodhisattva


Joined: 14 Apr 2004
Posts: 5511
Location: Durham, UK

PostPosted: Mon Aug 08, 2005 4:33 pm    Post subject: Reply with quote

Moved from Desktop Environments to Documentation, Tips & Tricks.
_________________
No-one's more important than the earthworm.
Back to top
View user's profile Send private message
val
Apprentice
Apprentice


Joined: 30 Jun 2004
Posts: 234

PostPosted: Tue Aug 09, 2005 7:53 am    Post subject: Reply with quote

JoeG wrote:
grzewho wrote:
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
_________________
My log saw what happened to Laura Palmer. Go ahead. Ask it.
Back to top
View user's profile Send private message
JoeG
Apprentice
Apprentice


Joined: 30 Jul 2003
Posts: 179
Location: Kentucky, USA

PostPosted: Tue Aug 09, 2005 12:18 pm    Post subject: Reply with quote

grzewho wrote:
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. :wink:
_________________
Linux User#226477
Back to top
View user's profile Send private message
perchut2
Tux's lil' helper
Tux's lil' helper


Joined: 31 Mar 2003
Posts: 96
Location: Paris

PostPosted: Tue Aug 09, 2005 5:18 pm    Post subject: Reply with quote

/me 's wondering what a mplayer -vo png something.avi would give... :idea:
_________________
Bonheur Amour Risette,
Labeur Labour Levrette.
Back to top
View user's profile Send private message
perchut2
Tux's lil' helper
Tux's lil' helper


Joined: 31 Mar 2003
Posts: 96
Location: Paris

PostPosted: Tue Aug 09, 2005 7:04 pm    Post subject: Reply with quote

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

http://perchut2.free.fr/demo.edj
_________________
Bonheur Amour Risette,
Labeur Labour Levrette.
Back to top
View user's profile Send private message
Vespira
n00b
n00b


Joined: 20 Feb 2005
Posts: 33
Location: Arizona, USA

PostPosted: Thu Sep 08, 2005 3:59 pm    Post subject: Reply with quote

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:
    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.
Back to top
View user's profile Send private message
rominet7777
n00b
n00b


Joined: 21 Oct 2005
Posts: 1

PostPosted: Fri Oct 21, 2005 7:26 pm    Post subject: Reply with quote

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:

/*---------------------------------*/
/* 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*/
Back to top
View user's profile Send private message
doubleagent
Guru
Guru


Joined: 15 Apr 2005
Posts: 444
Location: 127.0.0.1

PostPosted: Fri Sep 15, 2006 4:32 am    Post subject: Reply with quote

Now why didn't I think of doing this!

I didn't read, but thank you for being that thoughtful. :)
_________________
shickapooka wrote:
i think they programmed [otw] based on a right-wing jewish-nigger-nazi, his gay, retarded, left-wing love slave with webbed feet, and their three headed cat that poops uncontrollably. the cat is also an apple fanboy
Back to top
View user's profile Send private message
0x0065
n00b
n00b


Joined: 08 Apr 2007
Posts: 49

PostPosted: Fri May 25, 2007 12:11 pm    Post subject: Xscreensaver? Reply with quote

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.
Back to top
View user's profile Send private message
nordic bro
Guru
Guru


Joined: 25 Oct 2003
Posts: 582

PostPosted: Sun Dec 30, 2007 1:03 am    Post subject: Reply with quote

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?
Back to top
View user's profile Send private message
MidnighToker
n00b
n00b


Joined: 11 Jul 2008
Posts: 3

PostPosted: Fri Jul 11, 2008 9:13 am    Post subject: Reply with quote

e17 lets you set different backgrounds for desktops, so you could try and create two "standard" animations and putting them next to each other :)
Back to top
View user's profile Send private message
Display posts from previous:   
Reply to topic    Gentoo Forums Forum Index Documentation, Tips & Tricks All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum