Cairo-fied effects dialog

As some of you will know, recently I have been hacking on effects support in Jokosher. Well, it is all working pretty well, and figured I should try and make the dialog a bit nicer and roll in some Cairo goodness. Now, I am completely new at Cairo, so this effort has been my first shot. I thought it might be nice to stick a few shots online to show you the current progress.

When you want to add an effect to an instrument, you see the Effects Dialog. This dialog allows you to add a bunch of effects, and this is what it looks like with some effects added:

Let me explain what is going on here. The top left combo box lists the effects on your system, and you can select an effect and click the Add button and it will add one of those little orange boxes. In the image above we have three effects added. The little red circle will eventually have an ‘X’ in it and delete the effect. You will also be able to drag each orange box and re-organise the order of the effects, which is crucial in many situations. Finally, you can double-click each orange box and tweak the individual effect settings. When you click it, you see a settings window pop up:

Here you can adjust the sliders in the settings dialog, and if you clicked the Play button in the first dialog, you will hear the effect change in real-time as you configure it. This makes it simple to get the effect just right. Oh, and the Preview button in the image above will be removed by the way, thats a little cruft left in to make sure those of you at the back are awake. :P

In both images there is a presets combo box where you can easily load and save effect settings as a preset. In the first box the presets are on an instrument basis, so you can easily view all of your guitar, drum, vocal presets etc. In the effect settings dialog, it will list presets for that individual effect. All the presets code is complete.

So, still plenty to work on and bugs to fix, but its really starting to sit well now. As ever, we need more helping hands with the project, so if you fancy getting involved, do get in touch. You can test this code by heading over to our Subversion server here and check out the development site at here.

  • Markus Bertheau

    The screenshots look great. If you could only get rid of the Ok/Cancel buttons – that would be great :)

  • thebluesgnr

    That looks really great! I installed jokosher for a friend that is converting from Windows – he didn’t get a chance to play with it yet so no feedback.

    I have a comment about these screens though. Why are there big boxes saying “Instrument Effects”, “Effect Settings”? Shouldn’t that just be in the window title?

  • http://hauberg.org Søren Hauberg

    Well, it looks great! I’m just wondering how accesible this dialog is. Will it work with a screenreader and keyboard-only navigation?

  • http://chrislord.net/ Chris Lord

    Looks nice :) How about some HIG spacing in Jokosher’s dialogs now?

  • http://advogato.org/person/AlanHorkan/ Alan Horkan

    Those non standard layouts look like the will be murder when it comes to accessibility. There will likely be some usability issues too if users are not immediately clear how the widgets behave. This isn’t like gaming software where learning the interface is half of the puzzle. Proceed with caution, and good luck.

  • sven

    isn’t it possible to deal with one less popup window and get rid of effect settings dialog. some apps (synaptic, evolution’s mail compose window and some more, can’t remember) just expand currently open popup, but do not create a new one.

  • jono

    Thanks for the really great comments folks. Its good to have some great constructive feedback. :)

    Part of the reason why I chose to make a Cairo widget was that I need the widget to have three core functions:

    • be movable (single-click drag)
    • click to see effect settings (double-click)
    • a delete button (click a seperate area that is part of the widget, such as the circle)

    Importantly, I also want the widget to look attractive. Part of the plan is to have an svg image of an effects stomp box watermark as part of the effect box.

    I could not think of a suitable solution using normal GTK widgets to achieve each of the above, while retaining the attractive look.

    Now, to accessability. Surely there must be ways in which Cairo custom widgets can be made accessable. Can anyone offer any tips and guidence on doing this? There are other parts of Jokosher that use custom Cairo wizardry, so this is important to us.

    Oh, and for the comments about the HIG – this dialog was designed without even looking at the HIG, so I will be refining it to make it more HIG compliant – better spacing, reconsidering OK/Cancel buttons etc.