“An invalid or illegal string was specified” Exception in GWT

While working with canvas (drawing stuff on it) in GWT, suddenly and in a seemingly unpredictable manner I got following error message now and then from within the GWT framework code:

com.google.gwt.core.client.JavaScriptException: (NS_ERROR_DOM_SYNTAX_ERR): An invalid or illegal string was specified;

Again, GWT tricked me into thinking I am writing Java code and made me forget about that it is going to be compiled into Javascript. And because of the latter, a division by zero does not throw an DevisionByZeroException, no, it returns NaN even for native data types (there is no differentiation between double and Double in Javascript – there is only the object-version of double, which can be of value Double.NaN).

But also GWT was not prepared to handle Double.NaN. When calling canvas.getContext().drawImage(image,x,y) and one of x and y or both were Double.NaN I got the error message shown above. If you got the same… you know what to do: check all devisions in your code for potential devisions by zero!!

Sorting lists in GWT

Quick one:
Lists.sort(list, comparator) is not implemented in the GAE JVM.
But, as a replacement/alternative, Collections.sort(list, comparator) is.

How to Execute Code When the GWT Application Is Going Down

My goal was to store the UI state of my application just before it gets terminated to be able to restore it next time the way the user left it the other day.

I tried to add an addAttachHandler to the RootPanel to get informed about the root panel getting detached from the DOM so that I can finalize my application. Surprisingly, that does not work in Chrome (tested Chrome and Firefox only).

But besides that this sounds like a bug to me, I found the “proper” way of doing things before the application ends:

Window.addWindowClosingHandler(new Window.ClosingHandler() {
	@Override public void onWindowClosing(ClosingEvent event) { ... }
});

In the end, I think something like Document.addUnloadHandler would be more suggestive… closing the window or reloading a page is both exiting the application by unloading the DOM – not closing the window.

Disable an Anchor in GWT

Unexpectedly, calling setEnabled(false) does not prevent a link/anchor from being clicked. That means, the click events still get triggered.
The reason is more or less a bug in GWT as it updates the list of events that are going to be triggered only at the moment when it gets attached to the DOM (Btw, in GWT, this process is called to sink and to unsink events, where the former enables a specific event to be triggered and the latter disables it).
I found a workaround by creating my own Anchor class and forcing the underlying GWT Anchor to update the list of events to be sunk.

...
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Event;

public class Anchor extends com.google.gwt.user.client.ui.Anchor {

	@Override public void setEnabled(boolean enabled) {
		super.setEnabled(enabled);
		if (isAttached()) {
			onDetach();
			if (enabled) {
				sinkEvents(Event.ONCLICK);
			} else {
				unsinkEvents(Event.ONCLICK);
			}
			onAttach();
		}
	}

	@Override protected void onLoad() {
		super.onLoad();
		if (isEnabled()) {
			sinkEvents(Event.ONCLICK);
		} else {
			unsinkEvents(Event.ONCLICK);
		}
	}
}

Note the onLoad method, it sets up the state when the widget gets attached to the DOM the first time. It is required because setEnabled() could have been called before the anchor got attached.

If you encountered the same issue, please vote for this bug report.

Flickering Screen with ATI Radeon X1400 and Ubuntu

EDIT: ATI Radeon X1400 seems to work fine with Ubuntu 11.04.

There is another fix to the “well known” issues with the ATI Radeon X1400 and Ubuntu 10.04 to 10.10 besides the one posted about one year ago (see here).
The previous fix kept the graphics card working normally but harmed the overall operating system’s stability, so here is another fix based on disabling all 3D features of the device to get rid of the flickering screen.

It’s up to you to choose what you are able to live without
a) The desktop settings panel and “Segmentation fault” errors now and then, or
b) 3D acceleration (does not harm video playback or any other basic OS functionalities)

For solution a) see this.
For b) create this file: /etc/modprobe.d/radeon-kms.conf — and add following content

options radeon modeset=0

Solution found here (in German).

Languagesen>de GoogleCE

die

Logitech Communicator STX Webcam vs. Ubuntu (64bit) & Skype 2.1

There are many tutorials out there solving the problem by making Skype use Video for Linux version 1 drivers instead of version 2, as that particular webcam does not seem to get along with the newer version. It boils down to the following lines:

