The roads I take...

KaiRo's weBlog

April 2014
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        

Displaying recent entries tagged with "OSM". Back to all recent entries

Popular tags: Mozilla, SeaMonkey, L10n, Status, Firefox

Used languages: English, German


April 2014

March 2014

February 2014


March 29th, 2014

Lantea Maps conversion to WebGL

I blogged about Lantea Maps 18 months ago. As its marketplace listing describes, the app's purpose is displaying maps as well as recording and displaying GPS tracks.

I wrote this app both to scratch an itch (I wanted an OpenStreetMap-based app to record GPS tracks) and to learn a bit more of JavaScript and web app development. As maps are a 2D problem and the track display requires drawing various lines and possibly other location indicators, I wrote this app based on 2D canvas. I started off with some base code on drawing bitmap tile maps to canvas, and wrote the app around that, doing quite some rewriting on the little bit of code I started from. I also ended up splitting map and track into separate canvases so I wouldn't need to redraw everything when deleting the track or when moving the indicator of the last location or similar. Over time, I did a lot of improvements in various areas of the app, from the tile cache in IndexedDB via OpenStreetMap upload of tracks to pinch zooming on touch screens.

Still, performance of the map canvas was not good - on phones (esp. the small 320x480 screens like the ZTE Open), where you only have a handful of 256x256 map tiles to draw, panning was slightly chunky, but on larger screens, like my Android tablet or even my pretty fast desktop, it ranged from bad to awful (like, noticeably waiting from any movement until you saw any drawing of a move map). Also, as it takes until images are loaded (cached from IndexedDB or out from the web) and that's all called asynchronously, the positions the images ended up being drawn often weren't completely correct any more at the time of drawing them. I tried some optimizations with actually grepping the pixels from the canvas, setting them in the new positions and only actually redrawing the images on the borders, but that only helped slightly on small screens while making large ones even worse in performance.

Given what I read and heard about how today's graphics chips and pipelines work, I figured that the problem was with the drawImage() calls to draw the tiles to the canvas as well as the getImageData()/putImageData() calls to move the pixels in the optimizations. All those copy image data between JS and graphics memory, which is slow, and doing it a lot doesn't really fit well with how graphics stacks work nowadays. The only way I heard that should improve that a lot would be to switch from 2D canvas to WebGL (or go to the image-based tile maps that many others are using, but that wouldn't be as much fun). I don't remember all sources for that, but just did get another pointer to a Mozilla Hacks post that explains some of it. And as Google also seems to being moving their Maps site to WebGL (from image-based tiles, mind you), it can't be a really wrong move. :)

So, I set out to try and learn the pieces of WebGL I needed for this app. You'd guess that Mozilla, who invented that API together with Khronos, would have ample docs on it, but the WebGL MDN page does only have one tutorial for an animated 3D cube and a list of external links. I meanwhile have filed a bug on a WebGL reference so may improve this further in the future, but I started off first trying with the tutorial that MDN has. I didn't get a lot to work there except some basics, and a lot of the commands in there were not very well explained, but the html5rocks tutorial helped me to get things into a better shape, and some amount of trying around and the MSDN WebGL reference helped to understand more and get things actually right.
One thing that was pretty useful there as well was separating the determination of what tiles should be visible and loading them into textures from the actual drawing of the textures to the canvas. By doing the drawing itself on requestAnimationFrame and this being the only thing done when we pan as long as I have all tiles loaded into textures, I save work and should improve performance.

Image No. 23214 Image No. 23213
2D Canvas (left) and WebGL (right) version of Lantea Maps on the ZTE Open

As you can see from the images, the 2D canvas and WebGL versions of Lantea Maps do not look different - but then, that was not intended, as the map is the map after all. Right now, you can actually test both versions, though: I have not moved the WebGL to production yet, so still uses 2D canvas, while the staging version already is WebGL. You'll notice that panning the map is way more fluid in the new version and the tile distortions that could happen with delayed loading in the old one do not happen. I still wonder though why it sometimes happens that you have to wait very long for tiles to load, esp. after zooming. I still need to figure that out at some point, but things render after waiting, so I found it OK for now. Also, I found the WebGL app to work fine on Firefox desktop (Linux), Firefox for Android, as well as Firefox OS (1.1, 1.2, and 1.5/Nightly).

So, I'm happy I did manage the conversion and learn some WebGL, though there's still a lot to be done. And as always, the code to Lantea Maps is available in my public git as well as GitHub if you want to learn or help. ;-)

