Blast!

16Oct08

Hey all,

Im up to my old tricks again, making some neat things for you to tinker with! This time Ive added to the Inspire wallpaper and added some stuff to make scaling easier. What that means to us artists, is that our work stays at the correct aspect when displayed on widescreen or standard displays. This is something that normal pixmap backgrounds obviously can not do, so we might as well use the tools we have!

Remember, this is only a demonstration of what can be done with these layers and parts. There are a multitude of things to play with in edje.

Lets get started! Firstly, fire up GIMP and create a new image at 800 x 600. (This resolution is only used for demo purposes) I created 4 layers. The base is the Blue galaxy swirl thing. This will layer be stretched to fill all the space. The next 2 are the corner graphics on their own separate layer. The last layer on top is the E logo, but you could swap this for anything, or scrap it entirely.

All the layers in Blast. These become edje parts later.

All the layers in Blast. These become edje parts later.

Next, save each layer as a separate image. This can be done by making the target layer the only visible one then saving and repeating the process. You might be able to Save Layer As… in GIMP 2.6, but I haven’t checked it out yet. Once you have all the layers separated, open them again and resize them to save some space. Things like E logo need to be in the dead centre of the image to centre correctly later.

Now comes the super fun code part! Heres the .edc from Blast. Its already commented so read on!

collections {
   group { name: "e/desktop/background";
      //
      // Lets make a wallpaper that will SCALE well!!! Because not everyone
      // has the same screen aspect these days. There are a couple ways to
      // get this to work. In this exmaple it keeps the objects at all the
      // same sizes so that no scaling happens.
      //
      // All min and max sizes are taken from their respective image properties
      //
      images {				// Include all files from the XCF 
	 image: "Scaled.png" COMP;
	 image: "LeftBit.png" COMP;
	 image: "RightBit.png" COMP;
	 image: "ELogo.png" COMP;
      }
      parts {
	 part { name: "Scaled";
	    description { state: "default" 0.0;
	       image.normal: "Scaled.png"; // Make it fill all the space
	    }
	 }
	 part { name: "LeftBit";
	    description { state: "default" 0.0;
	       align: 0.0 1.0;		// Align left and at the bottom.
	       min: 334 314;		// Set the min size and...
	       max: 334 314;		// max size so it wont scale.
	       image.normal: "LeftBit.png";
	    }
	 }
	 part { name: "RightBit";
	    description { state: "default" 0.0;
	       align: 1.0 0.0;		// Align Right and at the top.
	       min: 260 284; 		// Set the min size and...
	       max: 260 284;		// max size so it wont scale.
	       image.normal: "RightBit.png";
	    }
	 }
	 part { name: "ELogo";
	    description { state: "default" 0.0;
	       min: 165 224;		// The absence of an align: will
	       max: 165 224;		// make the image centred.
	       image.normal: "ELogo.png";
	    }
	 }
      }
   }
}

Next you need to compile it up using ‘edje_cc blast.edc’ then import the picture from the Wallpaper selector. You should have a well scaled wallpaper that preserves your efforts for all screen sizes.

Here are some links to the wallpaper at a few different sizes for comparison.

1650×1080 (My Desktop)

480×640 (Embedded style display)

Wallpaper Selector

And here is the all important EDJ file for you to take home and study!

Enjoy!

Toma.

Advertisements


2 Responses to “Blast!”

  1. Toma, you can use Gimp-EDC export plugin that is in SVN http://svn.enlightenment.org/svn/e/trunk/edje/utils/gimp-edje-export.py it will automatically save layers and create a basic EDC, then you just need to go there and change rel1/rel2 to make them scalable (if you wish so).

  2. 2 fuch0

    i have to check this out to update my wallies thanks i will look the code later


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: