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.

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.