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

19 comments:

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

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

    ReplyDelete
  2. 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.

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

    ReplyDelete
  4. 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.

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

    ReplyDelete
  6. 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

    ReplyDelete
  7. 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

    ReplyDelete
  8. 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

    ReplyDelete
  9. 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

    ReplyDelete


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



    Iphone Application

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

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

    ReplyDelete
  13. 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

    ReplyDelete
  14. The solution to protecting your new iPhone is actually quite simple, though all the talk about skins, cases, wallets, iphone
    and screen protectors can be a little bewildering.

    ReplyDelete
  15. Men's Quiz as it sounds, is an app for real Men.
    If you are familiar with "Who wants to become a millionaire" then this game will for sure become one of your favorites.
    It gives you the opportunity to prove your status of Man to your friends and relatives, by testing your knowledge in categories like: box,guns,
    F1, movies, actors, cars and a lot of other interesting and challenging subjects.

    It is a nice-looking, addictive quiz game with an encouraging bonus system.

    Start playing! enter the brotherhood of Real Men.
    iPhone Apps


    Also more details click Apps Download link

    ReplyDelete
  16. It’s a nice article. As a blogger this is very helpful to me. I always keep this seo tips in my mind. Thanks for sharing such informative post.
    http://www.macmyth.com/

    ReplyDelete