ErieStuff

Position of the sun on google streetview

2011-04-20T16:26:00.000+02:00

Wouldn't it be nice to be able to know which of you're favorite cafe's downtown has a terras in the sun, right now? This tool makes use of an algorithm to calculate the position of the sun (for any date/time, anywhere on earth), and analyses a google streetview panorama image for that location to find out if the sun obscured behind buildings or other objects.

The image analyses needs some work, but this "nightly build" proves the validity of this concept!
All to do now is to ask google for the locations of nearby cafe's, use this method to figure out if the sun is out for those locations, and plot the result on a map. Where's the time I need for this... misplaced it somewhere...

Snelstepontje.nl

2011-04-20T16:15:00.000+02:00

Finally there was a reason not to postpone building this old app idea of mine.
The Appsforamsterdam competition challenges (governmental) dataowners to make data openly available, and invites civic coders to use that data!

Together with an android developer, we build snelstepontje.nl
This simpel (mobile) website and andoid app askes for origin and destination, via a google map, and plots the fasted routes via the different ferries that connect the north of Amsterdam to the city center.

Pallet Picnic table

2010-05-11T22:23:00.076+02:00

If you have some disposable wooden pallets laying around (or know where to 'get' some), here's how you can turn them into a four person Pallet Picnic Table.
Our design is composed out of 3 pallets, although it could easily be done with 2, requiring bit more cuts and screws.

The final result

The pallets are cut into building-blocks, which are stacked and screwed together. Once assembled, the table consists of two interlocking parts. The top part can be taken off, and stored under/inside the bottom part. This saves storage space, especially when stored on its side, behind a shed, like we do.

Two parts

The Shopping List
For this build, you will need the following:

3 pallets, 2 of which should be the same size, preferably 120x120cm, the third one is only needed for the spacer blocks, so can have any dimension. The top laths should run in the width of the pallet, not the length.
a bunch of plywood screws and matching screwdriver. We used 35mm by 4mm scews, the length of the screw should not be more than twice the thichness of the laths.
a jig saw (electrical)
a crowbar
a claw hammer
earplugs are nice. We had to bang the metal crowbar with the metal hammer to dismantle the third pallet.
a electrical sander

The Pallets
Pallets come in many forms and shapes. I found some really sturdy ones, a bit bigger than usual (120x120cm), with 2 extra cross-laths on the bottom. Our design is based on this type of pallet. Because of their extra width (120cm) the resulting picknick table will accommodate 4 persons. The more readily available standard 'euro' pallets are 120x100cm, and can be used just as well, but will result in a romantic 2 person table (or perhaps 4 kids). Please note that the top laths should run in the width of the pallet, not the length as in most common pallets.

Depending on the pallets you have at hand, you will probably have to tweak the design and improvise while you build. With 3 pallets, you will have plenty of left over wood to switch up the design and make enhancements where needed.

The Design
For this design (assuming you have those extra sturdy pallets, like we had), you only have to cut two pallets in the right places, stack the resulting parts in the right way, and adjust the hight of the whole thing by placing something underneath the corners. We used the spacer-block from a third pallet, but you could use anything that suits (e.g. stacks of leftover wood from the first two pallets).

Here are some images of the design. You can download the 3D model for Google Sketchup, so you can check out the design from every angle and get a full grip on the design. The 3D model also shows how to cut the pallets up into the required building-blocks.

How to cut pallet 1

How to cut pallet 2

Front view

Side view - separated components

3D view - Exploded

The complete 3D design

Stacking the building-blocks

Dismantling a Pallet

In this movie, you can see how easy it is to dismantle a standard pallet. Please note that for this design, you should only dismantle the third pallet. The first two should keep as much of their sturdiness as possible. Also, the pallet in the movie has its top laths running in the length, which makes them unusable for this design (unless you dismantle it completely and rebuild it with the laths running width-wise).

The pallets we used in our design are non-standard ones, with laths running along all sides of the the bottom. That's why our dismantling didn't go as smoothly as in the movie. Not even close! We ruined quite some laths in the process, but we only needed the spacer-blocks anyway.

Please, Give Feedback!
If you copy this design and/or build upon it, or do something else with pallets, I would love to hear about it. Please leave a comment with or without a link to your own project.
You might also want to take a look at these pallet furniture designs, this pallet coffee-table, or the links on this Life Hackery post, for inspiration.

Boomerang - China in Tibet

2008-03-25T09:52:00.011+01:00

The Boomerang freecard by my brother:

~~You can rate this card on the Boomerang website~~

This is the original cover for "TinTin in Tibet":

Google Maps: Convex Hull of Point set or Polygon

2008-03-18T16:30:00.008+01:00

The Problem - Part II
In a previous post, I wrote about how the Google Maps Center of Gravity Application takes care of my friday night drinking problems. Well, it doesn't anymore. My drinking buddies are so evenly spread out over town, that whoever joins for a beer to celebrate the weekend, the Center Of Gravity ends up dead center in the middle of town. We've seen all the bars, drank all the beers. It's time to broaden our look.

The Solution - Part II
What if you could mark the locations of your friends, and have Google Maps find random bars located in between those locations.
Enter the Convex Hull (wikipedia). "The convex hull may be easily visualized by imagining an elastic band stretched open to encompass the given points; when released, it will assume the shape of the required convex hull."

Or, even more easily, play around with the Convex Hull - Random Search application I whipped up. Below is an embedded version of the application. The fullscreen version can be found here.

Credits for the algorithm go entirely to InfoEcho.net. See this post for the original javascript sourcecode and an online working example.

All I did was rewrite the code so it can be used with geographical locations in a google maps application, and create/add a random-search-in-polygon script. The latter is a set of generic functions that can be used with any gmaps polygon.

Please let me know what you think by leaving a comment. You're free to use this script for your own application, but I'd appreciate it if you tell me about it. Plain curiosity :-)
The source code can be found here.

For my other Google Maps trials, see this overview.

Google Maps/Earth: Align Polygons in KML

2008-03-18T13:33:00.001+01:00

The Problem
What if you want to digitize countries, counties or other area like items that have one or more borders in common... GIS applications like Google Earth, Google Maps even, let you draw polygons overlays on a map. But instead of one common border as in the real world, the borders between the polygons are defined by two different polylines that should be described by exactly the same coordinates (or: 'vertices'). When you draw the polygons by hand, this is virtually impossible. As a result, there will be areas where two or more polygons overlap or areas where there's a gap between the two bordering polygons.

The Solution
Draw the polygons by hand and run them through an algorithm that aligns the line parts of two bordering polygons by equalizing the vertices that are really close together. The resolution, or threshold, of the equalizing algorithm should depend, off course, on the resolution and precision with which the polygons where drawn.

I wrote a PHP script that does exactly that. See the embedded version of the application below, or go to the fullscreen version. It is loaded with a demonstration KML file by default. Play around with the Equalize threshold to see what happens to the polygons.

Please let me know what you think by leaving a comment. You're free to use this script for your own application, but I'd appreciate it if you tell me about it. Plain curiosity :-)
The source code can be found here.

For my other Google Maps trials, see this overview.

Google Maps: Distance to Polygon

2008-03-17T13:32:00.001+01:00

This Google Maps mashup takes in multiple KML files with multiple polygons and lets you click away on the map to find the distance from the clicked point to all the polygons in de KML sources.

The serverside distance-to-polygon algorithm is run through an AJAX call.
I might translate the algorithm to javascript in the future, so all can be done clientside. For now, it's a proof of concept, at most.

The source files are available here (zip).

Below is an embedded version.
The fullscreen version is here.

Please let me know what you think by leaving a comment. You're free to use this script for your own application, but I'd appreciate it if you tell me about it. Plain curiosity :-)

For my other Google Maps trials, see this overview.

Google Maps: Point In Polygon

2008-02-12T21:05:00.008+01:00

Last update: 2008-03-17 (see comments)

This Google Maps mashup takes in multiple KML files with multiple polygons and lets you click away on the map to see which polygon(s) contain the clicked point.

The serverside point-in-polygon algorithm is run through an AJAX call.
I might translate the algorithm to javascript in the future, so all can be done clientside. For now, it's a proof of concept, at most.

The source files are available here (zip).

Below is an embedded version.
The fullscreen version is here.

Please let me know what you think by leaving a comment. You're free to use this script for your own application, but I'd appreciate it if you tell me about it. Plain curiosity :-)

For my other Google Maps trials, see this overview.

Google Maps: Center Of Gravity

2008-02-05T17:47:00.009+01:00

Last update: 2008-03-17 (see comments)