Create a file in /usr/local/bin/skype and insert

#!/bin/bash
LD_PRELOAD=/usr/lib/libv4l/v4l1compat.so /usr/bin/skype

Finally, make it executable by sudo chmod a+x /usr/local/bin/skype
Use this file to start Skype from now on. Done.

But not for me. Skype refused to eat it: ERROR: ld.so: object '/usr/lib/libv4l/v4l1compat.so' from LD_PRELOAD cannot be preloaded: ignored.
Until I finally found this one here.

Just to cut a long story short, here is why: all the other solutions work for 32bit Linux only — but hey, I do not have any of my old laptop’s potential to be wasted — I am running 64bit Ubuntu (tested with version 9.10 and 10.10 64bit). And with a minor tweak, the fix will work for you, too.

Install the video4linux libraries:

 sudo apt-get install lib32v4l-0

And change /usr/local/bin/skype to

LD_PRELOAD=/usr/lib32/libv4l/v4l1compat.so /usr/bin/skype

Its just about the “32″ — and one good example more of why you should put meaningful error messages in whatever software!

Thanks Eoin Murphy.

Java Cookies from the Future Past

While working with cookies in Java/GWT and thus—to set the expire date—with Date, I found a doubtful Java behavior.

My goal was to set a cookie to expire in about one month from today like this:

Date expires = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 30);
Cookies.setCookie("myCookie", "myData", expires);

And kept wondering why the cookie never got stored.

And finally created a simple test case like this:

Date today = new Date();
Date tomorrow = new Date(today.getTime() + 1000 * 60 * 60 * 24);
Date nextMonth = new Date(today.getTime() + 1000 * 60 * 60 * 24 * 30);

And got following dates:

today=Mon Feb 07 14:27:50 CET 2011
tomorrow=Tue Feb 08 14:27:50 CET 2011
nextMonth=Tue Jan 18 21:25:02 CET 2011

According to Java’s calculation, the cookie was expired already before even being set.

Took me a bit to understand why:
1000 * 60 * 60 * 24 * 30 = 2,592,000,000 = 0x9A7EC800
Thus, the first bit got set to one… a classical overflow causing the integer value to become negative – just try:

System.out.println(1000 * 60 * 60 * 24 * 30);

It will print out -1702967296.

Fix: Add a little L will solve the issue by forcing the compiler to calculate using the scope of long:

Date nextMonthLong = new Date(today.getTime() + 1000L * 60 * 60 * 24 * 30);

I guess I will fall for that one again sometime as the error is not obvious in my opinion — especially because getTime() returns a long and still, the compiler sticks with an int for the multiplication part.

Disable Context Menu in GWT

To make use of the right mouse button, it is necessary to disable the native browser context menu (the popup menu appearing on right click). This can be achieved like this:

RootLayoutPanel.get().addDomHandler(new ContextMenuHandler() {

	@Override public void onContextMenu(ContextMenuEvent event) {
		event.preventDefault();
		event.stopPropagation();
	}
}, ContextMenuEvent.getType());

Same should work for RootPanel.

After that, it is possible to make use of the right mouse button for example like this:

