Archiv der Kategorie: coding

Über den Wolken

Ausnahmsweise mal kein Japan-Beitrag – indirekt natürlich dann wieder doch. Zum einen, weil ich natürlich den Beitrag gerade in Tokyo schreibe, zum anderen weil dieses Projekt meine Freizeitbeschäftigung außerhalb vom touristischen Programm ist:

PrioTables

Wenn alle Aufgaben gerade mal wieder gleich wichtig erscheinen und es schwer fällt, eine Reihenfolge festzulegen, dann hilft der Direktvergleich aller anstehenden Punkte.

Um z.B. herauszufinden, welche Erweiterungen in einer Software wie priorisiert werden, kann dieses Verfahren helfen.

Oder aber wenn man herausfinden möchte, welcher Comic-Held ganz oben steht.

In der folgenden Tabelle können durch mehrfaches Klicken auf die * pro Heldenpaar bestimmt werden, welcher Held der bessere ist. Dazu muss der Pfeil auf den Favoriten zeigen.

Comics

B D G H I S Sum
B Batman 0
D Dare-Devil 0
G Ghost-Rider 0
H Hulk 0
I Iron-Man 0
S Superman 0

Dank geht hier an den Kollegen Thomas K., der mir das System vor einiger Zeit vorstellte.

Was hat das jetzt mit dem Titel des Beitrags zu tun?

Die Möglichkeit, diese Tabellen zu erstellen, habe ich mit diversen Cloud-Diensten umgesetzt.

Die NodeJS-Applikation wird bei AppFog unter der Adresse http://prius.aws.af.cm gehostet.
jQuery und Bootstrap werden per CDN im HTML eingebunden.
Als Datenbank kommt MongoDB, gehostet bei MongoHQ zum Einsatz.
Der E-Mail-Versand (Registrierung) läuft über MailGun.

Viel Spaß beim Testen!

WordPress MeetUp im Coworkingspace

Vor ein paar Wochen bin ich auf der Suche nach Stammtischen / offenen Treffen / Vorträgen etc. auf meetup.com gestoßen. MeetUp bietet eine Plattform für Treffen mit Gleichgesinnten, sei es für gemeinsame Museumsbesuche, Verabredungen zum Sport in der Gruppe oder eben zu Spezialthemen wie WordPress (WordPress ist die Software, die dieses Bog antreibt).

Das Treffen hier in Tokyo wird von der einzigen japanischen Mitarbeiterin von Automattic, der Firma hinter WordPress, mit organisiert. Veranstaltungsort war ein Coworkingspace in Laufweite meiner Wohnung.

MeetUps sind eine wirklich schöne, einfache Art, Menschen zu treffen und ins Gespräch zu kommen. Speziell für das WordPress MeetUp habe ich im März noch ein Möglichkeit teilzunehmen. Aber bei den vielen Gruppen, die im Raum Tokyo sind (Deutsch-japanischer Stammtisch, Language Exchange, HTML5 Rocks, etc. – nur eine Java-bezogene Gruppe vermisse ich noch) finden sich sicher noch andere Gelegenheiten.

Creating Stereo Images in SketchUp

I do use the free Version of Trimble SketchUp (formerly known as Google SketchUp) quite a lot. The free version is missing a simple way to create stereoscopic images and I didn’t find a (free) Ruby script to do the job.

Time to revive some Ruby and computer graphic lectures.

SketchUp lets you manipulate the Camera object via its API.
The camera is defined by its eye, target and up-vector. The goal to achieve a stereoscopic image is to create a new camera, which is „parallel“ to the existing one.
This „parallel“ is a little bit more complicated in 3D space.

Figure 1 shows a generic camera which is not aligned within the global 3d space (colored axes).

Figure 2 shows the coordinate system of that camera itself. The stereoscopic cameras eye must be aligned on the red x axis.

Figure 3 shows how the second camera corresponds to the first, existing one.

Therefor the transformation which has to be applied is a translation in an angle of 90 degree to the up vector. SketchUps Points provide an offset method to do exactly that.

# get a reference to the active camera
view = Sketchup.active_model.active_view
cam = view.camera

# get copies of the cameras up vector and eye point
up = cam.up.clone
eye = cam.eye.clone

# create transformation for rotating the up vector by 90 degree an apply that
rotVec = Geom::Vector3d.new 0,1,0
rotAngle = -1 * Math::PI/2
transformation = Geom::Transformation.rotation eye, rotVec, rotAngle
vec = up.transform transformation

# calculate second cameras points with the calculated vector and the offset method
newEye = cam.eye.offset vec, distance
newTarget = cam.target.offset vec, distance
# up vector remains unchanged
newUp = cam.up

