Archive for the ‘html5’ Category

The new iWebkit Pediaphon interface for Android, iPhone, iPad and iPad

Friday, June 24th, 2011

The HTML5 audio tag is supported by iPhones, iPods and iPad since IOS3. Android supports HTML5 audio since version 2.3 gingerbread too. I was curious if the shared base of the browser in both worlds is usable to create a unique touch based interface for a web based application like the Pediaphon. Most of todays mobile web browsers (Android, Nokia S60, Palm Pre, Openmocko, … ) are relying of the free and open source Webkit rendering engine. Initially developed as rendering engine for KDE-KHTML later adopted by Apple and nowadays supported even by Google (Chrome and Android web browser) Webkit is a lean but powerful rendering engine not only for mobile devices. If you are reading this blog with a Mac you are actually using the Webkit rendering engine. A really lean Webkit based browser for Linux/Windows I can recommend is Midori.

I am a great fan of the concept to prefer web based standardized applications to native apps for proprietary devices for e- and m-learning purposes. Development resources are usually rare especial at universities. It is always a good idea to focus on standard reusable HTML component rather than wasting time an effort for proprietary development app development.

My first idea was to use the multi platform sencha touch framework for the Pediaphon (a text-to-speech service for the Wikipedia) touch interface. A colleague pointed me to iWebkit, which is originally targeting the iPhone but it performs also nice on other Webkit-based browsers, like Androids stock web browser. It provides a IOS like touch interface to all Webkit-based browsers, the web page look an feel is exactly like a native iPhone app. For the programmer or integrator iWebkit is a lean and simple solution, even rudimentary HTLM knowledge is sufficient to use it.

Here the result, a touch interface for the Pediaphon, which converts Wikipedia articles into speech and realizes audio output just with the HTML5 audio tag, no plugin is required for IOS>=3 and Android 2.3 Gingerbread. For Android 2.2, which supports flash on some devices, there is still a flash option. The Pediaphon mobile touch interface offers 5 languages so far, of course English is included ;-) .

Screenshots:

Try it here: http://i-e.pediaphon.de

Enjoy!

Posted in Android, html5, iPad, iPhone, Pediaphon | Comments Closed

HTML5 geolocation with Openstreetmap and OpenLayers for Android, iPhone, iPAD and iPod

Wednesday, March 30th, 2011

Since I am very interested in the HTML5 geolocation feature and Openstreetmap (with the help of the great Openlayers project), I have coded a minimal solution for Android and iPhone in july 2010 (my blog in German language). Because of the large amount of Google hits I have embedded the example in an iframe into my blog now:

Try this link to use the map directly on your Android/IOS phone.

This example realizes a simple map with a marker at the users position in a webkit-based smartphone web browser. It can easily be extended to a simple moving map. It’s like Google maps mobile without Google (not really, runs on Android too and the embedded location provider in your Firefox PC browser is also Google. Believe me, just open about:config and filter for geo.wifi) ;-) And it is platform independent! Works perfectly on Android, iPhone, iPod touch and iPad too.

Here is the minimal source code for the example:

 
<html>
  <head>
    <title>HTML5 geolocation with Openstreetmap and OpenLayers</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 240;
          height: 320;
          margin: 10;
      }
    </style>


    <script src="OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);
                        

        navigator.geolocation.getCurrentPosition(function(position) {       
            document.getElementById('anzeige').innerHTML="Latitude: " + position.coords.latitude + "   Longitude: " +
            position.coords.longitude + "<p>";
            var lonLat = new OpenLayers.LonLat(position.coords.longitude,
                                    position.coords.latitude)
                      .transform(
                                  new OpenLayers.Projection("EPSG:4326"), //transform from WGS 1984
                                              map.getProjectionObject() //to Spherical Mercator Projection
                                            );
                                            
            markers.addMarker(new OpenLayers.Marker(lonLat));
           
            map.setCenter(lonLat, 14 // Zoom level
            );
           
        });
        //map = new OpenLayers.Map("basicMap");
        //var mapnik = new OpenLayers.Layer.OSM();
        //map.addLayer(mapnik);
        map.setCenter(new
        OpenLayers.LonLat(3,3) // Center of the map
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
          ), 15 // Zoom level
         );
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
                             
            
      
      }
    </script>

  </head>

  <body onload="init();">
<center>
HTML5 geolocation: 
<br>
    <div id="basicMap"></div>
<br>HTML5 geolocation<br>
<br>with Openstreetmap and OpenLayers<br>
For Android Froyo,iPhone,iPAD,iPod
<br>
Your position estimated by browser geolocation API:<p>

<div id="anzeige">(will be displayed here)<p></div>
<a href="http://www.dr-bischoff.de">Andreas Bischoff</a>

<br>(view source to see how it works ;-)
</center>
  </body>
</html>

Update: There is a new version with moving map available, view the source code on my German blog.

Posted in Android, html5, iPad, iPhone, location based services | 1 Comment »