Monday, January 28, 2013

iPhone app with Python

Thanks to Brython


Brython GPS icon

 

Native? Not quite...


The application launches with a splashscreen, like it should

Splash page

But it is really a web application.

Tracking my progress
Automatically refreshes on movement

Can I try it?


Absolutely. Simply point your iphone to the brython gallery url:

gallery/geo.html then click add to home screen. You can now launch it like a native application.


What makes it special?


It's a web application, so of course HTML and CSS, but the code is Python. It leverages the new Brython feature to link to a remote python script, instead of having it inline with the html. This allows a clean separation of presentation, logic and eye candy:

The HTML


<!DOCTYPE html>
<html>
    <head>
        <title>Brython test</title>
        <meta charset="iso-8859-1">
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1,maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <script src="../brython.js"></script>
        <script type="text/python" src="navi.py"></script>
        <link rel="stylesheet" type="text/css" href="navi.css" />
        <link rel="apple-touch-icon" href="icon.png"/>
        <link rel="apple-touch-startup-image" href="splash.png">
    </head>
    <body onLoad="brython(2)">
        <div id="header">
            <H1>Your position</H1>
            <div id="switch">
                  <span class="thumb"></span>
                    <input id="refr" type="checkbox" />
                </div>
            </div>
        </div>
        <div id="navarea"></div>
        <div id="maparea"></div>
    </body>
</html>

Your typical iPhone web application, except that there is no jQuery mobile or similar framework. There is no onclick. The only javascript is the brython.js file for Brython itself and the related body onload call of brython().

So let's have a look at the Python code:

The Python


# globals #########################
refr = False
geo = win.navigator.geolocation
watchid = 0


# functions ###########################
def navi(pos):
    xyz = pos.coords

    ul = UL(id="nav")
    ul <= LI('lat: %s' % xyz.latitude)
    ul <= LI('lon: %s' % xyz.longitude)

    mapurl = "http://maps.googleapis.com/maps/api/staticmap?markers=%f,%f&zoom=15&size=320x298&sensor=true" % (xyz.latitude, xyz.longitude)
    img = IMG(src = mapurl, id = "map")
    try:
        doc["nav"].html = ul.html
    except KeyError:
        doc["navarea"] <= ul
    try:
        doc["map"].src = mapurl
    except KeyError:
        doc["maparea"] <= img

def nonavi(error):
    log(error)

def navirefresh(ev):
    global refr, watchid
    refr = False if refr else True
    if refr == True:
        doc["switch"].className = "switch on"
        watchid = geo.watchPosition(navi, nonavi)
    else:
        doc["switch"].className = "switch"
        geo.clearWatch(watchid)

# the setup
if geo:
    geo.getCurrentPosition(navi, nonavi)
    doc["switch"].className = "switch"
    doc["switch"].onclick = navirefresh
else:
    alert('geolocation not supported')

We are setting up 2 callback functions. One called if we have navigation (navi) support, one if we dont (nonavi), and finally a function (navirefresh) to handle the onclick of the auto refresh switch in the title bar of the application. This works pretty decently as a quick and dirty GPS application.

The CSS

The CSS is a bit long so I'm not posting it on the blog, but you can check out the source at the brython.info site or on the SVN repository. The ios style switch CSS is borrowed from this article: ios-5-style-switch-control

The tip of the iceberg

So there you have it. You can now use your favorite language (Python, of course) to write applications for your mobile phone or tablet. This example is slightly iPhone specific (mostly due to CSS), but the same basic structure applies to a variety of mobile devices. And it took no time whatsoever to write this.

@f_dion

23 comments:

Kwpolska said...

Now, please do the following in the app to have REAL iOS looks:

font-family: Helvetica Neue, Helvetica, sans-serif;

Francois Dion said...

thanks for noticing that. it was in the css, but somehow I managed to remove the ; at the end of that line. It was one of the demos I had to quickly build for a talk last night at the local Python user group, and didn't have time to double check it.

Pierre Quentel said...

Great job François ! I tried it with my Android smartphone, it works like a charm

Unknown said...

Wow Amazing information about iPhone. iPhone is world largest selling smart phone in the world. It is one member of the every family. It is technology partner. Today thousand of Application for iPhone is available the market. iPhone Application Development Company offer many iPhone application services in affordable cost.

Unknown said...

Information seem to be very informative . You have done a great job man. i-Phone apps gonna rock market. App Reviews

Tips Tricks Ideas said...

I found one issue, not very important, but maybe could be easily fixed. When I check the option to automatically reconnect, and phone BT is turned off, or phone is taken away from the tablet and there is no connection, tablet power consumption is quite high
Technology news

Unknown said...

That's a very nice navigation app.

kids iphone games

Tips Tricks Ideas said...

You make a thoughtful case about how technology can enhance the good works of early childhood educators. I look forward to hearing more about how EC educators are connecting and sharing through technology. Thanks!
i phones

david said...

I was reading your post and no doubt it was really informative..I got here what i was looking for..Thanks for sharing..


iPhone Applications

Anonymous said...

i want to share with you guy's you can create an application and games too to your Iphone and or ipad not only create apps but you earn money too its just sound great.To Discover How To Create An Iphone Or Ipad App&game just see the link http://www.youtube.com/watch?v=uX_tYGmoKoA

venba said...



Hi, thank you very much for help. I am going to test that in the near future. Cheers



Iphone Application

Safdar Ali said...

Nice post with great details. I really appreciate your info. Thanks for sharing. en ucuz iphone

Unknown said...

This is quite impressive. Thanks for provide the code. telekupon

Unknown said...

Leverage of this Brython feature to link to a remote python script, instead of having it inline with the html, makes it very special which allows a clean separation of presentation, logic and eye candy:top smartphones

Unknown said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by the author.
Unknown said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by a blog administrator.
Unknown said...

Thankew very much for this post .It is very useful for Mobile Application Development Nice post.

Unknown said...

Thank you for sharing this post with us.
Mobile Application Development

Unknown said...

nice post :)
If you want to be a hacker you should definitely visit the page with spy apps that let you to steal all the passwords etc.
Use hyster app for start