Authentication with FlickrJ

When you know about user­name and pass­word logins, the whole Flickr authen­ti­ca­tion process for web appli­ca­tions seems a lit­tle weird on first sight, nev­er­the­less it is log­i­cal and nec­es­sary after you have done some read­ing (for exam­ple the offi­cial Flickr WebApp Auth HowTo).
To get started and into cod­ing quickly (using FlickrJ and Java) I rec­om­mend this page. Espe­cially the code exam­ple is excel­lent in my opin­ion! Thanks Andy Sacher!

Using the XML Parser in GWT

I tried using the XML pars­ing fea­tures of the GWT like that:

form.addSubmitCompleteHandler(new SubmitCompleteHandler() {
	@Override
	public void onSubmitComplete(SubmitCompleteEvent event) {
		// One time upload only, to upload again, user needs to start the upload process from scatch – keeping it simple for now
		panel.clear();
		Window.alert(event.getResults());
		Document result = XMLParser.parse(event.getResults());
		...
});

But GWT kept telling me “No source code is avail­able for type com.google.gwt.xml.client.Document; did you for­get to inherit a required mod­ule?”. It turns out, you are required to explic­itly add the XML func­tion­al­i­ties to your project by adding fol­low­ing line to your .…gwt.xml file:

<inherits name='com.google.gwt.xml.XML'/>

Raises a ques­tion: What’s the point of AJAX (Asyn­chro­nous JavaScript and XML) with­out XML? Or in other words there is no AJAX with­out XML! So it’s up to you to add the AX part to GWT man­u­ally. What’s next?

GWT FileUpload: Adding Widgets to a FormPanel

If you build your first GWT form, for exam­ple some­thing like that:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<g:FormPanel ui:field="form"> 
<g:FileUpload ui:field="uploadField" name="file"/>
<g:SubmitButton ui:field="submitButton">Upload</g:SubmitButton>
</g:FormPanel>
</g:HTMLPanel>
</ui:UiBinder>

And your con­sole keeps telling you dur­ing run­time some­thing like this: “java.lang.IllegalStateException: Sim­plePanel can only con­tain one child wid­get”. Instead of writ­ing a long page of expla­na­tions and com­plaints like I did before, it’s sim­ply like that:

“Just put all your wid­gets in a panel (like Hor­i­zon­tal­Panel) and add that panel to the Form­Panel.” (Jake − cf. com­ment below)

Thanks Jake!

GWT Does Not Load Module in Local AppEngine

The issue arose after I renamed the mod­ule file (end­ing with .gwt.xml) to bet­ter rep­re­sent the mod­ule func­tion­al­ity. I also updated all rel­e­vant files in the project (search for files con­tain­ing the old name to find them) accordingly.

Start­ing the appli­ca­tion after that mod­i­fi­ca­tions ended up in an error (“[ERROR] Unable to find ‘<old mod­ule name>.gwt.xml’ on your class­path; could be a typo, or maybe you for­got to include a class­path entry for source?”) as the AppEngine tried load­ing the mod­ule by its old name.

Solu­tion: Delete the launch pro­file for the project (by choos­ing “Run As…” -> “Run Con­fig­u­ra­tions…” from the con­text menu).

Obvi­ously the GWT does not check nor update the auto­mat­i­cally gen­er­ated launch pro­file thus you need to delete it to force the GWT to cre­ate a new pro­file from scratch tak­ing the project changes into account. You might also adjust the pro­file accord­ing to the changes made, but delet­ing it is the safe and easy way.

First GWT Steps

Just started to work with GWT – a pretty inter­est­ing approach for web devel­op­ment com­pared to PHP or JSF. The whole Appli­ca­tion engine is quite impres­sive espe­cially allow­ing you to quickly test your appli­ca­tions locally by sup­port­ing auto­matic hot deploy­ment after each code update.
One thing that took me a while was one of that “[ERROR] Unable to find ‘[some-file].xml’ on your class­path; could be a typo, or maybe you for­got to include a class­path entry for source?” errors. If you are sure the file is in place, I real­ized restart­ing the App Engine or Eclipse mostly solves that problem.

Getting Drupal’s Access Control Module to Work Properly

After set­ting up some con­tent types — some pub­lic, some inter­nal. I installed the Access Con­trol mod­ule, set up inter­nal con­tent not to be vis­i­ble to anony­mous users — but with­out any effect.

After some research, but with­out suc­cess, I real­ized the *Advanced* sec­tion at the bot­tom of the Access Con­trol tab for each con­tent type. And now the magic trick: Increase the weight and you are done. So I guess the build in access man­age­ment was fight­ing the Access Con­trol mod­ule, so it is up to you to make your favorite mod­ule stronger by giv­ing it more weight. — I doubt this is intu­itive. Addi­tion­ally, it is for sure dif­fi­cult to sim­ply find the tiny lit­tle select box down there in a sec­tion, which is by default folded.

How to Make Jquerymenu for Drupal Keep its State on Page Reload

While set­ting up the web­site for my new project “Glo­cal” www.glocal-project.eu), I came across the prob­lem of find­ing a proper menu mod­ule. Some­thing easy to use, sta­ble and effi­cient in the same time for the com­plex intranet struc­ture (there­fore, sorry, but you will not be able to see my solu­tion there unless you are a project mem­ber). Some­thing with a high usabil­ity in the end. Active­menu is still quite buggy and DHTML Menue requires a dou­ble click to actu­ally open a page — unbear­able in a non-doulbe-click envi­ron­ment like the Inter­net — who is sup­posed to guess, that this menu requires a dou­ble click?? Leav­ing me with JQuery­menu.

