See you at the CeBIT 2014

As last year, I will be an exhibitor at this year’s CeBIT taking place March 10-14 in Hannover. We will present the awesome AR-Handbook at Hall 9, Booth D44.

Our topic is Fast MRO (Fast Maintenance, Repair and Overhaul) – a comprehensive Augmented Reality Maintenance Information System that shows and explains technical details for simplified maintenance work right where it is needed. Using a John Deere tractor as an example, Fast MRO offers support for the exchange of defective consumables or the maintenance of lubrication parts. The system offers information about the position of machine elements, maintenance intervals or the use of certain components and guides the repairman step by step through the individual work instructions.

Remote Execution vs. Simplification for Mobile Real-time Computer Vision

As part of my work at the DFKI Kaiserslautern, I published a paper at VISAPP 2014 dealing with Remote Execution for mobile Augmented Reality:

Remote Execution vs. Simplification for Mobile Real-time Computer Vision. Philipp Hasper, Nils Petersen, Didier Stricker. In Proceedings of the 9th International Conference on Computer Vision Theory and Applications (VISAPP) 2014. doi:10.5220/0004683801560161.

Mobile implementations of computationally complex algorithms are often prohibitive due to performance constraints. There are two possible solutions for this: (1) adopting a faster but less powerful approach which results in a loss of accuracy or robustness. (2) using remote data processing which suffers from limited bandwidth and communication latencies and is difficult to implement in real-time interactive applications. Using the example of a mobile Augmented Reality application, we investigate those two approaches and compare them in terms of performance. We examine different workload balances ranging from extensive remote execution to pure onboard processing.

@inproceedings{Hasper2014,
author = {Hasper, Philipp and Petersen, Nils and Stricker, Didier},
booktitle = {Proceedings of the 9th International Conference on Computer Vision Theory and Applications},
doi = {10.5220/0004683801560161},
isbn = {978-989-758-003-1},
pages = {156--161},
publisher = {SCITEPRESS - Science and and Technology Publications},
title = {{Remote Execution vs. Simplification for Mobile Real-time Computer Vision}},
year = {2014}
}

Indoor pedestrian navigation based on recursive filtering (Seminar Paper)

I decided to share my seminar with you which I did back in the summer semester 2013. It is a survey paper about indoor pedestrian navigation. The paper is a good starting point to introduce you to the topic and provides you with interesting literature.

While localization is most commonly associated with GPS, many use cases remain where satellite-based navigation is too inaccurate or fails completely. In this seminar, we will present techniques usable for indoor localization of pedestrians. We will introduce several approaches using Inertial Measurement Units attached to the subject. Due to the strong drifting behavior of those units, several steps are necessary to provide feasible accuracy: the use of filter techniques and the use of Zero Velocity Updates. We will explain the required state-space
model and its application in recursive Bayesian filters like the Extended Kalman Filter or the Particle Filter. The use of aiding techniques is discussed and a map-aided, WiFi-initialized Particle Filter is presented.

Kalman Filter

Figure from the seminar paper showing the steps of the Extended Kalman Filter (EKF).

@MISC{Hasper2013,
author = {Hasper, Philipp and Bleser, Gabriele},
title = {Indoor pedestrian navigation based on recursive filtering},
howpublished = {Seminar Paper},
year = {2013},
keywords = {Sensor fusion, Recursive Filtering, Kalman Filter, Particle Filter,
ZUPT, EKF, MCL}
}

Repair a destroyed Windows 7 UEFI boot sector