# apply new eye, target and up vector to the camera
cam.set newEye, newTarget, newUp

SketchUp also provides an API call to export images and so the complete script does that as well.

# define a value for eye distance in the document active unit
# 65 mm is a good average
# see http://en.wikipedia.org/wiki/Pupillary_distance
$eyeDistance = 65

# define the size of the 3D image
$imgWidth = 1024
$imgHeight = 768

# offset for stereo view (0 or 1)
$winOffset = 0

def moveCam(distance)
  view = Sketchup.active_model.active_view
  cam = view.camera

  up = cam.up.clone
  eye = cam.eye.clone
  rotVec = Geom::Vector3d.new 0,1,0
  rotAngle = -1 * Math::PI/2
  transformation = Geom::Transformation.rotation eye, rotVec, rotAngle
  vec = up.transform transformation
  newEye = cam.eye.offset vec, distance
  newTarget = cam.target.offset vec, distance
  newUp = cam.up
  newCam = cam.set newEye, newTarget, newUp
end

def exportPng(path, width, height)
  keys = {
    :filename => path,
    :width => width,
    :height => height,
    :antialias => true,
    :transparent => false
  }
  view = Sketchup.active_model.active_view
  view.write_image keys
end

def showInterlacedView(w, h, leftImg, rightImg)
  template = '<!DOCTYPE html><html><head><meta charset="utf-8"><title>SU-Stereo</title><meta name="copyright" content="Stefan Motz, 2013"><style type="text/css" media="screen">body {padding:0;margin:0} #display{position:relative;width:%spx;height:%spx;overflow:hidden;}#display .leftImg {position:absolute;-webkit-mask:url(\'http://stefan-motz.de/su-stereo/assets/mask-horizontal-bw.png\');top:0px;left:0px;height:100%%;}#display .rightImg {position : absolute;top:0px;left:0px;height:100%%;}</style></head><body><div id="display"><img class="rightImg" src="file://%s"><img class="leftImg" src="file://%s"></div></body></html>'
  html = sprintf(template, w, h, leftImg, rightImg)

  dlg = UI::WebDialog.new('SU-Stereo', false,'SUStereoView', w, h, 150, 150 + $winOffset, true)
  dlg.navigation_buttons_enabled = false
  dlg.set_html(html)
  dlg.show
end

### main program

view = Sketchup.active_model.active_view

# ask user for filename and setup incl. pathes
saveName = UI.savepanel 'Save 3D files', '', "Stereo"
if (saveName == nil)
  exit(0)
end
fileNames = {
  :left => saveName + "_L.png",
  :right => saveName + "_R.png"
}

# move camera to left eye position
moveCam($eyeDistance/2 * -1)
# save left picture
exportPng(fileNames[:left], $imgWidth, $imgHeight)

# move camera to right eye position
moveCam($eyeDistance)
# save left picture
exportPng(fileNames[:right], $imgWidth, $imgHeight)

# reset view
moveCam($eyeDistance/2 * -1)

showInterlacedView($imgWidth, $imgHeight, fileNames[:left], fileNames[:right])

And here is what it looks like:

As a little extra the script displays the stereo image thru a webview in an horizontally interlaced way. This probably works on Mac only and is only useful, if you have a passive 3D monitor connected.

The exported stereo images can be post-processed by various tools, on request I might write a follow up on how to integrate a workflow with ImageMagick.

During development the SketchUp Ruby Code Editor by Alex Schreyer was quite helpful – thanks for that!

DropBox Gallery Demo

It’s been a while since I first mentioned my Dropbox Gallery Plugin.

Up to today I did not release it for two major reasons:

  1. You have to get your own dropbox developer key to use the plugin . That’s a barrier for most users.
  2. I did not manage to (and didn’t really try to) optimize memory consumption when the images are cached. Right now you have to reload the page several times, until all images are cached. That’s a real show stopper.

After all I do know, that some people might like to use the plugin nevertheless and perhaps they might even optimize it.

Please drop me a line if you use the Dropbox gallery , enhanced it or even pushed it to github or google code.

dropbox-gallery.tar.gz

If you ant to use the plugin, make sure to configure it and to get a Dropbox API-Key.
It’s recommended to use WP-prettyPhoto along with the dropbox gallery.

[dbgallery path=/Photos/Blog/DBG-Screenshots]

jQuery.printQr: use QR-Codes for your Print-Stylesheet with Google Charts API and jQuery

It’s a common practice to make the URIs of links visible in a print styleheets via CSS:

@media print {
a:after {
content: " (" attr(href) ")";
}
}

Quite often you would not like to type a cryptic url by hand. Here is what you may utilize jQuery.printQr for.

Here is all you have to do:

