Authentication with FlickrJ

When you know about username and password logins, the whole Flickr authentication process for web applications seems a little weird on first sight, nevertheless it is logical and necessary after you have done some reading (for example the official Flickr WebApp Auth HowTo).
To get started and into coding quickly (using FlickrJ and Java) I recommend this page. Especially the code example is excellent in my opinion! Thanks Andy Sacher!

Using the XML Parser in GWT

I tried using the XML parsing features 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 available for type com.google.gwt.xml.client.Document; did you forget to inherit a required module?”. It turns out, you are required to explicitly add the XML functionalities to your project by adding following line to your ….gwt.xml file:

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

Raises a question: What’s the point of AJAX (Asynchronous JavaScript and XML) without XML? Or in other words there is no AJAX without XML! So it’s up to you to add the AX part to GWT manually. What’s next?

GWT FileUpload: Adding Widgets to a FormPanel

If you build your first GWT form, for example something 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 console keeps telling you during runtime something like this: “java.lang.IllegalStateException: SimplePanel can only contain one child widget”. Instead of writing a long page of explanations and complaints like I did before, it’s simply like that:

“Just put all your widgets in a panel (like HorizontalPanel) and add that panel to the FormPanel.” (Jake − cf. comment below)

Thanks Jake!

GWT Does Not Load Module in Local AppEngine

The issue arose after I renamed the module file (ending with .gwt.xml) to better represent the module functionality. I also updated all relevant files in the project (search for files containing the old name to find them) accordingly.

Starting the application after that modifications ended up in an error (“[ERROR] Unable to find ‘<old module name>.gwt.xml’ on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?”) as the AppEngine tried loading the module by its old name.

Solution: Delete the launch profile for the project (by choosing “Run As…” -> “Run Configurations…” from the context menu).

Obviously the GWT does not check nor update the automatically generated launch profile thus you need to delete it to force the GWT to create a new profile from scratch taking the project changes into account. You might also adjust the profile according to the changes made, but deleting it is the safe and easy way.

First GWT Steps

Just started to work with GWT – a pretty interesting approach for web development compared to PHP or JSF. The whole Application engine is quite impressive especially allowing you to quickly test your applications locally by supporting automatic hot deployment after each code update.
One thing that took me a while was one of that “[ERROR] Unable to find ’[some-file].xml’ on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?” errors. If you are sure the file is in place, I realized restarting the App Engine or Eclipse mostly solves that problem.

Getting Drupal’s Access Control Module to Work Properly

After setting up some content types — some public, some internal. I installed the Access Control module, set up internal content not to be visible to anonymous users — but without any effect.

After some research, but without success, I realized the *Advanced* section at the bottom of the Access Control tab for each content type. And now the magic trick: Increase the weight and you are done. So I guess the build in access management was fighting the Access Control module, so it is up to you to make your favorite module stronger by giving it more weight. — I doubt this is intuitive. Additionally, it is for sure difficult to simply find the tiny little select box down there in a section, which is by default folded.

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

While setting up the website for my new project “Glocal” www.glocal-project.eu), I came across the problem of finding a proper menu module. Something easy to use, stable and efficient in the same time for the complex intranet structure (therefore, sorry, but you will not be able to see my solution there unless you are a project member). Something with a high usability in the end. Activemenu is still quite buggy and DHTML Menue requires a double click to actually open a page — unbearable in a non-doulbe-click environment like the Internet — who is supposed to guess, that this menu requires a double click?? Leaving me with JQuerymenu.

First impression: perfect! Open and close branches by clicking (+) or (-) — view page by clicking menu item label. Even the few styling issues could be fixed easily by using CSS. But as soon, as someone clicks a label, the menu collapses to its default status. It does not remember its last status after loading a different page with the same menu.

Is this it? All module have critical downsides like this? I was quite disappointed!

But I taught JQuerymenu to remember!

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

But please be careful, it should be considered an alpha version, there are quite some weaknesses (see tracker page). Any feedback or suggestions are very welcome!

fixing flex VideoDisplay CuePointManager

I was creating a Flex application to show slides and a presentation video of previously recorded presentations. Accordingly, each slide should appear at a certain point of time in the video – calls for cue points!

As all slides and there appearance are stored in a text file in my case, I started adding cue points with ActionScript. But as soon as the video can be controlled with a slider, allowing to shift for- and backwards, the event handler “cuePoint” was not triggered any more. Thus, the slides where not changed correctly as the user jumps ahead, as the cue points between the previous and the new position did not cause and cue point event.

