synatic|blog by Benedikt Deicke

I just played a mms-stream using mplayer in the console. After it was done I read this in the console:

(Looks like this is my shortest blog entry ever … ;-))

There is a great article by Jason Long on Vitamin called ‘Streamline your forms with widgets’. In his article Jason Long describes a nice looking way to clean up a lot of checkboxes into multiple dropdown widgets. What I really liked was the idea to have some summary about the selected items next to the title of the dropdown widgets. Unfortunately he didn’t implement the updating function but just mentioned it as a possible extension. In addition he pointed out that “Any Fuel” would be much easier to read than “Fuel (Gasoline, Diesel, Alternative)”. As I was in the right mood for some Javascript I implemented the missing functionality.

At first I added four little lines to the top of the toggleDropdown() function. This little snippet checks weather the panel is currently visible (so the function was toggled to hide the panel again) and calls the updateTitle() function.

   1  function toggleDropdown(panel) 
   2  {
   3    panel = $(panel);
   4    if(panel.visible()) {
   5      updateTitle(panel);
   6    }
   7  
   8    // toggle the requested one
   9    Element.toggle(panel);
  10       
  11    // then hide all of the others so that only
  12    // one (at most) is open at a time
  13    $$('body .dd_option_panel').each(function(node){
  14      if (node != $(panel)) {
  15        Element.hide(node);
  16      }
  17    });  
  18  }

To do the actual updating of the title I used Prototype’s nifty little DOM traversal toolkit. It provides methods such as Element#select(), Element#up(), Element#down(), Element#previous() and Element#next(). All of can be supplied with a selector, similar to those in CSS.

First I select all child elements of type “input” and check their value. If the value matches “on” the checkbox is selected and I travel down to the next “label”-element to push it’s content into an array. Afterwards I check the size of this array and decide how to change the title. If none of the checkboxes are selected I add “No ” to the title and don’t display the list of the selected values. Accordingly if all are selected I prepend “Any ”. Otherwise I leave the title as it is and update the list behind it by joining the elements of the array into a string. To prevent titles such as “Any Any No Any Fuel” I clean up the title by removing either Any or No in front of the title using String#gsub().

   1  function updateTitle(panel)
   2  {
   3    selected = new Array();
   4    panel.select('input').each(function(box){
   5      if(box.getValue() == 'on') {
   6        selected.push(box.next('label').innerHTML);
   7      }
   8    });
   9       
  10    inner = panel.previous(".inner");
  11    title = inner.innerHTML.gsub(/^([Any|No])/, '');
  12    
  13    if(selected.length == 0) {
  14      inner.update('No ' + title);
  15      inner.down(".light").update('');
  16    } else if(selected.length == panel.select('label').length) {
  17      inner.update('Any ' + title);
  18      inner.down('.light').update('');
  19    } else {
  20      inner.update(title);
  21      inner.down('.light').update('(' + selected.join(', ') + ')');
  22    }
  23  }

In order to get correct titles right from the beginning I update all titles after the page loaded.

   1  Event.observe(window, 'load', function(event) {
   2    $$('body .dd_option_panel').each(function(panel) {
   3      updateTitle(panel);
   4    });
   5  });

That’s it! Click here to see the changed example.

Of course all the credits for the original implementation, graphics, and idea go to Jason Long.

It took a little longer, but finally here’s the sourcecode for Angelica.

Download AudioVis.tar.gz (302,4 KB)

If you want to include lyrics, the file must contain data in this format:

   1  [00:31.09] Finally the hills are without eyes
   2  [00:34.50] They are tired of painting a dead man's face red
   3  [00:40.01] With their own blood
   4  [00:44.31] They used to love having so much to lose
   5  [00:49.92] Blink your eyes just once and see everything in ruins 

To encode the images into video I used mencoder with these parameters:

   1  /usr/bin/mencoder "mf://out/*.png" -mf fps=25 -audiofile data/audio.mp3 \
   2  -o video.avi -oac copy -ovc lavc \
   3  -lavcopts vcodec=mpeg4:vbitrate=16000:mbd=2:trell=yes:v4mv=yes

Feel free to use, change and criticize the code. It’s far from being perfect. ;-)

I’m looking forward to your comments.

This is the first processing sketch using audio visualization I built. It was created as a final project for a Processing course at the University of Applied Sciences Fulda. As one might guess, it was inspired by the amazing works of flight404. All frames have been rendered into pngs and encoded to video, using mencoder, later. Music is Lamb – Angelica. Made with Processing.

I’ll upload the sources later and maybe write a short tutorial about it …

This one started as an homework for university but I really started to like it. The original task was to built a fuzzy controller using Matlab in groups of 2 or 3 students. I joined Benjamin and another fellow student to create a simple fuzzy controller for flying a plane in a given height above the ground. To make things a little more complex we also considered head wind. As all of us three didn’t like the quite abstract results of our controller in Matlab, we decided to implement a small simulation in processing. We used Edward Saznov’s open source fuzzy inference engine for Java and integrated it into processing. Surprisingly everything worked quite well from the beginning. Although we had some small issues we were able to build a nice looking and functional simulation using the controller we designed. The resulting applet runs perfectly in the browser and as an application. (I love processing’s export-feature.) Check out the sketch by clicking on the picture below.

Here are the controls you might need :-)

We decided to release the source code of this. It still could need some refactoring, but it’s working and deadline was today, so feel free to experiment with it (or even improve it) and sent us some comments!