Thanks to Brython
 |
| Brython GPS icon |
Native? Not quite...
The application launches with a splashscreen, like it should
.PNG) |
| Splash page |
But it is really a web application.
.PNG) |
| Tracking my progress |
.PNG) |
| 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:
Now, please do the following in the app to have REAL iOS looks:
font-family: Helvetica Neue, Helvetica, sans-serif;
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.
Great job François ! I tried it with my Android smartphone, it works like a charm
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.
Information seem to be very informative . You have done a great job man. i-Phone apps gonna rock market. App Reviews
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
That's a very nice navigation app.
kids iphone games
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
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
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
Hi, thank you very much for help. I am going to test that in the near future. Cheers
Iphone Application
Nice post with great details. I really appreciate your info. Thanks for sharing. en ucuz iphone
This is quite impressive. Thanks for provide the code. telekupon
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
Thankew very much for this post .It is very useful for Mobile Application Development Nice post.
Thank you for sharing this post with us.
Mobile Application Development
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
Post a Comment