The problem
The week's coming to an end, you desperately want to meet your friends for a beer (or two). But with over 250 bars in Amsterdam to choose from, where should you meet? Let's say you want to minimize the distance that everyone has to travel to the bar. So you'd want to find the bar nearest to the Center of Gravity or Center of Mass (wikipedia) of everybodies location...

How about a website that lets you pinpoint the location of all your friends, shows you the geographical center and lets you search for nearby bars?

Solutions already out there
Brammeleman already solved the hardest part of this problem, whilst trying to find the best location for his family reunion. Brammeleman's php script, as discussed in his post on nerdnotes.org (in Dutch), takes in a Google Earth KLM file and calculates the geographical center of the placemarks in the KML. This point is served back as a KML file, which can than be opened in Google Earth.
Stefan Geens, implemented Brammeleman's algorithm (with slight adjustments which Brammeleman later adopted in his script), in a similar application. His post at www.oglearth.com gives all the background info on Center Of Gravity theory, so check that out if you're interested.

The juggling with KML files and the need to have Google Earth installed doesn't make this approach a viable solution to my friday night drinking problems. Every week there is a different bunch of us, and we don't always start out from the same place. I need to be able to add and adjust locations on the fly.

At www.geomidpoint.com they come close to my needs. This application lets you put in a number of cities or coordinates by hand and then calculates either the Center of Gravity or the Center of Distance. The former is the same geographical center of the given coordinates as Brammelemans algorithm calculates. The latter is the point where the total sum of distances is minimized. Check out the methods page on their site for better explanation about the difference between the two. The Center of Distance is found by a brute force algorithm and not by mathematical calculation. The result is displayed on a Google Maps map, along with the given points.

Now this is close. But still not close enough. I want to be able to search within one city instead of in between cities. Although this is technically possible by entering latitudes and longitudes for each point... it's not really user friendly.

My solutions mash-up
Since the ultimate solution wasn't yet out there, I sacrificed a weekend on building it myself.
So, I translated Brammeleman's Center Of Gravity algorithm into Javascript to whip up a client side Google Maps application. This Google Maps mashup lets you add placemarks by clicking on a map and calculates the Center Of Gravity on the fly. The search nearby form field on the left pane queries Google Maps for the bars or pizza places closest to the geographical center of all marked locations and displays the results on the map.

Additionally, you can upload a KML file or provide the url to an online file or a custom created Google Maps map ("My Maps"). The application plots the placemarks from the KML file or the "My Maps" source on the map and calculates the Center Of Gravity. You can deselect the placemarks you don't want to use for the calculation and add additional placemarks if needed.

To use a custom made Google Maps map as the source for the calculation, simply go to the My Maps area on Google Maps, select/create the map you want to use and click the "link to this page" link. The than presented link can be copied into the form field in the Center of Gravity application to load the placemarks on the map.

The source files for this application are available here.

Below is an embedded version of the Center Of Gravity application.
The fullscreen version can be found here.

All credits for the Center of Gravity algorithm go to Brammaleman, with noted additions by Stefan Geens.

Please let me know what you think by leaving a comment. You're free to use this script for your own application, but I'd appreciate it if you tell me about it. Plain curiosity :-)

For my other Google Maps trials, see this overview.

Future improvements
* Better KML support (now only few formats actually work)
* Loading of KML files through AJAX
* Placemark management (edit name/delete)
* Doubleclick zoom-in without adding a marker (annoying!)
* Optional Center of Distance calculator
* Permalink option, to be able to send the resulting map to friends

Cross-Browser PNG alpha-transparency

2007-11-28T16:37:00.002+01:00

Last Updated: 20071130

In an article on Sitepoint, Alex Walker describes how to make semi-transparent PNG8 images in FireWorks. Unlike PNG32, the alpha-transparency of PNG8 is supported by all modern browsers (FF2,IE7,Safari,Op9). Internet Explorer 6 and lower gracefully degradate the alpha-channels to full transparency, like GIF.

Using gray-shaded PNG8 images as backgrounds to HTML elements with background-color, it is possible to easily switch colors without having to redesign your shaded background images.

Alternative to FireWorks

There are two small open source apps that will do the same trick. You can get them for free on the websites listed below, but not here.

PNGquant (command line & GUI)
Website: Commandline or Windows GUI
I tried both versions.
The command line version is compiled with the zlib and libpng library so no additional dll's are required, which is really nice. To view usage syntax run the program with the -h switch.
The Windows GUI requires you to install the .NET framework :-| and needs the command-line app to sit in the /windows32/ dir, so installing is a bit of a hassle. Otherwise it is a convenient wrap around the command line app.