By KaiRo, at 01:02 | Tags: B2G, Firefox OS, Lantea, Mozilla, OSM, Web Apps, WebGL | 2 comments | TrackBack: 0

May 8th, 2013

Editing Maps in JavaScript

The OpenStreetMap project has launched an all-in-JavaScript map editor called "iD" this week:

While we at Mozilla know you can do a lot of good things in JS these days - after all, we're even launching our own phone OS building fully on HTML+JS, and we have been using more and more JS code to power key functionality in our browsers and other products over the years - it's great to see that complex things like editing maps can be done fully in JS and available for all platforms now, while previously it took proprietary and availability-limited technologies like Flash or Java to do the same thing.

Great work, OpenStreetMap guys! :)

(And yes, as a contributor to OpenStreetMap and even OSMF member, I am biased, but free and open map data on the web fits Mozilla philosophy pretty well anyhow...)

By KaiRo, at 16:12 | Tags: JavaScript, Mozilla, OSM | 3 comments | TrackBack: 0

March 24th, 2013

MaKey MaKey Experiments

I think I probably became aware of the MaKey MaKey when Chris Heilmann blogged about it, but I might have heard about it even before. I surely saw it when Chris had his WebRTC photo booth running with it at MozFest 2012 in London.

When I ran across it again on ThinkGeek, I put it on my wish list - and finally ordered one this month. Now, after I had wrapped up this week of work, I finally found some time to play with it, and an interesting and very geeky Friday night ensued. Here's a bit more about that - and about Saturday, and further plans/ideas. :)

So, for one thing, I wanted to use this device with actual Open Web stuff, and not with Flash or other proprietary software. After all, this is Open Hardware (yay!) and I'm entirely entrenched in Open Source / Free Software, from using Linux on desktop, laptop and server, via working for Mozilla/Firefox, to doing some web apps under the MPL2 license in my free time. So, given the latter, I decided it would be nice if I could navigate the OSM world with my Lantea Maps app/site (source) using the MaKey Makey. For that, I had to put some keyboard accessibility into Lantea Maps itself, which is a good idea for accessibility, among other things, anyhow. So I did that, looking at Chris' testy-testy and MDN to find out how to achieve that best. I ended up implementing methods to move the map with the arrow keys, hooked up zoom in/out to +/- keys as well as w/s (the latter are supported by MaKey MaKey out of the box), and then also created direct shortcuts to certain zoom levels with the 0-9 numeric keys (not supported by MaKey Makey, but convenient for keyboard users).

OK, then it was time to actually bring in the MaKey MaKey. I really want to do some fruit stuff at some point, but I only had a few apples around, and I thought it actually would be nice to create some kind of navigation pad that can be used with Lantea Maps at full screen when having an OpenStreetMap booth at Linuxwochen in Vienna. I figured that with some cardboard from the back of an old note pad, and some tinfoil, that should be doable. I added some plastic wrap for insulation, glue of course, and some paper clips so the crocodile clips to connect to the MaKey MaKey wouldn't scratch the tinfoil too much (as well as some temporary applied ones to hold things together while allowing the glue to dry). Here's some photos from production:

Image No. 23125 Image No. 23126 Image No. 23129 Image No. 23137 Image No. 23139

Note that the back side as well as the right rim of the pad is covered with a single sheet of tinfoil that makes the earth connection quite naturally when you hold the pad in your hands.
As of the last photo, while the glue was still drying, it was ready to use for some map navigation (and after the night, I removed the temporary paper clips and took another "promotional" picture):

Image No. 23140 Image No. 23141

Even while getting to bed that evening, the ideas for my next project were flying around in my mind already. On one hand, I saw that MaKey MaKey had connectors for mouse up/down/left/right, on the other hand, ever since trying the original BananaBread demo as someone who's usually not doing any first person shooter games, I wondered if there was a nicer or more obvious way to operate this, rather than using w/a/s/d keys for movement, space/click for jump/fire, and mouse for turning. Well, now that I had done this first custom pad for MaKey MaKey, would there be a handy solution for that as well? In any case, it would be fun. So I took a smaller piece of cardboard that would make this thing fit nicely into my hands (just like those professional game pads), and decided this time I would try something slightly different by using coins as the actual "buttons" on the pad. One-cent coins looked like the right size, and I had a 10-pin cable around from a different project, which would fit for the 10 "keys" pretty well (just that I needed one more for earthing, which I again did with a sheet of tinfoil at the back of the pad, so I added yet another single cable in the end). Also, this time I used some double-sided tape instead of glue for many cases, as that works better with the cable and coins:

Image No. 23142 Image No. 23144 Image No. 23146 Image No. 23148

And then I was ready to play some BananaBread, now with both the awesomeness of running a 3D first person shooter seamlessly in the browser AND using a special game pad for playing!

Image No. 23150 Image No. 23151

If you're interested, not only are those pictures all linked to the gallery where you can go up to "big" versions of those, there's a few more steps of building visible in this photo gallery.

Given all that and the fact that Linuxwochen Wien in the first days of May has an additional focus on Open Hardware this year, I decided to hand in a proposal for a talk on MaKey MaKey there. I intend to show off those pads as well as Chris' photo booth and any other MaKey MaKey experiments that I can fit, preferably ones that run as web pages/apps (let me know if there are any nice ones).

I'm thinking that it could be nice to have an app that shows you on screen in a web site which kind of fruit/item you touched (configurable with key <-> item entries), and I'd love a web (not Flash) piano and/or drumset (using ogg or even opus files with HTML5 audio!) app to present, maybe I can hack something up if there's nothing around.

If this has caught your interest, it's easy to get your own MaKey MaKey, and if you're in or around Vienna in the first days of May, I'd be happy to meet you at my talk (there will be a Firefox OS App workshop as well, probably!) - oh, and if you have any nice, open web apps/pages that show off this device, let me know! :)

By KaiRo, at 20:25 | Tags: BananaBread, Lantea Maps, MaKey MaKey, Open Hardware, OSM | no comments | TrackBack: 0

September 21st, 2012

Lantea Maps - Contributions Welcome!

Image No. 23111 Image No. 23112 Image No. 23113

I just split my Lantea Maps web app out of my main git repo and into its own small one, one main reason being that I can place it on GitHub as well. This is not meaning that I suddenly love the GitHub site, but having the repo there lowers the entry barrier for potential contributors and I'd be very happy to have people help me with this app.

Lantea Maps is a prototype web app to display maps and record (GPS) tracks, and I found it works pretty well with Firefox OS, actually. It's one of the apps I keep installing on my test device for that system, of course from its Mozilla Marketplace listing.

The app is based on a canvas that displays a map (from OpenStreetMap, multiple styles can be selected) and on which the recorded GPS tracks are displayed. The start of the app is there and working, but it could need quite some improvement - like making zoom switches and probably map panning smoother by using some canvas magic, supporting pinch gestures, caching tiles not just during a session but also across sessions (using IndexedDB), and more.

As mentioned on the original Lantea idea wiki page, there's a quite nice app for the Nokia N900 called Mappero that is a good source for feature and UI ideas, for me it's one the the best apps in that space and I'd love to have something similar to it as a web app - which is basically why I started Lantea at all.

That said, I'm open for all kinds of ideas for it - and even more, to patches and pull requests! :)

By KaiRo, at 01:17 | Tags: B2G, Lantea, Mozilla, OSM, Web Apps | 2 comments | TrackBack: 0

July 17th, 2011

OpenWebGlobe - 3D World in the Browser

The "State of the Map - Europe" conference in Vienna was a full success, 200 members of the OpenStreetMap community had inspiring talks and discussions here and everyone had a lot of fun and inspiration. I also couldn't be more proud of acting as a Mozilla representative on the conference and I had a lot of interesting discussions in that role, including people being thrilled that Mozilla sponsors such and event "just" to move openness and innovation on the web forward. But that's not what this post is about, I actually want to highlight one thing I heard about in a talk there.

Martin Christen from Switzerland had a really great talk on the OpenWebGlobe SDK today, and I was completely thrilled to see this as it does a lot of things I had wished for in the days before. When there I dreamed about "something similar in spirit to Google Earth, but completely in the browser", I didn't know yet that the University of Applied Sciences Northwestern Switzerland was already working on the basis for all that and had demos pointing in that direction.

Doesn't that look cool? Remember that this is actually running as a 3D environment in the browser - and directly in HTML, not needing any plugin!
Oh, and all its code is open source software (the web viewer is available via github under MIT license, there's a download for the SDK, I didn't check its license but I think it's MIT as well)!

OpenWebGlobe for WebGL is in an alpha stage, but it's usable under Firefox now (other WebGL-capable browsers might work but haven't been tested enough). Martin said they found that JavaScript is still not as fast as they'd like, esp. when compared to their tests on native C++ code using the same base SDK. Maybe Mozilla developers can help there and make JavaScript even faster than it is now. ;-)

In any case, check out the work of his team, it's absolutely awesome. If you don't believe me yet, there's even an alpha preview you can test yourself right now! :)

