Grâce a Brython
 |
| L’icône Brython GPS |
Une vraie app pour iPhone?
Le programme lancé, on y voit un écran de démarrage, comme il se doit:
.PNG) |
| Splash (ancienne carte de Caroline du Nord) |
Mais c'est un programme web, et pas une application faite avec xcode.
.PNG) |
| Le premier écran, mode manuel |
.PNG) |
| Mode mise a jour automatique |
J'essaie?
Il suffit d'aller sur le lien de la galerie de Brython, ici:
gallery/geo.html et sur un iPhone, on l'ajoute a l'ecran d'accueil. On peut maintenant lancer le programme comme une vraie application iOS.
J'ai déjà vu cela, non?
C'est bel et bien une application web, donc basée sur HTML et CSS, mais le code lui même, c'est écrit en Python. En plus, on utilise ici une toute nouvelle fonctionnalité de Brython, en faisant appel a un script Python externe a la page HTML (c'est une nouveauté qui date de cette fin de semaine), plutôt que d'avoir le code a même la page HTML. Cela nous permet une séparation de la présentation, de la logique et du "bling" (le CSS):
Notre 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()">
<div id="header">
<H1>Votre 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>
Application web pour iPhone typique, mais sans jQuery mobile ou autre module du genre. Et pas de onclick dans la page html. L'unique javascript c'est brython.js qui est l’interpréteur Brython même et l'appel a brython() par l'entremise de onload.
Le code Python n'est pas sur la page, mais on voit qu'on y fait reference par src="navi.py"
Allons donc voir ce qu'il y a dans ce fichier navi.py:
Notre Python
# globals ######################### refr = False geo = win.navigator.geolocation watchid = 0 # les fonctions ########################### 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 # on met a jour la liste except KeyError: doc["navarea"] <= ul # on cree la liste try: doc["map"].src = mapurl # on met a jour l'url de l'image except KeyError: doc["maparea"] <= img # on cree la balise 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) # au demarrage ########### if geo: geo.getCurrentPosition(navi, nonavi) doc["switch"].className = "switch" doc["switch"].onclick = navirefresh # on associe un evenement onclick else: alert('geolocation not supported')
On établis 2 fonctions de rappel (callback). Une si on a notre géolocalisation (navi), et une s'il y a une erreur (nonavi), et finalement, une autre fonction (navirefresh) pour s'occuper de l’événement onclick du contrôle auto refresh dans la barre de menu de l'application. Le démarrage initial se fait par un appel a geo.getCurrentPosition avec nos fonctions de rappel. Ça fonctionne assez bien comme GPS.
Notre CSS
Le CSS étant un peu long, je ne le mettrai pas sur mon blog, mais vous pouvez trouver le code sur le site brython.info ou sur googlecode: SVN repository. Le CSS pour l'interrupteur genre ios 5 a ete emprunté ici: ios-5-style-switch-control.Ce n'est que le début
Alors voila, c'est un point de depart pour faire toute sortes de choses. Un tracker pour le jogging, le velo (avec local storage et synchro par appel ajax) et bien d'autres choses. Vous pouvez désormais faire tout cela avec votre langage favori (Python, bien sur) que ce soit pour votre téléphone mobile ou tablette. Cet exemple est quelque peu spécifique au iPhone (surtout a cause du CSS), mais fonctionne sur Android aussi et peut être adapté facilement aux tablettes. Et cela ne m'a pas pris beaucoup de temps.Et si vous avez besoin d'aide, n'oubliez pas qu'il existe une liste en francais:
forum/brython-fr
@f_dion
.PNG)
.PNG)