<script src="jquery.printqr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('a').printQr();
});
</script>

These lines of code will add QR Codes for all links to the bottom of the page when you print it.
I built a little demo page.

Have fun with it, I’m interested in some feedback.

Image Galleries from DropBox

My previous post gave a little sneak peek to my very first wordpress plugin „Dropbox Gallery“.
Although it is not ready for press right now, I’ll tell you about its features and advantages.

No (manual) upload needed
All you do is drag a file to your Dropbox folder. You should upload an image with a reasonable filesize, so don’t use your 20 megapixel raw image. Thumbnailing is done by dropbox.

Caching, not copying
The images from your Dropbox are cached for faster access. The cache has a configurable lifetime.

Update galleries or individual pictures
On the other hand every new revision of an image is detected and updated. You altered your image in Photoshop? No need to update your image in WordPress.

Choose any folder from your Dropbox account
You may choose any folder to create an image gallery out of its contents. All images of the folder you chose are displayed in your article.

And here is what you get
[dbgallery path=/Photos/Blog/Gallery-Demo]

Mehr Suchmaschinen für Glims

Glims ist eine sehr praktische Erweiterung für Safari, die unter anderem mehr Suchmaschinen zum Suchfeld hinzufügt. Darüber hinaus können Suchanfragen aus der Adresszeile heraus gestartet werden. Pro Suchmaschine wird ein Kürzel definiert, z.B. „g“ für Google, so dass die Eingabe „g tag der deutschen einheit“ in die Adresszeile die entsprechenden Suchergebnisse bei Google auswirft.

Leider sind (noch) keine deutschen Nachschlagewerke vorgegeben. Über die Einstellungen von Glims können eigene Suchmaschinen hinzugefügt werden. Nachfolgend die Such-Urls für eine kleine Auswahl von Seiten:

Google-DE
http://www.google.de/search?hl=de&q=#query#
g
Amazon.de
http://www.amazon.de/s/ref=nb_ss?url=search-alias%3Daps&field-keywords=#query#
a
Wikikpedia-DE
http://de.wikipedia.org/w/index.php?search=#query#&go=Go
w
dict.leo.org
http://dict.leo.org/ende?lp=ende&lang=de&search=#query#
d
Ebay-DE
http://search.ebay.de/#query#
e
Flickr-CC
http://www.flickr.com/search/?q=#query#&l=commderiv&ct=0&mt=all&adv=1
fcc
  • Google-DE
    http://www.google.de/search?hl=de&q=#query#
  • Amazon.de
    http://www.amazon.de/s/ref=nb_ss?url=search-alias%3Daps&field-keywords=#query#
  • Wikikpedia-DE
    http://de.wikipedia.org/w/index.php?search=#query#&go=Go
  • dict.leo.org – Übersetzung deutsch/englisch – englisch/deutsch
    http://dict.leo.org/ende?lp=ende&lang=de&search=#query#
  • Ebay-DE
    http://search.ebay.de/#query#
  • Flickr-CC – Flickr Bildsuche, beschränkt auf CreativeComons-Bilder mit Freigabe
    http://www.flickr.com/search/?q=#query#&l=commderiv&ct=0&mt=all&adv=1

Diese Suchmaschinen kann man sich als Property-Datei auch gerne hier herunterladen.
Gespeichert wird diese Datei in ~/Library/Application Support/Glims

dojo.back – finally working

It took me quite a while to get dojo.back working in that way, that i prevents that the user is leaving my site accidentaly.

As far as I understood the documentation, dojo.back.setInitialState should have been enough to catch the back button action. But I had to add another historyState to get the intended behaviour. Perhaps this might be useful to someone out there:

dojo.addOnLoad(function() {
	dojo.back.setInitialState({
		back : function() {
			if (confirm('Do you want to leave this site?')) {
				history.back();
			} else {
				history.forward();
			}
		},
		forward : function() { console.log("User clicked forward"); },
		changeUrl : true
	});

	dojo.back.addToHistory({
		back : function() {
			console.log("initCompleted-back was clicked!");
		},
		forward : function() {
			console.log("initCompleted-forward was clicked!");
		},
		changeUrl : 'state1'
	});
});

OpenID, OAuth etc

Für den MediaAssetFinder bieten wir bei Divis auch ein OpenID-Modul zur Benutzeranmeldung an. Oft ist es gar nicht so einfach zu erläutern, um was es bei OpenID geht und wo die Vorteile für den Firmenkunden und den Endbenutzer liegen.

Gerade habe ich einen guten Artikel bei Heise gefunden, der OpenID gut und ausführlich erläutert und das Verfahren auch mit Schaubildern und einem verständlichen Text beschreibt. Viel Spaß beim Lesen!