And a video of his talk will become available very soon (watch out for a camera icon in the box for his talk on the SotM-EU schedule), if you're interested in what he presented in Vienna.

By KaiRo, at 19:30 | Tags: Mozilla, OSM, WebGL | 3 comments | TrackBack: 0

July 14th, 2011

Representing Mozilla as Sponsor of SotM-EU

I've recently enlisted into the Mozilla Reps ("ReMo") program, mainly to procure sponsoring by Mozilla for the 1st European OpenStreetMap conference, known as "State of the Map - Europe" (SotM-EU).

I'll be the sole representative this weekend of Mozilla being one of the major sponsors of this event, and I'm also helping somewhat with organizational matters, as my colleagues from the "OpenStreetMap Austria" association are the organizers of the conference.

It will be an interesting role to represent Mozilla, and I'm very proud of that, as this gives me a chance to talk a lot about the one thing in Mozilla I'm most passionate about: our mission.
Supporting a conference on an open, innovative project that creates opportunities for everyone on the web and beyond goes to the heart of what Mozilla is, and I couldn't be happier about being present there.

Image No. 22588

Things start off with a public pre-event discussion tomorrow evening and the conference itself is taking place from Friday to Sunday, so don't expect to see me online a lot in the next few days, I'm exploring this strange place called "real life" with other geeks - and probably mapping it out some more. ;-)

By KaiRo, at 02:50 | Tags: Mozilla, OSM, ReMo, Vienna | no comments | TrackBack: 0

April 29th, 2011

State Of The Map Europe conference is coming!

As I just came home from another planning meeting for it, I realize I should actually blog about this event as well. ;-)

Vienna, Austria, is hosting the first ever State Of The Map Europe conference ("SotM-EU") this July (15th-17th)!

This event will be a gathering point for a significant part of mainly (but not only) the European OpenStreetMap (OSM) community - at least of a number of "hard core" contributors who are willing to travel to and even pay for coming together in this way. We will have 2 main tracks with ~50 talks going on in three days, headed by keynotes coming from Steve Coast, the founder of OSM, and Muki Haklay, a London researcher.

If you're an OpenStreetMap contributor or heavily interested in the project and its dynamics and you have been looking for a good excuse to visit Vienna for a long time, here's your chance - Registration is open!
(Sorry, we need to charge a moderate registration fee as we're a non-profit and don't have nearly enough sponsoring to not make money a problem - hint: if you know a good sponsor, we could always need a few more.)

For now, I think I'm the only Mozillian on the attendees list - I'd hope that will change before the event actually takes place, given the common interest of our projects in open and innovative data on the Internet! :)

By KaiRo, at 00:44 | Tags: OSM, Vienna | no comments | TrackBack: 0

August 2nd, 2009

Ausspannen und Training mit OpenStreetMap

Ich hab den gesamten Samstag Nachmittag und Abend damit verbracht, eine Menge Wald- und Schrebergartenwege in meiner eigentlichen Heimat Steyr-Münichholz mit dem Fahhrrad abzufahren, mit dem N810 mit dabei, um GPS-Tracks aufzuzeichnen.
Einerseits war das eine starke Abwechslung zu meinen sonstigen Beschäftigungen und damit ein geistiges Ausspannen und das Training schadet mir auch nicht, andererseits konnte ich wertvolle Daten sammeln, um OpenStreetMap weiter zu ergänzen.

Das Ergebnis kann sich sehen lassen: Im Kartenausschnitt von Münichholz sind jetzt im Waldstück östlich der Punzerstraße sowie in fast allen Schrebergärten (braune Flächen) die diversen Wege verzeichnet, inklusive Typ der Wege (mit zweispurigen Fahrzeugen befahrbare als brauner "track" mit Abstufung nach Beschaffenheit, kleinere als "path" mit Angabe, ob sie mit dem Fahrrad befahrbar sind). Zusätzlich hab ich das Alten- und Pflegeheim und das "neue" Straßenstück daneben endlich richtig eingezeichnet, sowie einige Dinge im Umfeld aller dieser Flächen korrigiert.

Überrascht war ich, dass entgegen früheren Erfahrungen das Haupt-Kartenmaterial mit Mapnik-Rendering fast in Echtzeit aktualisiert wird (früher passierte das ein Mal pro Woche), sodass während ich im nächsten Stück unterwegs war, die Daten vom letzten Zwischenstopp schon sichtbar wurden und jetzt alle meine Änderungen bereits voll präsent sind.

