August 21, 2008

New 0.2 (SoC) release, JUICE is born – aka the longest title and the longest post in history

Posted in GSoC tagged , , , , , , , , at 2:56 am by fadinlight

Relevant links:

“Dojoizing” OsmaFrontend

Following what I’ve said before, also this last week (while doing a MAJOR blog posts updating) has been full of interest for code developing, even if not so full of new features. What I’ve been doing is “Dojoizing” OsmaFrontend, to take the most advantage from Dojo toolkit and to have a cleaner code design (separating HTML code from Javascript, using Dojo’s xhrGet). Here the last days timeline:

August 11: TagTrunk

While “Dojoizing” Osmafrontend, I’ve started to separate the trunk code from the tags (thanks to TomH and spaetz that helped me in the #osm channel, also helping me not to do tens and tons of commits 🙂 !)

August 12: Widgets and blog

A long day of studying to learn how to write Dojo widgets, and to write some of the past posts for the blog

August 13: Tags, Blog, Rule tree

Finally I’ve separated the tags from the trunk, while updating the blog with the new posts. A little interesting new Osmarender Frontend feature developed: a raw tree view of the rules. This is what is going to be, after the major refactoring I want to do for CMYK library.

August 14-15: Django template in Dojo (Dojox DTL)

I’ve started to learn how to use DTL in Dojo, but even after spending the whole day on various tries, I didn’t manage to have it do what I wanted to do to separate some HTML from the code. For example, I couldn’t manage to do a {% for key,value in store %}. Really don’t know why, because with other tags everything worked smoothly.

August 16: Widgets and i18n

After doing all the refactoring to separate HTML content from Javascript, I started to refactor all the code that concerned the CSS editing part of Osmarender Frontend. Then, I’ve started to learn how to do i18n with Dojo, while learning that Dojo’s i18n have some issues with Firefox 3.

August 17: Externalising CSS editor and publish/subscribe

This day I’ve finally externalised all CSS editor code from osmarender_frontend.js file, with some tricks to keep it really separate. As Osmarender Frontend takes the styles and handles them (add, modify, delete) only with the help of CMYK library, and as I wanted to keep the CSS editing widget and CMYK library really separate, I didn’t want to pass the CMYK instance to the CSS editor, nor I wanted to let Osmarender Frontend handle the CSS section of the rule file. This is where dojo publish/subscribe came to help! In this way, the CSS editor will publish a topic, which Osmarender Frontend have to subscribe to pass the parameters to CMYK library. That’s cool!

August 18: JUICE

I’ve spent the last GSoC days to do some minor changes to the code, and to definitely keep the CSS editor widget separate from the rest of the code, with its own i18n. This is how JUICE (Javascript User Interface CSS Editor) project was born!

Three projects in one!

At the end of my GSoC adventure, and at the beginning of a new adventure, I’m very happy to say that three projects have started at the same time:

  • CMYK library: When the refactoring will come to an end, the library will be completely independent from Osmarender Frontend, thus allowing every Javascript-speaking code to handle Osmarender’s rule file smoothly.
  • Osmarender Frontend: A Dojo-powered GUI interface for WYSIWYG handling of Osmarender’s great power.
  • JUICE dojox based widget: Without even knowing or wanting, the CSS editor has now its own life, so, sooner or later (at the end, when it will have more features and handling power), it will be a separate project, perhaps with some integration with Trevor McCauley’s great CSS parser… Who knows… Fantasy is the limit…!

July 8, 2008

Weekly Report #5: The nextGen Osmarender Frontend

Posted in GSoC tagged , , , , at 7:42 pm by fadinlight

(This post has been published after the original date)

This week I’ve been doing an hard work to better integrate Dojo library with my code, thus enhancing the very very rough and provisional GUI of the last release.

New features:

  • There is now an option to transform right after loading data and rule files
  • New button to Save the SVG file
  • New panel for global map settings (like showLicense and showBorder)
  • Some CSS classes are now linked to general Osmarender settings (i.e. map-scale-core, map-grid-line, etc)

New GUI features:

  • Osmarender Frontend is now a floating resizable window, with the rendered map in the background. This solution will improve the overall usability when modifying the maps
  • When loading data and rule file, a progress bar of the nodes parsed will be shown. This is not so immediate to achieve in Javascript, because some inner knowledge of how intervals and timeouts work is required
  • Integration with some Dojo widgets, like the filtering select box for searching CSS classes, tooltips and tabbed panes

July 1, 2008

Weekly Report #4: First PrePrePrePreAlpha Release

Posted in GSoC tagged , , , , , , , , at 11:35 pm by fadinlight

Important: This version works only on Firefox browser (tested in version 2 and 3).

Relevant links:

SVN? Dev? What’s happened?

I’ve done many things in the past week (even if my last weekly report was 10 days old, I had an exam last Wednesday). Apart from idling in the irc channel (asking for help much of the time, I admit! Thank you to all OSMers that helped me), as you can see in the links, I have now accounts for SVN and DEV server (thanks to TomH and Spaetz, also for their patience on helping me in the first steps). I can’t explain with simple word how excited I’ve been when I made my very first commit in an open source project’s SVN. That’s cooooool…!

r8469 | merio | 2008-06-26 00:20:21 +0200 ( gio, 26 giu 2008 ) | 1 line

Directory for GSoC project code name osmarender-frontend created

Oh well.. just created the directory… I was doing my first steps… so please forgive me if this shouldn’t be a real “commit” 🙂

New Features

So, what about new features?


  • The project can now be distributed in a online and in a offline version (rough shell scripts for distributing provided in the SVN).

General GUI

  • The screen has been divided in three “logical” sections to help a sort of rough usability for testing purposes. CSS styles are liquid. Upper left section is dynamic.


  • Create, modify, delete a CSS property, can transform automatically on those events, WYSIWYG style
  • View current color for fill and stroke properties in a little dynamic box (onkeyup event)
  • Show innermost key/value pairs associated to the selected CSS class
  • Modify color for fill and stroke properties via the DojoX Color Picker (I had to leave xhtml+xml for that 😦 )
  • Modify numbers via Dijit Number Spinner
  • Modify fixed choice properties with select box (like text-anchor,display etc)

Key/Value Pairs-related

List Key/Value pairs that are in the data file selected

  • List innermost CSS classes and symbols associated to selected key/value pairs


  • List of all SVG symbols in the rule file with preview
  • List of innermost key/value pairs that link to the symbol ID

Known Bugs

  • GUI and code are very messy, buggy, error prone 🙂
  • Some GUI (and perhaps model) mess when dialing with styles edited via spinners (especially with “px” suffix in Firefox 3 and with “invalid number” warning if browser has not US locales, for this you can use Quick Locale Switcher Firefox Extension)
  • Symbols may be listed two or more times, something to deal with Firefox 3 compatibility
  • Only innermost rules between classes and key/value pairs are considered. I’ve to improve the rule data model before.
  • Key/Value pairs are parsed from the data file every time you click on “View Key/Value pairs” and not only once when loading at the beginning.

June 21, 2008

Weekly Report #3: Recipe for the perfect disaster

Posted in GSoC tagged , , , , , , , , , , , at 1:29 am by fadinlight

First of all the GSoC weekly report news:

Yes, I know this is not kinda “weekly report”, but, as I’ve already told to my mentor, I’m quite busy in these days because I’ve an exam on June 25. However, step by step, I’m solving the main “behind-the-scenes” difficulties of the project.

SVG markers and patterns

As you can see in the image above, now, when a class is selected, if it contains a reference to an SVG marker contained in the rule file, the marker is shown on the right. Not quite beautiful yet, but it works. The following is another example, even if more difficult to read:

Because I’ve not already upgraded my Linux box to Firefox 3, I couldn’t take a snapshot showing SVG patterns (which are supported by my code as well), because SVG patterns aren’t supported in Firefox 2, as also stated in MDC. However it works smoothly on Firefox 3 for Windows.

Rules Modeling

Beyond SVG markers and patterns, I’ve got progress in rules handling too. Now quite all rules are parsed (think only “tag” elements inside “text” elements aren’t handled yet; same for selectors too), and class/mask-class parse-to-arrays is working.

As you can see in the above picture, if we search in the rules for “tunnel-core” class, the correct rule is shown even if tunnel-core is a mask-class and not a real class in the rule file.

Else elements are handled as well:

So what about the recipe for a perfect disaster?

That’s simple:

  • Take a laptop computer, Windows XP/Kubuntu 8.04 dual boot
  • Edit three critical GSoC project files in the Windows XP FAT32 partition for a while with Aptana
  • Go to dentist without powering off the computer
  • Return at home, find the pc powered off, power on it, go to Kubuntu and edit three critical GSoC project files in the Windows XP FAT32 partition for a while with KWrite
  • The day after, boot to Windows XP to read some notes rapidly
  • Find it was suspended, see Aptana still open with that three files.
  • Close Aptana without closing the three most critical files of the project before
  • Power off the PC and, during the evening, boot to Kubuntu
  • Find the wireless is not working, so reboot Kubuntu again
  • Leave the laptop booting, and find after a while the dosfsck has run and fixed automatically something in the FAT32 partition
  • Open Dolphin and, finally, cry looking at the following screen

Obviously I had a backup, but several hours of work got wasted however… Sic!

June 1, 2008

Weekly Report #1: How to obtain the ugliest map ever

Posted in GSoC tagged , , , , , , at 11:32 pm by fadinlight

(To see the screencast, visit this link and download file – 14 Mb)

Despite my weekly report’s title, this week I’ve obtained the first successful step of my project!

New features

These are the new features:

  • I’ve seen that my application is now compatible with Firefox 3 RC1 for Windows (worked in beta 4 but didn’t in beta 5)
  • Don’t really know what’s happened (perhaps some issues with my previous Kubuntu installation? perhaps some Firefox 3 module kept when downgrading in my 8.04?), but I’ve seen that the application seems to be compatible even with Firefox for Linux
  • Can load a predefined rule file or a custom rule file, giving its name in an input box
  • Thanks to this CSS Parser, with some modifications, the application will parse the CSS section of the rule file
  • A combo box will appear in the application, and selecting a CSS class, you can modify any preset
  • I’ve written a little function for CSS Writing, so the application will automatically store in memory any new value
  • I’ve found a little trick for saving to disk the edited XML file, and successfully reloading it.


So what about the title? As I’ve done during application phase, I’ve produced a little screencast to show those features. In the screencast you’ll see the real meaning of this weekly report’s title 🙂

So, if you have time (it’s 10 minutes long, but I’ve spent 3-4 hours to produce it, so give me some satisfaction 😉 ), you can download and view this SWF screencast! (download the file, about 14 Mb) After downloading, unzip it in a directory of your choice and point your browser at 20080601_Osmarender_frontend_screencast.html, playing it in full screen mode (F11).

Next steps

During next week I hope to achieve the following tasks:

  • Refactoring of all my code (now it’s a mess)
  • Begin using JSDoc for documentation
  • Create new CSS properties/classes or delete them
  • If time helps, I would like to enrich the internal CSS data model to let the frontend know how to edit single properties with a proper widget. To do this I’ll try to encapsulate some existing JS libraries in the future.