Seamless configuration and dialog windows.

18Jul08

Lets talk about borders.

A border is typically something to define a region and give some sort of control to that area. In E17 we are luck enough to not only control the border, but also the actual area the program is drawn in. What does that mean? Well, since its a ‘swallow’ object it can be manipulated with position and clipping. Here Im going to show you how to make a border blend seamlessly with the dialog window background.

Firstly, make sure the ‘e.swallow.client’ part is not relative to anything but the evas object. Here is what I will use.

      part {
	 name:          "e.swallow.client";
	 type:          SWALLOW;
	 description {
	    state:    "default" 0.0;
	    rel1 {
	       relative: 0.0  0.0;
	       offset:   5    20;
	    }
	    rel2 {
	       relative: 1.0  1.0;
	       offset:   -6   -6;
	    }
	 }
      }

The ‘relative:’ settings here are redundant so you can take it out, but Ill leave it in just so its clear. Notice the rather big Y value for the rel1 position? that means the titlebar is exactly 20 pixels tall. Make a note of these numbers. Lets move on to the dialog background! And here it is.

      part {
	 name:          "base";
	 mouse_events:  0;
	 description {
	    state:    "default" 0.0;
	    rel1.offset:   -5    -20;
	    rel2.offset:   5   5;
	    image {
	       normal: "surface.png";
	       border: 8 8 8 8;
	    }
	    fill {
	       smooth: 0;
	    }
	 }
      }

You might notice the opposites for the offsets. The rel2 values tho are special. Since the bottom right corner is actually classed as -1, the numbers are exactly 5 away from -1.  The border of the image is also crucial to this effect. If one border is different to the other, the pixmap will scale differently and wont match up to the border.

Once the matching areas are finished, compile up the edje and test it out. This technique doesnt have to be applied to all borders, but it certainly makes your dialog boxes standout as a feature against the regular window borders.

On a side note, I have tried this with GTK but it lacks the flexability of Edje and fails at simply drawing a non-tiled pixmap as the background.

And now for some results.

Enjoy!

Toma

Seamless borders demonstration

Seamless borders demonstration

Advertisements


No Responses Yet to “Seamless configuration and dialog windows.”

  1. Leave a Comment

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: