Echo New Icon GTK Ready

I've finally got the design from my previous blogpost implemented. Writing gtk applications in ruby is as fun as in C, but making the widgets behave (especially in terms of positioning/size) as I'd like them to seems unbelievably hard. My workflow was this time a bit different from usual, as I was just adding the widgets one by one, with the help of glade researched what to set and how in order to be where they are and when the layout was ready implemented the signals. LOL, the result file was, despite being only 150 lines long, pretty hard to read. >_< So next step was to properly outline the program design – most importantly I've prepared myself a diagram with widgets relations – and implement it. Of course, the source is now much more readable, but also a bit long – not counting the licence at the start, it's about 240 lines.

Next I was thinking what is the best way to present it to user. Burying it in menus is suboptimal, having to launch it by hand isn't exactly useful as well, but adding it to nautilus' pop-up menu (just like e.g. nautilus-open-terminal extension does) feels about right. The problem is, of course, that nautilus extensions can be written either in C or python, but my app is in ruby. The decision what do wasn't hard – writing ruby bindings to nautilus extensions is out of my league and I'd like to keep all the echo-artist scripts architecture independent if possible, so I went with python. I'd say I like ruby more, but at the same time I must emphasize that making conclusions based on 40 lines of code is out of question :-) The nautilus extension is available in git as well. Now, I've prepared packages for people who want to start using it already at put them in my fedorapeople space because I don't want to update the echo-artist package in Fedora repos until it is in good enough shape.

I've prepared a short screen-cast to showcase the new functionality:

Download the video to see in your favourite video player.

Echo New Icon GUI Script Design Idea

In Echo Project we strongly recommend to create new icon using the echo-icon-new script which does some of the work, that an artist would need to do, behind the scenes. Today I've started thinking about writing a GTK version of the script so that the usage would be even easier. Here's my initial design idea of the GUI (click to see in original size):


Now, two issues arise:

• How good is this layout from usability POV?
• As I've never done GTK app, how to actually create this layout, preferably in ruby?

Both feedback for the first question and help for the second question is appreciated.

I've fell in love...

...with Ruby.

Yeah, I am neither proffesional nor studied programmer, but I like coding from time to time. I've learnt Pascal (Turbo Pascal implementation) and Delphi during my basic and high school studies and FreePascal and basics of C in my first year on University (we had a Programming for Physics classes). Then I switched to C completely as I started working on gtk-nodoka-engine and I love it, and even though I have basics in C++, I like C more. But lately a rather unexpected competitor came into my view - Ruby. Up until recently it was a hit-and-miss and frantical searching in documentation to get things done (I decided to make the echo-artist scripts in Ruby, since the code I based it off was already in Ruby), but now I decided to learn it properly and the more I read, the more I like it.

It's really a great programming language and truly Object Oriented one (unlike various "object oriented" hacks/workarounds/whatever of C, like Objective C or C++). You know it's great that everything is an object so you can easily do things like
100.times {puts 'I like Ruby!'} (prints "I like Ruby!" hundred times),
['Peter', 'Martin', 'Nicu'].each {|name| puts "Hi #{name}!"} (welcomes Peter, Martin and Nicu) or
1.upto(200) {|num| printf "Try #%05d\n", num} (if you know C you'll get what this does).
And I am just at the begining still...

And one usual rant at the end. Again I updated xulrunner and again epiphany started eating CPU... So I am again temporarily using WebKit backend in ephy... I hope WebKit-gtk gets the still missing functionality I need implemented soon so that I could get rid of gecko in my browser for good... (Yes, I've already gave up on gecko, but for WebKit I try my best with filling bugs I notice and RFEs). And of course, this post was also written from ephy with webkit backend.

Echo August 2008 News

New Icons

We've created/fixed some new icons, concretely:

• preferences-system-date


• preferences-system-firewall


• preferences-system-users


• printer

All of them are used in they System -> Administration menu and part of our work towards filling this menu with Echo icons (since most of applications in there don't have even new-gnome-styled icons).

"Huge" icons - 256x256

With the introduction of One Canvas Workflow (will be explained bellow) I decided I could try doing more detailed and realistic looking version of the printer icon:

Nicu was seemingly pleasured with the new introduced HW brand - Echo and noted that if such device indeed existed it would definitely worked with Fedora out of box.

I'd like to hear others opinion of using such style for these icons. The basic differences from other styles are semitransparent borders (usually with opacity set to 0.3) and more detail. Other than that it remains same as other sizes. If we agree on this style, I'll add it to Guidelines, together with source for the echo brand ;-)

One Canvas Work-flow

Together with creating the printer icon, I explored jimmac's idea of one canvas workflow. In my short experience it is superior work-flow to our current one and also makes automating many steps of icon creation easier. Most importantly it helps artist to focus more on the process of designing/drawing the icon rather than various "secretary" jobs around...

Together with the desire to automate as much of the secondary work as possible I needed to bring the work-flow to yet another level - so you need to add label to the 48x48 icon (which therefore needs to be
grouped) and set it to scalable. It is so that the script can recognize that it's the very icon intended to be installed into the scalable folders (and delete the rest).

Initial screen-cast showing this and subsequent commit of the icon to git is available at my fedorapeople page.

I'd like to make this work-flow the preferred one for echo-icon-theme creation so if no one steps in, I'll add it to Guidelines.

Current version of template which can be used as base in Inkscape to create icons using this work-flow is attached to a mail I sent to fedora-art-list.

Automating The Secondary Jobs

One Canvas work-flow makes one thing much easier - ability to create script which takes the source icon and add it to git repository. I called this script echo-add-icon and it's already available in echo git repository. It takes the source SVG, generates PNGs for all included sizes and SVG for the scalable "size" and put all, including source into their rightful places in the git repository. The original source is put into /sources/base/one-canvas/ to make it distinct from the legacy sources (i.e. one source SVG per one size). It currently pushes only to base folders, but can be easily extended to ask if we want to push to base or to extras.

It does not make branch specific changes (i.e. adding symlinks / adding to build system) but I hope to implement it as well in some future version of the script. It also does not push the changes back to fh.o only prints a message to the user that he should do so.

Another script is meant to simplify the git set up process. I called it echo-set-up and is also uploaded to git. It does all the steps needed for starting work with the repository.

Yet another script is make for updates (useful e.g. when we introduce new branch to echo git repo). It updates all branches, if some of the branches is missing, it correctly creates it. I called it echo-update and it's also available in echo git.

I also plan to add one another simple script, probably called echo-new-icon that would take latest version of the one-canvas template and create new icon (with given name) from it. Similar to what rpmdev-newspec do for spec files ;-)

I plan to package these scripts for fedora under the name echo-artist, therefore I added some necessary things like license (LGPLv2.1+) or credits (since the first script is based off jimmac's).

Echo for F10?

It has been briefly discussed on the fedora art list whether to include Echo in F10 as our default icon theme and whether submit it as a Feature. Many people seemed to agree that it would not hurt pinging fesco about it, but that the main decision would probably be done by Art and Desktop teams.

Further Plans

Apart from creating new icons and plans mentioned above, I also hope to update/extend various echo related how-to's to reflect the new methods of echo icon creation/addition.

Apart from that I'd like to make some "promo" page that would be intended for potential contributors and contained all info they need to know to get started and other similar info.

Request for Feedback

As usual, I am more than open for all kinds of feedback, especially about the huge size guidelines, the new scripts and one canvas work-flow. If you have ideas how to further improve some of the above mentioned things, or just comments to what I said, would like to start contributing to Echo, ... feel free to reply either here, in comments, drop a mail in fedora-art-list, or, if you wish, drop a private e-mail to me (you can use e.g. the fedora address: mso AT fedora project DOT org [note: the address is "obfuscated" as a spam prevention and there are not any spaces in the original]) :)

Echo, Nodoka, One Canvas, Ruby and New Fedora Certs

It's been some time since my last post, so several things pilled up since then I'd like to talk about. So first about Echo, One Canvas and Ruby.

We ought to keep up with latest technology and make the process of creating new Echo icons as easy/effective as possible. As already mentioned in the fedora-art-list there is a new workflow of creating the icons - One Canvas Workflow. As the name suggests, it means that you create all the icon sizes from 16x16 to 256x256 in one file. It has the obvious advantage of possibility of all the icons sharing the same gradients, direct comparison, ... The question is, how to make all the required PNGs from the one canvas SVG. Jimmac has an answer.

Basically the workflow means that you use some inkscape features like layer functionality (you can display/hide layer editor via ctrl+shift+L) or object labeling. First you need to have two layers - one supporting for the script that will generate the PNGs later, and one with the actual artwork. The supportive one needs to be named 'plate', the artwork one 'artwork' (required by the script). On the plate you draw squares with the desired icon sizes (from 16x16 to 256x256) and distribute them in the canvas so that 22x22 and 24x24 are used for the same image and the others are separate. In the artwork layer you just draw the icons over the prepared squares in the plate layer. It's good thing to lock the plate layer to avoid accidental drawing to it.

Finaly group the separate icons into separate groups (one group for one icon) and because we need to know where the icon gets installed to, add Description = (substitute with e.g. devices for printer icon) to Document Metadata.

Now that would be enough to generate all the PNGs, as is done in Jimmac's ruby script. But in Echo Icon Theme we also distribute Scalable images (SVGs). So I needed to extend the script to generate the desired SVG as well. First it needs to somehow identify what will be erased from the source SVGs and where the rest will be moved to. I decided that best way is to use inkscape's labeling functions. So select the icon artwork intended for the SVG (usually the 48x48 one), it needs to be one group, select obejct properties [ctrl+shift+o] and set Label to scalable. Do the same for the rectangle bellow in the plate layer (that's needed to reposition the icon).

Now, to the script. First I decided we need only the one icon variant, so I dropped the code iterating through all icons. Next I needed to somehow edit the SVG to remove all unnecessary objects change the canvas size and correctly place the scalable icon on it. Since I had never done anything in ruby up until yesterday it proved a rather long job, but finally, after about 4 hours of experimenting, reading REXML docs and googling, I've managed to put together working script. I am not sure though if it's written correctly, since I don't know how memory is allocated/freed in ruby, know practicaly nothing about ruby syntax, ... Anyway here's the code:

#!/usr/bin/env ruby

require "rexml/document"
require "ftools"
include REXML
INKSCAPE = '/usr/bin/inkscape'
SRC = "./svg"

def renderit(file)
svg = Document.new(File.new("#{SRC}/#{file}", 'r'))
context = svg.root.elements['//dc:description'].text
svg.root.each_element("//g[@inkscape:label='plate']/rect") do |icon|
dir = "#{icon.attributes['width']}x#{icon.attributes['height']}/#{context}"
cmd = "#{INKSCAPE} -i #{icon.attributes['id']} -e #{dir}/#{file.gsub(/\.svg$/,'.png')} #{SRC}/#{file} > /dev/null 2>&1"
File.makedirs(dir) unless File.exists?(dir)
system(cmd)
print "."
#puts cmd
end
end

def expungeit(file)
svg = Document.new(File.new("#{SRC}/#{file}"), 'r')
context = svg.root.elements['//dc:description'].text
plate = svg.root.elements["//g[@inkscape:label='plate']/rect[@inkscape:label='scalable']"]
x = plate.attributes['x']
y = plate.attributes['y']
artwork = svg.root.elements["//g[@inkscape:label='artwork']/g[@inkscape:label='scalable']"]
translate = "translate(-#{x},-#{y})"
artwork.add_attribute(Attribute.new('transform', translate))
canvas = svg.root.elements["/svg"]
canvas.add_attribute(Attribute.new('width', '48'))
canvas.add_attribute(Attribute.new('height', '48'))
plate = svg.root.elements["//g[@inkscape:label='plate']"]
plate.elements.delete_all('')
svg.root.each_element("//g[@inkscape:label='artwork']/*") do |icon|
label = icon.attributes['inkscape:label']
if (label != 'scalable')
icon.parent.delete_element(icon)
end
end
dir = "Scalable/#{context}"
File.makedirs(dir) unless File.exists?(dir)
f = File.open("Scalable/#{context}/#{file}","w")
svg.write(f, -1, false)
f.close
cmd = "#{INKSCAPE} --vacuum-defs -l Scalable/#{context}/#{file} -f Scalable/#{context}/#{file}"
system(cmd)
end


file = "#{ARGV[0]}.svg"
if (File.exists?("#{SRC}/#{file}"))
renderit(file)
puts "\nRendered PNGs from #{SRC}/#{file}"
expungeit(file)
puts "\nCreated scalable SVG icon from #{SRC}/#{file}"
else
puts "[E] No such file (#{file})"
end


And here's the image (google accepts only PNG, but SVG is available on my fedorapeople page):


Next thing I have in mind are Nodoka improvements. I've done some further coding and improved the button rendering and added styled entry rendering. Even those two are still not complete, let alone the rest, but the progress is here. See in the following images.






And finally some words about new fedora cerificates. I had some problems with it like not being able to log into koji web interface or not being able to upload new sources for RPMs. It turned out that my user certificate was generated too early, still in the time when the problems with infrastructure were ongoing (kudos to infra guys for fixing it). So after the reason was discovered I am finally able to do all my work I do in Fedora.

That also means I updated subttitleeditor. Please test and report if it works for you. The update for F8 is here
https://admin.fedoraproject.org/updates/subtitleeditor-0.22.3-1.fc8

and for F9 here
https://admin.fedoraproject.org/updates/subtitleeditor-0.22.3-1.fc9