PNGnq (command line)
Website: http://www.cybertherial.com/pngnq/pngnq.html
I tried the Windows32 version which does the trick.
Besides the compiled binary pngnq.exe and the libpng13.dll offered at the website you also need a copy of zlib1.dll.
The dll's need to sit in the same dir as pngnq.exe or should be copied to your /windows32/ directory. Run the app with the -h switch to get help on all available switches.

I haven't noticed a difference in results between the two, so for the moment I'm settling with the command line version of pngQuant, since it only needs itself to run.

IE PNG24 Fix

If you want IE5.5+ support for semi-transparent PNG images, have a look at this page. This trick gets alpha-transparency of PNG images working by feeding IE a special 'behaviour' script through CSS. The syntax is extremely simple:


<!-- IE PNG FIX - hide from other browser than IE<7 -->
<!--[if lt IE 7]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
<![endif]-->

I haven't tried this yet, and I don't know if this adds a lot of rendering time if your page has a lot of img and div tags, but I love the simplicity of it!

General Purpose Style Sheet

2007-11-27T17:52:00.000+01:00

Last updated: 20071205

Here is a general purpose, cross-browser compatible, CSS stylesheet I use when kicking off a new project. I chucked it up in functional units, merged into a single stylesheet at the bottom.
This post may change over time, when new quirks come to light.
Suggestions greatly appreciated!

You might also be interested in the stylesheet of Faruk Ateş.

Resizable Font-size

This trick is ripped from an article on A List Apart


<!-- RESIZABLE TEXT -->

<!-- stylesheet for all browsers -->
<style type="text/css">
body {
    font-size:16px;  /* @resizable text: best cross-browser default value */
    line-height:1.125em; /* @resizable text: 16x1.125em=18px */
}

.exampleClass p {
    font-size:0.875em;  /* @resizable text: 16x0.875em=14px */
}

</style>

<!-- stylesheet with bugfixes for IE -->
<!--[if IE]>
<style type="text/css">
body {
    font-size:100%;  /* @resizable text: fix exaggerated text resizing in IE6 & IE7 */
}
</style>
<![endif]-->

<!-- END RESIZABLE TEXT -->

100% height


<!-- 100%height -->

<!-- stylesheet for all browsers -->
<style type="text/css">
html,
body {
    height:100%; /* @100%height: body & html don't have 100% height by default */
}
body{
    margin:0;  /* @100%height: for Opera /*
    padding:0;  /* @100%height: for all but opera /*
}
</style>

<!-- END 100%HEIGHT -->

IE PNG FIX

See this post for info on this chunk.


<!-- IEPNGFIX -->

<!-- hide from other browser than IE<7 -->
<!--[if lt IE 7]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) } /* @IEPNGFIX */
</style>
<![endif]-->

<!-- END IEPNGFIX -->

IFRAMEBORDERS

In IE(6) the border of iframes can only be hidden by setting the border property in the css of the iframe content document.


<!-- IFRAMEBORDERS -->

<!-- stylesheet with bugfixes for IE -->
<!--[if IE]>
<style type="text/css">
body {
    border:none;  /* @iframeborders */
}
</style>
<![endif]-->

<!-- END IFRAMEBORDERS -->

All merged to one


<!-- stylesheet for all browsers -->
<style type="text/css">
html,
body {
    height:100%;  /* @100%height: body & html don't have 100% height by default */
}

body {
    font-size:16px;  /* @resizable text: best cross-browser default value */
    line-height:1.125em; /* @resizable text: 16x1.125em=18px */
    margin:0;   /* @100%height: for Opera /*
    padding:0;   /* @100%height: for all but opera /*
}

.exampleClass p {
    font-size:0.875em;  /* @resizable text: 16x0.875em=14px */
}

</style>

<!-- stylesheet with bugfixes for IE (all versions) -->
<!--[if IE]>
<style type="text/css">
body {
    font-size:100%;  /* @resizable text: fix exaggerated text resizing in IE6 & IE7 */
    border:none;  /* @iframeborders */
}
</style>
<![endif]-->

<!-- stylesheet with bugfixes for IE versions lower than 7 -->
<!--[if lt IE 7]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) } /* @IEPNGFIX */
</style>
<![endif]-->

Dropdown Navigation Bar For Blogspot