First impres­sion: per­fect! Open and close branches by click­ing (+) or (-) — view page by click­ing menu item label. Even the few styling issues could be fixed eas­ily by using CSS. But as soon, as some­one clicks a label, the menu col­lapses to its default sta­tus. It does not remem­ber its last sta­tus after load­ing a dif­fer­ent page with the same menu.

Is this it? All mod­ule have crit­i­cal down­sides like this? I was quite dis­ap­pointed!

But I taught JQuery­menu to remember!

As it is quite some code, I will not post it here directly, but added it to the tracker page for this “fea­ture request” or you can down­load the two updated files (jquerymenu.js and jquerymenu.module) here and replace the once in your /sites/all/modules/jquerymenu folder.

But please be care­ful, it should be con­sid­ered an alpha ver­sion, there are quite some weak­nesses (see tracker page). Any feed­back or sug­ges­tions are very wel­come!

fixing flex VideoDisplay CuePointManager

I was cre­at­ing a Flex appli­ca­tion to show slides and a pre­sen­ta­tion video of pre­vi­ously recorded pre­sen­ta­tions. Accord­ingly, each slide should appear at a cer­tain point of time in the video — calls for cue points!

As all slides and there appear­ance are stored in a text file in my case, I started adding cue points with Action­Script. But as soon as the video can be con­trolled with a slider, allow­ing to shift for– and back­wards, the event han­dler “cue­Point” was not trig­gered any more. Thus, the slides where not changed cor­rectly as the user jumps ahead, as the cue points between the pre­vi­ous and the new posi­tion did not cause and cue point event.

Finally I wrote AdvCue­Point­Man­ager, inher­it­ing from Cue­Point­Man­ager, but which can deal with jump­ing back– and forward.

Copy it to “<your source folder>/net/svenbuschbeck/flex/video” and use it as follows:

<mx:VideoDisplay cuePointManagerClass="net.svenbuschbeck.flex.video.AdvCuePointManager" />

flickTrick

The flickr Ser­vices API is quite amaz­ing. So I made a lit­tle appli­ca­tion called flick­Trick using phpFlickr.
tI is capa­ble of pro­duc­ing either image mosaics on the basis of pub­lic pho­tos of a given flickr account, or it it can gen­er­ate a col­lage as the one you can see in the header part of this page, by sim­ply adding fol­low CSS to it.