someWidget.addDomHandler(new MouseMoveHandler() {

	@Override public void onMouseMove(MouseMoveEvent event) {
		if (event.getNativeButton() == NativeEvent.BUTTON_RIGHT) {
		...

GWT Error Message “Asked for attribute parser of no type”

Example:

public boolean isCollapsed() {
	return panel.isVisible();
}

public void setCollapsed() {
	panel.setVisible(false);
}

Seen it? Despite the complicated and cryptic error message, the mistake is rather simple: the setter method is missing a parameter, i.e. “public void setCollapsed(boolean collapsed) {“.

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!

Testing GWT Application in Virtual Machine

I am developing on a Mac, but to test my GWT applications for cross-browser compatibility in Internet Explorer I need to use Windows, thus I got Windows 7 installed using Parallels. Just by the way, to be able to test in different Internet Explorer version, I am using a pretty handy application called IETester.
But trying to access localhost with IE in the virtual machine did not work. I got a “404 page not found” error instead of seeing my app running on the local App Engine instance. Obviously, Parallels does not automatically forward localhost requests to OSX and maybe that is actually a good idea security-wise.
To fix the issue, you need to run Google App Engine on a public network interface, or in other words, bind the App Engine server to all available IP addresses. The down side: everybody knowing your IP address can see the GWT app now, but otherwise you are not allowed to access it in the virutal machine as from your OSX’s point of view, that Windows machine is “some other guy accessing from the outside”, too. To make GAE accessible from the outside, add the parameter “-bindAddress 0.0.0.0″ when launching you local GAE. Using Eclipse you can achieve that by right clicking your project -> Run As -> Run Configurations -> Choose “(x)= Arguments” tab; add the option to the top most box titled “Program arguments” in the options area (e.g. before “-port 8888″).

The first part of the list of arguments should look something like that:

-remoteUI "${gwt_remote_ui_server_port}:${unique_id}" -startupUrl GlocalUiPg2.html -logLevel INFO -codeServerPort 9997 -bindAddress 0.0.0.0 -port 8888 ...

Now, you can access you app using the OSX’s public IP address. (You can get to know your IP by having a look at the network preferences panel.) Launching GAE from Eclipse, you will see a different link (URL) in the “Development Mode” tab now, containing the public IP already. Using that one in, say, your Firefox on Mac, it will ask you now whether you want to allow the debugger access. That is also due to the fact, that you are now using a public address, so it is not clear to your local debug server, whether that request came from the same computer or someone else in the network.

Casting collections in Java

Assuming two classes A and B as

class A {}
class B extends A {}

It is just logical that casting B to A works fine:

A anObjectOfClassA = new B();

But when it comes to collections of As and Bs, a strange phenomenon appears in Java:

Collection<B> collectionOfBs = new LinkedList<B>();
Collection<A> collectionOfAs = (Collection<A>)collectionOfBs; // this line does not compile!

That is, though the collection wrapper (the java.util.Collection class) is the same and B extends A, casting a collection of objects of class B to a collection of objects of class A throws an compile-time error.

But it works using generics (the whole class for the sake of completeness and reusability):

import java.util.Collection;
import java.util.LinkedList;

public class CollectionCastingExample {

  class A {}
  class B extends A {}

  Collection<B> collectionOfBs = new LinkedList<B>();
//  Collection<A> collectionOfAs = (Collection<A>)collectionOfBs;

  Collection<A> collectionOfAs = downCastCollection(collectionOfBs, A.class);

  /**
   * Casts a collection of objects of class B where B extends A to a collection of objects of class A.
   *
   * @param <T> Base class
   * @param collection Collection of objects of a class extending T
   * @param aClass Representation of T
   * @return Collection of objects of T casted from given collection of objects of a class extending T.
   */
  @SuppressWarnings("unchecked")
  public static <T> Collection<T> downCastCollection(Collection<? extends T> collection,
      Class<T> aClass) {
    return (Collection<T>) collection;
  }
}

Despite the fact that a @SuppressWarnings("unchecked") is required, it avoids iterating over the whole collection of Bs and casting each of them from B to A plus adding them to a new collection of As.

Adding a New Service (GWT)

Adding a new servlet/service to you GWT application is quite straight forward, e.g. by copying the example “greetingService” or creating a new servlet. But it’s easy to overlook a required change/adjustment of your project’s configuration and you might end up with an error message like “Blocked attempt to access interface ‘some.package.SomeService’, which is not implemented by ‘some.other.package.SomeOtherServiceImpl’; this is either misconfiguration or a hack attempt”.

Check list (some should be replaced with whatever you want to call your new service):

• Copy or create files:
  SomeService.java and SomeServiceAsync.java in client package
  SomeServiceImpl.java in server package + change implementation statement to SomeService
• Adjust web.xml:

  <servlet>
  	<servlet-name>someServlet</servlet-name>
  	<servlet-class>some.package.SomeServiceImpl</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>someServlet</servlet-name>
  	<url-pattern>/[copy base directory name from other service declaration]/some</url-pattern>
  </servlet-mapping>

• Annotate interface SomeService.java:

  @RemoteServiceRelativePath("some")

• Connect to your new service in the client:

  private final SomeServiceAsync someService = GWT.create(SomeService.class);

Definitely some possibilities to make a mistakes or miss something here.

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?

Uploading File to Server: Access Denied

Simple task: upload a file to the server. Achieved so far: upload form works and the file gets transferred to the server.
But as soon as the file is written, I get one of that:
“java.security.AccessControlException: access denied (java.io.FilePermission /some/folder/upload__71c20601_12b1b66bc39__7ffa_00000000.tmp write)”
I am amazed how much searching is required to find some information about how to modify the file permissions for the local app engine! And in the end, it turns out that there is an issue with the GAE on Mac but without a way to configure the local Jetty server to allow write access.
As soon as I deploy the app to a Tomcat on Linux, it works like a charm!

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.

Resizing System or Home Partion

A very convenient tool for creating, moving, and resizing partitions is GParted. I use it for all my partition-changing-needs — it is really powerful and yet easy to use!

But it is not possible to resize system relevant partitions while the system is running — makes sense, right?

But you can download GParted as LiveCD ISO file and burn it on a CD. After that, restart your computer with the CD in your drive and a small linux will start up directly from CD including GParted, thus allowing you to modify any drive and partition there is. Do all required changes, click the exit button and you are done. In my case, the computer did not reboot automatically, instead I ended up with a command line interface — use the command “sudo reboot” to restart the system yourself if that happens.

And just by the way, GParted does also handle Windows partitions easily — so there is no need to buy or “get” Partition Magic from somewhere. But never forget to backup your data first.

Yet another hint: GParted works most reliable if you do one step at a time. So for example, there are partitions A and B (A is in front of B) and you wish to give some of the free space in A to B. You need to do following steps: Shrink A, move B left and finally grow B. From my experience, GParted works best if you really do all those steps separately, apply each of then, and go for the next one if the last one finished successfully.

Flickering Screen After Upgrade to Kubuntu 10.04

First of all, I was amazed how smoothly the upgrade went. (K)Ubuntu and I guess other distributions as well have gone quite a far way to become platforms for everybody — with a lot of software but even more tools, helpers and automatic background services — like the nice upgrade service.

There was only one problem I ran into and I want to share the solution.

I am running Kubuntu 10.04 (just upgraded today) on a Lenovo IBM ThinkPad R60 (Yes, one of those with both brands on them ) with an ATI Radeon X1400 graphics device. But since upgraded, my display started flickering — not permanently but unbearable.

The solution that worked for me (at least partially — see below — and this is of cause depending on the graphics device type) was to install the proprietary ATI drivers. I know, it is not a good solution, I do not like to use them neither and if anyone out there is reading this with a better solution in mind, let me know it!!
Edit 2011-02-14: Added a new post with an additional, alternative solution here.

So what you need to do is  to get your favorite package management tool (e.g. Synaptic or KPackageKit) — just hit Alt+F2 and type “package” and pick KPackageKit from the list (it will ask you for the super user password). Then, search for “fglrx”. In KPackageKit, you will find a result titled “Video driver for the ATI graphics accelerator”, and something below the title like “fglrx – 2:8.723.1-0ubuntu3″ but the version number should not matter. Click the arrow to the right, hit “Apply” and after rebooting, everything should perfectly without any configuration.

Good luck.

Problems noticed so far: The driver causes “Segmentation Fault” error messages, e.g. when trying to open up the display settings. That’s ugly, I know. But you can read in several forum and blog posts, that the support for the former nicely working driver for the ATI X1400 has been discontinued since 10.04, hence, it’s just good luck that the fglrx works somehow — good to know *after* upgrading, right. But still, the flickering was unbearable for me, thus, I accept the issues for now. I will keep my eyes peeled hoping for a proper solution in the future.

Change hotkey of Kubuntu’s Quick Launch Tool KRunner

First of all: I love those quick launch tools aka keystroke launchers, they are real time savers — everyone should have one!

[For those without a glue what a keystroke launcher is:] It is THE tool for launching any kind of software or even opening documents. Instead of moving your mouse to you applications menu, click it, search the program, move the mouse there, maybe pick a sub-folder, move mouse again and finally click — unless you accidentally moved a little but to far and the menu close again, completely. But it is easy to put an end to this (as described below). Instead of doing all that clicking, you hit a special key combination, by default [Alt] and [Space], this will make a small input box show up, now, you only enter the first letters of the program — e.g. “f” will do after a few uses to start Firefox (the program learned that you use it a lot). It might save only a few seconds each time, but the sum up and, hey, it is very convenient, too!

So here is what you need to do:
Mac OS: It is already built-in — Just hit Alt+Space and type the name of the program you want to start (or files or whatever).
Windows: Get/install Launchy and use it as explained above.
Kubuntu: built-in as well, BUUUT you have to hit Alt+F2 instead.

And there it is, something that kept annoying me about Kubuntu for quite a bit. I was hoping to get used to it but for what reason? Alt+F2 is really not handy compared to Alt+Space.
Finally, based on this old forum post and a few adjustments to fit nowadays Kubuntu, all you need to do is this:

1. Go to “Settings” -> “Keyboard and mouse”
2. Select “Global Keyboard Shortcuts”
3. Pick from the select box “KDE component” at the top “Run Command Interface”
4. Now, you can access “Run Command” — Change it to whatever you like

Moving home to it’s own partion (Ubuntu)

We are going to move all accounts including their personal data on a distinct partition. This recommended in case of system failure to not loose any data.
I have no idea, why the Ubuntu installation wizard does not do this by default — it should!

This post is based on an article in German – I will mainly translate it, strip some plush and add some stuff to make life easier and to reduce the risk of data loss. But be aware: to perform any of those following things, you will need super user rights and you should feel somewhat comfy with using the command line. And of course, it might be possible in circumstances unforeseen, that you lose all your personal data — but there are a lot of backup steps included below.

Here we go: (console input or statements are written in italics)

1. Preparation
   1. Create a backup: rsync -avx –progress /home <your backup destination>
   2. If you do not have a free partition yet, I recommend GParted to create one (use sudo apt-get install gparted). I recommend ext3 for compatibility issues — but if you use Linux only, you can go for ext4 (please change ext3 to ext4 in step 1.6 in case) — make sure your new partition is big enough for your home folder! Try to remember the size (get size: du -sh /home) of /home, you can use it later on to verify your new home location.
   3. Get partion name sudo fdisk -l /dev/sda — e.g. /dev/sda7 — I will refer to this name as (name)
   4. Copy your current file system configuration: sudo cp /etc/fstab /etc/fstab.new
   5. Get partion UUID of new partition: sudo blkid — you will find a line about (name) stating a UUID (quite a long hex string), I will refer to it as (uuid) — copy it.
   6. Edit /etc/fstab.new, add a new line at the end as follows (the layout should follow previous lines – simply copy one and adjust it):
      UUID=(UUID)  /home                ext3         defaults                    0  2
2. Copy
   1. Sign off / Log out
   2. Switch to console mode by pressing Ctrl+Alt+F1
   3. Create a mount point for the new partition: sudo mkdir /mnt/tmp
   4. Add partion: sudo mount (name) /mnt/tmp
   5. Copy home from the old location to the new partition: sudo rsync -avx –progress /home/ /mnt/tmp
3. Test
   1. Mount copy of home as new home: sudo mount (name) /home
   2. Check size of home folder — should be the same as in step 1.: du -sh /home
   3. Check mounting worked: sudo mount| grep /home should print out something like
      (name) on /home
4. Switch
   1. yet another home backup: sudo mv /home /home.bak
   2. create new home mount point: sudo mkdir /home
   3. create a backup of fstab: sudo mv /etc/fstab /etc/fstab.bak
   4. put updated version in place: sudo mv /etc/fstab.new /etc/fstab
   5. reboot and you should be done: sudo reboot

Ok, that’s that. If everything works fine, you can delete the backup home sudo rm -rf /home.bak and the fstab backup sudo rm /etc/fstab.bak. Hope you found it useful and I did not put in a mistake or typo. Gimme feedback!

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.

KDE vs. Gnome

Now, my decision is final: KDE rules (though I actually prefer the look of Gnome ).

Simple reason: Gnome does not support drag-and-drop in combination with alt+tab (see bug tracker), but there might be hope with the upcoming Gnome 3.

[Edit 2011-06-14: Indeed, drag-and-drop + alt-tab works since since Ubuntu 11.04 (did not try with 10.10). One major difference remains: Do you need a lot of configuration and customization options? And are you will to accept complex, maybe not that self-explaining menu structures for that? If yes, KDE is your choice, otherwise Gnome might make your life easier. See also this page for more details and screenshots.]

In more detail: using drag-and-drop together with alt+tab key combination allows to work very efficiently. For example, while ordering my photos, I want to work on one of them — as I do this regularly, Gimp is opened already, but in the background — so what I do using KDE or MS Windows is, I grab the picture, switch to Gimp by using alt+tab and immediately drop the picture without moving the mouse at all – I am quite confident that this is the fastest way of opening a picture for editing. Some people advice to set Gimp as default application to open JPEGs, but I am not always editing pictures, most of the times I just want to view them.

Using “Open With” on a JPEG file for sure is the common approach – but let’s compare it:

• Drag-and-drop & alt+tab
  • Actions to be performed: mouse down + key down + key up + mouse up
  • In total: four fast steps
• “Open With” solution (holding mouse down as improvement)
  • Actions to be performed:mouse down + moving to “Open With” + wait for sub-menu to open + move to sub-menu + mouse up
  • In total: two fast, three slow steps

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!

Simple redirection using PHP and HTML meta tag

Something everyone needs once in a while… maybe you moved a file on your server or you did not install wordpress in the root folder of your webserver – like I did neither – a redirection or forwarding can be an easy answer.

The script is rather simple – it redirects in three ways to provide a reasonable fall back if any of the automatic redirecting fails. To use it on your server, just enter the URL/address/file name/folder you would like the user to be redirected to in the second line of the page/script.

In my case, every user ending up at “www.svenbuschbeck.net” should to be forwarded to “www.svenbuschbeck.net/wordpress/home”. So I adjusted the script below like “$url = ‘wordpress/home’”, named the file “index.php” and put it in the root folder. Done .

<?php
$url = 'put your URL between the parenthesis';
header("Location: $url");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta http-equiv="refresh" content="0;url=<?php echo $url; ?>"/>
<title>You will be redirected... </title>
</head>
<body>
If you are not redirected automatically, please click <a href="<?php echo $url; ?>">here</a>.
</body>
</html>

good & bad usablity
the tap example

Everyone interested in HCI and Usability saw the cover picture of The Design of Everyday Things by Donald Norman. But there are examples about good and bad usability all around us, every day and I want to share one of mine.

I realized how much more comfortable the shower tap at my parents place is, compared to the one in my shared flat.

Don't move! If you touch it and you are lucky, the water gets only turned off... otherwise you get frozen or boiled.

A good example of a water-tap for a shower.

The example to the left  is a typical one – most probably following an assumption like “this tap is working for the washbowl, so it will do for a shower as well”. As it is mounted waist-high, it is easy to reach, also by mistake, which can be quite dangerous as it can easily be turned towards hot water by a slight touch. The re-engineered example on the right shows a functional and easy-to-use solution, in addition, the water temperature can be set up very precisely, but most important, there is no way to change the water temperature by accident as it is selected with a knob. Additionally, due to the knob, its almost impossible to reach the handle, which is used to set up the water amount, by accident.

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" />

how to install memchached 1.2.2 from source

I have installed an instance of memchached version 1.2.2 on one of our servers (Debian etch) today and to keep you from spending a whole afternoon, see my everything-step-by-step instruction below.

Memchached is a distributed hash map, which can be used for example to speed up any kind of web application, see website for details. In our case, we want to use it as temporary data store. I will report about the experiences in a latter post.

introduction

Always refer to this page for details, but I created a version with less text but including steps to really start from scratch.

All lines starting with # are command lines, i.e. you need to type into a linux shell.
Output of any kind is always surrounded by ” even if it is multiline output.

content

a. get libevent (needed to install memcached)
b. get memcached and verify installation
c. use and test memcached within Java with junit/ant

a. installing libevent 1.3

a.1. check for current version of libevent

a.1a.

Log in as root or get super user rights by calling su

# updatedb
# locate libevent

If there is output including “libevent1″ and/or “libevent-1″ (ignore package files like *.deb) -> a.1b, otherwise a.2

a.1b. removing old libevent version

# apt-get remove –purge libevent1
# Y

# updatedb
# locate libevent
Should now return nothing or package files only, i.e. you are ready for installation

a.2. installing libevent 1.3

a.2a downloading and unpacking

# cd /usr/local/src
# wget http://monkey.org/~provos/libevent-1.3b.tar.gz
# tar zxvf libevent-1.3b.tar.gz
# cd libevent-1.3b

a.2b. configuring

# ./configure
check the output, if it contains something like “configure: error: no acceptable C compiler found in $PATH” -> a.2c. otherwise a.2d.

a.2c. compiling

# apt-get install gcc

Redo a.2b.
I got output like “C compiler cannot create executables”, reading file ‘config.log’ did not help me at all. Googling finally did, as I found a forum entry, pointing out a missing lib.
So try this:

# apt-get install libc-dev

Redo a.2b.
If that did  not solve it… sorry … google on, there is no sense in going on without solving this issue. :-/

a.2d. make it!

# make && make install

If you get something like “-bash: make: command not found” -> A.2e, otherwise A.3.

a.2e.

# apt-get install make

Redo a.2d.

a.3. configuration

Press the Esc key as you read [esc] in the commands below.

# vim /etc/ld.so.conf.d/libevent-i386.conf
# i/usr/local/lib/[esc]:wq
# ldconfig

b. install memchached and verify installation

b.1. download, unpack and install memchached

# cd /usr/local/src
# wget http://danga.com/memcached/dist/memcached-1.2.2.tar.gz
# tar zxvf memcached-1.2.2.tar.gz
# cd memcached-1.2.2
# ./configure
# make && make install

After installing gcc and libc-dev in section a, this one went easily for me – if you skipped section a and run in problems here, please install gcc and libc-dev (see a.2c).

b.2. verify installation of memchached

b.2a. start memchached server

# memcached -u www-data -vv

Output should end with line “<3 server listening”. Perfect!

b.2b test server

I will refer to this shell in front of you as server shell below. Now, open another shell on the same machine, I will refer to it a client shell.

# telnet localhost 11211

You should see something like “<7 new client connection” on the server shell, switch back to client shell.

# set test1 1 10000 1
# a

You should see “STORED” on client shell and the two following lines on server shell
“<7 set test1 1 10000 1
>7 STORED”

Perfect!
You did it, your memcached is up and running

c. memcached and Java

I wrote a little test package using a Java client library for memcached from here, together with junit and ant. You can download it to have a look how simple using memcache is and to verify your installation with an included  junit test, automated with an ant build file.

break even…

It is done so far. Portfolio, résumé and this blog has been filled up with a lot of stuff I did within the last years concerning my fields of interest. After all, it was quite an interesting journey, also because I almost forgot some nice projects of mine.

I hope I could arouse interest in the things I like to do or even provide inspirations. If you have any thoughts or ideas to share, please drop me a line! I am looking forward to hearing from you!

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) »

androids are taking over!

Seeing those new touch screen enabled smartphones with the new android platform. This seems to be a complete operation system based on a Linux kernel, with real multi-tasking capabilities, an openGL library, a SDK allowing to code in Java, as you can see in the video below. This all makes me quite nervous! Google announced all public releases of android for summer this year, so I am really looking forward to the things to come, but I will not wait that long to try the SDK with doc provide already

You will find a lot of demonstration videos out there, but I really liked one small thing done in android so far, having a context menu by performing a long click is something truely useful and nice in my eyes.

day zero

Today, I will start blogging about things I find interesting and create an up-to-date portfolio of my work and projects.

I will fill up the space below… going back millions and millions of years, towards the root of my existence. I am quite excited!

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.

education portal for the city of Augsburg

A new portal has been launched for the city of Augsburg. It is meant to be a central platform about all kind of information and events concerning education in and around Augsburg (Germany). Different layouts have been created in the course of a seminar, the one to be realized, has been chosen by a person in charge of the municipality. Two students of the “winning” team and myself, we formed a team, got a work contract by the municipality and implemented the website on the basis of the Typo3 CMS within one year, besides our studies.

» go to see the website »

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 »