Welcome to the wonderful world of Etcher. In this tutorial we're going to discuss the principles of Etcher, Ebony, and theme creation in general. But first lets get a quick overview of DR17 in general.

Enlightenment DR17 is a complete overhaul of DR16. Though many of the fundamental principles remain the same, the way in which the environment is assembled is completely different. For instance, in DR16 a theme was a TAR (renamed to mytheme.etheme) that contained a directory structure filled with images and configuration files. While this is an accepted way of building themes, because most themes are built this way, it was very cumbersome. You often didn't know what the theme would actually look like until you got everything close to the way it should be and then loaded it. A long exchange of editing config files and reloading were the result. Moreover this method forces you, as the themer, to know fairly accurately what your theme will look like before you've actually seen it. Many themers have tricks they use to overcome these issues (like designing a theme in GIMP using multiple layers for each piece and then breaking them apart later) but this is still a clumsy way to go about theme creation.

Thus was created a new method to store information of all types in DR17. The solution was to create a database interface library (edb) that could store configuration information and binary data (images). In this way you can store every part of your theme in a singular portable file. The natural problem with this solution is that tools must be created to maintain these database files, thats were Etcher and Ebony come in. You can open and edit edb files using the tools packaged with the edb libraries (namely: edb_ed, edb_gtk_ed, and edb_vt_ed). These tools are fine for edb's only handling configuration information, but there are currently 3 different types of edb uses. These are: configuration (using edb_gtk_ed, or specific tool), bits (etcher), and bgs (wallpaper, using ebony). Let's look at Etcher in detail.

Etcher is where we can edit and create bits.db files for DR17. These files are in turn used for a variety of purposes, including: borders (window borders), menus, iconbars, and more. The methods used to create different bits varies on what kind of bit you are creating, but we still use Etcher and the procedures are basically the same. The basic steps are: add an image, define it, position and size it, repeat. The biggest obstacle to overcome is the confusion of positioning and sizing. In the Etcher window you see above, you notice that there is a black and yellow striped area with little hands at each corner of the area; this is the area in which we work. This area designates the borders of the bit we are working on, and in the case of a border bit, the edges of a window. Etcher gives you several ways to "push" things around the workspace, sometimes you can choose between them, sometimes you can't. Let's start working with a bit and see how we can manipulate it.

Open Etcher and add the image corner_lowerleft.png found here, by clicking the "Image" button. You will see the image fill the entire workspace, and the name "Image_1" will appear in the box on the "Images" tab. Now you should click on the name "Image_1", highlighting it. The names of the tabs below the workspace will change from gray to black allowing you to use them and the image will have a white tint on it, signaling that it is active. Click on the "Properties" tab. Notice the "Name" is specified as "Image_1". Change this name to something more informative, in this case call it "Bottom_Left_Corner". You can call images whatever you like, but the more informative the name, the easier it'll be to work on later. While we're still on the Properties tab, use the dropdown next to "Class:" and specify "Resize". Then in the drop down next to "Color Class:" specify "Border BG". Once you've finished these changes click the Apply button. Any time you make a change on a tab you must click Apply or the changes will not take effect. The window now looks like this:

So we added the image and set the properties of it. Now we need to size and position it. Because this is a corner piece we want it in the bottom left corner of the window. Something important to this piece of out border bit is that this image will never be resized. Therefore we can click on the "Size" tab and set the absolute size of the image. The dimensions of this image are 7x7. (You'll find Entice a really handy tool for checking image size will using Etcher.) So on our Size tab, we can change both the minimum size and maximum size under Horizontal to 7, because it'll never be bigger or smaller than 7 across. Then we can change both the minimum and maximum vertical size to 7. Click Apply and the image will shrink to that size. Now we've sized the image, we must now position it. Click on the "Misc" tab. You'll see the settings for both Horizontal and Vertical next to "Context Alignment" are set to 0.50 by default. The top left corner is 0. Setting the Horizontal Alignment to "0" (we don't want to move to the right any), and the Vertical Context Alignment to "1" (all the way at the bottom) we get the image where we want it. Click Apply to see it move. Corners are easy to place in this manner. By sizing them to an absolute size and then jamming them in the corners. The Context Alignment for the top-left corner would be 0,0. The context alignment for the bottom-right corner would be 1,1. It's important to understand this, so I've got a diagram below that might help.

The next step is to finish adding the corners. We'll repeat process used for the bottom left corner on each of the others, by adding the image, changing the properties, setting the absolute size (because they'll never resize), and position them. Keep in mind that only the bottom two corners will need to use the "Resize" class, the top corners will be part of the title bar, so set the class to "Decoration". The bottom right corner will have a context alignment of horizontal 1 and vertical 1 (all the way to the bottom, all the way to the right). The top left corner will have a context alignment of 0 and 0, and the top right corner will be at 0 and 1 (don't move down, all the way to the right). The images used for this tutorial can be found here. Also note that when setting the absolute size of an image that you set it to the actual size of that image. Using Entice you can quickly look at each image and check its size. Once your corners are in you should look like this:

Now that you've played with Etcher a bit, let me lay down some guidelines. First off, notice that we've been positioning things and we never touched the object with our mouse. This is a big rule, don't ever every use your mouse to move, resize, position, etc.. You simply don't need to. In the top left corner of Etcher, you see a "Draft" button. Not only does that button remind you that it's time to enjoy a Guinness Draft, but it also allows you to look at the bit you are creating without seeing the workspace guides. This is useful for getting an unhindered look at your bit, though all work on your bit should always be done in draft mode. One of the advantages of draft mode is that you can click-and-hold on one of the hands to resize your bit. You'll notice that if you position your images properly they will always stay right where they should be, regardless of shape. Many people who played with Etcher when it was first released mentioned that they could build a bit in Etcher that looked perfect, but as soon as they resized it everything moved. This was normally because they placed things in Etcher with their mouse making it appear they were in the right place, but since the images were placed with no relation to anything else, the resize didn't change the bit at all. As mentioned earlier, always make sure that you click "Apply" after making changes.

Additional Notes: At this point in time, Etcher suffers from two annoying bugs that will be removed at some point in time. The first is that when selecting (or trying) things on drop down boxes you'll have to try several times before the item you want is actually selected. So, you can feel better that it's not just you. Before Raster informed me of this I thought there were conditions that wouldn't allow me to change the settings, but this is untrue. Just be persistent. The second little bug is that Etcher will sometimes remove or forget about images when you save. This one is a killer. The best way I've found to deal with this is to leave draft mode (click "Draft") and then save the bit. As a precaution I never save over my old bit, I "Save As.." to a different name, so that if a part of my bit disappears I can get it back. And, as usual, save often.

The next thing to do is add the side and bottom borders. These images are different because they will be resize dynamically. The first thing to do is add the image, we'll start with the bottom border, and set its properties just like we did for the others except that the class for the bottom border will be "Resize Vertical" and the class for both side borders will be "Resize Horizontal". It's the sizing and positioning thats really different for these guys. First we'll size it by going to the "Size" tab and changing the Vertical minimum and maximum sizes to 7, the height of the image. Because we want the image to resize freely horizontally, we'll leave the default values alone. Now it's sized. To position it, we're going to click on the "Top Left" tab. Click on the dropdown box next to "Relative to Bit Name" and select "Bottom_Left_Corner" (or whatever you called the bottom left corner). Normally we're moving bits relative to the top-left corner. When we define a relative position, we're now saying that image we're manipulating is going to be positioned relative to the top-left corner of that bit to which we have a relation, in this case thats the bottom left corner. Below that pull down we find two values (horizontal and vertical) for Relative Location. This moves out image in relation to the specified image, similarly to the way we used the "Content Alignment" earlier. When set to 0,0 the image will overlap with the corner. We want to change the horizontal number to 1, which says we want this image to have its top-right and the far right of the image we're relative to. Apply this and the click the "Bottom Right" tab. Here we'll set the "Relative to Bit Name" to "Bottom Right Corner". Next change the horizontal relative location to 0, and leave vertical at 1. Apply this and then leave draft mode to take a look. You'll notice that the bottom line fits perfectly with the corners, and if you go back into draft mode you can resize the workspace and everything moves and resizes like it should.

Do the right and left side borders now. Add them like the bottom, and make the relative to the corners they'll touch. Make sure you get the sizes right, in this case we want the borders to resize vertically but not horizontally, and the images are 7 pixels wide so the min and max horizontal sizes will be 7 for both borders. When you're done you'll have this:

Let me clarify on something, when setting an image relative to another on both the top-left and bottom-right you do not have to set the size of the image at all. For instance, we're setting the left border relative to the top and bottom left corners. Each of thous corners are 7pixels wide. Because we're setting the images into relation, we've told Etcher that the top left corner of the border should be at the bottom-left (0,1) of the top left corner. We also set the bottom right corner of the border to the top-right (1,0) of the bottom corner. Thus the image will resize to 7pixels horizontally which is what we want anyway. In cases like this, setting the absolute size of an image is only a formality, but still a good practice.

It now time to add the title bar. Add the image, set the name, but this time specify the class as "Title_Bar". The color class will still be "Border BG". Now we'll position it. The top left will be relative to the top left corner, and the relative location will be 1,0. The bottom right corner will be relative to the top right corner, and the relative location will be 0,1. You can optionally set the vertical size to a absolute value, but there is no need. We've now got out edges complete and it's time to put buttons on, and add in the extra special touches. Here's what it should look like at this stage:

Buttons are very straight forward to add. They are statically sized and we have enough images in place that we can set them relative to other things easily. We'll start by adding the close button, which for this theme will be on the left side. Add the image (button_close.png) and set it's properties. The name can be whatever you like, but the class should be set to "Close". If you haven't yet guessed, the class of an image defines it's event. Because the buttons are static images we'll set the absolute size for both horizontal and vertical min and max to 13 (the images are 13x13). Then we'll change the context alignments on the Misc tab to 0 and 0. Going to the "Top Left" tab we'll set it relative to either the top left corner or the title bar, the choice is yours. The difference between the two is that if you set relative to the top left corner you'll need to change the relative location to 1,0 and if you set the button relative to the title bar you'll leave the relative location at 0,0. I'm going to use the top left corner. You'll notice that when we do this, the button will be too high, because it's putting its top left corner again the top right corner of the corner image. Because we want the button to be centered between the top and bottom of the bar, we'll need push it down a little. You can do this by changing the value of the Pixel Location on that tab, in this case the vertical value. These Pixel Location values can "push" the image by the designated number of pixels away from where it should be. In this case I want the button to be about 3 pixels south of the top left corner, so I'll change the Vertical value to 3 and apply it. Now the button is where it should be. We'll be using pixel locations more and more, as you find that we use corners and relations to get the object in the ballpark, and then fine tune the location with pixel locations.

The maximize button is next. It'll go on the right side of the title bar. We set it's class to "Max_Size". We'll set the absolute size, and then change the Misc tab's content alignment to 1,1. Moving to the "Bottom Right" tab we'll set it relative to the top right corner. The relative location will be 0,1 and we'll have the same problem we had before with the button being to high. Because we're using the bottom right corner movement will be backward so we'll set the vertical pixel location to -5 (part of the title bar is a frame for the window, so going -3 up looks wrong).

We'll add one more button for shading. We'll put it next to the maximize button. We it's name, size, and change the class to "Shade". We'll position it exactly like the maximize button, except that after pushing it up 5 pixels we'll push it over to the left by 16 pixels so the buttons are side by side. When thats done it should like this:

Now all the edges and buttons are done. We now need to tell Enlightenment where it should place the title text. To do this click "Image" to add one, but don't specify a file, just click OK. Etcher will act like you really added an image. Select it and then click on "Image". This is where you can specify file locations. You'll see a path next to "Normal", just wipe it out and specify "/dummy". This is just a place keeper and we don't want it to accidentally point at an image. Go to the "Properties" tab and name the image "Title_Area" and change the class to "Title_Bar". Most image names don't matter to anyone but you or someone looking at your bit, but some of the names are significant, the name "Title_Area" is one of them. You'll see more when you build iconbars. Now for sizing and positioning the title area. This is where the text will actually go, so we'll want the title area to go on the right side of the close button. As we experienced with buttons, you can go about positioning this in several ways. You would position based on the titlebar, the top left corner, or now the buttons themselves. I'm going to position based on the buttons. On the "Top Left" tab we'll set the title area relative to the close button and use a relative location of 1,0. To keep from cluttering the bar, I'm also going to give the top left a horizontal pixel location of 4, to push it further away from the close button. On the "Bottom Right" tab we'll set the title area relative to the shade button, with a relative location of 0,1. And then like the left side, I'm going to push my title area back by about 5 pixels by setting the horizontal pixel location to -5.

Finally, we have to set the Insets. On the "All" tab (it doesn't matter which image is selected) you'll see four parameters next to "Insets", two for horizontal and two for vertical. These tell Enlightenment were the contents of the actual window should be based on the number of pixels on each side from the edge of the workspace. So because the left, bottom, and right borders are 7 pixels wide we can set both the horizontal insets to 7, and the second vertical inset to 7. (The insets go: left,right,top,bottom.) The title bar is 20 pixels wide so the first vertical inset should be set to 20. Some say that it's best to add 1 to the insets of the bottom and right sides, but I haven't had problems with putting the insets at the exact values of the borders, but it's still good to play with the values alittle. Normally if the window placement is wrong I find its not normal the insets that are the problem, but that a border somewhere is scaling larger than the value I set the inset to.

Congrats! Your done! The border bit is complete and you understand Etcher a little better than before. The finished bit should look like this:

If you want to keep playing with the bit you'll find a "stripes.png" this the other theme images, which can add to the feel of the bit. Experiment with positioning it. A closing note about this theme (eMacs if you didn't guess) is that DR17 won't allow you to put border bits in front of the window contents, so the little "flap" on the bottom right corner will be covered over by the windows contents. I choose eMacs anyway because it's a fairly straightforward theme to build that everyones seen before. As you play with Etcher more you can easily "port" themes by taking shots of a window border and cutting it into pieces with GIMP. If you look at all the images you've been using for this bit you'll notice that many of the images (particularly the images that resize) aren't all the same size, this is because I took a screenshot of eMacs and then cut it apart and saved the pieces to put it back together in Etcher. It's far easier to simply use the images in the original ethemes tar, but it's good practice for the fall back method. In this way you could easily port Aqua, QNX, CDE or other themes from environments that you may just have a screenshot of.

A word about flare in closing. Something I didn't mention, but is an essential part of any good border is a sense that it is dynamic. This is done by adding different images for different states of buttons. When you look at the "Image Tab" for any image you'll see that it has four different places to specify your image path: Normal, Clicked, Hilited (Mouse Over), and Disabled. For a button you can create the normal image, and image for when the mouse moves over it, and then finally what it should like like while it's being pressed. Though these are optional (except "Normal" of course), its a great way to but the finishing touch on a really kool border bit. To test these appearances of the border bit in different states you can click on the "States" tab in the upper right of Etcher and choose the desired state to preview and troubleshoot each state.


Building Menu Bits in Etcher

When you build a border bit you'll soon wish you had similar looking menus. The solution is to build one in Etcher. The process is almost identical to building a border bit, with some exceptions. For instance, when you build a bit for a menu you don't need buttons, classes or title areas. However, what you do need to do is be more liberal with your insets (you don't want the contents of the menu snug with the borders of the menu, do you?) so add 2 or 3 to each inset. You also, most importantly, want to fill in that big empty hole you normally leave for a windows contents. However this is easily done by simply adding an image for the menu background, naming it, and then position it relative to the top left and bottom right corners (with appropriate relative location values of course). Give it a try and you'll find it a snap. I built a menu bit to go with my Crux border bit, here's a shot of it:

When you build a menu bit for Enlightenment you'll also want to create selection bits that go with it. Selection bits are the bits that appear behind menu text to signify what is selected. This bit is almost too easy to make, because you don't have to set anything in Etcher if you don't want to. These bits can be as simple or complex as you like. For instance, with the menubit you see above, I created a 100x40 image in the GIMP that was transparent with a gradient border of about 20 pixels on each side. Then I saved the image as a PNG, opened Etcher, added an Image and then saved the bit. No setting changes needed. (I didn't even changed the name.) There are several other bits related to menu's but these are the most important. Look in the /usr/local/share/enlightenment/data/menus directory and check out each of the bits.db's to see what they do.


Building Iconbars in Etcher

Iconbars are fun to make and very unique, but can be more tricky than window borders. The biggest change is that the workspace represents the whole screen when building iconbars. The key to building iconbars is experimentation and persistence. We'll start by looking at a iconbar I recently created.

Fire up Etcher and add the first image iconbar-arm.png. Name it whatever you like and set the Class to "Decoration". The color class isn't needed. This image in particular is 10x63, and we want it to in the bottom left corner of the desktop, starting about 40pixels off the bottom of the screen. First we'll size it. I want the bar to resize horizontally but not vertically. So on the "Size" tab I'll set the min and max vertical size to an absolute 63. Next, we want the bar in the bottom right corner, so I'll set the context alignment on the "Misc" tab to 1,1. Now we're in the ballpark. I want the bars bottom edge to be 40 pixels off the bottom of the screen, so on the "Bottom Right" tab I'll specify the "Pixel Location" for the vertical to -40. This action says that the bottom right corner of my image should be 40 pixels from the bottom right corner, and it's a negative number because negative numbers move us left and upward. When you apply this you'll see the bar move upward to the right spot.

Iconbars will not dynamically resize to fit your icons. This is why most of the icon bars you've seen from Raster or Brian Mattern are about the length of the screen. So you can do like they do and simply fill the majority of the screen (or all of some part of it). Or, with this bar starting from the bottom right side of the screen, we could push the left side of the bar to the right by specifying a positive pixel location on the "Top Left" tab. For instance, with the setup we've established so far you could go to the "Top Left" tab and use a horizontal pixel location of, say, 80. This would cause the bar to start 80pixels east of the left side of the screen and then continue all the way to the right side of the screen. This is the method used for the default iconbar everyone has seen (the one with two lines, not the newer Raster iconbar with the white film on the left side of the desktop). For the purposes of my iconbar, I want the bar only as long as I need it to be. I have 13 icons on my iconbar and found that I need a iconbar about 700 pixels (trial and error is really the only way to get it right, I've found). So the way to specify the length of the bar from the bottom right side of the screen is to define a max length of 700 on the "Size" tab. You could specify an absolute (min and max) length for it, but it's not necessary).

The "tricky" thing I keep mentioning has to do with visualizing your iconbar bit in etcher. The default workspace is only about 400 pixels wide, yet if you set the absolute size of your bar to 700pixels it'll go right on off the side of your workspace. Besides that, it's difficult to know just how big or small it's going to be until you try it. Well, the solution I've found that helps tremendously with this is to resize Etcher as large as you can, and then in turn make the workspace as large as you can. The closer to the size of your desktop the better, because things will more accurately be sized the size of your screen. Sure, you can work on your iconbar at the default size, but until you become more experienced with how your bit will react to size and position changes your better off getting it big, rather than reloading your bit every 3 minutes. (Trust me! :) )

So our bar is ready. I want to alittle decoration to help the bar look alittle more interesting using the image iconbar-end.png. Add the image, name it, and set the class to decoration. I should just mention now, the class of everything for our iconbar will have a class of "Decoration". This image is meant to be like a cap on the left side of the bar, and it's a static image (no resize) to we'll size it to the size of the image, 20x63. Remember this is an absolute size, so both min and max get changed to the proper size. Next we position it. Get the image in the ballpark by changing the "Context Alignment" on the "Misc" tab to 1,1. We want it to sit perfectly on the end of our bar, so in the "Bottom Right" tab (because we'll position this base on the right side of the new image) and set the image relative to the Iconbar_Arm, and the "Relative Location" will be set to 0,1. If you have Etcher's workspace at the default size it will appear that the end image actually is off the side of the workspace, however if you enlarge the workspace big enough you'll see that everything is the way it should be.

Here's the parts of the iconbar that really make it an iconbar. You need to add a dummy image, and it must be named "Icons". Set the class to "Decoration". This object tells Enlightenment were to actually insert the icons. Because we want the icons to be on top of the arm section of the iconbar, we can simply set the it relative to the arm. So clicking on "Top Left" we'll set the "Relative to Bit Name" to the arm image. The relative location can stay at 0,0. But lets also push the area 20 pixels to the right to give alittle buffer. To do this set the horizontal pixel location to "20". We also want to push the area down by 2 pixels, because the top and bottom 2 pixels of the arm image are borders, which we don't want to cross over, so set the Vertical Pixel Location to "2". Now for the bottom right. We'll click on the "Bottom Right" tab and do the same thing, by setting the area relative to the arm image with a vertical and horizontal relative location of 1. We'll then push it upward a further 3 pixels by changing the Vertical Pixel Location to -3. We need to use a -3 instead of -2, because 0,0 on the bottom right would be a pixel lower than the arm image, so just to get even with the image we need a -1, add 2 to that and we get above the arms border. This is where the zoom window is helpful. Now the bar looks like this:

Before we leave the topic of the "Icons" area: I mentioned earlier that the size of an iconbar is not dynamic. This is true. However, the size of the icons can be dynamic. This is to say that if you make your icon area 100 pixels long and 20 pixels high, and you fill it with several 48x48p icons the icons will scale down to 20x20p. However, if you put more than 5 pixels that space they all will not resize again to fit the extra icons, they will just be off the side of the bar, hidden to the user. And, though its implied, I'll also tell you that icon areas can be horizontal or vertical. The icons will be place side-by-side until there is no more room and then, if possible, the next icon will go below.

We only need to add one more thing to make this bar complete. Add another dummy image and it must be named "Resist". Class is set to "Decoration". And don't forget to change the dummy images paths to /dummy on the "Image" tab. This special area defines an area of resist on the desktop. You've experienced this with the other iconbars, when you try to move a window over the iconbar and it kind of sticks, or hesitates for a second. This area can be as big or small as you like, but generally will encompass the entire iconbar graphic area. In our case, we'll go to the "Top Left" tab and make it relative to the image furthest to the left, in this case the Iconbar_End. I built the image to have 6 pixels of transparency on the left size (so I could modify it later), so I'll use a horizontal pixel location of 6 to push the resist area snug with the end of the bar. Then on the "Bottom Left" tab we'll make it relative to the Iconbar_Arm, with a relative location of 1,1.

Boom! We're done. Now you have your own kool and unique iconbar. As you can see, iconbars are alittle different than border bits, but they add a lot of flare to your desktop. You can also see that there is truly only one important part of the iconbar, and thats the "Icons" area defined as a dummy image. Quite frankly, you could define that area in Etcher with nothing else and your icons would pop up. Thous who like the more "traditional" look for their icons will problem create iconbars that are nothing but Icon areas in the top left of the screen.

Some closing thoughts for you. First is that rather than use two small images for the iconbar, and positioning them precisely, we could have just created one static image the exact size I wanted and then added the image to etcher, pushed it into the bottom right corner and added the icons area. However, this is the wrong way to do things. Not only will you make Raster mad at you, you will also make your iconbar useless to others. The advantage of using smaller images is to keep the file size of your bit down. The advantage of scaling and sizing them in Etcher is that even though I need my iconbar to be 700 pixels wide, you may only want the same iconbar to be 300 pixels wide. Since I let Etcher do the resizing you can simply open my iconbar bit and change the length. This is very important for portability for all your machines, and the machines of others.

You can find the finished iconbar here.


Completing the Picture with Ebony

Ebony is the tool used to create bg.db's for DR17. You can create backgrounds that are very simple or very complex. Ther e is a tremendous amount of flexibility in designing backgrounds for DR17 over other window managers. To be more specific, th e traditional method of creating wallpaper is to create a single image the size you want. This method is stale, stagnant an d moreover static. If you load a 800x600p background on your 1280x1024p desktop, it's going to look alittle dull. Th e added abilities of modern desktops to resize and intelligently dither wallpaper on load is handy, but you still end up cre ating multiple sized wallpapers if you really care about the look. Ebony fixes this by allowing you to create your backgroun d as single edb file. In this file is all the various images that make up your background, their positions and positions. T he advantage is that you can create a background that looks good at 800x600p and still dazzles people at 3072x768p. The idea s are the same as Etcher.

The simplest thing you could do in Ebony would be to add a single image in Layer 0 and let the default settings resize it for the desktop size its being run on. In this way your bg.db would act just like a normal piece of JPEG wallpaper. However , if we leverage layers we can do some kool things.


Raster and Mandrake at ALS, in a distant past. Where, oh where, have the hat, hair, and time gone?

The above image is what Ebony looks like when you make a simple bg.db. Just by starting Ebony, clicking "Image" on the advanced tab to define the layer 0 image, specifying the image and saving it. No other changes. By default Ebony will resize the image to fill the screen.

Ebony works in layers, just like layers in an imaging application like GIMP. The bottom layer is layer 0. By default this layer is transparent, so you need to fill it with something. This could be 5x5p white block that will tile to fill the screen, or an image that will fill the desktop, either way something has to cover the entire base. For our purposes, lets use a image of clouds. Sure the clouds thing is getting old but I chose this image for two reasons: you can resize it into weird shapes and it still doesn't look wrong, and because I just love the colors in this picture. (As a side note, this picture came from Raster's page of photos. He's taken tons of shots that he intended for backgrounds and such. Besides that you can see what its like to have friends and go to shows all over the world!) Fire up Ebony if you haven't and click on the "Advanced" tab. The "Layer:" designator will be at 0 already, so just click the "Image" button and specify our clouds. The image will appear in the left side preview box and automatically be sized to fit the whole screen.

Next we want to add an Enlightenment logo. I've created a transparent image for the task, grab it and have it ready. Click the "Add" button next to the Layer indicator to changed to layer 1, and then click "Image" to add our logo. When it is placed in the preview window it will fill the whole screen. In this case we don't want it resize, so we'll click the check boxes for both "Orig Height" and "Orig Width" under "Size". The image will now be the correct size, but I want it in the middle of the screen, so we'll position it by changing the X and Y values under "Position". Change both the X and Y values to "0.50". This will stick the image in the smack middle of the screen.

I've created two more images to add to this bg.db, just for fun. A file tab and a file bar. We'll click on the "Add" button again to move on to layer 2. Click image and then select ebony_border_shelf2b.png. This is a tileable image that should sit at the top of our screen, so click the check box for "Orig Height" under "Size", this will cause the image to tile horizontally, but not vertically. The default X,Y position of 0,0 works fine. Then add another layer (layer 3) and selected the image ebony_border_files2.png. This image should not resize, so click both the "Orig Height" and "Orig Width" under "Size". Again, the default location is right where we want it.

As you can see, Ebony is a walk in the park. It's not nearly as complex as Etcher, but you'll also find that when you really get to know Etcher you'll with the two were more alike. For instance, you can not create relationships between images in Ebony. This can really frustrate you quickly in a complex design. When I first designed the clouded background we made above I designed the gray portion of the bars to actually be a transparent black, however because I couldn't push the images together in Ebony they overlapped. This cause the left side of the bar to be twice as dark as the right side. The solution was to no use transparency here, or to create the top bar as a single image, which wasn't possible in an efficient manner. Problems like this arise, but are easily dealt with.

Note: At this point in time many of the function of Ebony are unusable. Namely the ability to specify a layer as a gradient or solid color. Currently you may only specify an image. Angle changes don't work and color classes are largely unused.

The function we didn't utilize above was to control tiling method. When clicking the "Orig Width" or "Orig Height" under the "Fill" section you will cause the image to tile rather than resize.

Just like Etcher, play with Ebony and try things out. Get used to moving between layers and making changes while not destroying the ones above it. An interesting thing to do in Etcher is to put text on a bg.db by adding one letter per layer, and then sizing the images as absolutes, but pushed X% away from the left side. This is what was done with my "Kelly" bg.db (found here). I put the 5 characters of her name at the bottom of the screen, the first character was positioned at 0.1,1(x,y), the next was 0.3,1, the next was 0.5,1, and so one. In this way even on a trihead setup the bg.db loaded and spaced the letters evenly across the screen. It is flexibility like this that makes the wallpaper designers life a lot more interesting.


Installing Bits: Putting your bits to work

Now that you've learned to build bits lets start to use them. This requires a we bit of discusion though, since we can't talk about desktop bits (namely iconbars) without discussing layout. So let's hop right to it.

The best way to get an iconbar in DR17 is to run the script build_iconbar_db.sh typically found in /usr/local/share/enlightenment/data/scripts/. This script requires a destination argument, so you should run the script like this: "./build_iconbar_db.sh $HOME/.e/desktop/0/.e_layout". The first time you execute DR17 it will create a $HOME/.e directory, but not a desktop directory, so you much manually create the desktop directory, and inside it the 0 directory, and inside it the .e_layout directory before running the build_icon_bar_db.sh script. If you want to modify the icons on the iconbar you can edit the script and rerun it. The script is pretty self explanitory, so just follow the pattern in the file. You can of course do everything by hand, but this is the easiest way to get started quickly with iconbars.

Now that we have the structure in place that we require, you should look in the directories you created earlier. In .e_layout you should see two files: iconbar.db and iconbar.bits.db. The first file is the Edb database that contains information and images for each icon; everything you want to have on your iconbar is in this file. The second file is the eBits iconbar bit. This bit is the iconbar itself. This makes it easy to modify the iconbar data or the iconbar bits without disturbing the other. The iconbar.db file can be edited with the Edb tools (eg: edb_gtk_ed) and the bit is obviously edited with Etcher.

You can add backgrounds easily by copying a bg.db file created with Ebony into the .e_layout directory and naming it "background.db" and restarting DR17. Any time you want to change the background, just copy over the file and restart. Notice that the filename is not bg.db, but simply db. This change was made to reduce filename length where ever possible.

In the .e_layout directory you'll also notice that their should be another file there named layout.db. If it's not there copy the file /usr/local/share/enlightenment/data/layout/desktop.bits.db to $HOME/.e/desktop/0/.e_layout/layout.db. This file is very important, and very very kool, and explains why you have a .e_layout directory, which seems sort of odd at first.

First off, understand that DR17 is a desktop enviroment that revolves around EFSD. Second, understand every directory is called a "view", and a "view" is what your interfacing with. Third understand that every view is configurable, independantly, and infact your desktop is a view! Now, your desktop is a view, and that view is of $HOME/desktop/0/. Therefore any file that you put in that directory will show up as an icon on your deskop (links are files too, so a icon for your home directories view would be a symlink to $HOME). Now, a step further, I said every view is configurable right? Well, you configure a view by creating a .e_layout directory in that view (directory). So, if you created a symlink in .e/desktop/0 to your home directory, and then created an .e_layout directory in your home directory and placed a background.db in that .e_layout directory and then opened the view in DR17, you'd see the background of that view as whichever background you put in there. See? You can do this for ANY view. And your desktops no diffrent. And if you asking yourself "does that mean a view can have an iconbar?", the answer is YES.

So I'm hoping at this point that you see the real power behind DR17, views are very powerful concepts. But we still haven't explained the "layout.db" file yet. Well, it's an Etcher bit. Again, the "bit.db" was chopped down to just "db" to keep filenames from being too long. If you open the layout.db in Etcher you'll see that their are 4 areas defined but no images.... just empty zones like we created earlier for title areas and such; same concept. The area of the bit represents an entire view. There are currently 4 areas that are defined in the layout.db: Iconbar, Icons, Scrollbar_V, and Scrollbar_H. Pretty self explanitory, The Iconbar area defines where the Iconbar should go in the view, the Icons area defines where the Icons should go, and the Scrollbar areas define where the scrollbars go. In the case of scrollbars, if they are not needed they do not exsist (which is why your desktop doesn't have scrollbars right now, even though the bit defines areas for them!). Below is a look at what my layout bit looks like, mind you that this is modified from the default for my special iconbar which rides on the bottom of the screen, not the left side:

Many people have tried using the Iconbar that we built earlier in the tutorial only to find that they only see about 80 pixels of it sticking out on the left side of the screen. Maybe you can see why that might happen. In the default layout.db the Iconbar area is defined as running from 0,0 (top left) to 0.1 (bottom left) and the "Bottom Right" corner is pushed outward about 80 pixels giving you a 80 pixel wide area running from top to bottom on the left side of the desktop. To use the iconbar that we created earlier we need to change that Iconbar area to run along the bottom of the desktop and rise 100 pixels off the bottom of the screen. So as you can see in the Etcher screenshot above, I defined the "Top Left" corner as 0,1, the "Bottom Right" corner as 1,1 and then pushed the "Top Left" vertical 100 pixels in the wrong direction (north) by setting it -100. This gives us a 100 pixel deep rectangle running along the base of the screen just like we want. And now the iconbar we want to use fits perfectly.

Something to bear in mind is that DR17 is still in a lot of flux, and the above procedure has already changed several times to get to where it is now. It is unlikely that it will change, but by no means set in stone. The installation of menu and border bits is however diffrent. There is currently no well defined method to install them in a per user method, you must simply replace the default bits in /usr/local/share/enlightenment/data/borders or data/menus. If you intend to do this I recommend you explore these directories in depth and open up bits in Etcher to see what they are and what they do, and then try replacing them. It might take you a little while, but you'll get a much better idea of how things work. You can also find directions on how to install bits that I've created on the cuddletech DR17 page, where you found this tutorial. Something you should, however, keep you eye on in coming days is EET, which is going to be the packaging scheme for DR17 which will likely be used for distributing bit's and db's of various types. EET is currently very early in it's development, and like everything changing as needed and changing to mcuh to be used quite yet.


Written by: Ben Rockwood (benr@cuddletech.com)
Creation: Feb 25th, 2002.
Great thanx to Brian Mattern whose tutorial helped me learn, for creating the iconbar code, and for the screenshots that made us all jealous enough to wanna learn how to show his desktop up. \(^_^)/