background-image: url(http://svenbuschbeck.net/flickTrick/collage.php?username=sven%20buschbeck&width=500&height=200&size=square&shuffle=true&maximum=24&alpha=40);

— edit 2009/03/15 —
As cre­at­ing a col­lage can take sev­eral sec­onds, I imple­mented a caching ver­sion. It firstly returns the last image stored for the given para­me­ters and then cre­ates a new image. This ver­sion can be accessed by using “fast-collage.php” instead of “collage.php”.

» try it (alpha version) »

oidviz

What we do here in the Okkam project, is cre­at­ing an global infra­struc­ture, allow­ing to give an unique name to any­thing. We called it ENS (Entity Name Sys­tem), inspired by the DNS (Domain Name Sys­tem). Why? Because hav­ing every­thing named and all occur­rences in a doc­u­ment anno­tated with this name makes data inte­gra­tion as easy as pie. But names in a com­puter sci­ence envi­ron­ment are URIs and those are not human-readable by default. For exam­ple http://www.okkam.org/entity/ok923bf64b-3edf-4d0a-baf8-592db9f55689 is my name! — for sure no one is able nor will­ing to mem­o­rize this. As a first approach to this, I cre­ated a lit­tle PHP script, that can pro­duce an image rep­re­sent­ing those names, or ENS iden­ti­fiers or Okkam IDs (in short OID)  as we call them. This result­ing image should be much eas­ier to be remem­bered an recognized.

The upper one rep­re­sents me and the one below Ste­fano Bor­toli, a friend and col­league of mine. Sev­eral dimen­sions have been used, like color, size, posi­tion and line-width. As a next step, besides improv­ing cre­ation speed, pat­terns and shapes could be intro­duced and even motion by exchang­ing the PNG image either with an old-fashioned ani­mated GIF or a Flash ani­ma­tion. Inte­gra­tion is kept as sim­ple as it can be, e.g. by sim­ply insert­ing <img src=“http://okkam.dit.unitn.it/oidviz/?oid=[put your ID here]”/> into your XHTML page. The PHP script returns a bit stream, as if you would load an exist­ing image directly from a server but instead it is cre­ated on-the-fly.

use all your fingers
multi-touch!

Heard about those home-made multi-touch screens using infrared LEDs? We did it

» read more »

magnet v0

I fin­ished the first pro­to­type imple­men­ta­tion of mag­net, a generic tool to visu­al­ize coherences/similarities between eni­ties of any data set.

» user test & more info »

sign selector

While test­ing some ideas for a juke­box appli­ca­tion for my “media cen­ter” com­puter, I came to a point, where the user should be able to select an inter­pret or song from a huge list. If he knew the exact name, scrolling through a sorted list should be ok, but still a way to nar­row the list by typ­ing some ini­tial let­ters would be much faster and con­vinient. This should not be dif­fi­cult on a thouch screen, but as I also wanted  this appli­ca­tion to work on mouse-only devices, as a key­board was for exam­ple too space con­sum­ing in my con­fig­u­ra­tion. So I ended up try­ing to find an inter­face com­po­nent, allow­ing an user to enter a view let­ters with a point­ing device like a mouse or a track ball.

It is basi­cally a pop-out tech­nique, but mak­ing use of mov­ing the mouse pointer in two dimen­sions, than the com­mon lin­ear approach. Oper­ati­ing this first pro­to­type ver­sion on the left is still a lit­tle rough though.

Aquaris — three teams, two payers each, custom-built game controller

Aquaris is a game ded­i­cated to teach and inform about renew­able energy tech­nolo­gies and energy-saving mea­sures to chil­dren of the fourth grade. Aquaris was intended to be set up in a small museum,owned by an elec­tric­ity pro­duc­ing com­pany. Pri­vate guided tours about the topic men­tioned before where offered for whole fourth grade classes at once.
For those rea­sons, three require­ments were defined:

facts

• easy to learn game flow, due to min­i­mal com­plex­ity of gameplay
• easy to use, cus­tom made controller
• a whole class of up to 30 chil­dren can play within one hour
• chil­dren learn in a play­ful way as knowl­edge pays off in our game
• to cope with minor read­ing prob­lems, mostly audio is used instead of text

advan­tages of the con­troller built at a glance

click to see a 3D ani­ma­tion about place­ment and func­tion of the controllers

• form fol­lows func­tion: the cur­sor on the screen fol­lows one to one the con­troller handle
• no but­ton func­tions need to be learned, all inter­ac­tions nec­es­sary to play the game can be per­formed mov­ing the handle
• each con­troller device is placed accord­ingly to its cur­sor on the screen
• very pre­cise
• only needs to be cal­i­brated once at setup time
• no influ­ences of environment

Or click here to see a low qual­ity (1mb) 3D ani­ma­tion version.

»»» see more details, pic­tures and videos »»»

Dream Worlds — Traumwelten

This movie was a big chal­lenge for me, because although I was the worst drawer in the whole group for sure, I got the chance to do the draw­ings for the movie. Some sleep­less nights with a pen­cil, quite some sheets of paper and some pots of fruit tea — but finally, this small movie became some­thing beau­ti­ful and unique and I ended up quite happy and proud . The video part and the col­oration of the drawn part was done by collegues.

» see the movie & more details »

Content and navigation as zoomable UI and masked floating layer

See the Zoomable UI/floating layer nav­i­ga­tional approach of my old (unmain­tained!) home page (in german).

This ver­sion of my home­page fea­tures a new nav­i­ga­tional con­cept com­bin­ing the idea of zoomable inter­faces and a masked float­ing layer. I cre­ated this appli­ca­tion as exper­i­ment while search­ing for con­cepts and idea about how to inte­grate con­tents and nav­i­ga­tional layer.

After infor­mal feed back of user i asked to give it a trail, I had to find, in the end, this RIA will stay more an exper­i­ment than a easy to use infor­ma­tion portal.

The text and media con­tained is in ger­man and has not been update ever since, addi­tion­ally the guest book is deac­ti­vated. There­fore give it a trail but do not take the con­tent seri­ous .

Ikarus

My first movie! A stop-motion movie about a bird. It is hor­ri­bly much work — approx­i­mately one hour to do one sec­ond of film, but it would always do it again!

But see your­self below!

» more details & high qual­ity video download »