2007-11-26T17:07:00.003+01:00

Last update: 2008-02-13

There are many tricks to remove the Blogspot Navigation Bar (or "NavBar") that is displayed on top of all Blogger blogs. The simplest would be to add the following CSS declaration to the bottom of the "skin" section of your template (i.e. in between the <b:skin> and </b:skin> tags):

#navbar{
    display:none !important;
}

Besides the question if this approach violates the Blogspot "Terms of Use", this will leave people who are flipping through blogs via the "next blog" link lost. Additionally, as blog editor, you loose your shortcut links to sign in and post new messages.

Why not hide it, but still keep it accessible, more or less like a dropdown menu. To achieve this, add the following code to your template, or add it to your blog layout as a html/javascript page-element:

<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->

Now, the navbar is shifted up, with its content outside the viewport frame and thus out of sight for the user. The navbar is doubled in height, with an empty, transparent part still invisibly dangling at the top of the viewport. When the mouse cursor hovers over the empty part of navbar, the navbar is repositioned into its normal position and the doubled height is removed. When the mouse cursor leaves the navbar, the styling is reaplied and the navbar hides itself again.

You can see this effect in action on this page, just scroll to the top of the page and move your mouse to the top of the viewport.

The mouseover effect is achieved by applying a :hover pseudo-class to the navbar element. This works in Firefox 2.0, Safari 3.0 Win, Opera 9.5b, iCab 3.0, Konqueror 3.5.7 and Internet Explorer 7, although the latter only when rendered in strict mode. For older IE browsers (or possibly IE 7 in quirks-mode), a javascript fallback is activated through a conditional comment that is only visible to Internet Explorer 6 and lower. When javascript is disabled the navbar will not be hidden.

Note: Most blog templates have a strict doctype declaration (second line in the template), which is fine. If you are rendering your page in quirks mode (i.e. dtds Transitional or Loose), you need to change the conditional comment to [if lte IE 7].

I chose to position the navbar over my design (position:relative), if you don't want it to overlap with your design, change the position to static.

Update: It is not against Googles Terms Of Service (TOS) to hide the NavBar. The Real Blogger Status blog posted a link to an answer to this question from a google employee.

CSS cascade - Which declaration takes priority?

2007-11-15T15:12:00.000+01:00

Andrew Tetlaw, Technical Editor of SitePoint.com clears some common myths on the CSS Cascade. Which CSS declaration takes priority when one property is declared multiple times with different values? If equal in priority, what declaration has the highest specificity? And finally, in which order of sources are declaration prioritized if declarations are equal in priority and specificity?
Check his very insightful post The Great Specificity Swindel

Abstract:

A) Highest priority wins (highest to lowest):
!important declarations in a user style sheet
!important declarations in an author style sheet
normal declarations in an author style sheet (web page style sheets; external, embedded, and inline styles)
normal declarations in a user style sheet (a user’s custom style sheet)
user agent style sheets (default browser styles)

B) If equal in priority, highest specificity wins:
Is one an inline style? It wins! If none are inline proceed to 2.
Count the number of IDs in the selectors. The highest score wins! Same score? Proceed to 3.
Count the number of attributes, class names and pseudo-classes. The highest score wins! Same score? Proceed to 4.
Count the number of element names or pseudo-elements. The highest score wins!

C) If equal in priority and equal in specificity, last declaration in the HTML source wins.

If the cascade does not set a CSS property on an element, then the browser will fall back to using an inherited property from the element’s parent (this only happens for some properties), otherwise the property is set to the CSS default value.

Precies160

2007-11-13T16:34:00.001+01:00

Vandaag zag ik voor het eerst
hoe een straffe wind toch heel beheerst
een blaadje van zijn boom bevrijdde
en hem op zijn weg begeleidde
dwarrelend naar beneden.

Original post: http://precies160.nl/?pageID=1&poem_id=7499 @ 2007-11-13

A blog is born

2007-11-07T17:16:00.001+01:00

Hello world!

Everything in life is evolutionary.

Al things and thoughts on earth meet their demands. Simply because failing to do so ultimately results in upgrade or substitution.
In this universal battle against entropy things tend to be good rather than perfect. "Good-enough" will suffice until something better comes along.
Well, I like to think things through. My quests start with a solution. Unless this solution is already beautifully simple, I have this urge to perfect it.
Usually, of course, I can't. But for the off-chance I do, I will now be able to dump it into the blogosphere.