I recently destroyed my Windows 7 UEFI boot sector by overwriting the corresponding EFI partition. This resulted in an error “Reboot and select proper boot device or insert boot media in selected”. This is how I fixed it (please be careful when dealing with partitioning and boot sectors, backup your data beforehand):

  1. Delete what is remaining of the Windows boot partition (not the Windows partition but the partition of around 128 MB size) and the EFI partition – you can use GParted for this. In the end, you should have at least 229 MB of free space on your hard drive – preferably at the beginning.
  2. Reboot from your Windows 7 DVD. Make sure you boot the UEFI part of the disk: When you open your boot menu by pressing F8, you will see two entries for your Windows 7 disk. One with “UEFI:” in front and one without. Select the former and then don’t forget to press any key if you are asked to – otherwise, the non-UEFI part would be booted.
  3. When Windows starts from the DVD, select the desired language and then press Shift+F10 to open the terminal.
  4. Now we will create the two missing partitions: the EFI boot sector and the Windows Boot sector. Type into the terminal (but leave the #… parts out – they are only comments by me):
    diskpart
    list disk
    select disk 0 #Select the desired disk
    create partition efi size=100
    list partition #Make sure that the 100mb partition is selected
    format quick fs=fat32 label="System"
    assign letter=B
    create partition msr size=128
    list partition #Check for errors
    list vol
    select vol 3 #Use the number corresponding to your windows installation
    assign letter=C
    exit
  5. Now copy the EFI files by typing:
    mkdir B:\EFI\Microsoft\Boot
    xcopy /s C:\Windows\Boot\EFI\*.* B:\EFI\Microsoft\Boot
  6. Now we will set the boot configuration data by typing:
    b:
    cd EFI\Microsoft\Boot
    bcdedit /createstore BCD
    bcdedit /store BCD  /create {bootmgr} /d “Windows Boot Manager”
    bcdedit /store BCD /create /d “Windows 7” /application osloader
    #This will return a GUID, referred to later as {guid}
    bcdedit /store BCD /set {bootmgr} default {guid}
    bcdedit /store BCD /set {bootmgr} path \EFI\Microsoft\Boot\bootmgfw.efi
    bcdedit /store BCD /set {bootmgr} displayorder {default}
    #Now it's not {bootmgr} anymore but {default}!
    bcdedit /store BCD /set {default} device partition=c:
    bcdedit /store BCD /set {default} osdevice partition=c:
    bcdedit /store BCD /set {default} path \Windows\System32\winload.efi
    bcdedit /store BCD /set {default} systemroot \Windows
    exit
  7. Restart. Additionally, I had two partitions with the boot flag which also caused trouble. I changed this with GParted.
  8. [Update] Configure the boot priority the UEFI menu so that the boot partition is the topmost.
  9. [Update] If you still have the problem that Windows is not booting automatically (i.e. the message “Reboot and select proper boot device or insert boot media in selected” is still displayed) but everything works fine when you open the boot menu and select the Windows bootloader yourself, this is the solution which worked for me:
    1. Power off the computer
    2. Unplug your hard drive
    3. Restart the computer, watch the booting fail and then power off again
    4. Replug your hard drive, restart and watch the booting succeed!


After Effects: Split-flap text animation

Here is a code snippet which allows you to animate text changes similar to a split-flap display using AfterEffects. The animation does not look exactly like those displays because I wanted a slightly different behavior for texts of different lengths. This is how the effect will look like (click on the following image to start the animation):
splitFlapDisplay

So how to do this in AfterEffects?

  1. Create a new text layer and add a slider control to the layer by searching for it in the Effects&Presets field.
  2. Now we have to enter an expression for the source text: open the layer properties and then the text property. Alt-click on the stop watch next to “Source Text”. Now, it should look like this:Split-Flap Display Tutorial 02
  3. Then enter the following code into the expression field (the field on the right which currently says “text.sourceText”):
    var oldText = "the old text";
    var newText = "new content";
    
    var result = "";
    var percentage = Math.min(Math.max(0,<code>effect("Slider Control")("Slider"</code>),100);
    //Iterate through charcodes
    var maxLength = Math.max(oldText.length, newText.length);
    for(var i=0; i<maxLength; i++) {
    	if(i> oldText.length-1) {
    		//The old text is shorter
    		var toomuch= maxLength-oldText.length;
    		var additional = percentage/100*toomuch;
    		if(i < oldText.length+ additional) {
    			result += String.fromCharCode(newText.charCodeAt(i));
    		}
    	} else if( i > newText.length-1) {
    		//The new text is shorter
    		var toomuch= maxLength-newText.length;
    		var additional = (100-percentage)/100*toomuch;
    		if(i < newText.length+ additional) {
    			result += String.fromCharCode(oldText.charCodeAt(i));
    		}
    	} else {
    		result += String.fromCharCode(oldText.charCodeAt(i) + percentage/100*(newText.charCodeAt(i)-oldText.charCodeAt(i)));
    	}
    }
    result
    
  4. Note: if you have started AfterEffects in a different language than English you will get an exception. This is because effect("Slider Control")("Slider") in line 5 cannot be found. Find the slider control in the text layer, write down the right names and enter them into line 5 (i.e. in German: effect("Einstellungen für Schieberegler")("Schieberegler") ).
  5. Change the variables oldText and newText to your desired values.
  6. Now you can animate the slider with values between 0 (old text) and 100 (new text).

You can also download an example project:

Protect your email address from crawlers

I have come up with my own way to protect private data like email addresses, postal addresses or telephone numbers you want to or have to publish on your website. I was wondering if anybody else does it this way and what could be possible pitfalls. So please comment this post or write me if you have any remarks.

A simple solution would be hiding it via JavaScript (technically this would rather be “revealing via JS”) – but this does not work for me since I don’t want to exclude users with disabled JavaScript, for example blind people using screen reader. Plus, German law requires you to provide contact information barrier-free. The same holds for displaying the address as image.

My approach works with simple HTML+CSS only:

  1. One long-known technique for “encryption” of email addresses which I included into my approach is the substitution of some characters in your HTML code by their hexadecimal counterpart, i.e. mail@example.com → ma&#105;&#108;&#64;exa&#109;&#112;&#108;&#101;.com. This will break poorly-programmed crawlers but it is a pretty old trick so I assume it is not that effective anymore.
  2. Another simple method are HTML comments which won’t affect your readers but (hopefully) some crawlers: mail@example.com → ma<!-- just one comment -->il@example.com.
  3. And here comes the new part: include invisible boxes containing useless text in your code: mail@example.com → mail@ex<span style="visibility:hidden;float:right;">useless</span>ample.com.
  4. Please don’t forget to exclude sites with such disguised information from legitimate web crawlers via your robots.txt file – otherwise your site would look broken.

Altogether this disguises your email address as

ma&#105;&#108;&#64;<span style="visibility:hidden; float:right;"> useless </span>examp&#108;<!-- just one comment -->&#101;.com.

As you may notice this approach is not very pleasant for screen reader users either but I think if you include a personal message via

<div style="visibility:hidden; float:right; height:0px;">
Dear screen reader user. I have included some invisible boxes
in the following contact information to puzzle spam crawlers.
I apologize for your extra work but I am sure you will
be able to decode the text.
</div>

it will work for them. Displaying your address as image or disguising via JavaScript would not.

.htaccess: redirect URLs containing php queries

I recently had to solve the problem of redirecting URLs with php queries, i.e. http://www.phillab.net/?page=programme&subpage=Passdraw → http://www.hasper.info/passdraw/ by using the .htaccess file.

Since most of the URLs did not have such a 1:1 translation like the example above, I did not work with wildcards – but this is also possible! I had the following constraints

  1. The php queries have to be removed from the redirected URL (this is not the standard!)
    RewriteEngine On
    RewriteCond %{QUERY_STRING} subpage=passdraw
    RewriteRule (.*) http://www.hasper.info/passdraw/? [R=301,L] #The question mark in the end does the trick!
    
  2. The php query check should be case-insensitive
    RewriteEngine On
    RewriteCond %{QUERY_STRING} subpage=passdraw [nocase]
    RewriteRule (.*) http://www.hasper.info/passdraw/? [R=301,L]
    
  3. Some queries have to point to the same new URL
    RewriteEngine On
    RewriteCond %{QUERY_STRING} subpage=passdraw [nocase,or]
    RewriteCond %{QUERY_STRING} subpage=bestAppEver [nocase]
    RewriteRule (.*) http://www.hasper.info/passdraw/? [R=301,L]
    
  4. Some queries contain special characters like dots or plus signs.
    RewriteEngine On
    RewriteCond %{QUERY_STRING} subpage=Ghostball\x2B3[nocase] #A plus sign has to be replaced by \x2B
    RewriteRule (.*) http://www.hasper.info/ghostball-3/? [R=301]
    RewriteCond %{QUERY_STRING} subpage=N\.T\. [nocase] #A dot has to be escaped by a slash
    RewriteRule (.*) http://www.hasper.info/n-t-a-commercial/? [R=301,L] #The L marks this as last rule
    

How to install and run an APK on Google Glass

Since Google Glass is currently only available for “Explorers”, the usability is quite limited and the device requires some hacking. Since the Glass-specific OS is updated regularly this will change soon but up until then, the following trick will come in handy:

Install and run an APK on Google Glass:

Well, currently the standard Glass launcher is quite limited and only allows for starting some pre-installed applications. You could either install a custom launcher like Launchy or do it without any modifications at all: In a nutshell, we will install the APK, find out the name of the app’s launching activity and then launch it. So no modifications and no prior knowledge of the application’s code is needed.

  1. Connect the Google Glass to your computer (you should have the Android SDK installed) and enable the debug mode on your device.
  2. Open a terminal and install the APK via adb install <apk path>.
  3. Find the android tool aapt (located in <sdk>\build-tools\<version>).
  4. Retrieve the package name and the activity to launch: aapt dump badging <apk path> | grep launchable-activity.
  5. Now you have all necessary information to launch the activity whenever you want: adb shell am start -a android.intent.action.MAIN -n <package name>/<activity name>.
  6. As an example with the password app Passdraw (currently not ported to Glass 🙂 ): adb shell am start -a android.intent.action.MAIN -n com.passdraw.free/com.passdraw.free.activities.LandingActivity

What I learned during the redesign

I have decided to update my website and turned it into a blog. All “portfolio” content is now presented as articles and is alternating with some tricks and tips mostly related to IT. This post is both the announcement of the new design and a collection of snippets I found while customizing WordPress and the theme.

  1. The sticky header is achieved by setting
    .imageBadge {
    	background-attachment:fixed;
    	min-height: 100px;
    }
    .textBadge {
    	position:fixed;
    }
    .mainContent {
    	z-index: 2;
    	position: relative;
    	background-color: #FFF;
    }
    
  2. The parallax effect for the header is done like this:
    /**
     * Creates a parallax effect for the header when scrolling
     */
    (
    function () {
    	var a = document.getElementById("masthead"),
    		e = $(window);
    	e.unbind("scroll").scroll(function () {
    		a.style.backgroundPosition =  "center "+ -(e.scrollTop()/ 9) + "px";
    	});
    }
    )();
    
  3. The sticky footer or “the curtain reveal effect” is done with
    .footerContainer {
      height:50px;
    }
    .footer {
      position:fixed;
      bottom:0px;
      padding: 10px 0px;
      z-index:0;
      width:100%;
    }
    

    A minimal demonstrator for points one to three can be found here: http://jsfiddle.net/PQS2C/3/

  4. Since there are so many syntax highlighters out there: I prefer the SyntaxHighlighter for WordPress. It does not screw up the indents, it has line numbering and visitors can easily copy the code.
  5. Protecting your WordPress login page (or other sensitive documents) by using .htaccess is a good idea because it reduces the load when your site is attacked and you have an additional protection against security vulnerabilities. But if you want a specific IP address to be excluded from the password query so you don’t have to enter the password every time, add the following to your .htaccess in the WordPress root folder:
    <Files wp-login.php>
      AuthUserFile <path to your .htpasswd>
      AuthName "Admin console"
      AuthType Basic
      require valid-user
      Order allow,deny
      allow from 12.34.567.89
      satisfy any
    </Files>
    # Guard some other sensitive files
    <FilesMatch "(\.htaccess|\.htpasswd|wp-config\.php|readme\.html)">
      order deny,allow
      deny from all
    </FilesMatch>