Andererseits fragte sich wohl so mancher Schrebergarten-Bewohner, warum da einer rumfährt, in alle kleinen Wege reinschaut, auch wenn sie Sackgassen sind, und nirgends stehen bleibt. ;-)

Ich kann mich erinnern, dass ich als Kind immer eine Karte der Wege in den Schrebergärten und besonders vom großen Bischofswald bzw. "Münichholzer Wald" haben wollte, und mir dachte, es wäre cool, sowas selbst zeichnen zu können. Einen Teil davon konnte ich mir jetzt per GPS-Empfänger und OpenStreetMap ermöglichen - die Wege im großen Wald kommen sicher auch noch, vielleicht brauche ich ja mal wieder Mal Abwechslung vom Arbeiten, bin bei schönem in Steyr und meine Eltern nicht zu Hause...

By KaiRo, at 01:34 | Tags: OSM, Steyr | no comments | TrackBack: 0

July 24th, 2008

Now here's why OpenStreetMap is cool!

Just discovered:

Go to - enter "Mozilla, Mountain View" in the "Search" box - press "Go" and see where the red arrow points to!

This even can stand a comparison to Google Maps, where the pure map is telling you much less about this area...

By KaiRo, at 22:15 | Tags: California, Mountain View, Mozilla, OSM | 3 comments | TrackBack: 0

May 28th, 2008

First Impressions Of The N810

This Monday, my new Nokia N810 arrived! I'm played a bit with its features now, installed some additional software, tried browsing a number of websites, and all in all, I really like it.

Image No. 18917

You (as a geek yourself, probably) might notice that on the picture, its UI has a lot of similarity to Star Trek TNG's mobile tablets (PADDs), that's not the default look - one of the first things I installed was the LCARS PADD theme package, when I tried how well free WLAN hotspots work in Vienna - and I was satisfied (both with freewave and the theme).

Image No. 18918 Image No. 18919

Of course, for people like us, the web browser is quite important - and the device running on Linux and having a Gecko-based browser were among my main reasons for buying the N810. And, despite not being SeaMonkey ;-) , I like the microB browser a lot. It works like a real browser and displays web pages like they should look, not garbling a number of them like the Opera mobile version on my Nokia 7710 phone (which performs well enough for the N810's GPRS internet connection where no WLAN is in reach). I even did write a paragraph on the last weekly status update on this blog from the microB browser, when my desktop locked up and I had to reboot it - something that I haven't seen with the N810 yet.
The system feels very stable and comfortable, and you wouldn't realize it's actually Linux unless you e.g. open up an X terminal on it or connect to the device via ssh (after installing OpenSSH, that is). Oh, and as a regular long-time Linux user, I just like being able to look into top or ps to see what the system's doing/running and just ssh'ing into all my computers from all my computers.
Now I finally got a device I can take with me to take notes, look into the web and such stuff without needing to bring with me and unfold a fully laptop computer. Yay!

Image No. 18921

One further reason why I finally decided to get me an N810 is its GPS and mapping capability. Especially when I was in the US in April, but eventually also when on my way somewhere here in Vienna, I often felt it would be nice to have a good map handy, ideally along with some indicator pointing out my position. The N810 promised to be able to do both, with software being able to use free OpenStreetMap data (maemo-mapper), and even GPS positioning and tracking capability. I already read in advance to buying the device that its internal GPS takes a very long time to find a satellite fix, but then work quite well even where signal quality is not that good - and I can confirm both, though esp. the former. When turning on display of GPS details in maemo-mapper, it's quite common for the device to have 2-5 satellites in view but being unable to establish a fix - at least in the central area of Vienna that is covered with 6-7 story buildings. Once the miracle happens and an initial fix can be established, the position isn't always accurate due to heavy signal reflection between those buildings, but it hardly loses the fix and can re-establish it fast when it gets lost, at least when not being in a building for a longer period of time.
I'm looking forward to trying this outside the city (in my home town) this weekend and see hoe well things work there. If anybody knows a good trick to ease the device getting an initial GPS fix, please tell me, I'll happily try out your suggestions.

All in all, I'm positively impressed by this device, it works very well and perfectly shows off how well Linux and Gecko 1.9 are suited for mobile use already - but then, I barely scratched the surface of what it can do in those two days I have it now. I'm looking forward to the N810 supporting my work and perhaps even some fun activities in the future. Well done, Nokia!

By KaiRo, at 18:24 | Tags: Mozilla, N810, OSM | 4 comments | TrackBack: 0

Feeds: RSS/Atom