Finally I wrote AdvCuePointManager, inheriting from CuePointManager, but which can deal with jumping 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 Services API is quite amazing. So I made a little application called flickTrick using phpFlickr.
tI is capable of producing either image mosaics on the basis of public photos of a given flickr account, or it it can generate a collage as the one you can see in the header part of this page, by simply adding follow 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 creating a collage can take several seconds, I implemented a caching version. It firstly returns the last image stored for the given parameters and then creates a new image. This version 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 creating an global infrastructure, allowing to give an unique name to anything. We called it ENS (Entity Name System), inspired by the DNS (Domain Name System). Why? Because having everything named and all occurrences in a document annotated with this name makes data integration as easy as pie. But names in a computer science environment are URIs and those are not human-readable by default. For example http://www.okkam.org/entity/ok923bf64b-3edf-4d0a-baf8-592db9f55689 is my name! – for sure no one is able nor willing to memorize this. As a first approach to this, I created a little PHP script, that can produce an image representing those names, or ENS identifiers or Okkam IDs (in short OID)  as we call them. This resulting image should be much easier to be remembered an recognized.

The upper one represents me and the one below Stefano Bortoli, a friend and colleague of mine. Several dimensions have been used, like color, size, position and line-width. As a next step, besides improving creation speed, patterns and shapes could be introduced and even motion by exchanging the PNG image either with an old-fashioned animated GIF or a Flash animation. Integration is kept as simple as it can be, e.g. by simply inserting <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 existing image directly from a server but instead it is created 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 finished the first prototype implementation of magnet, a generic tool to visualize coherences/similarities between enities of any data set.

» user test & more info »

sign selector

While testing some ideas for a jukebox application for my “media center” computer, I came to a point, where the user should be able to select an interpret 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 narrow the list by typing some initial letters would be much faster and convinient. This should not be difficult on a thouch screen, but as I also wanted  this application to work on mouse-only devices, as a keyboard was for example too space consuming in my configuration. So I ended up trying to find an interface component, allowing an user to enter a view letters with a pointing device like a mouse or a track ball.

It is basically a pop-out technique, but making use of moving the mouse pointer in two dimensions, than the common linear approach. Operatiing this first prototype version on the left is still a little rough though.

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

Aquaris is a game dedicated to teach and inform about renewable energy technologies and energy-saving measures to children of the fourth grade. Aquaris was intended to be set up in a small museum,owned by an electricity producing company. Private guided tours about the topic mentioned before where offered for whole fourth grade classes at once.
For those reasons, three requirements were defined:

facts

• easy to learn game flow, due to minimal complexity of gameplay
• easy to use, custom made controller
• a whole class of up to 30 children can play within one hour
• children learn in a playful way as knowledge pays off in our game
• to cope with minor reading problems, mostly audio is used instead of text

advantages of the controller built at a glance

click to see a 3D animation about placement and function of the controllers

• form follows function: the cursor on the screen follows one to one the controller handle
• no button functions need to be learned, all interactions necessary to play the game can be performed moving the handle
• each controller device is placed accordingly to its cursor on the screen
• very precise
• only needs to be calibrated once at setup time
• no influences of environment

Or click here to see a low quality (1mb) 3D animation version.

»»» see more details, pictures and videos »»»

Dream Worlds — Traumwelten

This movie was a big challenge for me, because although I was the worst drawer in the whole group for sure, I got the chance to do the drawings for the movie. Some sleepless nights with a pencil, quite some sheets of paper and some pots of fruit tea — but finally, this small movie became something beautiful and unique and I ended up quite happy and proud . The video part and the coloration 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 navigational approach of my old (unmaintained!) home page (in german).

This version of my homepage features a new navigational concept combining the idea of zoomable interfaces and a masked floating layer. I created this application as experiment while searching for concepts and idea about how to integrate contents and navigational layer.

After informal feed back of user i asked to give it a trail, I had to find, in the end, this RIA will stay more an experiment than a easy to use information portal.

The text and media contained is in german and has not been update ever since, additionally the guest book is deactivated. Therefore give it a trail but do not take the content serious .

Ikarus

My first movie! A stop-motion movie about a bird. It is horribly much work — approximately one hour to do one second of film, but it would always do it again!

But see yourself below!

» more details & high quality video download »